/* ==========================================================================
   Nestor Suite — shared stylesheet
   Dark editorial SaaS-agency system. Near-black canvas, centred column,
   mono eyebrow labels, subtle-bordered cards, green outline icons.
   Later pages: APPEND under a clearly commented section — never rewrite.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --c-bg: #0A0A0A;
  --c-surface: #141414;
  --c-border: #262626;
  --c-text: #FFFFFF;
  --c-muted: #9B9B9B;
  --c-green: #47bea7;
  --c-amber: #b6d336;

  --font-head: Poppins, 'Avenir Next', Avenir, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --container: 1140px;
  --space-section: clamp(4rem, 9vw, 7rem);
  --radius: 10px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

a { color: var(--c-green); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--space-section); }
.section + .section { border-top: 1px solid var(--c-border); }

.muted { color: var(--c-muted); }

/* Mono eyebrow label above each section */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-green);
  margin: 0 0 1.1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1em 1.7em;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn--green { background: var(--c-green); color: #0A0A0A; }
.btn--green:hover { background: #69c8bc; }

.btn--outline { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn--outline:hover { border-color: var(--c-muted); }

.btn--dark { background: #0A0A0A; color: var(--c-text); }
.btn--dark:hover { background: #1d1d1d; }

/* ---------- Header / navigation ---------- */
.site-header { border-bottom: 1px solid var(--c-border); }

.site-header .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding-block: 1.1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-text);
  color: #0A0A0A;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  text-decoration: none;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }

.site-nav { margin-inline: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--c-muted);
  font-size: 0.9rem;
  text-decoration: none;
  padding-block: 0.35rem;
}
.site-nav a:hover { color: var(--c-text); }

.site-nav a.is-active {
  color: var(--c-text);
  border-bottom: 2px solid var(--c-green);
}

@media (max-width: 900px) {
  .site-nav { order: 3; width: 100%; margin-inline: 0; }
  .header-cta { margin-left: auto; }
}

/* ---------- Cards (3-across gridded services) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.card {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--c-muted); text-decoration: none; }

.card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  color: var(--c-green);
  margin-bottom: 1.4rem;
  background: rgba(71, 190, 167, 0.05);
}
.card .icon svg { width: 20px; height: 20px; }

.card .eyebrow { margin-bottom: 0.5rem; letter-spacing: 0.22em; }
.card h3 { margin-bottom: 0.45rem; }
.card p { color: var(--c-muted); font-size: 0.94rem; margin: 0; }

/* ---------- Three-column feature list with top hairlines ---------- */
.feature-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  margin-top: 2.5rem;
}

.feature-cols > div { border-top: 1px solid var(--c-muted); padding-top: 1.4rem; }
.feature-cols h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.feature-cols p { color: var(--c-muted); font-size: 0.94rem; margin: 0; }

@media (max-width: 900px) {
  .card-grid, .feature-cols { grid-template-columns: 1fr; }
}

/* ---------- Forms ---------- */
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.45rem;
}

.field input,
.field textarea {
  width: 100%;
  background: #0A0A0A;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.85em 1em;
}

.field input::placeholder,
.field textarea::placeholder { color: #6b6b6b; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-green);
}

.field { margin-bottom: 1rem; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}

.form-note {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 0.9rem;
}

/* ---------- Full-bleed green CTA band ---------- */
.cta-band { background: var(--c-green); color: #0A0A0A; }

.cta-band .container { padding-block: clamp(3rem, 7vw, 4.5rem); }
.cta-band h2 { color: #0A0A0A; margin-bottom: 0.35rem; }
.cta-band p { color: rgba(10, 10, 10, 0.75); margin-bottom: 1.6rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--c-border); }

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  padding-block: 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.site-footer a { color: var(--c-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-text); }

@media (max-width: 640px) {
  .site-footer .container { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   Page: home
   ========================================================================== */

.hero { padding-block: var(--space-section) 0; }
.hero h1 span.accent { color: var(--c-amber); }
.hero .lead { color: var(--c-muted); font-size: 1.05rem; max-width: 46rem; margin-bottom: 2rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3rem; }

/* Empty media placeholder block, as drawn in the design */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: clamp(220px, 34vw, 420px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b6b6b;
  text-align: center;
  padding: 1rem;
}
.media-placeholder svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Compliance scan card */
.compliance-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.compliance-card h3 { font-size: 1.45rem; }
.compliance-card .eyebrow { letter-spacing: 0.22em; }
.compliance-card p { color: var(--c-muted); font-size: 0.95rem; }
.compliance-card p a { color: var(--c-amber); text-decoration: underline; }

@media (max-width: 900px) {
  .compliance-card { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page: brand-management
   Reuses .hero, .lead, .card-grid and .card. The 9 service cards are
   non-linking, so suppress the link-style hover cue on plain-div cards.
   ========================================================================== */

div.card:hover { border-color: var(--c-border); }

/* ==========================================================================
   Page: contact
   Two-column enquiry layout — form on the left, "Direct Lines" sidebar on
   the right behind a vertical hairline. Chip checkboxes for interests,
   amber asterisks on required labels.
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-lead {
  color: var(--c-muted);
  font-size: 1.05rem;
  max-width: 34rem;
  margin-bottom: 2.6rem;
}

.req { color: var(--c-amber); }

/* Interest chips (checkboxes styled as mono pills) */
.chips-group { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }

.chips-group legend {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 0;
  margin-bottom: 0.7rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip { position: relative; display: inline-block; }

.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 0.7em 1.15em;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.chip:hover span { border-color: var(--c-muted); }

.chip input:checked + span {
  border-color: var(--c-green);
  color: var(--c-green);
  background: rgba(71, 190, 167, 0.06);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.consent-note {
  color: var(--c-muted);
  font-size: 0.85rem;
  margin: 1.6rem 0 1.4rem;
}

/* Direct-lines sidebar */
.contact-aside {
  border-left: 1px solid var(--c-border);
  padding-left: clamp(1.6rem, 3vw, 2.6rem);
}

.contact-aside .eyebrow { margin-bottom: 2rem; }

.aside-block { margin-bottom: 1.9rem; }
.aside-block:last-child { margin-bottom: 0; }

.aside-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.45rem;
}

.aside-value { margin: 0; font-size: 1rem; }
.aside-value a { color: var(--c-text); }
.aside-value a:hover { color: var(--c-green); }

.aside-note { color: var(--c-muted); font-size: 0.92rem; margin: 0; max-width: 24rem; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--c-border);
    padding-top: 2.2rem;
  }
}

/* ==========================================================================
   Page: marketing
   Reuses .hero, .lead, .card-grid and .card (non-linking div cards).
   New: .note-bar — a full-width hairline bar with a green outline mono
   badge beside a short disclaimer line.
   ========================================================================== */

.note-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.35rem 1.6rem;
  margin-top: 2.4rem;
}

.note-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-green);
  border: 1px solid var(--c-green);
  border-radius: 6px;
  padding: 0.65em 1.05em;
  background: rgba(71, 190, 167, 0.06);
}

.note-bar p { margin: 0; color: var(--c-muted); font-size: 0.95rem; }

/* ==========================================================================
   Page: portfolio
   Case-study layout — reuses .hero, .lead, .media-placeholder and
   .card-grid (non-linking div cards, no icons). New: .section--flush drops
   the hairline + top padding where the design runs sections together, and
   .gallery-grid — 4-across portrait placeholder tiles with a bottom-left
   mono caption, matching the empty-imagery language of the site.
   ========================================================================== */

.section--flush { padding-top: 0; }
.section + .section--flush { border-top: 0; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 1.9rem;
}

.gallery-tile {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  min-height: 220px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
}

.gallery-tile span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b6b6b;
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-tile { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ==========================================================================
   Page: pricing
   Plan cards in 4-across rows (2-across for the wide bottom cards) under
   muted mono group labels. The featured card carries a green border with an
   overlapping "Most popular" pill; enterprise cards get a faint green tint
   and an amber "3+ locations" pill. Big price heads with a small /mo unit,
   dot bullet lists, and a mono meta line pinned to the card bottom.
   ========================================================================== */

.plan-sections { padding-block: clamp(2.75rem, 6vw, 4.25rem) var(--space-section); }

.plan-group { margin-bottom: clamp(3rem, 7vw, 4.5rem); }
.plan-group:last-child { margin-bottom: 0; }

h2.plan-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 1.7rem;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.price-grid--2 { grid-template-columns: 1fr 1fr; }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem 1.5rem;
}

.price-card--featured { border-color: var(--c-green); }

.price-card--enterprise {
  border-color: rgba(71, 190, 167, 0.35);
  background: rgba(71, 190, 167, 0.03);
}

.price-badge {
  position: absolute;
  top: 0;
  left: 1.4rem;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--c-green);
  color: #0A0A0A;
  border-radius: 5px;
  padding: 0.55em 0.95em;
  white-space: nowrap;
}

.price-badge--amber { background: var(--c-amber); }

.price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.75rem;
}

.price .per {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-muted);
}

.price-card .eyebrow { margin-bottom: 0.45rem; letter-spacing: 0.22em; }

.price-card h3 { font-size: 1.05rem; margin: 0 0 1.1rem; }
.price-card--wide h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }

.plan-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  color: var(--c-muted);
  font-size: 0.92rem;
}

.plan-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.45rem;
}

.plan-list li::before {
  content: "\00B7";
  position: absolute;
  left: 0;
  color: var(--c-muted);
}

.plan-inline { color: var(--c-muted); font-size: 0.95rem; margin: 0 0 1.5rem; max-width: 34rem; }

.plan-meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.plan-meta--green { color: var(--c-green); }

@media (max-width: 1024px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid--2 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .price-grid, .price-grid--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page: saas-management
   Product line-up — reuses .hero, .lead and .card-grid with non-linking
   div cards. New: .card--flag positions the card so a small filled green
   "Coming soon" mono pill can pin to the top-right corner, level with the
   icon tile.
   ========================================================================== */

.card--flag { position: relative; }

.card-badge {
  position: absolute;
  top: 1.8rem;
  right: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--c-green);
  color: #0A0A0A;
  border-radius: 5px;
  padding: 0.55em 0.95em;
  white-space: nowrap;
}

/* ==========================================================================
   Page: privacy-policy
   Legal long-form — reuses .hero, .lead, .feature-cols and the contact
   aside-block labels. New: .policy-meta mono "last updated" line, .legal
   reading column with hairline-topped numbered blocks (.legal-num mono
   green counters), and .legal-contact — a two-column bordered card pairing
   a short pitch with the direct lines.
   ========================================================================== */

.policy-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin: 0;
  padding-bottom: var(--space-section);
}

.legal { max-width: 46rem; margin-top: 2.6rem; }

.legal-block {
  border-top: 1px solid var(--c-border);
  padding-top: 1.9rem;
  margin-bottom: 2.6rem;
}
.legal-block:last-child { margin-bottom: 0; }

.legal-block h3 {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
}

.legal-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--c-green);
}

.legal-block p,
.legal-block li { color: var(--c-muted); font-size: 0.96rem; }
.legal-block p:last-child { margin-bottom: 0; }

.legal-block ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.legal-block li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.45rem;
}

.legal-block li::before {
  content: "\00B7";
  position: absolute;
  left: 0;
  color: var(--c-green);
}

.legal-block a { color: var(--c-amber); text-decoration: underline; }

/* Bordered contact card at the foot of the policy */
.legal-contact {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.legal-contact h3 { font-size: 1.45rem; }
.legal-contact .eyebrow { letter-spacing: 0.22em; }
.legal-contact p { color: var(--c-muted); font-size: 0.95rem; margin-bottom: 0; }

.legal-contact-lines .aside-block { margin-bottom: 1.5rem; }
.legal-contact-lines .aside-block:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .legal-contact { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page: about
   Reuses .hero, .lead, .media-placeholder, .feature-cols, .card-grid and
   the home service cards. New: .about-story — heading on the left, muted
   prose on the right — and .stat-grid, a 4-across strip of hairline-topped
   big figures with mono labels, in the feature-cols language.
   ========================================================================== */

.about-story {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.about-story h2 { margin-bottom: 0; }

.about-story-copy p { color: var(--c-muted); font-size: 1rem; }
.about-story-copy p:last-child { margin-bottom: 0; }
.about-story-copy strong { color: var(--c-text); font-weight: 600; }

@media (max-width: 900px) {
  .about-story { grid-template-columns: 1fr; }
  .about-story h2 { margin-bottom: 0.6em; }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem 1.4rem;
  margin-top: 2.5rem;
}

.stat { border-top: 1px solid var(--c-muted); padding-top: 1.4rem; }

.stat-figure {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.55rem;
}

.stat-figure .accent { color: var(--c-green); }

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page: saas-products
   Full product page — reuses .hero, .lead, .media-placeholder, .card-grid,
   .card--flag, .feature-cols, .note-bar, .compliance-card, the contact
   chips and aside blocks. New: the pricing dot-bullet .plan-list adapted
   to sit inside product cards.
   ========================================================================== */

.card .plan-list { margin: 1rem 0 0; font-size: 0.9rem; }
.card .plan-list li { margin-bottom: 0.35rem; }
.card .plan-list li:last-child { margin-bottom: 0; }

/* ==========================================================================
   Imagery — real photography in the slots the design drew as empty
   .media-placeholder / .gallery-tile boxes. Same hairline-framed surface
   language: the image fills the frame and crops (object-fit: cover) rather
   than letterboxing, so section heights and rhythm are unchanged.
   .media-placeholder is kept above for any slot still awaiting a photo.
   ========================================================================== */

.media-frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.media-frame img,
.media-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero/banner slot — the height ramp .media-placeholder used. */
.media-frame--wide { height: clamp(220px, 34vw, 420px); }

/* Gallery tile — portrait image with the mono caption laid over a bottom
   scrim, replacing the caption that sat inside the empty tile. */
.gallery-tile--media {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Photos and silent looping clips share the same tile treatment — fill the
   4:5 frame and crop rather than letterbox. */
.gallery-tile--media img,
.gallery-tile--media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-tile--media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.6rem 1.2rem 1.05rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #EDEDED;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.92), rgba(10, 10, 10, 0));
}

/* ==========================================================================
   Motion — scroll-reveal on entry, a lift on the linking cards, and a short
   cross-fade when the client router swaps <main>.
   Everything is gated behind .nl-anim, which nestor-spa-nav.js sets on
   <html> at runtime: if the script never loads, nothing is hidden and the
   page renders exactly as it did before. All of it collapses to a no-op
   under prefers-reduced-motion.
   ========================================================================== */

.nl-anim .nl-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--nl-d, 0ms);
}

.nl-anim .nl-reveal.is-in { opacity: 1; transform: none; }

/* Content cross-fade between client-routed pages. */
.nl-anim main { transition: opacity 0.2s ease, transform 0.2s ease; }
.nl-anim main.is-leaving { opacity: 0; transform: translateY(6px); }

/* Linking cards lift; div.card (non-linking) deliberately stays flat, as
   the rule above it already establishes. */
a.card { transition: border-color 0.15s ease, transform 0.28s ease, background-color 0.28s ease; }
a.card:hover { transform: translateY(-4px); background: #181818; }

.media-frame img,
.gallery-tile--media img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.gallery-tile--media:hover img { transform: scale(1.045); }

.btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .nl-anim .nl-reveal,
  .nl-anim .nl-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nl-anim main,
  .nl-anim main.is-leaving { opacity: 1; transform: none; transition: none; }
  a.card:hover,
  .btn:hover,
  .gallery-tile--media:hover img { transform: none; }
}

/* ---------- Language switch (EN / FR) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  line-height: 1;
}

.lang-switch a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  text-decoration: none;
  padding: 0.42em 0.62em;
  border-radius: 5px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switch a:hover { color: var(--c-text); text-decoration: none; }
.lang-switch a.is-on { background: var(--c-green); color: #0A0A0A; }

@media (max-width: 900px) {
  .lang-switch { order: 2; }
}

/* ---------- Header logo — image wordmark ----------
   The logo is now a supplied PNG wordmark rather than the old circular text
   badge, so the circle treatment (fixed 46px square, 50% radius, white fill)
   is unset here — the fill in particular would hide a white-on-transparent
   mark. The anchor keeps its 46px height so header rhythm is unchanged.
   The source canvas is cropped tight to the artwork (282x108, no dead
   padding), so the image height IS the rendered mark height — no need to
   oversize the box to compensate. The anchor keeps its 46px height so the
   header rhythm is unchanged while the mark itself sits larger inside it. */
.logo {
  width: auto;
  height: 46px;
  border-radius: 0;
  background: none;
}

.logo img {
  display: block;
  height: 34px;
  width: auto;
}

@media (max-width: 560px) {
  .logo { height: 38px; }
  .logo img { height: 28px; }
}

/* ==========================================================================
   CTA band stamp logo
   Sits at the right edge of the green band, vertically centred against the
   heading block. Source art is black-on-white; multiply drops the white plate
   so the black stamp sits straight on the turquoise. Stacks under the copy on
   narrow screens so it never crowds the button.
   ========================================================================== */

.cta-band .container { position: relative; }

.cta-band .cta-logo {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  width: 190px;
  height: 190px;
  mix-blend-mode: multiply;
}

@media (max-width: 780px) {
  .cta-band .cta-logo {
    position: static;
    transform: none;
    margin-top: 1.75rem;
    width: 130px;
    height: 130px;
  }
}