/* ==========================================================================
   GeniusCFO V4 — Cluely design language, GeniusCFO palette
   --------------------------------------------------------------------------
   Governing idea: the page is a bright room; the product is a dark object
   sitting in it. Depth comes from light — gradients, rim highlights and
   moulded shadows — never from drawn boxes.

   Adapted from Brand/Cluely-Design-Language-AI-Spec.md with two substitutions
   agreed at brief stage:
     · accent  #3C83F6 (blue)      -> #00C896 (GeniusCFO emerald)
     · type    Geist + EB Garamond -> IBM Plex Sans Condensed + DM Sans
   Everything else — the 0.8px hairline, the fixed upper-left light source,
   the 20px 20px shadow offset, the 13px window radius, the 257px section
   rhythm, narrow text / wide imagery — is carried over verbatim.

   Accessibility corrections applied over the Cluely source (spec §16).
   Cluely fails AA on #777A88, #8C929D, #AAADBB and its own CTA label. Here:
     · every text tone clears 4.5:1 against BOTH white and the tinted washes,
       not just against white — Cluely only ever checked white
     · #AAADBB is gone entirely; the ramp bottoms out at #5B6377 (4.7 on tint)
     · CTA label is ink on emerald (8.8:1), never white on emerald (1.9:1)
     · the accent is reserved for the CTA; eyebrows are neutral, so no small
       emerald text has to carry a contrast burden
     · prefers-reduced-motion disables every scroll-linked and load animation
     · visible focus ring on every interactive element (Cluely has none)
   ========================================================================== */

/* ---------- 0. Fonts ---------- */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/dm-sans.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-700.woff2") format("woff2");
}

/* The UA sheet's `[hidden] { display: none }` loses to any component rule that
   sets display, which is how the firm lead form ended up showing the
   business-only turnover field. Make the attribute win outright. */
[hidden] { display: none !important; }

/* ---------- 1. Tokens ---------- */

:root {
  /* Text ramp — blue-shifted, derived from GeniusCFO ink #0B0F1A so that
     B > R at every step, per spec §2.2. Ratios measured against #FFFFFF. */
  --text-max:      #0b0f1a;  /* 19.1 white · 14.9 tint-2 — headings, stats */
  --text-strong:   #212636;  /* 15.1 white · 11.7 tint-2 — body-strong, FAQ */
  --text-body:     #333a4d;  /* 11.3 white ·  8.8 tint-2 — default body     */
  --text-muted:    #3f465a;  /*  9.4 white ·  7.3 tint-2 — hero lead        */
  --text-soft:     #4c5468;  /*  7.6 white ·  5.9 tint-2 — secondary body   */
  --text-subtle:   #5b6377;  /*  6.0 white ·  4.7 tint-2 — eyebrows, meta   */
  --text-faint:    #6b7280;  /*  4.8 white — WHITE SURFACES ONLY            */
  --text-on-dark:  #fafaf8;
  --text-on-dark-2:#e6e9f0;

  /* Surfaces */
  --surface:   #ffffff;
  --tint-1:    #eef0f6;
  --tint-2:    #dfe3ee;
  --tint-3:    rgba(206, 213, 232, 0.5);   /* screenshot mat */
  --tint-4:    #bcc4da;
  --ink:       #0b0f1a;                     /* dark product chrome         */
  --ink-2:     #141926;
  --ink-3:     #2a3142;

  /* Accent — emerald replaces Cluely blue. One accent, one action. */
  --emerald:       #00c896;
  --emerald-deep:  #00a87c;
  --emerald-a:     #00a87c;                 /* gradient origin             */
  --emerald-b:     #00d9a3;                 /* gradient highlight          */
  --emerald-text:  #00674d;                 /* 6.9 white · 5.4 tint-2      */
  --emerald-glow:  rgba(0, 200, 150, 0.34);
  --amber:         #ff9f1c;

  /* Lines — 0.8px, not 1px. This is a signature, not a rounding choice. */
  --hairline:        0.8px solid #dfe2ea;
  --hairline-soft:   0.8px solid rgba(11, 15, 26, 0.07);
  --hairline-strong: 0.8px solid rgba(11, 15, 26, 0.14);
  --rim-15:          0.8px solid rgba(255, 255, 255, 0.15);
  --rim-25:          0.8px solid rgba(255, 255, 255, 0.25);

  /* Radii — radius encodes scale */
  --r-chip:   4px;
  --r-sm:     6px;
  --r-md:     8px;
  --r-btn:    12px;
  --r-window: 13px;   /* product screenshots — matches macOS curvature */
  --r-card:   24px;
  --r-panel:  32px;
  --r-pill:   9999px; /* controls only, never content containers */

  /* Gradients */
  --grad-hero: radial-gradient(92.09% 126.39% at 50% 100%, #dfe3ee 58.91%, #bcc4da 100%);
  --grad-sheen: linear-gradient(176.87deg, rgba(255,255,255,0.5) 8.56%, rgba(255,255,255,0) 85.04%);
  --grad-wash: radial-gradient(92.09% 124.47% at 50% 99.24%, rgba(223,227,238,0.55) 58.91%, rgba(188,196,218,0.5) 100%);
  --grad-emerald-card:
    radial-gradient(167.08% 140.48% at 79.5% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(120.74% 124.92% at 7.26% 100%, #00d9a3 0%, #009e77 100%);
  --grad-emerald-btn:
    radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(114.65% 114.65% at 9.73% 17.27%, #00d9a3 0%, #00a87c 100%);
  --grad-ink: linear-gradient(to right, #0b0f1a 0%, #3d4459 100%);
  --grad-ink-btn: linear-gradient(#212636, #171b27);
  --grad-image-fade: radial-gradient(87.76% 87.72% at 50% 9.2%, rgba(255,255,255,0) 41.36%, #ffffff 71.93%);

  /* Shadows — light source fixed upper-left, offsets always down-right.
     Every raised element pairs an outer shadow with an inner light. */
  --sh-hairline: rgba(11,15,26,0.06) 0 0 0 1px, rgba(255,255,255,0.8) 0 -0.5px 0 0;
  --sh-inset-well: rgba(11,15,26,0.05) 0 2px 20px -1px inset;
  --sh-cta:
    rgba(0,200,150,0.34)     14px 14px 24px 0,
    rgba(255,255,255,0.45)   -3px -3px 4px 0 inset,
    rgba(0,86,64,0.18)         4px  4px 4px 0 inset;
  --sh-cta-ink:
    rgba(11,15,26,0.22)      14px 14px 24px 0,
    rgba(255,255,255,0.14)   -3px -3px 4px 0 inset,
    rgba(0,0,0,0.35)           4px  4px 4px 0 inset;
  --sh-glass:
    rgba(255,255,255,0.13) 1.899px 1.77px 8.174px 0 inset,
    rgba(255,255,255,0.13) 1.007px 0.939px 4.087px 0 inset;
  --sh-window: rgba(11,15,26,0.2) 0 2px 4.2px 0, rgba(11,15,26,0.2) 0 13.025px 26.05px 0;
  --sh-window-lift: rgba(11,15,26,0.22) 0 4px 8px 0, rgba(11,15,26,0.24) 0 22px 44px 0;

  /* Type */
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
  --dur-transform: 300ms;

  /* Rhythm — the gap lives BETWEEN blocks, not as per-section padding.
     Cluely measures 257px; scaled here for a denser B2B page. */
  --rhythm: clamp(88px, 13vw, 216px);
  --rhythm-major: clamp(112px, 17vw, 280px);

  /* Layout */
  --gutter: 20px;
  --max-page: 1280px;   /* default section container */
  --max-wide: 1152px;   /* hero visual, split sections, header */
  --max-read: 600px;    /* subhead measure */
  --max-head: 620px;    /* headline measure */
  --max-body: 520px;    /* card body measure */
  --header-h: 54px;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

/* ---------- 2. Base ---------- */

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

html {
  color-scheme: light;
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.image-dialog-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--emerald-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--text-on-dark);
  text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; }

.wrap {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-wide { max-width: var(--max-wide); }

/* ---------- 3. Typography ---------- *
   Hierarchy is carried by size + colour, not weight.
   Negative tracking scales with size. Line-height 1.25 on every heading. */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-max);
  text-wrap: balance;
}
p { margin: 0; }

h1 {
  font-size: clamp(2.75rem, 6.4vw, 5rem);   /* 44 -> 80px */
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.018em;
  max-width: var(--max-head);
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);    /* 32 -> 56px */
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.023em;
}

h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); /* 22 -> 28px */
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
}

/* Eyebrow — the only uppercase and the only positive tracking on the page.
   Doubles as the GeniusCFO ledger chapter marker. */
.chapter-marker,
.status-line,
.eyebrow,
.mono,
.list-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.status-line { color: var(--text-muted); }

.lead {
  max-width: var(--max-read);
  color: var(--text-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.body-lg {
  max-width: var(--max-body);
  color: var(--text-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* The bold lead-in — the single highest-value pattern in the Cluely spec.
   A short bold assertion, then a plain sentence, in one paragraph. */
.lead-in strong,
.lead-in b {
  display: block;
  margin-bottom: 6px;
  color: var(--text-max);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- 4. Section rhythm ---------- *
   Sections carry almost no vertical padding. The rhythm is the gap between
   them. Constant regardless of section content. */

main { padding-bottom: var(--rhythm); }
main > .chapter { margin-top: var(--rhythm); }
main > .chapter.chapter-major { margin-top: var(--rhythm-major); }
main > .hero { margin-top: 0; }

.chapter { position: relative; }

.chapter-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.chapter-head h2 { max-width: var(--max-head); }
.chapter-head .lead { max-width: var(--max-read); }

/* Centred variant — text narrow, imagery wide */
.chapter-head-centre {
  justify-items: center;
  text-align: center;
}
.chapter-head-centre h2,
.chapter-head-centre .lead { margin-inline: auto; }

/* Tint washes replace the old paper/ink alternation. The page stays a
   bright room throughout; only the product objects are dark. */
.chapter.wash-tint::before {
  content: "";
  position: absolute;
  inset: calc(var(--rhythm) / -2) 0;
  z-index: -1;
  background: var(--grad-wash);
  pointer-events: none;
}

/* ---------- 5. Buttons ---------- *
   No surface is flat. Even the button is gradient-filled. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* One accent, one action. Ink on emerald = 8.9:1. */
.btn-primary {
  background: var(--grad-emerald-btn);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--sh-cta);
}
.btn-primary:hover { filter: brightness(1.04); }

/* The closing CTA takes the dark button, per spec §10 */
.btn-ink {
  background: var(--grad-ink-btn);
  color: var(--text-on-dark);
  box-shadow: var(--sh-cta-ink);
}
.btn-ink:hover { filter: brightness(1.12); }

.btn-quiet {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-strong);
  border: var(--hairline);
  box-shadow: var(--sh-hairline);
}
.btn-quiet:hover { background: #fff; color: var(--text-max); }

/* ---------- 6. Access strip + header ---------- *
   Header is absolute, transparent, no border, no backdrop blur. It floats
   over the hero gradient. A floating CTA pill appears once past the hero. */

.access-strip {
  position: relative;
  z-index: 60;
  background: var(--grad-ink);
  color: var(--text-on-dark-2);
}
.access-strip[hidden] { display: none; }
.access-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 38px;
  padding-block: 8px;
}
.access-inner .mono {
  color: var(--text-on-dark-2);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-align: center;
}
.strip-close {
  position: absolute;
  right: var(--gutter);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: var(--rim-15);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.strip-close:hover { background: rgba(255, 255, 255, 0.16); }

.site-header {
  position: absolute;
  inset-inline: 0;
  z-index: 50;
  padding-top: 10px;
  background: none;
  border: none;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--max-wide);
  min-height: var(--header-h);
}

.desktop-nav { display: none; gap: 26px; margin-inline: auto; }
.desktop-nav a {
  color: var(--text-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] { color: var(--text-max); }

/* Pills are used for controls only — never content containers */
.route-toggle {
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px;
  border: var(--hairline);
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--sh-hairline);
}
.route-toggle a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--r-chip);
  color: var(--text-soft);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.route-toggle a[aria-current="page"] {
  background: var(--ink);
  color: var(--text-on-dark);
}

.header-cta { display: none; height: 42px; padding: 0 18px; }

.menu-button {
  margin-left: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: var(--hairline);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--sh-hairline);
  cursor: pointer;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--text-max);
  transition: transform var(--dur-transform) var(--ease), opacity var(--dur) var(--ease);
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-button[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-button[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  margin-top: 10px;
  padding: 10px var(--gutter) 18px;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-window);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; }
.mobile-menu a {
  padding: 13px 2px;
  border-bottom: var(--hairline);
  color: var(--text-strong);
  text-decoration: none;
}
.mobile-menu a:last-child { border-bottom: none; }

/* Floating CTA pill, appears past the hero */
.floating-cta {
  position: fixed;
  top: 14px;
  right: var(--gutter);
  z-index: 55;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur-transform) var(--ease);
}
.floating-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }

@media (min-width: 1024px) {
  .desktop-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-button, .mobile-menu { display: none; }
  .route-toggle { margin-inline: 0; border-radius: var(--r-pill); }
  .route-toggle a {
    min-height: 0;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    font-size: 0.875rem;
  }
  .desktop-nav { margin-inline: auto 0; }
}

/* ---------- 7b. Logo band ---------- *
   The animated mark sits in the white the hero leaves behind, before the
   first tinted chapter. It replays every time it re-enters the viewport and
   on click or tap; under prefers-reduced-motion it is the static logo and
   the button is inert. See geniuscfo-animated-logo-spec.md sections 8.1 and 9. */

main > .logo-band {
  margin-top: 0;
  padding-block: clamp(32px, 5.5vw, 64px);
  background: var(--surface);
  display: grid;
  place-items: center;
}
main > .logo-band + .chapter.chapter-major {
  margin-top: 0;
  padding-top: clamp(32px, 5.5vw, 64px);
}

.logo-band-mark {
  display: block;
  width: min(420px, 62vw);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.logo-band-mark:focus-visible {
  outline: 2px solid var(--emerald-deep);
  outline-offset: 12px;
  border-radius: 6px;
}
.logo-band-mark svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .logo-band-mark { cursor: default; }
}

/* ---------- 7. Hero ---------- *
   Serif H1 -> condensed display H1. Cool light pooling upward from the
   bottom. Product visual bleeds off the bottom edge. */

.hero {
  position: relative;
  padding-top: clamp(112px, 13vw, 168px);
  padding-bottom: 0;
  isolation: isolate;
  /* The product is cropped by the hero's own bottom edge, so it bleeds into
     the fold instead of dangling over white. Spec §15: never end an image
     at a hard edge. */
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--grad-hero);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-sheen);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  justify-items: center;
  gap: clamp(36px, 5vw, 56px);
  max-width: var(--max-wide);
  text-align: center;
}
.hero-copy {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: var(--max-head);
}
/* IBM Plex Condensed averages ~0.42em per glyph, so 620px lands "The CFO your
   business" / "never had." — the two-line hero break the spec calls for. */
.hero h1 { max-width: var(--max-head); }
.hero-lead {
  max-width: 34rem;
  color: var(--text-muted);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
}
.business-hero-price {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

/* Hero product bleeds off the bottom and fades into the page */
.hero-product { width: 100%; max-width: var(--max-wide); margin-bottom: -6%; }
.hero-product .screen-window { transform: none; }

/* Word-rise on load — each word starts one line-height below and rises.
   The mask has to clip the word's *upward* travel, but a descender sitting
   on the baseline (the y in "never had", the g in "growing") extends below
   the box and was being cut off with it. Padding the mask downwards and
   pulling the same amount back off the margin gives the descender room
   without moving the line. */
.word-rise {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.word-rise > span {
  display: inline-block;
  transform: translateY(1.1em);
  animation: word-rise 620ms var(--ease) forwards;
}
@keyframes word-rise { to { transform: none; } }

.fade-up { animation: fade-up 620ms var(--ease) both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 8. Product screenshot window ---------- *
   13px radius, floating double shadow, sat on a cool mat. The dark object
   in the bright room. */

.screen-link {
  display: block;
  border-radius: var(--r-window);
  color: inherit;
  text-decoration: none;
}
.screen-window {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-window);
  border: var(--rim-15);
  background: var(--ink);
  box-shadow: var(--sh-window);
  transition: box-shadow var(--dur-transform) var(--ease);
}
.screen-window::before {
  content: "";
  display: block;
  height: 26px;
  border-bottom: 0.8px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 15px 13px, #ff6f7d 0 3px, transparent 4px),
    radial-gradient(circle at 29px 13px, #f4b44b 0 3px, transparent 4px),
    radial-gradient(circle at 43px 13px, #31d0aa 0 3px, transparent 4px),
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}
.screen-window img { width: 100%; }

.screen-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-top: 0.8px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.screen-caption strong { max-width: 44ch; color: var(--emerald); font-weight: 500; }
.screen-expand { white-space: nowrap; }

.screen-link:hover .screen-window,
.screen-link:focus-visible .screen-window { box-shadow: var(--sh-window-lift); }
.screen-link:focus-visible { outline-offset: 6px; }

/* Mat — screenshots sit on a cool tint, never directly on white */
.screen-mat {
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: var(--r-panel);
  background: var(--tint-3);
  border: var(--hairline-soft);
}

/* Bottom fade so imagery dissolves into the page rather than ending hard */
.screen-fade {
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
  mask-image: linear-gradient(#000 62%, transparent 100%);
}

/* ---------- 9. Cards ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-panel);
  background: var(--grad-wash);
  border: var(--hairline-soft);
  box-shadow: var(--sh-hairline);
  overflow: hidden;
}
.card h3 { max-width: 22ch; }
.card p { max-width: var(--max-body); color: var(--text-soft); font-size: 1rem; line-height: 1.55; }

/* Emerald variant — the accent card. One per section, maximum. */
.card-accent {
  background: var(--grad-emerald-card);
  border: none;
  box-shadow: var(--sh-glass);
}
.card-accent h3 { color: var(--ink); }
.card-accent p { color: rgba(4, 32, 24, 0.78); }
.card-accent .chapter-marker { color: rgba(4, 32, 24, 0.6); }

/* Card with product UI cropped and bleeding off the bottom edge */
.card-media {
  margin: 8px calc(clamp(24px, 2.6vw, 36px) * -1) calc(clamp(24px, 2.6vw, 36px) * -1);
  padding-inline: clamp(24px, 2.6vw, 36px);
  /* Grid rows stretch, so without this the media floats mid-card on the
     shorter cards and the bleed reads as a mistake. */
  margin-top: auto;
  padding-top: 20px;
}
.card-media .screen-window { border-radius: var(--r-window) var(--r-window) 0 0; }

/* Three points per card — ruled, not bulleted. Content directions, slide 2. */
.card .plan-features,
.card-points {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline-soft);
}
.card .plan-features li,
.card-points li {
  margin: 0;
  padding: 9px 0;
  border-bottom: var(--hairline-soft);
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.card-accent .plan-features li {
  border-bottom-color: rgba(4, 32, 24, 0.14);
  color: rgba(4, 32, 24, 0.8);
}

.grid-2 {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
.grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ---------- 10. Proof cards (objection section) ---------- *
   image + bold lead-in + explanation, per spec §10 row 4 */

.proof {
  display: grid;
  gap: 18px;
  align-content: start;
}
.proof .screen-window { border-radius: var(--r-window); }
.proof .screen-window img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.alert-strip .screen-window img { aspect-ratio: 16 / 7; object-fit: cover; object-position: top left; }
.card-media .screen-window img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.proof-copy { display: grid; gap: 6px; }
.proof-copy strong {
  color: var(--text-max);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.proof-copy p { color: var(--text-soft); font-size: 1rem; line-height: 1.55; max-width: 38ch; }
.proof-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  background: var(--grad-emerald-btn);
  box-shadow: var(--sh-cta);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---------- 11. Marquee (breadth) ---------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee-item {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  border: var(--hairline);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-hairline);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- 12. Asymmetric split (depth) ---------- */

.split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: var(--max-wide);
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .split-reverse > *:first-child { order: 2; }
}
.split-copy { display: grid; gap: 16px; align-content: center; max-width: var(--max-body); }

.stat {
  display: grid;
  gap: 4px;
  padding-top: 22px;
  border-top: var(--hairline-strong);
}
.stat-figure {
  color: var(--text-max);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-label { color: var(--text-subtle); }

.alert-strip { display: grid; gap: 16px; }
.alert-strip .screen-window { border-radius: var(--r-window); }

/* ---------- 13. Steps ---------- */

.steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}
.steps li {
  display: grid;
  gap: 8px;
  padding-block: 26px;
  border-bottom: var(--hairline);
}
.steps li span:last-child {
  max-width: 52ch;
  color: var(--text-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .steps li { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: baseline; }
}

/* ---------- 14. Know more — progressive disclosure ---------- *
   Content directions, slide 2. Hidden content stays in the DOM and stays
   crawlable; only the visual state changes. */

.know-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
/* No JS -> the button stays hidden and every panel is already visible, so the
   row must not leave a gap. */
.know-more:has(button[hidden]) { display: none; }
.know-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--sh-hairline);
  color: var(--text-strong);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.know-more-btn:hover { background: #fff; color: var(--text-max); }
.know-more-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-transform) var(--ease);
}
.know-more-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* JS adds .is-collapsible; without JS the content is simply visible. */
.more-panel.is-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-transform) var(--ease), opacity var(--dur) var(--ease);
}
.more-panel.is-collapsible > * { overflow: hidden; min-height: 0; }
.more-panel.is-collapsible.is-open { grid-template-rows: 1fr; opacity: 1; }
.more-panel.is-collapsible.is-open > * { overflow: visible; }

/* ---------- 15. Comparison table ---------- */

.comparison-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 18px;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.comparison-legend b { color: var(--text-max); font-weight: 500; }

.comparison-wrap {
  overflow-x: auto;
  border-radius: var(--r-card);
  border: var(--hairline);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--sh-hairline);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.comparison-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.comparison-table th, .comparison-table td {
  padding: 15px 18px;
  border-bottom: var(--hairline);
  text-align: left;
}
.comparison-table thead th {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.comparison-table tbody th { color: var(--text-strong); font-weight: 500; }
.comparison-table td { color: var(--text-subtle); text-align: center; }
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table .gcfo-mark { color: var(--emerald-text); font-weight: 600; background: rgba(0, 200, 150, 0.06); }

@media (max-width: 700px) {
  .comparison-table, .comparison-table tbody, .comparison-table tr { display: block; }
  .comparison-table thead { display: none; }
  .comparison-table tr {
    margin: 12px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    border: var(--hairline);
    background: #fff;
  }
  .comparison-table tbody th { display: block; padding: 0 0 10px; border: none; }
  .comparison-table td {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: var(--hairline-soft);
    text-align: right;
  }
  .comparison-table td::before {
    content: attr(data-label);
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

/* ---------- 16. Ask module ---------- */

.ask-demo { display: grid; gap: clamp(32px, 5vw, 72px); max-width: var(--max-wide); align-items: center; }
@media (min-width: 1024px) { .ask-demo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.ask-demo-media .screen-window { max-width: 380px; margin-inline: auto; }
.ask-demo-copy { display: grid; gap: 16px; }

.ask-prompts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ask-prompts button {
  height: 40px;
  padding: 0 16px;
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-hairline);
  color: var(--text-soft);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ask-prompts button:hover { color: var(--text-max); }
.ask-prompts button[aria-pressed="true"] {
  background: var(--ink);
  border-color: transparent;
  color: var(--text-on-dark);
}

.ask-answers {
  margin-top: 8px;
  padding: 26px 28px;
  border-radius: var(--r-card);
  background: var(--ink);
  border: var(--rim-15);
  box-shadow: var(--sh-window);
}
.ask-answers > div[hidden] { display: none; }
.ask-answers strong {
  display: block;
  margin-bottom: 8px;
  color: var(--emerald);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.ask-answers p { color: var(--text-on-dark-2); font-size: 1rem; line-height: 1.55; }

/* ---------- 17. Pricing ---------- */

.plan-selector { display: grid; gap: 24px; max-width: var(--max-wide); }
.billing-control { display: grid; gap: 12px; justify-items: start; }
.billing-switch {
  display: inline-flex;
  padding: 3px;
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-hairline);
}
.billing-switch button {
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-soft);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.billing-switch button[aria-pressed="true"] { background: var(--ink); color: var(--text-on-dark); }
.billing-control > p { max-width: 52ch; color: var(--text-subtle); font-size: 0.9375rem; }
.plan-saving { color: var(--emerald-text); font-weight: 600; }

.plan-figure {
  display: grid;
  gap: 6px;
  padding: 28px 32px;
  border-radius: var(--r-card);
  background: var(--grad-wash);
  border: var(--hairline-soft);
  box-shadow: var(--sh-hairline);
}
.plan-figure-label, .plan-figure-total {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.plan-figure-amount {
  color: var(--text-max);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan-figure-meta { color: var(--text-soft); font-size: 0.9375rem; }

.plan-options { display: grid; gap: 16px; }
@media (min-width: 900px) { .plan-options { grid-template-columns: repeat(3, 1fr); } }

.plan-option {
  display: grid;
  gap: 10px;
  padding: 24px;
  border-radius: var(--r-card);
  border: var(--hairline);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--sh-hairline);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.plan-option:hover { background: #fff; }
.plan-option:focus-within { outline: 2px solid var(--emerald-deep); outline-offset: 3px; }
.plan-option.is-selected {
  border-color: transparent;
  background: var(--grad-wash);
  box-shadow: rgba(0, 200, 150, 0.32) 0 0 0 1.4px, var(--sh-hairline);
}
.plan-option-head { display: grid; gap: 6px; }
.plan-option-name {
  color: var(--text-max);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.plan-option.is-selected .plan-option-name { color: var(--emerald-text); }
.plan-option-price { display: grid; gap: 3px; color: var(--text-strong); font-size: 1.0625rem; font-weight: 500; }
.plan-option-price small {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.11em;
}
.plan-option-scope { color: var(--text-subtle); font-size: 0.875rem; }
.plan-features { margin: 4px 0 0; padding-left: 18px; color: var(--text-soft); font-size: 0.9375rem; }
.plan-features li { margin-bottom: 3px; }

.plan-actions { display: grid; gap: 14px; justify-items: start; }
.plan-cta-note { max-width: 68ch; color: var(--text-subtle); font-size: 0.9375rem; line-height: 1.55; }
.plan-cta-note a { color: var(--emerald-text); }

.service-list { display: grid; gap: 16px; }
@media (min-width: 860px) { .service-list { grid-template-columns: repeat(3, 1fr); } }
.service-block {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px;
  border-radius: var(--r-card);
  border: var(--hairline);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-hairline);
}
.service-block p { color: var(--text-soft); font-size: 0.9375rem; line-height: 1.55; }
.service-price { color: var(--emerald-text); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; }
.pricing-support { margin-top: 18px; color: var(--text-subtle); font-size: 0.875rem; }

/* ---------- 18. FAQ ---------- *
   No card, no background, no icon — just the rule. */

.faq-list { max-width: 880px; border-top: var(--hairline); }
.faq-list details { border-bottom: var(--hairline); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq-list summary:hover { color: var(--text-max); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.4px solid var(--text-subtle);
  border-bottom: 1.4px solid var(--text-subtle);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-transform) var(--ease);
}
.faq-list details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.faq-answer {
  max-width: 68ch;
  padding: 0 4px 24px;
  color: var(--text-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ---------- 19. Lead form ---------- */

.form-shell { display: grid; gap: clamp(32px, 5vw, 72px); max-width: var(--max-wide); align-items: start; }
@media (min-width: 900px) { .form-shell { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.form-shell > div:first-child { display: grid; gap: 14px; align-content: start; }

.lead-form {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-panel);
  background: var(--grad-wash);
  border: var(--hairline-soft);
  box-shadow: var(--sh-hairline);
}
.lead-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lead-progress span[aria-current="step"] { color: var(--emerald-text); }
.lead-step { display: grid; gap: 16px; }
.lead-step[hidden] { display: none; }
.lead-step h3 { font-size: 1.5rem; }
.lead-step h3[tabindex="-1"]:focus { outline: none; }
.lead-step > p { color: var(--text-soft); font-size: 0.9375rem; }

.field { display: grid; gap: 6px; }
.field label, .chip-group-label {
  color: var(--text-strong);
  font-size: 0.875rem;
  font-weight: 500;
}
.field input, .field select {
  height: 46px;
  padding: 0 14px;
  border: var(--hairline);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--text-max);
  box-shadow: var(--sh-inset-well);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--emerald-deep);
  box-shadow: rgba(0, 200, 150, 0.18) 0 0 0 3px;
}
.field small { color: var(--text-subtle); font-size: 0.8125rem; }

.phone-field { display: flex; align-items: stretch; }
.phone-prefix {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: var(--hairline);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.phone-field input { flex: 1; border-radius: 0 var(--r-md) var(--r-md) 0; }

.chip-group { display: grid; gap: 8px; }
.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 36px;
  padding: 0 14px;
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-soft);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { color: var(--text-max); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: transparent; color: var(--text-on-dark); }

.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--text-soft); font-size: 0.9375rem; }
.consent input { margin-top: 3px; accent-color: var(--emerald-deep); }

.lead-error { color: #b4232f; font-size: 0.8125rem; }
.lead-error[hidden] { display: none; }
.form-meta { display: none; }

.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.lead-back {
  border: none;
  background: none;
  color: var(--text-subtle);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lead-back:hover { color: var(--text-max); }
.lead-skip { color: var(--text-subtle); font-size: 0.8125rem; }

.form-success {
  padding: 26px;
  border-radius: var(--r-card);
  border: 0.8px solid rgba(0, 200, 150, 0.4);
  background: rgba(0, 200, 150, 0.06);
  outline: 0;
}
.form-success h3 { color: var(--emerald-text); }
.form-success p { margin-top: 8px; color: var(--text-soft); }

.booking-step { min-width: 0; }
.booking-confirmation {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: var(--hairline-soft);
  background: rgba(255, 255, 255, 0.62);
  color: var(--text-soft);
  font-size: 0.875rem;
}
.booking-confirmation.is-confirmed {
  border-color: rgba(0, 200, 150, 0.42);
  background: rgba(0, 200, 150, 0.09);
  color: var(--emerald-text);
  font-weight: 600;
}
.booking-loading {
  padding: 12px 14px;
  border-left: 2px solid var(--emerald-deep);
  background: rgba(255, 255, 255, 0.56);
  color: var(--text-soft);
  font-size: 0.875rem;
}
.booking-frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: 760px;
  overflow: auto;
  border: var(--hairline-strong);
  border-radius: var(--r-window);
  background: #fff;
  box-shadow: var(--sh-inset-well);
}
.booking-frame iframe { display: block; width: 100%; min-width: 0; border: 0; }
.booking-fallback { color: var(--text-subtle); font-size: 0.8125rem; }
.booking-fallback a { color: var(--emerald-text); font-weight: 700; }
.booking-fallback a:hover { color: var(--text-max); }
.lead-booking-visible .floating-cta { display: none; }

@media (max-width: 520px) {
  .lead-booking-visible .lead-form {
    padding-inline: 0;
    overflow: hidden;
  }
  .lead-booking-visible .form-shell > div:last-child { margin-inline: -20px; }
  .lead-booking-visible .lead-progress,
  .lead-booking-visible .booking-step > h3,
  .lead-booking-visible .booking-step > p { margin-inline: 20px; }
  .lead-booking-visible .booking-frame {
    height: 720px;
    border-inline: 0;
    border-radius: 0;
  }
}

/* ---------- 20. Footer ---------- *
   A tint, not white and not dark. Wordmark left, link columns right. */

.site-footer {
  margin-top: var(--rhythm);
  padding: clamp(40px, 5vw, 56px) 0 20px;
  background: var(--tint-2);
  color: var(--text-max);
}
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
}
.footer-brand img { height: 53px; width: auto; }
.footer-logo-link { display: inline-flex; }
.footer-logo-link:hover img { opacity: 0.82; transition: opacity var(--dur) var(--ease); }
.footer-brand p { max-width: 34ch; margin-top: 14px; color: var(--text-soft); font-size: 0.9375rem; }
.footer-col h2 {
  margin-bottom: 12px;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.footer-col a { color: var(--text-strong); font-size: 0.9375rem; text-decoration: none; }
.footer-col a:hover { color: var(--text-max); text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 0.8px solid rgba(11, 15, 26, 0.12);
  color: var(--text-subtle);
  font-size: 0.8125rem;
}
.trust-line { color: var(--text-subtle); font-size: 0.6875rem; letter-spacing: 0.13em; }

/* ---------- 21. Image dialog ---------- */

.image-dialog {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: none;
  border-radius: var(--r-card);
  background: var(--ink);
  box-shadow: var(--sh-window);
}
.image-dialog::backdrop { background: rgba(11, 15, 26, 0.72); }
.image-dialog-shell { display: grid; grid-template-rows: auto 1fr; max-height: 92vh; }
.image-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 0.8px solid rgba(255, 255, 255, 0.1);
}
.image-dialog-head p {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.image-dialog-close {
  height: 34px;
  padding: 0 14px;
  border: var(--rim-15);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-on-dark);
  font-size: 0.875rem;
  cursor: pointer;
}
.image-dialog-close:hover { background: rgba(255, 255, 255, 0.16); }
.image-dialog-stage { overflow: auto; padding: 16px; }
.image-dialog-stage img { max-width: none; width: 100%; }
@media (max-width: 720px) { .image-dialog-stage img { width: auto; max-width: none; height: auto; } }

/* ---------- 22. Scroll-linked heading opacity ---------- *
   Cluely's most noticeable motion. Headings begin near-invisible and reach
   full opacity as the section enters the viewport. Unlike the source, this
   is disabled under prefers-reduced-motion and never hides content from a
   crawler (opacity only, and .js-scroll-fade is added by script). */

.js-scroll-fade { opacity: 0.12; transition: opacity 500ms var(--ease); }
.js-scroll-fade.is-lit { opacity: 1; }

/* ---------- 23. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none; transform: none; }
  .word-rise > span { transform: none; }
  .js-scroll-fade { opacity: 1; }
  .fade-up { animation: none; opacity: 1; transform: none; }
}

/* ---------- 24. Print ---------- */

@media print {
  .site-header, .access-strip, .floating-cta, .know-more, .image-dialog { display: none !important; }
  .more-panel.is-collapsible { grid-template-rows: 1fr !important; opacity: 1 !important; }
  body { background: #fff; }
}

/* ==========================================================================
   V5 ADDITIONS
   ========================================================================== */

/* ---------- 24. Animated screens ---------- *
   A screen that moves ships as a still and gains its animation after load
   (assets/site.js, "Animated screens (V5)"). The video is stacked on top of
   the still inside the same window, so the poster holds the layout and
   nothing reflows when the animation arrives. */

.screen-motion { position: relative; display: block; }
.screen-motion img { display: block; width: 100%; }
.screen-motion-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--ink);
  animation: motion-in 320ms var(--ease) both;
}
@keyframes motion-in { from { opacity: 0; } to { opacity: 1; } }

/* The replay affordance. Written in only once JS has decided the screen
   really is animated, so a still never advertises a play button. */
.screen-play { display: none; }
.screen-link[data-motion-state="on"] .screen-play {
  display: inline-flex;
  position: absolute;
  right: 12px;
  top: 38px;
  z-index: 2;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(11, 15, 26, 0.72);
  border: 0.8px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.screen-link[data-motion-state="on"] .screen-play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid var(--emerald);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.screen-link:hover .screen-play { background: rgba(11, 15, 26, 0.9); }

.image-dialog-stage video { display: block; width: 100%; height: auto; }
.image-dialog-actions { display: flex; align-items: center; gap: 8px; }
.image-dialog-replay {
  height: 34px;
  padding: 0 14px;
  border: 0.8px solid rgba(0, 200, 150, 0.4);
  border-radius: var(--r-pill);
  background: rgba(0, 200, 150, 0.14);
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.image-dialog-replay:hover { background: rgba(0, 200, 150, 0.26); }

@media (prefers-reduced-motion: reduce) {
  .screen-motion-video { animation: none; }
}

/* ---------- 25. AI Accounting Suite ---------- *
   Four columns of capability directly under the hero. Deliberately set as
   lists rather than cards-with-prose: the job of this block is coverage, and
   a reader scanning for "GST" or "bank reconciliation" should hit it in one
   pass rather than read for it. */

.suite-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(28px, 3vw, 44px);
}
.suite-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2vw, 30px);
  border-radius: var(--r-card);
  background: var(--grad-wash);
  border: var(--hairline-soft);
  box-shadow: var(--sh-hairline);
}
.suite-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.7vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 3px;
}
.suite-kicker {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 14px;
}
.suite-list { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.suite-list li {
  position: relative;
  padding-left: 21px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-body);
}
.suite-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.34em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--emerald);
  border-bottom: 2px solid var(--emerald);
  transform: rotate(-45deg);
}
.suite-card-soon { background: var(--tint-3); box-shadow: none; }
.suite-card-soon .suite-list li { color: var(--text-subtle); }
.suite-card-soon .suite-list li::before {
  border-color: var(--text-subtle);
  opacity: 0.7;
}
.suite-note {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

@media (max-width: 1080px) {
  .suite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .suite-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 26. Plan feature check-lists ---------- *
   Scoped to the plan options so the ruled three-point lists inside .card are
   untouched. Every plan carries the whole product and the tiers differ only
   in how much AI you get, so the shared lines are ticked on all three — that
   repetition is the message, not redundancy. */

.plan-option .plan-features {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.plan-option .plan-features li {
  position: relative;
  margin: 0;
  padding: 0 0 0 23px;
  border: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-body);
}
.plan-option .plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: rgba(0, 200, 150, 0.16);
}
.plan-option .plan-features li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.43em;
  width: 7px;
  height: 4px;
  border-left: 1.8px solid var(--emerald-deep);
  border-bottom: 1.8px solid var(--emerald-deep);
  transform: rotate(-45deg);
}
.plan-option .plan-features li.is-extra { font-weight: 600; color: var(--text-strong); }
.plan-features-head {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* The enlarged copy is a normal block in the dialog stage, not an overlay. */
.screen-motion-video.is-enlarged {
  position: static;
  inset: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-window);
}


/* ---------- 27. CA/Firm page ---------- *
   Classes the firm page needs that the V4 business page never used. */

.hero-detail {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.h2-like {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-max);
}

.output-groups {
  display: grid;
  gap: 32px;
}
@media (min-width: 860px) { .output-groups { grid-template-columns: repeat(3, 1fr); } }
.output-groups > div > h3 {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.output-subhead { margin-top: 28px; }

.index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}
.index-list li {
  padding-block: 13px;
  border-bottom: var(--hairline);
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.plan-extras {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: var(--hairline);
}
.plan-extras > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.plan-extras dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.plan-extras dd { margin: 0; color: var(--text-body); font-size: 0.9375rem; }

/* ---------- 28. Pricing page ---------- *
   The pricing page is a reference document: dense tables, definition lists
   and a plan grid. It keeps V4's surfaces and rhythm, but the tables stay
   ruled rather than boxed — a price list reads better as rules. */

.pricing-page {
  --rhythm: clamp(64px, 9vw, 128px);
  --rhythm-major: clamp(96px, 13vw, 192px);
}

.pricing-hero { padding-block: clamp(72px, 11vw, 132px); }
.pricing-hero .wrap { display: grid; gap: 22px; }
.pricing-hero h1 { max-width: 15ch; }
.pricing-hero .lead { max-width: 62ch; }

.pricing-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pricing-jump a {
  padding: 9px 16px;
  border: var(--hairline-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
}
.pricing-jump a:hover { background: #fff; }
.pricing-jump a[aria-current="true"] {
  background: var(--grad-emerald-btn);
  border-color: transparent;
  color: #042018;
  box-shadow: var(--sh-cta);
}

.chapter-intro { max-width: 760px; }
.chapter-continues { border-top: 2px solid var(--emerald); }
.pricing-page .chapter-continues {
  margin-top: clamp(48px, 6vw, 64px);
  padding-top: clamp(32px, 5.5vw, 64px);
}
.pricing-page .site-footer { margin-top: 0; }

.trial-grid { display: grid; border-top: var(--hairline-strong); }
.trial-grid > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) 1fr;
  gap: 18px;
  padding-block: 15px;
  border-bottom: var(--hairline);
}
.trial-grid dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.trial-grid dd { margin: 0; color: var(--text-body); font-size: 0.9375rem; line-height: 1.5; }

.after-trial {
  display: grid;
  gap: 12px;
  max-width: 72ch;
  margin-top: 34px;
  padding-top: 26px;
  border-top: var(--hairline);
}
.after-trial h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.after-trial p { color: var(--text-soft); font-size: 0.9375rem; line-height: 1.6; }

.ruled-table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.ruled-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.ruled-table caption {
  padding-bottom: 14px;
  text-align: left;
  color: var(--text-subtle);
  font-size: 0.875rem;
}
.ruled-table th,
.ruled-table td {
  padding: 15px 14px;
  border-bottom: var(--hairline);
  vertical-align: top;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-body);
}
.ruled-table th {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ruled-table tbody th { color: var(--text-max); font-family: var(--font-body); font-size: 0.9375rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.ruled-table thead th { border-bottom: var(--hairline-strong); }
.ruled-table .accent-col { border-left: 2px solid var(--emerald); }
.compact-table { max-width: 760px; }
.compact-table .ruled-table { min-width: 520px; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding-block: 16px;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.page-close .hero-actions { margin-top: 26px; justify-content: flex-start; }
.page-close .lead { margin-top: 14px; }

@media (max-width: 720px) {
  .trial-grid > div { grid-template-columns: 1fr; gap: 4px; }
}

/* A closing section is left-aligned prose, not a centred hero. */
.page-close .hero-actions { justify-content: flex-start; }
.chapter .hero-actions { justify-content: flex-start; }