/* ============================================================
   AUTOPILOT — Landing
   ============================================================ */

:root {
  --bg:        #0A0A0B;
  --bg-2:      #111114;
  --bg-3:      #16161A;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --fg:        #F5F5F7;
  --fg-dim:    rgba(245,245,247,0.62);
  --fg-mute:   rgba(245,245,247,0.42);
  --accent:    #E60000;
  --accent-soft: rgba(230,0,0,0.12);

  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 14px;
  --radius-lg: 22px;

  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 56px);

  /* ===== TYPOGRAPHY LIBRARY =====================================
     The page uses 8 named text styles. Each is defined here and
     read by the CSS classes that display that style — change a
     value here and every place using that style updates together.

     1. Mega Headline   - Hero banner + final CTA giant text
     2. Section Title   - Title at the top of each section
     3. Card Title      - Heading inside cards / FAQ questions
     4. Big Number      - 01/02/03, stat numbers (per-section sizes)
     5. Lead Paragraph  - Large emphasis text (problem opener, etc.)
     6. Body Paragraph  - Normal reading text everywhere
     7. Eyebrow Label   - Small uppercase tags (§ 01 · STACK)
     8. UI Text         - Nav, buttons, footer
  ============================================================ */

  /* 1. Mega Headline */
  --text-mega-family: var(--font-display);
  --text-mega-size: var(--tagline-main-size, clamp(44px, 7vw, 92px));
  --text-mega-size-cta: calc(var(--text-mega-size) * 0.8);
  --text-mega-weight: 500;
  --text-mega-line: 0.95;
  --text-mega-spacing: -0.025em;

  /* 2. Section Title */
  --text-title-family: var(--font-header, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --text-title-size: clamp(24px, 2.8vw, 36px);
  --text-title-weight: 500;
  --text-title-line: 1.25;
  --text-title-spacing: -0.01em;

  /* 3. Card Title (and FAQ questions). Title case is applied in the
        source text rather than via CSS, so small words like "and", "of",
        "to" stay lowercase the way real title case requires. */
  --text-card-family: var(--font-header, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --text-card-size: 18px;
  --text-card-weight: 500;
  --text-card-line: 1.25;
  --text-card-spacing: -0.01em;
  --text-card-case: none;

  /* 4. Big Number — shared family/weight/line/spacing/size.
        --text-num-size controls How step numbers, Why row numbers, AND
        Results stat numbers together (one slider for all three). */
  --text-num-family: var(--font-display);
  --text-num-weight: 500;
  --text-num-line: 1;
  --text-num-spacing: -0.04em;
  --text-num-size: 48px;

  /* 5. Lead Paragraph (large intros, about quote, CTA emphasis,
        Capabilities lede, soft second-line in section titles).
        Default family is Inter; the Tweaks Panel "Lead font" dropdown
        can switch it to Grotesk or JetBrains Mono. */
  --text-lead-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-lead-size: 18px;
  --text-lead-weight: 400;
  --text-lead-line: 1.4;
  --text-lead-spacing: -0.01em;

  /* 6. Body Paragraph
     - default: card descriptions, FAQ answers, why/about bodies, etc.
     - large:   intro/closing copy (problem close, bullets, hero sub)
     - prose:   relaxed line-height for longer reading flow (about, FAQ) */
  --text-body-family: var(--font-body);
  --text-body-size: 14px;
  --text-body-size-large: clamp(15px, 1.5vw, 18px);
  --text-body-weight: 400;
  --text-body-line: 1.55;
  --text-body-line-prose: 1.65;
  --text-body-spacing: 0;

  /* 7. Eyebrow / Label (small uppercase tags, micro-copy, footer text) */
  --text-label-family: var(--font-mono);
  --text-label-size: 12px;
  --text-label-weight: 400;
  --text-label-line: 1.4;
  --text-label-spacing: 0.18em;

  /* 8. UI Text (nav links, buttons, side nav, FAQ toggle) */
  --text-ui-family: var(--font-body);
  --text-ui-size: 14px;
  --text-ui-weight: 400;
  --text-ui-line: 1.4;
  --text-ui-spacing: 0;
}

[data-theme="light"] {
  --bg:        #F4F2EE;
  --bg-2:      #FFFFFF;
  --bg-3:      #EAE8E2;
  --line:      rgba(10,10,11,0.10);
  --line-2:    rgba(10,10,11,0.18);
  --fg:        #0A0A0B;
  --fg-dim:    rgba(10,10,11,0.62);
  --fg-mute:   rgba(10,10,11,0.42);
  --accent-soft: rgba(230,0,0,0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--text-body-weight, 400);
  line-height: 1.55;
  text-transform: var(--case-body, none);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* -------- Typography -------- */
/* Most classes below pull their size/weight/line-height/letter-spacing
   from the --text-* variables defined in :root above. Change them there
   to update every place a given style is used across the page. */
.eyebrow {
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}

h1, h2, h3, h4 {
  font-family: var(--font-header, var(--font-display));
  font-weight: var(--text-title-weight, 500);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
  /* Header case toggle in the Tweaks panel sets --case-header. More-specific
     rules below (section titles, card titles, eyebrows) keep their own
     text-transform via !important / their own variables, so this only
     affects display headings without an explicit override (hero mark,
     .display-1 CTA mega, etc.). */
  text-transform: var(--case-header, none);
}

/* Mega Headline (used by the CTA h2; section-head titles override below). */
.display-1 {
  font-family: var(--text-mega-family);
  font-size: var(--text-mega-size);
  font-weight: var(--text-mega-weight);
  line-height: var(--text-mega-line);
  letter-spacing: var(--text-mega-spacing);
}
/* Section Title (this rule is the base; .section-head .display-2 below
   keeps a forced override for Inter to preserve current behavior). */
.display-2 {
  font-family: var(--text-title-family);
  font-size: var(--text-title-size);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-line);
  letter-spacing: var(--text-title-spacing);
}
.display-2-soft {
  font-weight: var(--text-title-weight, 400);
  color: var(--fg-dim);
}

p { margin: 0; color: var(--fg-dim); }
/* Lead Paragraph — Capabilities intro copy. Reads from the Lead sliders.
   Full-strength foreground color (matches body text) so it reads as a
   primary statement under the section title. */
.lede {
  font-family: var(--text-lead-family);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-spacing);
  color: var(--fg);
  max-width: 60ch;
}

/* -------- NAV -------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: color-mix(in oklab, var(--bg) 65%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--text-title-weight, 600);
  font-size: 18px;
  letter-spacing: 0.04em;
  /* Logo intentionally larger/bolder than nav links — kept independent. */
}
.nav-logo .dot {
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--accent);
}
/* UI Text — top nav menu links. */
.nav-links {
  display: flex; gap: 28px;
  font-family: var(--text-ui-family);
  font-size: var(--text-ui-size);
  font-weight: var(--text-ui-weight);
  line-height: var(--text-ui-line);
  letter-spacing: var(--text-ui-spacing);
  color: var(--fg-dim);
}
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--fg); }

/* Eyebrow Label — small uppercase pill button. */
.nav-cta {
  font-family: var(--text-label-family);
  font-size: 12px;
  font-weight: var(--text-ui-weight, 500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 100px;
  color: #fff;
  background: var(--accent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--accent); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  padding: 9px 8px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--fg);
  transition: transform .2s ease, opacity .2s ease;
}
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile {
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 24px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 18px;
  z-index: 50;
}
.nav-mobile a { color: var(--fg-dim); }
.nav-mobile a.nav-cta { align-self: flex-start; color: #fff; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 861px) {
  .nav-mobile { display: none !important; }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .display-1 { font-size: clamp(38px, 11vw, 64px) !important; }
  .display-2 { font-size: clamp(28px, 8vw, 48px) !important; }
  .footer { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* -------- HERO -------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: clamp(40px, 8vh, 96px);
  padding-top: clamp(96px, 14vh, 140px);
  overflow: hidden;
  isolation: isolate;
}

.hero-spline {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Anchored slightly past the right edge so the robot lands between
     the headline on the left and the side-nav rail on the right. */
  right: -3%;
  width: 65%;
  z-index: -1;
  pointer-events: none;
}
/* Hide the Spline runtime's "Built with Spline" attribution badge. */
.hero-spline a[href*="spline.design"] { display: none !important; }

@media (max-width: 900px) {
  .hero-spline { right: -20%; width: 100%; opacity: 0.55; }
}
@media (max-width: 760px) {
  /* Push the hero text content down to sit at the robot's upper chest area
     (~38vh from the top of the hero) so it's not over the robot's face.
     Robot stays in its original position. */
  .hero { padding-top: 38vh; }
}
.hero-spline canvas { width: 100% !important; height: 100% !important; display: block; }

.hero-spline::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 35%),
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  /* Two masks intersected: the existing soft radial vignette + a bottom
     fade so the vertical/horizontal grid lines dissolve into the section
     transition rather than ending at a hard edge. */
  mask-image:
    radial-gradient(ellipse at center, transparent 18%, black 65%),
    linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
  -webkit-mask-image:
    radial-gradient(ellipse at center, transparent 18%, black 65%),
    linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-top {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-headline {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Mega Headline — the giant hero text. */
.hero-mark {
  font-family: var(--text-mega-family);
  font-size: var(--text-mega-size);
  font-weight: var(--text-mega-weight);
  line-height: var(--text-mega-line);
  letter-spacing: var(--text-mega-spacing);
  color: var(--fg);
  margin: 0;
  text-transform: uppercase;
  max-width: 14ch;
}
.hero-mark-stack {
  font-size: var(--text-mega-size);
  line-height: var(--text-mega-line);
}
.hero-mark-line {
  /* Single-line hero variant — slightly larger and looser than stacked. */
  font-size: clamp(50px, 9vw, 124px);
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--fg);
}
.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
/* Eyebrow Label variant — extra-wide letter-spacing for hero tagline. */
.hero-tagline-text {
  font-family: var(--text-label-family);
  font-size: var(--tagline-sub-size, clamp(13px, 1.3vw, 18px));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: var(--text-label-weight, 500);
}

/* Body Paragraph (large) — sub-headline copy under the hero mark. */
.hero-sub {
  margin-top: 28px;
  max-width: 600px;
  font-size: var(--text-body-size-large);
  color: var(--fg-dim);
  line-height: var(--text-body-line);
}

/* Hero Sub — Lead-paragraph styled supporting line that pulls the
   guarantee into the body of the hero rather than burying it as a chip. */
.hero-sub {
  margin-top: 28px;
  margin-bottom: 0;
  font-family: var(--text-lead-family);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-spacing);
  color: var(--fg-dim);
  max-width: 56ch;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Eyebrow Label — micro guarantee text under hero CTA. */
.hero-micro {
  margin-top: 18px;
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight, 400);
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-micro { white-space: normal; max-width: 60ch; }
}


/* -------- GUARANTEE SEAL -------- */
.guarantee-seal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 12px 18px 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-2) 50%, transparent);
  /* Eyebrow Label — guarantee badge text. */
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight, 400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  position: relative;
}
.guarantee-seal::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--accent), transparent 40%, transparent 60%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.45;
  pointer-events: none;
}
.guarantee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.guarantee-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  /* Pill morphs into a slightly less-rounded rectangle so the text can
     wrap to two lines without looking weird in a tight oval shape. The
     shield icon stays vertically centered with the wrapped text block,
     and the text itself is centered so the seal feels balanced. */
  .guarantee-seal {
    font-size: 10.5px;
    padding: 12px 18px;
    border-radius: 18px;
    align-items: center;
  }
  .guarantee-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
    text-align: center;
  }
}

/* -------- BUTTONS -------- */
/* UI Text — primary buttons. Uses --font-button (controlled by Tweaks panel)
   for family; size/weight come from the UI Text style. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-button, var(--font-display));
  font-size: 15px;
  font-weight: var(--text-ui-weight, 500);
  padding: 16px 24px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
  letter-spacing: -0.01em;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px -8px var(--accent); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); background: color-mix(in oklab, var(--fg) 6%, transparent); }
.btn-white { background: #FFFFFF; border-color: #FFFFFF; color: #0A0A0B; }
.btn-white:hover { background: #F4F4F4; border-color: #F4F4F4; transform: translateY(-1px); box-shadow: 0 12px 40px -8px rgba(0,0,0,0.18); }
.btn .arrow { width: 18px; height: 18px; transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* -------- SECTION SHELL -------- */
/* No hard dividers between sections. Sections alternate between bg (beige)
   and bg-2 (white); each one's top 280px crossfades from the previous
   section's color into its own, so the page reads as a continuous flow
   instead of a stack of cards with rules between them. */
.section {
  position: relative;
  padding: clamp(80px, 12vh, 140px) 0;
  overflow: hidden;
}
@media (max-width: 720px) {
  .section { padding: 56px 0; }
}

/* Section bg alternation. Order on the page (after the May-2026 reorder):
     Problem  → Results  → How  → About  → Capabilities  → Why  → Pricing  → FAQ
   Each section's gradient picks up where the previous left off so the page
   reads as one continuous wash from cream to white and back. Edit these
   class lists if the section order changes again. */
.section.section-problem,
.section.section-how,
.section.section-caps,
.section.section-pricing {
  background: linear-gradient(to bottom, var(--bg) 0px, var(--bg-2) 280px);
}
.section.section-results,
.section.section-about,
.section.section-why,
.section.section-faq {
  background: linear-gradient(to bottom, var(--bg-2) 0px, var(--bg) 280px);
}

.section-head {
  margin-bottom: 64px;
}

/* Section Title (the rule on .display-2 above already maps to the variables;
   this scoped block only forces text-transform off so the global header case
   tweak doesn't uppercase section titles, and re-applies the variables in
   case any old override is present in cached CSS). */
.section-head .display-2,
.section-head .display-2 * {
  text-transform: none !important;
}
.section-head .display-2 {
  font-family: var(--text-title-family);
  font-size: var(--text-title-size);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-line);
  letter-spacing: var(--text-title-spacing);
}
/* Lead Paragraph — soft second line inside a section title (e.g. the
   Why section sub-headline). Reads from the Lead sliders.
   Full-strength foreground so it reads as a primary statement, not a label. */
.section-head .display-2 .display-2-soft {
  display: block;
  margin-top: 8px;
  font-family: var(--text-lead-family);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-spacing);
  color: var(--fg);
}

/* -------- TOOLS MARQUEE -------- */
.tool-marquee {
  position: relative;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: #FFFFFF;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
[data-theme="dark"] .tool-marquee { background: #F5F5F2; }
.tool-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: toolRoll 42s linear infinite;
}
.tool-marquee:hover .tool-marquee-track { animation-play-state: paused; }
/* Spacing lives on each pill (margin-right) rather than on the track (gap) so
   the duplicated content has perfect rhythm at the -50% seam. With flex `gap`,
   the seam is a half-gap short and produces a visible snap each loop. */
.tool-pill {
  display: inline-flex;
  align-items: center;
  height: 56px;
  flex: 0 0 auto;
  margin-right: 112px;
  opacity: 0.85;
  transition: opacity .25s ease;
}
.tool-pill:hover { opacity: 1; }
.tool-pill-img {
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@keyframes toolRoll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@media (max-width: 640px) {
  .tool-marquee { padding: 20px 0; }
  .tool-pill { height: 44px; margin-right: 72px; }
  .tool-pill-img { height: 28px; max-width: 140px; }
}

/* -------- TOOLS SECTION (logo bar) -------- */
.section-tools {
  position: relative;
  padding: clamp(56px, 8vh, 88px) 0;
  background: var(--bg);
  overflow: hidden;
}
.tools-head {
  text-align: center;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Tools title is a Section Title — pulls from --text-title-* so the
   "Section title (px)" tweak resizes it together with all other section
   titles. The text-transform override matches .section-head .display-2
   (always proper case, immune to the global Body/Header case toggles). */
.tools-title,
.tools-title * {
  text-transform: none !important;
}
.tools-title {
  font-family: var(--text-title-family);
  font-size: var(--text-title-size);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-line);
  letter-spacing: var(--text-title-spacing);
  color: var(--fg);
  white-space: nowrap;
  margin: 0;
}
.tools-closing {
  margin: 32px auto 0;
  text-align: center;
  font-family: var(--text-label-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight, 400);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
  max-width: 640px;
}
@media (prefers-reduced-motion: reduce) {
  .tool-marquee-track { animation-play-state: paused; }
}
@media (max-width: 640px) {
  .section-tools { padding: clamp(40px, 6vh, 64px) 0; }
  .tools-head { margin-bottom: 20px; }
  .tools-title {
    /* Allow wrap on small screens so it stays readable instead of overflowing. */
    white-space: normal;
    text-wrap: balance;
  }
  .tools-closing { margin-top: 24px; }
}

/* -------- legacy tool grid (unused) -------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
  gap: 1px;
}
.tool-cell {
  background: var(--bg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 150px;
  transition: background .25s ease;
}
.tool-cell:hover { background: var(--bg-2); }
.tool-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--fg);
  opacity: 0.85;
}
.tool-cell:hover .tool-mark { color: var(--accent); opacity: 1; }
.tool-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--text-body-weight, 500);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.tool-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--text-label-weight, 400);
  color: var(--fg-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}
.tool-closing {
  margin-top: 32px;
  font-size: 15px;
  font-weight: var(--text-body-weight, 400);
  color: var(--fg-dim);
  max-width: 60ch;
}
@media (max-width: 1100px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .tool-grid { grid-template-columns: repeat(2, 1fr); } .tool-cell { padding: 22px 16px; min-height: 130px; } }

/* -------- PROBLEM (split-screen) -------- */
/* Title + lead span the full width; below them the body splits into a
   left "pain" column (3 strikethrough bullets) and a right dark "promise"
   panel (bold sentence + animated 4-node SVG flow). The dark panel uses
   var(--fg) / var(--bg) so it inverts cleanly in dark mode. */
.problem-head {
  margin-bottom: 48px;
  max-width: 880px;
}
.problem-title {
  text-align: left !important;
  max-width: 100%;
  font-family: var(--text-title-family);
  font-size: var(--text-title-size);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-line);
  letter-spacing: var(--text-title-spacing);
  text-transform: none;
}
.problem-lead {
  margin: 20px 0 0;
  max-width: 60ch;
  font-family: var(--text-lead-family);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-spacing);
  color: var(--fg-dim);
}

.problem-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.problem-pain {
  padding: 24px 4px;
  display: flex;
  align-items: center;
}
.problem-strikes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.problem-strikes li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.problem-strike-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.problem-strike-text {
  font-size: var(--text-body-size-large);
  font-weight: var(--text-body-weight, 400);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
}

.problem-promise {
  position: relative;
  background: var(--fg);
  /* Layered: subtle radial accent glow in the top-right + the base dark fill.
     Adds depth without being a "breathing" gradient. */
  background-image:
    radial-gradient(ellipse 80% 80% at 90% 10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 70% at 0% 100%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%);
  background-color: var(--fg);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  overflow: hidden;
}
/* Promise reads as a Lead Paragraph (pulls from --text-lead-* vars) so the
   Tweaks panel's "Lead paragraph (px)" / "Lead font" controls resize it
   alongside other lead copy on the page. */
.problem-promise-text {
  font-family: var(--text-lead-family);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-spacing);
  color: inherit;
  margin: 0;
  max-width: 28ch;
  position: relative;
  z-index: 1;
}
.problem-flow {
  width: 100%;
  position: relative;
  z-index: 1;
}
.problem-flow-svg {
  width: 100%;
  height: auto;
  display: block;
  /* currentColor drives the dot grid + node halo. Set to a low-alpha bg
     tint so the texture sits behind the nodes without competing. */
  color: color-mix(in oklab, var(--bg) 28%, transparent);
}
.problem-flow-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1);
}
/* Lines draw left → right, sequenced so the reader reads the path. */
.problem-flow.in .problem-flow-line[data-d="0"] { stroke-dashoffset: 0; transition-delay: .25s; }
.problem-flow.in .problem-flow-line[data-d="1"] { stroke-dashoffset: 0; transition-delay: .80s; }
.problem-flow.in .problem-flow-line[data-d="2"] { stroke-dashoffset: 0; transition-delay: 1.35s; }
.problem-flow-node {
  opacity: 0;
  transform-origin: center;
  transition: opacity .45s ease;
}
.problem-flow.in .problem-flow-node[data-d="0"] { opacity: 1; transition-delay: .05s; }
.problem-flow.in .problem-flow-node[data-d="1"] { opacity: 1; transition-delay: .60s; }
.problem-flow.in .problem-flow-node[data-d="2"] { opacity: 1; transition-delay: 1.15s; }
.problem-flow.in .problem-flow-node[data-d="3"] { opacity: 1; transition-delay: 1.70s; }
.problem-flow-label {
  font-family: var(--font-body);
  /* viewBox units, not pixels — bumped to 14 so labels stay readable
     when the SVG scales down on narrow viewports. */
  font-size: 14px;
  font-weight: var(--text-body-weight, 500);
  letter-spacing: 0.01em;
  fill: color-mix(in oklab, var(--bg) 80%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .problem-flow-line {
    stroke-dashoffset: 0;
    transition: none;
  }
  .problem-flow-node {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 900px) {
  .problem-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .problem-promise {
    padding: 36px 28px;
  }
}
@media (max-width: 480px) {
  .problem-promise {
    padding: 28px 22px;
  }
}

/* -------- HOW IT WORKS (horizontal stepper) -------- */
/* Three-step journey on a single track. Per step: stage icon at top → red
   number node → time stamp → stage name → title → body. A horizontal
   connecting line draws between the nodes on scroll-in. Mobile rotates
   to vertical (line down the left margin). */
.how-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 16px;
  padding: 16px 0 32px;
}
.how-stepper-line {
  position: absolute;
  /* 16px stepper padding-top + 24px (half of 48px node) = 40px → line passes
     through the vertical center of each icon node. */
  top: 40px;
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .15s;
  z-index: 0;
}
.how-stepper.in .how-stepper-line {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .how-stepper-line {
    transition: none;
    transform: scaleX(1);
  }
}
.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Per-child margins (rather than a flex gap) so the spacing scales with
     hierarchy: a generous gap below the icon node, tighter gaps between
     stage / title / body. */
}
/* Icon node — red circle holding the stage icon (Compass / Blocks / Pulse).
   Sits on the connecting line; the box-shadow halo in section bg masks the
   line so it appears to stop cleanly at each node. */
.how-step-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  color: #fff;
  box-shadow: 0 0 0 8px var(--bg);
}
.how-step-node svg {
  width: 20px;
  height: 20px;
}
.how-step-stage {
  /* Eyebrow Label group — uses the --text-label-* variables so the
     "Eyebrow label (px)" tweak resizes it alongside other eyebrows. */
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  margin-top: 28px;
  margin-bottom: 0;
}
.how-step-title {
  font-family: var(--text-card-family);
  font-size: var(--text-card-size);
  font-weight: var(--text-title-weight, 500);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 10px 0 0;
  max-width: 22ch;
}
.how-step-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
  margin: 14px auto 0;
  max-width: 30ch;
}

@media (max-width: 720px) {
  .how-stepper {
    grid-template-columns: 64px 1fr;
    gap: 0 20px;
    padding-left: 0;
  }
  .how-stepper-line {
    top: 0;
    bottom: 0;
    left: 32px; /* matches the horizontal center of the 56px node in 64px col */
    right: auto;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .15s;
  }
  .how-stepper.in .how-stepper-line {
    transform: scaleY(1);
  }
  .how-step {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: start;
    text-align: left;
    column-gap: 16px;
    padding: 20px 0;
    gap: 6px;
  }
  .how-step-node {
    grid-column: 1;
    grid-row: 1 / span 3;
    justify-self: center;
    /* Top-align icon with the stage label by giving the node the same
       top offset as .how-step-stage. */
    align-self: start;
    margin-top: 6px;
  }
  .how-step-stage {
    grid-column: 2;
    grid-row: 1;
    margin-top: 6px;
  }
  .how-step-title {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin-top: 4px;
  }
  .how-step-body {
    grid-column: 2;
    grid-row: 3;
    max-width: none;
    margin: 4px 0 0;
  }
}

.how-guarantee {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

/* -------- CAPABILITIES -------- */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cap-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.cap-card:hover { border-color: var(--accent); transform: translateY(-2px); }
/* Capability icon — sits at top-left, gives at-a-glance category recognition.
   Soft halo background so it reads as an "anchor" without needing a fill. */
.cap-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  margin-bottom: 18px;
  transition: background .25s ease, transform .25s ease;
}
.cap-card:hover .cap-card-icon {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
}
/* Eyebrow Label — capability card tag (e.g. "Reporting"). */
.cap-card .id {
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  color: var(--fg-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Card Title — capability card heading. */
.cap-card h3 {
  font-family: var(--text-card-family);
  font-size: var(--text-card-size);
  font-weight: var(--text-card-weight);
  line-height: var(--text-card-line);
  letter-spacing: var(--text-card-spacing);
  text-transform: var(--text-card-case);
  margin-top: 14px;
}
/* Body Paragraph — capability card description. */
.cap-card p {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line);
  margin-top: 10px;
  text-align: justify;
}
/* Body Paragraph — closing line after the capabilities grid.
   No max-width so the sentence runs on a single line at desktop widths;
   it'll naturally wrap on narrow screens. */
.caps-closing {
  margin-top: 32px;
  font-family: var(--text-label-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight, 400);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
}
@media (max-width: 1100px) { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .caps-grid { grid-template-columns: 1fr; } }

/* -------- RESULTS -------- */
/* 2 + 3 mosaic — top row holds 2 hero cards (1.5x scale), bottom row holds
   3 supporting cards. Asymmetric layout signals which numbers carry the
   most weight. Falls back to single column under 720px. */
.results-mosaic {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.results-mosaic-hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.results-mosaic-small {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.result-card-hero {
  padding: 56px 44px 44px;
}
.result-card-hero .result-stat {
  font-size: clamp(56px, 6.5vw, 96px);
}
.result-card-hero .result-rule {
  width: 56px;
  height: 3px;
}
.result-card-hero .result-body {
  font-size: var(--text-body-size-large);
  max-width: 56ch;
}
.results-footer {
  margin: 32px auto 0;
  max-width: 70ch;
  text-align: center;
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight, 500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.6;
}
@media (max-width: 1000px) {
  .results-mosaic-small { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .results-mosaic-hero,
  .results-mosaic-small { grid-template-columns: 1fr; }
  .result-card-hero { padding: 36px 28px 28px; }
}

.result-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition: border-color .3s ease, transform .3s ease;
}
.result-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
/* Big Number — Results stat number. Shares --text-num-size with
   .why-num so a single slider controls both. */
.result-stat {
  font-family: var(--text-num-family);
  font-size: var(--text-num-size);
  font-weight: var(--text-num-weight);
  line-height: var(--text-num-line);
  letter-spacing: var(--text-num-spacing);
  font-variant-numeric: tabular-nums;
}
/* Eyebrow Label — Results unit caption ("SAVED EVERY MONTH"). */
.result-unit {
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  letter-spacing: var(--text-label-spacing);
  color: var(--fg-mute);
  text-transform: uppercase;
  margin-top: 14px;
}
.result-rule {
  height: 2px;
  width: 40px;
  margin-top: 20px;
}
/* Body Paragraph — Results card description. */
.result-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
  margin-top: 18px;
  text-align: justify;
}

/* -------- WHY -------- */
/* -------- WHY (vertical spine timeline) -------- */
/* Replaces the old .why-list / .why-row stack. Items zig-zag around a
   1px central spine that draws downward when the section enters viewport.
   Mobile collapses to a single column with the spine on the left margin. */
.why-spine {
  position: relative;
  margin: 16px auto 0;
  max-width: 980px;
}
.why-spine-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .15s;
}
.why-spine.in .why-spine-line {
  transform: translateX(-50%) scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .why-spine-line { transition: none; transform: translateX(-50%) scaleY(1); }
}
.why-spine-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  /* flex-start so node lines up with the icon at the top of each item.
     align-items: center drifts because rows have different heights when
     bodies are different lengths. */
  align-items: flex-start;
  gap: 24px;
  padding: 28px 0;
}
.why-spine-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Both grid children pinned to grid-row: 1 explicitly. Without this, when
   content has grid-column: 3 (right-side rows), auto-flow's cursor advances
   past col 3 and the node ends up auto-placed at row 2 col 2 — which is why
   the odd-numbered nodes were drifting below their content. */
.why-spine-row-right .why-spine-content {
  grid-column: 3;
  grid-row: 1;
  align-items: flex-start;
  text-align: left;
}
.why-spine-row-left .why-spine-content {
  grid-column: 1;
  grid-row: 1;
  align-items: flex-end;
  text-align: right;
}
/* Node and icon wrapper share the same 44px footprint so their centers
   line up across the spine — the icon on the row's content side, the
   number node in the middle column. */
.why-spine-node {
  grid-column: 2;
  grid-row: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  font-family: var(--text-num-family);
  color: #fff;
  font-weight: var(--text-num-weight, 600);
  font-size: 13px;
  letter-spacing: 0.04em;
  /* Halo in the section bg color so the spine line "stops" at the node
     rather than running through it visibly. */
  box-shadow: 0 0 0 6px var(--bg-2);
}
.why-spine-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  flex: 0 0 auto;
}
.why-spine-title {
  font-family: var(--text-card-family);
  font-size: var(--text-card-size);
  font-weight: var(--text-title-weight, 500);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
.why-spine-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
  margin: 0;
  max-width: 38ch;
}

@media (max-width: 720px) {
  .why-spine { margin-top: 8px; }
  /* Spine line centered in the 56px first column (28px from the left). */
  .why-spine-line { left: 28px; }
  .why-spine-row,
  .why-spine-row-right,
  .why-spine-row-left {
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 20px 0;
  }
  .why-spine-row-right .why-spine-content,
  .why-spine-row-left .why-spine-content {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }
  .why-spine-node {
    grid-column: 1;
    width: 40px;
    height: 40px;
    /* Center the 40px node inside the 56px column so its center sits at
       28px (matching the spine-line at left: 28px). */
    margin: 0 auto;
    justify-self: center;
    font-size: 12px;
  }
  .why-spine-body { max-width: none; }
}

/* -------- ABOUT -------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: 48px; }
  /* Trim the offset shadow so it doesn't push the portrait against the
     section's right edge on narrow viewports. */
  .about-portrait { box-shadow: 10px 10px 0 0 var(--accent); transform: rotate(-1deg); }
}
@media (max-width: 480px) {
  .about-portrait { box-shadow: 8px 8px 0 0 var(--accent); }
}

.about-portrait {
  aspect-ratio: 4/5;
  background-color: var(--bg-2);
  background-image: url('assets/Portrait.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  /* Editorial offset shadow + slight rotation — feels magazine-y, not
     corporate. Static (no hover transition). */
  box-shadow: 14px 14px 0 0 var(--accent);
  transform: rotate(-1.2deg);
  transform-origin: center;
}

/* Eyebrow Label — About section byline (founder name + role).
   Size now reads from the Eyebrow Label slider in the tweaks panel. */
.about-byline {
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
/* Credential pills — 3 small mono-caps tags sitting under the byline.
   Quick proof points: years of experience, location, what they do. */
.about-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.about-credential {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--text-label-family);
  font-size: 11px;
  font-weight: var(--text-label-weight, 500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
/* The bio column itself enforces the right-edge alignment. Children
   (lead, body, quote) take full width, so they all line up exactly —
   ch units would diverge per element since each has a different font-size. */
.about-text {
  max-width: 540px;
}
/* Lead Paragraph — About first paragraph. Justified to match the bio
   paragraphs below it. */
.about-lead {
  font-family: var(--text-lead-family);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-spacing);
  color: var(--fg);
  margin-bottom: 16px;
  text-align: justify;
}
/* Body Paragraph — About bio paragraphs. Size now follows the Body slider;
   prose line-height keeps the multi-paragraph reading relaxed.
   Justified alignment for the long-form bio reading flow. */
.about-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-prose);
  color: var(--fg-dim);
  margin-bottom: 14px;
  text-align: justify;
}


/* -------- PRICING -------- */
/* Three project bands. Middle card is "Most Common" — shown with an accent
   border + badge to draw the eye. Hover lifts each card slightly to match
   the rest of the card-based sections. Mobile collapses to a single column. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pricing-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pricing-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.pricing-card-popular {
  border-color: var(--accent);
  border-width: 2px;
  /* Adjust top padding so the badge doesn't crowd the tier label. */
  padding-top: 44px;
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--text-label-family);
  font-size: 11px;
  font-weight: var(--text-label-weight, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  transition: background .25s ease;
}

/* Hover-aware accent. The middle ("Most Common") card carries red by
   default, but the moment the reader enters the pricing area we go
   neutral so we're not leaning on them — let them choose. Hover any
   card and that card lights up red; hover the popular one and the
   pill snaps back to red too. */
.pricing-grid:hover .pricing-card-popular {
  border-color: var(--line);
}
.pricing-grid:hover .pricing-card-popular .pricing-badge {
  background: var(--fg-mute);
}
.pricing-grid:hover .pricing-card-popular:hover {
  border-color: var(--accent);
}
.pricing-grid:hover .pricing-card-popular:hover .pricing-badge {
  background: var(--accent);
}
.pricing-tier {
  font-family: var(--text-label-family);
  font-size: 13px;
  font-weight: var(--text-label-weight, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.pricing-range {
  font-family: var(--text-num-family);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: var(--text-num-weight, 600);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pricing-meta {
  font-family: var(--text-label-family);
  font-size: 12px;
  font-weight: var(--text-label-weight, 400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pricing-rule {
  height: 2px;
  width: 40px;
  margin-top: 4px;
}
.pricing-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight, 400);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
  margin: 0;
}
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight, 400);
  line-height: 1.45;
  color: var(--fg);
}
.pricing-check {
  flex-shrink: 0;
  margin-top: 3px;
}
.pricing-closing {
  margin: 56px auto 0;
  text-align: center;
  font-family: var(--text-label-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight, 400);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
  max-width: 60ch;
}
@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: 1fr; }
  /* Source order is preserved — Quick Win → System Build (Most Common) →
     Multi-System — so the popular tier sits in the middle of the stack. */
}
@media (max-width: 480px) {
  .pricing-card { padding: 28px 22px 22px; }
  .pricing-card-popular { padding-top: 38px; }
  .pricing-range { font-size: clamp(26px, 8vw, 36px); }
}

/* -------- FAQ -------- */
.faq {
  display: flex;
  flex-direction: column;
}
/* Each .faq-group wraps a category header + its questions. The top
   border on the category sets the visual divider between groups. */
.faq-group {
  display: flex;
  flex-direction: column;
}
.faq-group + .faq-group {
  margin-top: 36px;
}
.faq-category {
  /* Eyebrow Label group — uses --text-label-* variables so it scales with
     the Eyebrow label slider in the Tweaks panel. */
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight, 600);
  line-height: var(--text-label-line);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.faq-group .faq-item:first-of-type {
  border-top: 0;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  cursor: pointer;
}
/* Card Title — FAQ question. */
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--text-card-family);
  font-size: var(--text-card-size);
  font-weight: var(--text-card-weight);
  line-height: var(--text-card-line);
  letter-spacing: var(--text-card-spacing);
  text-transform: var(--text-card-case);
  color: var(--fg);
}
/* UI Text — FAQ +/- toggle button. */
.faq-toggle {
  width: 32px; height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .3s ease;
  font-family: var(--text-label-family);
  font-size: 18px;
  font-weight: var(--text-label-weight, 400);
}
.faq-item.open .faq-toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1), margin-top .35s ease;
}
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; margin-top: 16px; }
/* Body Paragraph (prose line-height) — FAQ answer. */
.faq-a {
  overflow: hidden;
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-prose);
  color: var(--fg-dim);
  max-width: 80ch;
}

/* Contact card — sits below the FAQ list as a low-friction escape hatch
   for readers whose question wasn't answered. Mailto link, no form. */
.faq-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.faq-contact:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.faq-contact-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-contact-text strong {
  font-family: var(--text-card-family);
  font-size: var(--text-card-size);
  font-weight: var(--text-title-weight, 500);
  color: var(--fg);
}
.faq-contact-text span {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight, 400);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
}
.faq-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--text-label-family);
  font-size: 13px;
  font-weight: var(--text-ui-weight, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .faq-contact {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 22px;
  }
}

/* -------- CTA -------- */
.cta {
  position: relative;
  padding: clamp(80px, 14vh, 160px) 0;
  text-align: center;
  background: linear-gradient(to bottom, var(--bg-2) 0px, var(--bg) 280px);
  overflow: hidden;
}
@media (max-width: 720px) {
  .cta { padding: 64px 0; }
}
/* Eyebrow Label — CTA pre-heading. */
.cta-pre {
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 56px;
}
/* Mega Headline (CTA size variant) — uses the title family (Inter) and the
   smaller cta size, tracking the hero size automatically.
   Tighter line-height (1.0) since the headline is now broken onto 3 lines. */
.cta h2 {
  font-family: var(--text-title-family);
  font-size: var(--text-mega-size-cta);
  font-weight: var(--text-mega-weight);
  line-height: 1;
  letter-spacing: var(--text-mega-spacing);
  text-transform: uppercase;
}
/* Body Paragraph (large) — CTA description. */
.cta-body {
  margin: 32px auto 0;
  max-width: 60ch;
  font-size: var(--text-body-size-large);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line);
  color: var(--fg-dim);
}
/* Lead Paragraph (smaller variant) — CTA emphasis line. */
.cta-body-strong {
  margin: 12px auto 0;
  max-width: 60ch;
  font-family: var(--text-lead-family);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--text-lead-weight, 500);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-spacing);
  color: var(--fg);
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 56px;
  flex-wrap: wrap;
}
/* Eyebrow Label — CTA micro-copy at the bottom of the section. */
.cta-micro {
  margin-top: 56px;
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  letter-spacing: 0.06em;
  color: var(--fg-mute);
}
.cta .guarantee-seal { margin-left: auto; margin-right: auto; }

/* Availability row — mono dot-separated line that signals scarcity ("we're
   not always open") without animation. Sits between the headline and the
   button cluster. */
.cta-availability {
  margin: 32px auto 0;
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight, 500);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* -------- STICKY MOBILE CTA -------- */
/* Slides up from the bottom of the viewport on phones once the reader
   passes ~35% scroll. Hides itself when the Final CTA section is in view
   (via IntersectionObserver in JS) so it doesn't double up. Desktop
   doesn't need it — there's no long off-screen CTA problem there. */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  z-index: 40;
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  display: none;
  pointer-events: none;
}
.mobile-cta.show {
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-cta-btn {
  width: 100%;
  justify-content: center;
}
@media (max-width: 768px) {
  .mobile-cta { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}

/* -------- FOOTER -------- */
/* Eyebrow Label — footer copyright + links. */
.footer {
  padding: 36px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.footer a { transition: color .2s ease; }
.footer a:hover { color: var(--fg); }

/* -------- SCROLL REVEALS -------- */
.reveal-pre {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal-pre.in {
  opacity: 1;
  transform: none;
}
.reveal-pre[data-d="1"] { transition-delay: .08s; }
.reveal-pre[data-d="2"] { transition-delay: .16s; }
.reveal-pre[data-d="3"] { transition-delay: .24s; }
.reveal-pre[data-d="4"] { transition-delay: .32s; }
.reveal-pre[data-d="5"] { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-pre, .reveal-pre.in { opacity: 1; transform: none; transition: none; }
}

/* -------- SIDE NAV (right-rail section index) -------- */
.side-nav {
  position: fixed;
  top: 50%;
  right: clamp(20px, 3vw, 36px);
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 46px;
  padding-right: 20px;
  pointer-events: auto;
}
.side-nav::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 0;
  width: 1px;
  background: var(--line-2);
}
.side-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  /* UI Text — right-rail section index labels. */
  font-family: var(--text-ui-family);
  font-size: var(--text-ui-size);
  font-weight: var(--text-ui-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transform-origin: right center;
  will-change: transform;
  /* font-size animates only when JS removes the inline transform; transform
     handles the live magnification, color/opacity ease independently. */
  transition: color .35s ease, opacity .35s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.side-nav-item:hover { color: var(--fg); }
.side-nav-tick {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: var(--fg-mute);
  border-radius: 0;
  transition: width .35s ease, height .35s ease, border-radius .35s ease, background .35s ease, box-shadow .35s ease;
  flex-shrink: 0;
}
.side-nav-item:hover .side-nav-tick { background: var(--fg); }
/* No dimming on scroll — the active item already stands out via scale +
   color, so non-active items stay at full brightness like in hover mode. */
.side-nav-item.active {
  font-size: 18px;
  letter-spacing: 0.16em;
  font-weight: var(--text-ui-weight, 500);
  opacity: 1;
}
.side-nav-item.active .side-nav-tick {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* CTA pill: shrink-to-content, outlined, no tick. Active state filled in
   accent (handled inline so the dynamic accent var cascades correctly). */
.side-nav-item.cta {
  align-self: flex-end;
  padding: 8px 18px;
  margin-top: 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: color .35s ease, opacity .35s ease, transform .18s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;
}
.side-nav-item.cta .side-nav-tick { display: none; }
.side-nav-item.cta:hover { color: var(--accent); border-color: var(--accent); }
.side-nav-item.cta.active {
  font-size: 14px;        /* keep the box compact even when active */
  letter-spacing: 0.18em; /* match base spacing rather than active 0.16em */
  font-weight: var(--text-ui-weight, 500);
}

@media (max-width: 1100px) {
  .side-nav { display: none; }
}

/* Thai script renders taller than Latin in IBM Plex Sans Thai. Bump
   line-height on prose-heavy elements only when lang=TH so vowel marks
   and tone marks have breathing room without inflating Latin layouts. */
html[data-lang="th"] body { line-height: 1.7; }
html[data-lang="th"] .hero-sub,
html[data-lang="th"] .lead,
html[data-lang="th"] p { line-height: 1.7; }
html[data-lang="th"] .hero-mark,
html[data-lang="th"] .hero-mark-stack,
html[data-lang="th"] .hero-mark-line { line-height: 1.05; }

/* Hero brand tagline ("YOUR WORKFLOWS / ON AUTOPILOT" + single-line variant)
   is English-only brand text. Force Latin font even in TH mode where the
   global font stacks are Thai-first. The html prefix raises specificity
   above the .hero-mark rule above. */
html .hero-mark {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* Language switcher — segmented pill, two variants:
   .lang-switch       → in-dock for SideNav (desktop)
   .lang-switch-float → fixed top-right (mobile only) */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  font-family: var(--font-button, var(--font-display));
  font-size: 11px;
  font-weight: var(--text-ui-weight, 600);
  letter-spacing: 0.12em;
  background: var(--bg);
}
.lang-switch button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  transition: background-color .18s ease, color .18s ease;
  min-width: 32px;
}
.lang-switch button:hover { color: var(--fg); }
.lang-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
}

/* SideNav placement — sits above the dock items. Hidden on the same
   breakpoint that hides the dock itself, so the floating mobile pill
   takes over below 1100px. */
.side-nav .lang-switch { margin-bottom: 14px; align-self: center; }

/* Floating mobile pill — shown only when SideNav is hidden. Top-right,
   above StickyMobileCTA, low visual weight so it doesn't compete with
   page content. */
.lang-switch-float {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
}
@media (max-width: 1100px) {
  .lang-switch-float { display: inline-flex; }
}

/* fallback for spline-off mode */
.hero-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 30% 70%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%),
    var(--bg);
  z-index: -2;
}