:root {
      --indigo:        oklch(42% 0.20 275);
      --indigo-light:  oklch(55% 0.18 275);
      --indigo-mid:    oklch(35% 0.20 275);
      --indigo-dark:   oklch(24% 0.18 275);
      --indigo-deeper: oklch(16% 0.14 278);
      --amber:         oklch(70% 0.18 72);
      --amber-dark:    oklch(59% 0.20 68);
      /* Amber for TEXT on a light ground. --amber-dark is tuned for fills and
         only reaches ~4:1 as 12px text on the pale amber badge, so small amber
         labels use this deeper tone to clear WCAG AA (~5:1). */
      --amber-text:    oklch(42% 0.14 56);
      --amber-glow:    oklch(70% 0.18 72 / 0.22);
      --amber-subtle:  oklch(70% 0.18 72 / 0.10);

      --bg:        oklch(98.5% 0.005 80);
      --bg-2:      oklch(96.5% 0.008 80);
      --surface:   oklch(100% 0 0);
      --border:    oklch(90% 0.008 90);
      --border-2:  oklch(85% 0.010 90);

      --text:      oklch(18% 0.015 270);
      --text-2:    oklch(38% 0.012 270);
      --text-3:    oklch(56% 0.008 270);
      /* Tertiary text for SMALL labels on the pale bands. --text-3 is the
         app's shared token and stays as-is (one token set), but it measures
         4.21:1 against --bg-2 and 4.46:1 against --bg — under AA for normal
         text, and these labels are 11-13px. Same purpose-built-token pattern
         --amber-text uses: 5.43:1 on --bg-2, 6.01:1 on white. */
      --text-3-aa: oklch(50% 0.010 275);

      --r:  10px;
      --r-lg: 16px;
      --r-xl: 24px;
      --ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--ui);
      font-size: 16px;
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ===== Nav ===== */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: oklch(16% 0.14 278 / 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid oklch(100% 0 0 / 0.08);
    }
    .nav-inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; color: inherit;
    }
    .logo-mark {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--amber);
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .logo-mark svg { display: block; }
    .logo-name {
      font-size: 17px; font-weight: 700;
      color: oklch(97% 0.004 80);
      letter-spacing: -0.02em;
    }
    .logo-name span { color: var(--amber); }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .nav-link {
      font-size: 14px; font-weight: 500;
      color: oklch(75% 0.008 270);
      text-decoration: none;
      transition: color .15s;
    }
    .nav-link:hover { color: oklch(97% 0.004 80); }
    .nav-link-signout { background: none; border: none; cursor: pointer; font: inherit; }
    .nav-group-divider { display: none; }
    .btn-nav {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 0 16px; height: 36px;
      background: var(--amber); color: var(--indigo-deeper);
      font-size: 14px; font-weight: 700;
      border-radius: 8px; text-decoration: none;
      letter-spacing: -0.01em;
      transition: background .15s, transform .08s;
      white-space: nowrap;
    }
    .btn-nav:hover { background: var(--amber-dark); }
    .btn-nav:active { transform: translateY(1px); }

    /* ===== Hero ===== */
    .hero {
      background: var(--indigo-deeper);
      padding: 140px 24px 80px;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 40%, oklch(42% 0.20 275 / 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 70%, oklch(70% 0.18 72 / 0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero-inner {
      max-width: 1140px; margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      position: relative; z-index: 1;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 5px 12px;
      background: var(--amber-subtle);
      border: 1px solid var(--amber-glow);
      border-radius: 100px;
      font-size: 12.5px; font-weight: 600;
      color: var(--amber);
      letter-spacing: 0.02em;
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .hero-badge::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--amber);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.75); }
    }
    .hero h1 {
      font-size: clamp(38px, 5.2vw, 60px);
      font-weight: 800;
      line-height: 1.06;
      letter-spacing: -0.04em;
      color: oklch(97% 0.004 80);
      margin: 0 0 20px;
      text-wrap: balance;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--amber);
    }
    .hero-sub {
      font-size: clamp(16px, 2vw, 18px);
      color: oklch(72% 0.010 270);
      line-height: 1.65;
      max-width: 480px;
      margin: 0 0 36px;
    }
    .hero-actions {
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    }
    .btn-hero {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0 28px; height: 52px;
      background: var(--amber); color: var(--indigo-deeper);
      font-size: 16px; font-weight: 700;
      border-radius: 12px; text-decoration: none;
      border: none; cursor: pointer;
      letter-spacing: -0.01em;
      box-shadow: 0 4px 24px var(--amber-glow), 0 1px 0 oklch(100% 0 0 / 0.2) inset;
      transition: background .15s, transform .08s, box-shadow .15s;
      white-space: nowrap;
    }
    .btn-hero:hover {
      background: var(--amber-dark);
      box-shadow: 0 6px 32px var(--amber-glow), 0 1px 0 oklch(100% 0 0 / 0.2) inset;
    }
    .btn-hero:active { transform: translateY(1px); }
    .btn-hero-ghost {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0 20px; height: 52px;
      border: 1px solid oklch(100% 0 0 / 0.16);
      color: oklch(80% 0.008 270);
      background: transparent;
      font-size: 15px; font-weight: 500;
      border-radius: 12px; text-decoration: none;
      transition: border-color .15s, color .15s;
      white-space: nowrap;
    }
    .btn-hero-ghost:hover {
      border-color: oklch(100% 0 0 / 0.32);
      color: oklch(97% 0.004 80);
    }
    .hero-proof {
      margin-top: 28px;
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; color: oklch(66% 0.008 270); /* 55% was 3.89:1 on the dark hero */
    }
    .hero-proof-dot { color: oklch(40% 0.008 270); }

    /* ===== App Mockup ===== */
    .mockup-frame {
      position: relative;
      transform: perspective(1400px) rotateX(6deg) rotateY(-8deg) rotateZ(1deg);
      transform-style: preserve-3d;
      border-radius: 14px;
      overflow: hidden;
      box-shadow:
        0 60px 100px -20px oklch(0% 0 0 / 0.6),
        0 0 0 1px oklch(100% 0 0 / 0.08),
        0 0 80px -10px oklch(42% 0.20 275 / 0.4);
    }
    .mockup-chrome {
      background: oklch(20% 0.12 278);
      padding: 10px 14px 8px;
      display: flex; align-items: center; gap: 8px;
      border-bottom: 1px solid oklch(100% 0 0 / 0.08);
    }
    .chrome-dots { display: flex; gap: 5px; }
    .chrome-dot {
      width: 10px; height: 10px; border-radius: 50%;
    }
    .chrome-dot:nth-child(1) { background: oklch(62% 0.18 25); }
    .chrome-dot:nth-child(2) { background: oklch(72% 0.16 75); }
    .chrome-dot:nth-child(3) { background: oklch(62% 0.18 145); }
    .chrome-bar {
      flex: 1; height: 20px;
      background: oklch(28% 0.12 278);
      border-radius: 4px;
      display: flex; align-items: center; padding: 0 10px;
      font-size: 10px; color: oklch(50% 0.008 270);
      letter-spacing: 0.01em;
    }
    .mockup-body {
      display: grid;
      grid-template-columns: 180px 1fr 160px;
      height: 320px;
      overflow: hidden;
    }

    /* Mockup left panel */
    .mock-left {
      background: oklch(22% 0.14 278);
      border-right: 1px solid oklch(100% 0 0 / 0.07);
      padding: 10px 10px 10px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .mock-brand {
      display: flex; align-items: center; gap: 7px;
      padding: 4px 2px 8px;
      border-bottom: 1px solid oklch(100% 0 0 / 0.07);
      margin-bottom: 2px;
    }
    .mock-brand-mark {
      width: 20px; height: 20px; border-radius: 5px;
      background: var(--amber);
      display: grid; place-items: center;
      font-size: 8px; font-weight: 800; color: var(--indigo-deeper);
      letter-spacing: -0.02em; flex-shrink: 0;
    }
    .mock-brand-name {
      font-size: 10px; font-weight: 700;
      color: oklch(88% 0.006 80);
      letter-spacing: -0.01em;
    }
    .mock-section-label {
      font-size: 8px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: oklch(48% 0.008 270);
      padding: 0 2px;
    }
    .mock-file-row {
      display: flex; align-items: center; gap: 5px;
      padding: 3px 4px; border-radius: 4px;
      background: oklch(100% 0 0 / 0.04);
    }
    .mock-file-icon {
      width: 12px; height: 14px;
      background: oklch(55% 0.15 270);
      border-radius: 2px; flex-shrink: 0;
      position: relative;
    }
    .mock-file-icon::after {
      content: '';
      position: absolute; top: 2px; left: 2px; right: 2px;
      height: 2px; background: oklch(100% 0 0 / 0.4);
      box-shadow: 0 3px 0 oklch(100% 0 0 / 0.3), 0 6px 0 oklch(100% 0 0 / 0.2);
    }
    .mock-file-name {
      font-size: 8.5px; color: oklch(68% 0.008 270);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mock-input-block {
      display: flex; flex-direction: column; gap: 3px;
    }
    .mock-input-label {
      font-size: 8px; font-weight: 600;
      color: oklch(60% 0.008 270);
    }
    .mock-input {
      height: 22px; border-radius: 4px;
      background: oklch(100% 0 0 / 0.06);
      border: 1px solid oklch(100% 0 0 / 0.10);
    }
    .mock-textarea {
      height: 56px; border-radius: 4px;
      background: oklch(100% 0 0 / 0.06);
      border: 1px solid oklch(100% 0 0 / 0.10);
      position: relative; overflow: hidden;
    }
    .mock-textarea-lines {
      padding: 4px 6px;
      display: flex; flex-direction: column; gap: 3px;
    }
    .mock-text-line {
      height: 4px; border-radius: 2px;
      background: oklch(100% 0 0 / 0.12);
    }
    .mock-text-line.short { width: 60%; }
    .mock-text-line.med   { width: 85%; }
    .mock-spacer { flex: 1; }
    .mock-generate-btn {
      height: 28px; border-radius: 5px;
      background: var(--amber);
      display: flex; align-items: center; justify-content: center;
      gap: 5px;
      font-size: 9px; font-weight: 700;
      color: var(--indigo-deeper);
      letter-spacing: -0.01em;
    }
    .mock-gen-icon {
      width: 8px; height: 8px;
      border-radius: 50%;
      border: 1.5px solid var(--indigo-deeper);
      position: relative;
    }

    /* Mockup center: CV preview */
    .mock-center {
      background: oklch(93% 0.006 80);
      display: flex; align-items: center; justify-content: center;
      padding: 14px;
    }
    .mock-paper {
      width: 100%; max-width: 200px;
      background: white;
      border-radius: 3px;
      box-shadow: 0 2px 12px oklch(0% 0 0 / 0.15);
      padding: 12px 10px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .mock-cv-name {
      height: 6px; width: 55%; border-radius: 2px;
      background: oklch(22% 0.015 270);
    }
    .mock-cv-title {
      height: 4px; width: 35%; border-radius: 2px;
      background: oklch(55% 0.12 275);
    }
    .mock-cv-contact {
      height: 3px; width: 70%; border-radius: 2px;
      background: oklch(82% 0.006 270);
      margin-bottom: 2px;
    }
    .mock-cv-divider {
      height: 1px; background: oklch(90% 0.006 270); border-radius: 1px;
    }
    .mock-cv-section {
      height: 4px; width: 28%; border-radius: 2px;
      background: oklch(32% 0.015 270);
      margin-bottom: 1px;
    }
    .mock-cv-line {
      height: 3px; border-radius: 2px;
      background: oklch(88% 0.006 270);
    }
    .mock-cv-line.w-full  { width: 100%; }
    .mock-cv-line.w-90    { width: 90%; }
    .mock-cv-line.w-75    { width: 75%; }
    .mock-cv-line.w-60    { width: 60%; }
    .mock-cv-line.w-45    { width: 45%; }
    .mock-cv-line.accent  { background: oklch(55% 0.12 275 / 0.5); }

    /* Mockup right panel: fit score */
    .mock-right {
      background: oklch(22% 0.14 278);
      border-left: 1px solid oklch(100% 0 0 / 0.07);
      padding: 10px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .mock-right-title {
      font-size: 9px; font-weight: 700;
      color: oklch(65% 0.008 270);
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .mock-score-card {
      background: oklch(28% 0.14 278);
      border: 1px solid oklch(100% 0 0 / 0.08);
      border-radius: 6px;
      padding: 10px;
      display: flex; align-items: center; gap: 8px;
    }
    .mock-score-ring {
      width: 36px; height: 36px; border-radius: 50%;
      background: oklch(62% 0.18 145);
      display: grid; place-items: center;
      font-size: 11px; font-weight: 800;
      color: white; flex-shrink: 0;
    }
    .mock-score-detail { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .mock-score-label { height: 3px; width: 50%; border-radius: 2px; background: oklch(50% 0.008 270); }
    .mock-score-bar-bg { height: 4px; border-radius: 2px; background: oklch(100% 0 0 / 0.08); }
    .mock-score-bar { height: 4px; width: 82%; border-radius: 2px; background: oklch(62% 0.18 145); }
    .mock-score-text { height: 3px; width: 80%; border-radius: 2px; background: oklch(45% 0.008 270); }
    .mock-fit-lines { display: flex; flex-direction: column; gap: 5px; }
    .mock-fit-heading {
      height: 4px; width: 60%; border-radius: 2px;
      background: oklch(58% 0.010 270);
    }
    .mock-fit-line {
      height: 3px; border-radius: 2px;
      background: oklch(38% 0.008 270);
    }
    .mock-fit-line.w-full { width: 100%; }
    .mock-fit-line.w-85   { width: 85%; }
    .mock-fit-line.w-70   { width: 70%; }

    /* ===== Section commons ===== */
    .section-inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section-label {
      font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--indigo);
      margin-bottom: 14px;
    }
    .section-heading {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: var(--text);
      margin: 0 0 16px;
    }
    .section-sub {
      font-size: 17px;
      color: var(--text-2);
      line-height: 1.65;
      max-width: 560px;
      margin: 0 0 56px;
    }

    /* ===== "Cost of a generic CV" strip =====
       Batch 8: this was a full standalone section (.problem) with three
       elevated cards competing with How-it-works at the same visual weight.
       All of its copy is kept — it now sits INSIDE How-it-works as the
       closing frame, deliberately demoted: no cards, no accent bar, no
       hover elevation. Steps are the section's primary content; this is the
       "why it matters" footnote under them. */
    .cost {
      margin-top: 56px;
      padding-top: 32px;
      border-top: 1px solid var(--border-2);
    }
    /* Kept as a real heading, not a styled paragraph: this string was the
       old section's h2, so demoting it out of the heading tree would drop a
       keyword line from the page's outline. It becomes an h3 under the
       How-it-works h2 — quieter visually, still indexable. */
    .cost-label, .show-tile-label {
      font-size: 11px;
      color: var(--text-3-aa);
      margin-bottom: 8px;
    }
    .cost-title {
      font-size: 17px; font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0 0 8px;
    }
    .cost-lead {
      font-size: 15px;
      color: var(--text-2);
      line-height: 1.6;
      margin: 0 0 24px;
      max-width: 620px;
    }
    .cost-item h4 {
      font-size: 15px; font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      margin: 0 0 6px;
    }
    .cost-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .cost-item { display: flex; gap: 12px; }
    .cost-item svg { flex: none; margin-top: 2px; color: var(--indigo); }
    .cost-item p {
      font-size: 14px; color: var(--text-2);
      line-height: 1.6; margin: 0;
    }

    /* ===== Grounding band (why it's different) ===== */
    .ground {
      padding: 100px 24px;
      background: var(--bg-2);
      border-top: 1px solid var(--border);
    }
    .ground-head { max-width: 640px; }
    .ground-head .section-sub { margin-bottom: 44px; }
    .ground-compare {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 28px;
    }
    .ground-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px 24px 26px;
      height: 100%;
    }
    .ground-card.is-output {
      border-color: oklch(42% 0.20 275 / 0.28);
      box-shadow: 0 10px 34px -14px oklch(42% 0.20 275 / 0.30);
    }
    .ground-card-title {
      font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-3);
      margin-bottom: 16px;
    }
    .ground-card.is-output .ground-card-title { color: var(--indigo); }
    .ground-item {
      display: flex; gap: 10px;
      font-size: 15px; line-height: 1.55;
      color: var(--text-2);
      padding: 12px 0;
      border-top: 1px solid var(--border);
    }
    .ground-item:first-of-type { border-top: none; padding-top: 0; }
    .ground-item svg { flex: none; margin-top: 3px; }
    .ground-card.is-source .ground-item svg { color: var(--text-3); }
    .ground-card.is-output .ground-item { color: var(--text); }
    .ground-card.is-output .ground-item svg { color: var(--indigo); }
    .ground-arrow {
      display: grid; place-items: center;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border-2);
      color: var(--indigo);
    }
    /* The early-tester quote, absorbed from the standalone .social section.
       It belongs here: it is corroboration OF the grounding claim, so it
       reads as evidence rather than as its own competing section. */
    .ground-quote {
      margin-top: 36px;
      display: flex; gap: 14px; align-items: flex-start;
      max-width: 760px;
    }
    .ground-quote-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, var(--indigo), var(--indigo-light));
      display: grid; place-items: center;
      font-size: 14px; font-weight: 700; color: white;
      flex-shrink: 0;
    }
    .ground-quote p {
      font-size: 15px; line-height: 1.65;
      color: var(--text-2); margin: 0 0 6px;
      font-style: italic;
    }
    .ground-quote-meta { font-size: 13px; color: var(--text-3-aa); }
    .ground-quote-meta strong { color: var(--text-2); font-weight: 600; }

    /* ===== How it works ===== */
    .hiw {
      padding: 100px 24px;
      background: var(--bg-2);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .hiw-more {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 15px; font-weight: 600;
      color: var(--indigo);
      text-decoration: none;
    }
    .hiw-more:hover { color: var(--indigo-light); }
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      position: relative;
    }
    .steps::before {
      content: '';
      position: absolute;
      top: 28px; left: calc(16.66% + 20px); right: calc(16.66% + 20px);
      height: 1px;
      background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo-light) 100%);
      opacity: 0.4;
    }
    .step { display: flex; flex-direction: column; align-items: flex-start; }
    .step-num {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--indigo);
      color: white;
      font-size: 18px; font-weight: 800;
      display: grid; place-items: center;
      margin-bottom: 24px;
      flex-shrink: 0;
      box-shadow: 0 4px 16px oklch(42% 0.20 275 / 0.35);
    }
    .step h3 {
      font-size: 19px; font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0 0 10px;
    }
    .step p {
      font-size: 15px; color: var(--text-2);
      line-height: 1.65; margin: 0;
    }
    .step-tag {
      display: inline-flex; align-items: center;
      margin-top: 14px;
      padding: 4px 10px;
      background: oklch(42% 0.20 275 / 0.07);
      border-radius: 100px;
      font-size: 12px; font-weight: 600;
      color: var(--indigo);
    }

    /* ===== Features ===== */
    .features {
      padding: 100px 24px;
      background: var(--surface);
    }

    /* ===== Templates & languages (bento) =====
       Batch 8: new section. The left tile carries the two concrete,
       verifiable numbers (8 templates, 6 output languages); the right tile
       holds the six feature items the old .features grid used to render as
       full-size cards. Same copy, one third of the height. */
    .show-bento {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 20px;
      align-items: stretch;
    }
    .show-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 28px 26px;
    }
    .show-stat + .show-stat {
      margin-top: 24px; padding-top: 24px;
      border-top: 1px solid var(--border);
    }
    .show-stat-n {
      font-size: 34px; font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--indigo);
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }
    .show-stat h3 {
      font-size: 15px; font-weight: 700;
      color: var(--text); margin: 6px 0 6px;
      letter-spacing: -0.01em;
    }
    .show-stat p {
      font-size: 14px; color: var(--text-2);
      line-height: 1.6; margin: 0;
    }
    .show-feats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px 26px;
    }
    .show-feat { display: flex; gap: 11px; }
    .show-feat svg { flex: none; margin-top: 2px; color: var(--indigo); }
    /* Former .features section heading + sub, rehomed onto this tile so the
       copy (and its keywords) still render exactly once on the page. */
    .show-tile-title {
      font-size: 17px; font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0 0 6px;
    }
    .show-tile-sub {
      font-size: 14px; color: var(--text-2);
      line-height: 1.6; margin: 0 0 22px;
    }
    .show-feat h4 {
      font-size: 14.5px; font-weight: 700;
      color: var(--text); margin: 0 0 4px;
      letter-spacing: -0.01em;
    }
    .show-feat p {
      font-size: 13.5px; color: var(--text-2);
      line-height: 1.55; margin: 0;
    }

    /* ===== Pricing band =====
       Batch 8: new section. Deliberately the quietest band on the page — it
       states the three pricing facts and hands off to /pricing for numbers.
       Its action is a secondary outline button, never the amber primary, so
       the hero and the final CTA stay the only primary actions. */
    .price-band {
      padding: 88px 24px;
      background: var(--bg-2);
      border-top: 1px solid var(--border);
    }
    .price-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 36px;
    }
    .price-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px 22px;
    }
    .price-item svg { color: var(--indigo); margin-bottom: 12px; display: block; }
    .price-item h3 {
      font-size: 15px; font-weight: 700;
      color: var(--text); margin: 0 0 7px;
      letter-spacing: -0.01em;
    }
    .price-item p {
      font-size: 14px; color: var(--text-2);
      line-height: 1.6; margin: 0;
    }
    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0 22px; height: 46px;
      border: 1px solid var(--border-2);
      background: var(--surface);
      color: var(--text);
      font-size: 15px; font-weight: 600;
      border-radius: 10px; text-decoration: none;
      transition: border-color .15s, background .15s;
    }
    .btn-secondary:hover { border-color: var(--indigo); background: var(--bg); }

    .tester-badge {
      display: inline-flex; align-items: center; gap: 6px;
      margin-bottom: 24px;
      padding: 5px 12px;
      background: oklch(70% 0.18 72 / 0.10);
      border: 1px solid oklch(70% 0.18 72 / 0.25);
      border-radius: 100px;
      font-size: 12px; font-weight: 600;
      color: var(--amber-text);
    }

    /* ===== Final CTA ===== */
    .final-cta {
      padding: 120px 24px;
      background: var(--indigo-deeper);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .final-cta::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 80% at 50% 50%, oklch(42% 0.20 275 / 0.4) 0%, transparent 70%);
      pointer-events: none;
    }
    .final-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
    .final-cta h2 {
      font-size: clamp(30px, 4vw, 44px);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: oklch(97% 0.004 80);
      margin: 0 0 16px;
    }
    .final-cta h2 em { font-style: normal; color: var(--amber); }
    .final-cta p {
      font-size: 17px;
      color: oklch(65% 0.008 270);
      line-height: 1.65;
      margin: 0 0 40px;
    }
    .cta-actions {
      display: flex; align-items: center; justify-content: center;
      gap: 16px; flex-wrap: wrap;
    }
    .cta-note {
      font-size: 13px;
      color: oklch(50% 0.008 270);
      margin-top: 20px;
    }

    /* ===== Footer ===== */
    footer {
      background: oklch(12% 0.12 278);
      border-top: 1px solid oklch(100% 0 0 / 0.06);
      padding: 32px 24px;
    }
    .footer-inner {
      max-width: 1140px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 16px;
    }
    .footer-brand { display: flex; align-items: center; gap: 10px; }
    .footer-brand-name {
      font-size: 15px; font-weight: 700;
      color: oklch(75% 0.006 80);
      letter-spacing: -0.01em;
    }
    .footer-brand-name span { color: var(--amber); }
    .footer-copy {
      font-size: 13px;
      /* 68%: >= 4.5:1 on the 12% navy footer even through the links'
         0.7 opacity (5.2:1); the old 42% measured 2.35:1. */
      color: oklch(68% 0.006 270);
    }

    /* ===== Mobile nav (hamburger) ===== */
    .nav-toggle { display: none; }
    @media (max-width: 768px) {
      /* Collapse the inline links into a toggled drawer. The desktop links and
         the sign-in button live in .nav-actions; on mobile they hide behind a
         hamburger that reveals them as a stacked panel below the bar. */
      .nav-toggle {
        display: grid; place-items: center;
        width: 40px; height: 40px;
        background: none; border: none; cursor: pointer;
        color: oklch(92% 0.01 90);
      }
      .nav-actions {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 0 20px;
        background: var(--indigo-deeper);
        border-top: 1px solid oklch(100% 0 0 / 0.08);
        display: none;
      }
      .nav-actions.is-open { display: flex; }
      /* Every row (link, sign-out, language select) shares the same 44px
         touch target and 20px side inset so the stacked drawer reads as one
         consistent list instead of a mix of link/button/select spacing —
         matching the row rhythm of the account dropdown in the app. */
      .nav-actions .nav-link {
        display: flex; align-items: center;
        width: 100%; box-sizing: border-box;
        min-height: 44px; padding: 10px 20px;
        text-align: left;
      }
      .nav-actions .nav-link:hover { background: oklch(100% 0 0 / 0.06); color: oklch(97% 0.004 80); }
      /* Groups (primary links / language / account actions) are separated by
         a hairline rather than relying on gap alone, so the drawer's visual
         hierarchy is explicit rather than inferred from spacing. */
      .nav-actions .nav-group-divider {
        display: block; height: 1px; margin: 8px 20px;
        background: oklch(100% 0 0 / 0.08);
      }
      .nav-actions .nav-lang { display: flex; width: calc(100% - 40px); margin: 4px 20px; box-sizing: border-box; }
      /* !important: _lang_switcher.html's own <640px rule (max-width: 9.5em,
         to stop the closed select clipping the desktop bar) is injected later
         in the DOM and would otherwise win over this drawer-only override. */
      .nav-actions .nav-lang select { width: 100% !important; max-width: none !important; height: 44px; padding-left: 32px; }
      .nav-actions .btn-nav {
        display: flex; align-items: center; justify-content: center;
        width: calc(100% - 40px); height: 44px;
        margin: 12px 20px 0;
      }
      /* nav stays position:fixed (its base rule): a fixed element already acts
         as the containing block for the absolutely-positioned drawer below, so
         no override is needed — and overriding to relative would let the bar
         scroll away and double the hero's fixed-header padding. */
    }
    /* ===== Sticky mobile CTA ===== */
    .sticky-cta { display: none; }
    @media (max-width: 600px) {
      .sticky-cta {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border-2);
        box-shadow: 0 -6px 24px -12px oklch(0% 0 0 / 0.20);
      }
      /* Keep the note to ONE line so the bar's height is locale-independent:
         longer localized copy (e.g. German) would otherwise wrap beside the
         non-wrapping button, making the bar taller than the body reservation
         and covering the footer. Shrink-and-ellipsize instead of wrapping. */
      .sticky-cta-note {
        flex: 1; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: 13px; font-weight: 600; color: var(--text-2);
      }
      .sticky-cta .btn-hero { flex: none; height: 44px; padding: 0 20px; font-size: 15px; }
      /* Reserve the bar's real height INCLUDING the safe-area inset — the bar's
         own bottom padding adds env(safe-area-inset-bottom), so a fixed 72px
         reservation would under-reserve on notched phones and let the taller
         bar cover footer content (worse when translated CTA text wraps). */
      body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    }

    /* ===== Responsive ===== */
    @media (max-width: 900px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .mockup-frame {
        transform: perspective(1200px) rotateX(4deg);
        max-width: 100%;
      }
      .mockup-body { grid-template-columns: 140px 1fr 120px; height: 240px; }
      .cost-grid { grid-template-columns: 1fr; gap: 20px; }
      .steps { grid-template-columns: 1fr; }
      .steps::before { display: none; }
      .show-bento { grid-template-columns: 1fr; }
      .price-grid { grid-template-columns: 1fr; gap: 16px; }
      .ground-compare { grid-template-columns: 1fr; gap: 16px; }
      .ground-arrow { transform: rotate(90deg); margin: 0 auto; }
    }
    @media (max-width: 600px) {
      .hero { padding: 110px 20px 60px; }
      .hiw, .features, .final-cta, .ground, .price-band { padding: 72px 20px; }
      .show-feats { grid-template-columns: 1fr; gap: 18px; }
      /* Keep the whole story on phones. Dropping the side panels left only a
         blank grey document — the sources and the fit score ARE the value, so
         stack all three panels instead of hiding two of them. */
      .mockup-body { grid-template-columns: 1fr; height: auto; }
      .mock-left, .mock-right { border-right: none; }
      .mock-left { border-bottom: 1px solid oklch(100% 0 0 / 0.07); }
      .mock-right { border-top: 1px solid oklch(100% 0 0 / 0.07); }
      /* Trim the paper so the stacked mockup stays a sensible height. */
      .mock-center { padding: 14px 12px; }
      .mock-paper { max-height: 200px; overflow: hidden; }
      .mockup-chrome { border-radius: 0 0 10px 10px; }
      .hero-actions { flex-direction: column; align-items: flex-start; }
      /* Keep the separators: without them the three claims read as one
         run-on sentence ("…train AI Powered by Claude AI Usually under…"). */
      .hero-proof { flex-wrap: wrap; gap: 8px; }

      /* ── Grounding band: fit the contrast into ONE 390px screen ──
         This is the most persuasive block on the page, and at 390px it was
         also the tallest: two full cards, each with its own 24px padding and
         border, separated by a 44px arrow disc, under a 100px section pad —
         roughly 1.6 screens, so the "before" scrolled out of view before the
         "after" arrived and the contrast never actually landed.

         On phones the two cards collapse into ONE card split by a rule, with
         the arrow riding on that rule. Same markup, same copy, same reading
         order — the comparison is just close enough to see at once. */
      .ground { padding: 56px 20px; }
      .ground-head .section-sub { font-size: 15px; margin-bottom: 28px; }
      .ground-compare {
        gap: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: visible;
      }
      .ground-card {
        border: none; border-radius: 0;
        background: transparent;
        padding: 18px 18px 20px;
      }
      .ground-card.is-output {
        box-shadow: none;
        border-top: 1px solid var(--border);
        background: oklch(42% 0.20 275 / 0.035);
        border-radius: 0 0 var(--r-lg) var(--r-lg);
      }
      .ground-card-title { font-size: 11px; margin-bottom: 10px; }
      .ground-item { font-size: 14px; line-height: 1.5; padding: 8px 0; }
      /* The disc sits ON the dividing rule rather than in a 16px gap of its
         own, which is where most of the removed height came from. */
      .ground-arrow {
        width: 32px; height: 32px;
        margin: -16px auto -16px;
        position: relative; z-index: 1;
      }
      .ground-arrow svg { width: 15px; height: 15px; }
      .ground-quote { margin-top: 24px; gap: 12px; }
      .ground-quote p { font-size: 14px; }
    }

    /* Keyboard focus: a visible ring on every interactive element. Uses
       :focus-visible so it appears for keyboard/AT users without adding a
       ring on mouse click. Amber reads on both the dark nav and light body. */
    a:focus-visible,
    button:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--amber-dark);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Respect the OS "reduce motion" setting. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }