/* ============================================================
   FINOX — Site stylesheet
   Editorial, warm-paper, Anthropic/Claude-leaning aesthetic.
   Fraunces display · Inter Tight UI · JetBrains Mono accents.
   Clay/copper accent on warm cream. Quiet chrome, generous air.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter+Tight:wght@300..700&family=JetBrains+Mono:wght@400..600&display=swap');

:root {
  /* Surfaces — warmer than the original olive system */
  --paper:    #F4EEE3;   /* default page */
  --paper-2:  #ECE4D4;   /* alt sections */
  --paper-3:  #E1D6C0;   /* accent surfaces */
  --paper-hi: #FBF7EE;   /* elevated cards */

  /* Ink — warm near-black */
  --ink:      #161410;
  --ink-soft: #2C2922;
  --ink-mute: #5E574A;
  --ink-faint:#8A8270;

  /* Brand · Clay/copper (Anthropic-leaning), replaces olive primary */
  --clay:        #CC785C;
  --clay-deep:   #A65238;
  --clay-soft:   #E29A82;
  --clay-tint:   #F5DBCB;

  /* Editorial accents */
  --gold:        #C9A24B;
  --gold-deep:   #9D7E32;
  --moss:        #4F6B3E;    /* secondary signal, very sparing */

  /* Lines */
  --hair:        rgba(22, 20, 16, 0.10);
  --hair-strong: rgba(22, 20, 16, 0.20);
  --hair-faint:  rgba(22, 20, 16, 0.05);
  --hair-light:  rgba(244, 238, 227, 0.18);
  --hair-light-strong: rgba(244, 238, 227, 0.34);

  /* Deep surfaces — announce bar, footer, dark CTA bands. These
     stay dark in both light and dark themes so they keep their
     editorial-poster contrast against the page. */
  --surface-deep:     #161410;
  --surface-deep-fg:  #F4EEE3;
  --surface-deep-mute: rgba(244, 238, 227, 0.62);
  --surface-deep-hair: rgba(244, 238, 227, 0.18);

  /* Geometry */
  --max: 1200px;
  --prose: 720px;
  --radius:   3px;
  --radius-lg:6px;

  /* Type scale */
  --t-display: clamp(52px, 7.2vw, 104px);
  --t-h1:      clamp(40px, 5vw, 68px);
  --t-h2:      clamp(32px, 3.8vw, 52px);
  --t-h3:      clamp(22px, 2.2vw, 30px);
  --t-h4:      20px;
  --t-body:    17px;
  --t-small:   14px;
  --t-eyebrow: 12px;
}

/* ============================================================
   DARK THEME
   `data-theme-effective="dark"` is set by the theme switcher
   (or by the inline init script on first paint) when the user
   has chosen dark, or chosen "system" while the OS is in dark.
   Surfaces flip to warm darks; the ink/cream pair inverts.
   Clay accent and deep surfaces stay constant.
   ============================================================ */
[data-theme-effective="dark"] {
  --paper:     #1A1612;
  --paper-2:   #221D17;
  --paper-3:   #2B251D;
  --paper-hi:  #23201B;

  --ink:       #F4EEE3;
  --ink-soft:  #DDD5C5;
  --ink-mute:  #948B79;
  --ink-faint: #6B6555;

  --hair:        rgba(244, 238, 227, 0.10);
  --hair-strong: rgba(244, 238, 227, 0.22);
  --hair-faint:  rgba(244, 238, 227, 0.05);
  --hair-light:  rgba(22, 20, 16, 0.20);
  --hair-light-strong: rgba(22, 20, 16, 0.36);

  /* Deep surfaces step even darker so they remain distinct
     from the (now-dark) page background. */
  --surface-deep:    #0D0B08;
  --surface-deep-fg: #F4EEE3;
  --surface-deep-mute: rgba(244, 238, 227, 0.55);
  --surface-deep-hair: rgba(244, 238, 227, 0.14);
}

/* Smooth tonal transition when the theme switches at runtime.
   Only properties that flip (bg + color + border) are animated —
   everything else stays snappy. */
html { color-scheme: light; }
[data-theme-effective="dark"] { color-scheme: dark; }
body,
.site-header,
.site-header .bar,
.site-footer,
.announce,
.cs-band,
.final-cta,
.tier,
.tier.featured,
.hero-rail,
.service-card,
.tool,
.team-card,
.problem-card,
.hero,
.section,
.page-hero {
  transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

/* Subtle warm paper grain — almost invisible, gives the site weight */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(22,20,16,0.025) 1px, transparent 1px),
    radial-gradient(rgba(22,20,16,0.015) 1px, transparent 1px);
  background-size: 3px 3px, 9px 9px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}
body > * { position: relative; z-index: 1; }

.num, .stat, .stat-fig, table td, .price {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   TYPE
   ============================================================ */
.display, .h1, .h2, .h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
.display {
  font-size: var(--t-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.04em;
  line-height: 0.94;
}
.h1 { font-size: var(--t-h1); font-variation-settings: "opsz" 120; line-height: 0.98; }
.h2 { font-size: var(--t-h2); font-variation-settings: "opsz" 96; line-height: 1.04; }
.h3 { font-size: var(--t-h3); font-variation-settings: "opsz" 48; line-height: 1.15; letter-spacing: -0.012em; }
.h4 {
  font-family: 'Inter Tight', sans-serif;
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.italic-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--clay);
  font-variation-settings: "opsz" 144;
}

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--clay);
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.on-dark { color: var(--gold); }
.eyebrow.on-dark::before { background: var(--gold); }

.lede {
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
  font-weight: 400;
}
.lede.lg { font-size: 22px; max-width: 56ch; line-height: 1.5; }

.small { font-size: var(--t-small); color: var(--ink-mute); }
.mute  { color: var(--ink-mute); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) { .wrap { padding: 0 22px; } }

.section    { padding: 120px 0; position: relative; }
.section-sm { padding: 72px 0; }
.section-lg { padding: 160px 0; }
@media (max-width: 720px) {
  .section    { padding: 72px 0; }
  .section-lg { padding: 96px 0; }
}

.hairline           { border-top: 1px solid var(--hair); }
.hairline-bottom    { border-bottom: 1px solid var(--hair); }
.hairline-on-dark   { border-top: 1px solid var(--hair-light); }

.section-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums lining-nums;
}
.section-label.on-dark { color: rgba(244,238,227,0.55); }

.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 72px;
  margin-bottom: 64px;
  align-items: baseline;
}
.section-head .head-rail {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}
.section-head.on-dark .head-rail { border-top-color: var(--paper); }
.section-head h2 { max-width: 18ch; }
.section-head .head-body { max-width: 56ch; }
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
  .section-head .head-rail { padding-top: 12px; }
}

/* Faint giant numeral / character behind sections */
.ghost-num {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(280px, 42vw, 560px);
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.03;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ghost-num.on-dark { color: var(--paper); opacity: 0.05; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
  background: var(--surface-deep);
  color: var(--surface-deep-fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.announce .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(204,120,92,0.20);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(204,120,92,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(204,120,92,0.05); }
}
.announce a {
  color: var(--surface-deep-fg);
  border-bottom: 1px solid var(--surface-deep-hair);
  padding-bottom: 1px;
  text-transform: none;
  letter-spacing: 0.005em;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.site-header .bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 720px) { .site-header .bar { padding: 14px 22px; } }

/* Brand wordmark */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  line-height: 1;
  text-decoration: none;
}
.logo .mark-svg  { display: block; flex-shrink: 0; overflow: visible; }
.logo .tile-fg   { fill: var(--ink); }
.logo .tile-horn { stroke: var(--clay); }
.site-footer .logo .tile-fg   { fill: var(--paper-hi); }
.site-footer .logo .tile-horn { stroke: var(--clay); }
.logo .wordmark {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  display: inline-block;
  line-height: 1;
  position: relative;
  white-space: nowrap;
}

.site-footer .logo { color: var(--paper); }
.site-footer .logo .wordmark { color: var(--paper); }

/* Header logo: letter-by-letter morph.
   At the top of the page the full "Finox" wordmark is visible.
   Once `.is-scrolled` is on the header, the i / n / o letters
   collapse their width and fade — F and x slide together via
   inline-flow re-layout — and the clay horn arc springs in above
   the F. The arc SVG is positioned at the same proportional offset
   relative to the F as the arc in the static Fx mark, so the
   end-state matches the footer's mini mark visually. */

/* Each letter is an inline-block whose width can be animated to 0.
   No `overflow: hidden` — that was clipping wider Fraunces glyphs
   (notably the o's overshoot). Instead we let opacity drop fast
   while max-width keeps animating: the letter is invisible long
   before any glyph would visually overlap with its neighbours,
   so collapse looks clean and the letter still renders fully in
   its expanded state. */
.wordmark .L,
.big-wordmark .L {
  display: inline-block;
  vertical-align: baseline;
  max-width: 1.5em;
  line-height: 1.35;
  transition:
    max-width 1.0s cubic-bezier(0.65, 0, 0.35, 1) .18s,
    opacity   .42s ease;
}

/* The clay horn arc — same viewBox + path as the static Fx mark,
   rendered scaled to the F's width so it lands in the same
   proportional position above the F glyph. */
.wordmark .wm-horn,
.big-wordmark .wm-horn {
  position: absolute;
  left: -0.04em;
  top: -0.18em;
  width: 1.2em;
  height: 1.2em;
  opacity: 0;
  transform: translateY(8px) scale(0.6);
  transform-origin: 22% 90%;
  pointer-events: none;
  overflow: visible;
  display: block;
  transition:
    opacity .45s ease,
    transform .95s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* HEADER scrolled state — letters collapse, arc springs in. */
.site-header.is-scrolled .wordmark .L-fade {
  opacity: 0;
  max-width: 0;
}
.site-header.is-scrolled .wordmark .wm-horn {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .28s;
}

/* Static Fx svg in the header lockup is no longer emitted, but
   guard against any legacy markup with a hide rule. */
.site-header .logo .mark-svg { display: none; }

/* Header gets a touch denser once scrolled. */
.site-header { transition: padding .35s ease, background .25s ease; }
.site-header.is-scrolled .bar { padding-top: 12px; padding-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .wordmark .L,
  .wordmark .wm-horn,
  .big-wordmark .L,
  .big-wordmark .wm-horn,
  .site-header .bar { transition: none !important; }
}

/* Navigation */
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 14.5px;
  color: var(--ink-soft);
  font-weight: 450;
  position: relative;
  padding: 6px 0;
  transition: color .15s ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--clay);
}
@media (max-width: 980px) { .nav { display: none; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary { background: var(--clay); color: var(--paper-hi); }
.btn-primary:hover { background: var(--clay-deep); transform: translateY(-1px); }
.btn-ghost   { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-dark    { background: var(--paper); color: var(--ink); }
.btn-dark:hover { background: var(--clay); color: var(--paper-hi); }
.btn-ghost-dark { background: transparent; color: var(--paper); border-color: rgba(244,238,227,0.32); }
.btn-ghost-dark:hover { border-color: var(--paper); }
.btn-lg { padding: 15px 24px; font-size: 15.5px; }
.btn .arrow { font-size: 15px; line-height: 1; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Right-cluster on the header: theme switcher + CTA. */
.bar-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
@media (max-width: 480px) {
  .bar-right .btn-cta { display: none; }
}

/* Segmented theme switcher (Light / System / Dark). */
.theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: transparent;
  border: 1px solid var(--hair-strong);
  border-radius: 99px;
  gap: 1px;
}
.theme-switch button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 99px;
  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] {
  background: var(--paper-hi);
  color: var(--clay);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.theme-switch svg { width: 14px; height: 14px; display: block; }
.theme-switch button:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 2px;
  font-weight: 450;
  transition: border-color .15s ease, color .15s ease;
}
.text-link:hover { border-bottom-color: var(--clay); color: var(--clay); }
.text-link.on-dark { color: var(--paper); border-bottom-color: rgba(244,238,227,0.35); }
.text-link.on-dark:hover { color: var(--gold); border-bottom-color: var(--gold); }
.text-link .arrow { transition: transform .2s ease; }
.text-link:hover .arrow { transform: translateX(3px); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--surface-deep);
  color: var(--surface-deep-fg);
  padding: 112px 0 56px;
  margin-top: 0;
}
.site-footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 72px;
}
@media (max-width: 980px) { .site-footer .grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }
.site-footer h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--surface-deep-mute);
  margin: 0 0 20px;
}
.site-footer ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.site-footer ul a {
  color: var(--surface-deep-fg);
  opacity: 0.78;
  font-size: 14.5px;
  transition: opacity .15s ease;
}
.site-footer ul a:hover { opacity: 1; }
.site-footer .blurb {
  font-size: 14.5px;
  color: var(--surface-deep-fg);
  opacity: 0.66;
  line-height: 1.55;
  max-width: 30ch;
}
.site-footer .legal {
  border-top: 1px solid var(--surface-deep-hair);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--surface-deep-mute);
  letter-spacing: 0.06em;
}
.site-footer .legal .creds {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-variant-numeric: tabular-nums;
}

/* Bottom of footer: a morphing big "Finox" wordmark that sits
   ABOVE the legal/copyright row. By default the i / n / o letters
   are collapsed (so what's visible is just "F + x" with the clay
   arc above) and the whole thing is scaled down to small-Fx size.
   When `.is-revealed` lands on the footer-mark (set by the
   IntersectionObserver in site.js as the user scrolls into the
   footer), the letters expand, the arc fades out, and the
   wordmark scales up to full size. Inverse of the header morph,
   same animation grammar. */
.site-footer .footer-mark {
  display: flex;
  align-items: flex-end;
  margin-top: 64px;
  margin-bottom: 40px;
  padding-top: 40px;
  padding-bottom: 8px;
  border-top: 1px solid var(--surface-deep-hair);
  min-height: 88px;
}
.site-footer .big-logo {
  display: inline-block;
  color: var(--surface-deep-fg);
}
.site-footer .big-logo .big-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(72px, 16vw, 220px);
  letter-spacing: -0.045em;
  line-height: 0.85;
  color: var(--surface-deep-fg);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* Same render size in both states — the "small" Fx state is
     just the F + x letters of the wordmark with i/n/o collapsed
     and the clay arc above. No scale transform, so the Fx and
     the full Finox are the same visual size. */
}

/* Default state: i / n / o are collapsed; arc is visible. */
.site-footer .big-logo .big-wordmark .L-fade {
  max-width: 0;
  opacity: 0;
}
.site-footer .big-logo .big-wordmark .wm-horn {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .35s ease, transform .45s ease;
}

/* REVEALED state — letters fan in, arc fades out. Each property
   has a deliberate transition-delay so the user FIRST sees the
   big "Fx + arc" sitting there (~0.7s), THEN watches it morph
   into the full "Finox" over the next ~1.4s. Roughly:

     t = 0.00s          is-revealed lands; big "Fx + arc" visible
     t = 0.00 → 0.70s   hold — user notices the Fx mark
     t = 0.70s          clay arc starts fading out
     t = 0.85s          i / n / o letters start widening + fading in
     t = ~2.05s         full "Finox" wordmark in place              */
.site-footer .footer-mark.is-revealed .big-wordmark .L-fade {
  max-width: 1.5em;
  opacity: 1;
  transition:
    max-width 1.2s cubic-bezier(0.65, 0, 0.35, 1) .85s,
    opacity   .9s ease .95s;
}
.site-footer .footer-mark.is-revealed .big-wordmark .wm-horn {
  opacity: 0;
  transform: translateY(6px) scale(0.55);
  transition:
    opacity .55s ease .70s,
    transform .7s cubic-bezier(0.34, 1.30, 0.64, 1) .70s;
}

.site-footer .big-logo:hover .big-wordmark { opacity: 0.92; }

@media (max-width: 720px) {
  .site-footer .footer-mark { padding-top: 32px; margin-top: 40px; min-height: 56px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 112px 0 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 720px) { .hero { padding: 64px 0 56px; } }
.hero .grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 88px;
  align-items: end;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) { .hero .grid { grid-template-columns: 1fr; gap: 48px; } }
.hero h1.display { text-wrap: balance; max-width: 13ch; }
.hero .sub { margin-top: 32px; max-width: 50ch; }
.hero .cta-row {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero .trust {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: 0.005em;
  font-family: 'JetBrains Mono', monospace;
}
.hero .trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero .trust span::before {
  content: ""; width: 4px; height: 4px;
  background: var(--clay); border-radius: 50%;
}

/* Hero data rail */
.hero-rail {
  border: 1px solid var(--hair);
  background: var(--paper-hi);
  padding: 28px;
  border-radius: var(--radius-lg);
  position: relative;
  box-shadow: 0 24px 48px -28px rgba(22,20,16,0.18);
}
.hero-rail .rail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 20px;
}
.hero-rail .rail-head .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}
.hero-rail .rail-head .live {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-rail .rail-head .live::before {
  content: ""; width: 6px; height: 6px;
  background: var(--clay); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(204,120,92,0.22);
  animation: pulse 2.6s ease-in-out infinite;
}
.hero-rail .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-faint);
  font-size: 14px;
}
.hero-rail .row:last-child { border-bottom: 0; }
.hero-rail .row .k { color: var(--ink-soft); }
.hero-rail .row .v {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 36;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.hero-rail .row .v.accent { color: var(--clay); }
.hero-rail .founder {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  display: flex;
  gap: 14px;
  align-items: center;
}
.hero-rail .founder .avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--clay-tint);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-size: 19px;
  color: var(--clay-deep);
  font-weight: 600;
  flex-shrink: 0;
}
.hero-rail .founder .name { font-size: 14.5px; font-weight: 500; }
.hero-rail .founder .role { font-size: 12px; color: var(--ink-mute); }

/* ============================================================
   GENERIC GRIDS
   ============================================================ */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.three-col > * {
  padding: 44px 36px;
  border-right: 1px solid var(--hair);
}
.three-col > *:last-child { border-right: 0; }
@media (max-width: 880px) {
  .three-col { grid-template-columns: 1fr; }
  .three-col > * { border-right: 0; border-bottom: 1px solid var(--hair); }
  .three-col > *:last-child { border-bottom: 0; }
}

.problem-card .idx {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 56px;
  color: var(--clay);
  line-height: 1;
  margin-bottom: 22px;
  font-weight: 400;
  font-variant-numeric: lining-nums;
}
.problem-card .h4 { margin-bottom: 10px; }
.problem-card p { color: var(--ink-soft); font-size: 16px; }

/* Services grid — quieter, fewer hard borders, more air */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
}
.services-grid > .service-card {
  background: transparent;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  min-height: 280px;
  transition: background .25s ease;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
}
.services-grid > .service-card:nth-child(2n) { border-right: 0; }
.services-grid > .service-card:hover { background: var(--paper-hi); }
.service-card .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.service-card .idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.14em;
}
.service-card h3 { margin-bottom: 4px; }
.service-card p { color: var(--ink-soft); font-size: 15.5px; flex-grow: 1; }
.service-card .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--clay);
  font-weight: 500;
  margin-top: 14px;
}
.service-card .more .arrow { transition: transform .2s ease; }
.service-card:hover .more .arrow { transform: translateX(4px); }
@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid > .service-card { border-right: 0; }
}

/* ============================================================
   CASE STUDY BAND (dark)
   ============================================================ */
.cs-band {
  background: var(--surface-deep);
  color: var(--surface-deep-fg);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.cs-band .ghost-num { color: var(--paper); opacity: 0.045; }
.cs-band .inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 88px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) { .cs-band .inner { grid-template-columns: 1fr; gap: 56px; } }
.cs-band h2 { color: var(--paper); margin-top: 24px; }
.cs-band .pull {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 96;
  font-size: 24px;
  line-height: 1.4;
  color: rgba(244,238,227,0.88);
  border-left: 1px solid var(--gold);
  padding-left: 22px;
  margin: 36px 0;
  max-width: 50ch;
}
.cs-band .pull cite {
  display: block;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(244,238,227,0.6);
  margin-top: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hair-light);
}
.cs-stats .tile {
  padding: 36px 30px;
  border-right: 1px solid var(--hair-light);
  border-bottom: 1px solid var(--hair-light);
}
.cs-stats .tile:nth-child(2n)   { border-right: 0; }
.cs-stats .tile:nth-last-child(-n+1) { border-bottom: 0; }
.cs-stats .tile.span-2 { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.cs-stats .tile .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,238,227,0.5);
  margin-bottom: 16px;
}
.cs-stats .tile .v {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 96;
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cs-stats .tile .v .unit {
  font-size: 26px;
  font-style: italic;
  color: rgba(244,238,227,0.7);
}
.cs-stats .tile .footnote {
  font-size: 13px;
  color: rgba(244,238,227,0.55);
  margin-top: 10px;
}

/* ============================================================
   HOW WE WORK STEPS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 72px;
  position: relative;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; gap: 32px; } }
.steps .step {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 36px;
  padding: 36px 0;
  border-top: 1px solid var(--hair);
  align-items: start;
}
.steps .step:last-child { border-bottom: 1px solid var(--hair); }
.steps .step .idx {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 96;
  font-size: 36px;
  color: var(--clay);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 400;
}
.steps .step .title {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 6px;
  font-weight: 400;
}
.steps .step .duration {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.steps .step .desc { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 720px) {
  .steps .step { grid-template-columns: 40px 1fr; }
  .steps .step .desc { grid-column: 1 / -1; }
}

/* ============================================================
   TECH STACK
   ============================================================ */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}
.tools-grid .tool {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  transition: background .15s ease;
}
.tools-grid .tool:hover { background: var(--paper-hi); }
.tools-grid .tool .name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.tools-grid .tool .role {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.tools-grid .tool .cat {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}
@media (max-width: 880px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PRICING
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  border: 1px solid var(--hair);
  background: var(--paper-hi);
  padding: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease;
}
.tier:hover { border-color: var(--hair-strong); }
.tier.featured {
  background: var(--surface-deep);
  color: var(--surface-deep-fg);
  border-color: var(--surface-deep);
}
.tier .pill {
  position: absolute;
  top: 18px; right: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 5px 10px;
  border: 1px solid rgba(201,162,75,0.45);
  border-radius: 99px;
}
.tier .tname {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  font-weight: 400;
}
.tier .ttag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 28px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier.featured .ttag { color: rgba(244,238,227,0.6); }
.tier .price {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.025em;
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tier .price .currency { font-size: 24px; color: var(--ink-mute); }
.tier.featured .price .currency { color: rgba(244,238,227,0.55); }
.tier .price .per {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  color: var(--ink-mute);
  margin-left: 8px;
  font-weight: 400;
}
.tier.featured .price .per { color: rgba(244,238,227,0.55); }
.tier .price-note {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 8px;
  margin-bottom: 28px;
}
.tier.featured .price-note { color: rgba(244,238,227,0.55); }
.tier ul {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--hair);
  padding-top: 22px;
}
.tier.featured ul { border-top-color: var(--hair-light); }
.tier ul li {
  font-size: 14.5px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.5;
}
.tier ul li::before {
  content: "+";
  color: var(--clay);
  font-family: 'Fraunces', serif;
  font-size: 17px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.tier.featured ul li::before { color: var(--gold); }
.tier .cta { margin-top: auto; }

/* ============================================================
   UMBRELLA BAND — playful brand-mark explainer
   ============================================================ */
.umbrella-band {
  padding: 88px 0 96px;
  background: var(--paper-2);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}
.umbrella-band .umbrella-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 880px) {
  .umbrella-band .umbrella-inner { grid-template-columns: 1fr; gap: 36px; }
  .umbrella-band { padding: 64px 0 72px; }
}
.umbrella-arc {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
.umbrella-arc circle:not(:first-of-type) { transform-origin: center; }
.umbrella-band .umbrella-copy h2 { max-width: 18ch; }
.umbrella-band .umbrella-copy p  { max-width: 56ch; }
.umbrella-band em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

/* ============================================================
   PRICING TOGGLE  (Claude-style segmented control, CSS-only)
   ============================================================ */
.pricing-toggle { position: relative; }

/* Visually hide the radio inputs but keep them keyboard-focusable.
   Labels are the visible interactive surface. */
.pt-radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pt-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  padding: 6px;
  margin: 0 auto 44px;
  border: 1px solid var(--hair);
  background: var(--paper-hi);
  border-radius: 999px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
}
.pt-tabs label {
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ink-mute);
  transition:
    background-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
  user-select: none;
}
.pt-tabs label:hover { color: var(--ink); }
.pt-tabs label .pt-tlabel {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.pt-tabs label .pt-tmeta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Active tab — the selected radio's label gets the ink pill. */
.pt-radio:checked + .pt-radio + .pt-radio + .pt-radio ~ .pt-tabs label[for="pt-build"],
.pt-radio:checked + .pt-radio + .pt-radio ~ .pt-tabs label[for="pt-scale"],
.pt-radio:checked + .pt-radio ~ .pt-tabs label[for="pt-growth"],
.pt-radio:checked ~ .pt-tabs label[for="pt-essentials"] {
  /* fallback — direct id selectors below take precedence and are
     more readable; keeping this list neutral. */
}
#pt-essentials:checked ~ .pt-tabs label[for="pt-essentials"],
#pt-growth:checked     ~ .pt-tabs label[for="pt-growth"],
#pt-scale:checked      ~ .pt-tabs label[for="pt-scale"],
#pt-build:checked      ~ .pt-tabs label[for="pt-build"] {
  background: var(--surface-deep);
  color: var(--surface-deep-fg);
  box-shadow: 0 1px 6px -2px rgba(0,0,0,0.18);
}
#pt-essentials:checked ~ .pt-tabs label[for="pt-essentials"] .pt-tmeta,
#pt-growth:checked     ~ .pt-tabs label[for="pt-growth"] .pt-tmeta,
#pt-scale:checked      ~ .pt-tabs label[for="pt-scale"] .pt-tmeta,
#pt-build:checked      ~ .pt-tabs label[for="pt-build"] .pt-tmeta {
  color: var(--surface-deep-mute);
}

/* Keyboard focus — when a radio is focused, ring its label. */
.pt-radio:focus-visible + .pt-radio + .pt-radio + .pt-radio + .pt-tabs label[for="pt-essentials"],
.pt-radio:focus-visible ~ .pt-tabs label { outline: none; }
#pt-essentials:focus-visible ~ .pt-tabs label[for="pt-essentials"],
#pt-growth:focus-visible     ~ .pt-tabs label[for="pt-growth"],
#pt-scale:focus-visible      ~ .pt-tabs label[for="pt-scale"],
#pt-build:focus-visible      ~ .pt-tabs label[for="pt-build"] {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* Panels — stack identically; only the active one is shown. The
   inactive panels are display:none so they don't take layout space
   (and the section doesn't pre-reserve four panel heights). */
.pt-panels {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--paper-hi);
  overflow: hidden;
}
.pt-panel {
  display: none;
  padding: 40px;
  animation: ptFade .4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#pt-essentials:checked ~ .pt-panels .pt-p-essentials,
#pt-growth:checked     ~ .pt-panels .pt-p-growth,
#pt-scale:checked      ~ .pt-panels .pt-p-scale,
#pt-build:checked      ~ .pt-panels .pt-p-build { display: block; }

@keyframes ptFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pt-panel .pt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 24px;
}
.pt-panel .pt-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.pt-panel .pt-tag strong { color: var(--clay); font-weight: 500; }
.pt-panel .pt-price {
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-variation-settings: "opsz" 96;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pt-panel .pt-price .currency { font-size: 26px; color: var(--ink-mute); }
.pt-panel .pt-price .dim      { font-size: 26px; color: var(--ink-mute); }
.pt-panel .pt-price .per {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  color: var(--ink-mute);
  margin-left: 8px;
  font-weight: 400;
}
.pt-panel .pt-note {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pt-panel .pt-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
.pt-panel .pt-bullets li {
  font-size: 15px;
  color: var(--ink-soft);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}
.pt-panel .pt-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 14px; height: 1px;
  background: var(--clay);
}

@media (max-width: 720px) {
  .pt-tabs label { padding: 8px 14px; }
  .pt-tabs label .pt-tlabel { font-size: 15px; }
  .pt-tabs label .pt-tmeta  { font-size: 9px; }
  .pt-panel { padding: 28px; }
  .pt-panel .pt-price { font-size: 44px; }
  .pt-panel .pt-bullets { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: flex; flex-direction: column; }
.faq details {
  border-top: 1px solid var(--hair);
  padding: 28px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.012em;
  font-weight: 400;
  line-height: 1.25;
  transition: color .15s ease;
}
.faq summary:hover { color: var(--clay); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: 'Fraunces', serif;
  font-size: 32px;
  color: var(--clay);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .25s ease;
  font-weight: 300;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer {
  margin-top: 16px;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

/* ============================================================
   FINAL CTA BAND
   ============================================================ */
.final-cta {
  background: var(--clay);
  color: var(--paper-hi);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.final-cta .ghost-num { color: var(--paper); opacity: 0.10; right: -4vw; top: -6vh; }
.final-cta .inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
  position: relative;
  z-index: 1;
}
@media (max-width: 880px) { .final-cta .inner { grid-template-columns: 1fr; gap: 40px; } }
.final-cta h2 {
  color: var(--paper-hi);
  max-width: 18ch;
  margin: 18px 0 0;
}
.final-cta .italic-accent { color: var(--paper-hi); font-style: italic; opacity: 0.92; }
.final-cta .eyebrow { color: var(--paper-hi); }
.final-cta .eyebrow::before { background: var(--paper-hi); }
.final-cta .right { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.final-cta .right .small { color: rgba(255,255,255,0.78); }
.final-cta .btn-dark { background: var(--ink); color: var(--paper-hi); }
.final-cta .btn-dark:hover { background: #000; color: var(--paper-hi); }

/* ============================================================
   LOGO STRIP / TESTIMONIALS
   ============================================================ */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.logo-strip .logo-cell {
  height: 88px;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 0.55;
  border-right: 1px solid var(--hair);
}
.logo-strip .logo-cell:last-child { border-right: 0; }
@media (max-width: 880px) { .logo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-strip { grid-template-columns: repeat(2, 1fr); } }

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 64px;
}
@media (max-width: 880px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}
.testimonial q {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 48;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  quotes: "\201C" "\201D";
  display: block;
  margin-bottom: 18px;
}
.testimonial .who {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.testimonial .who strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero {
  padding: 80px 0 100px;
  border-bottom: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}
.page-hero .crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 36px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.page-hero .crumb a { color: var(--clay); }
.page-hero .crumb .sep { opacity: 0.4; }
.page-hero h1 { max-width: 18ch; text-wrap: balance; }
.page-hero .lede { margin-top: 28px; }
.page-hero .cta-row { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   PROSE
   ============================================================ */
.prose {
  max-width: var(--prose);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.prose h2 {
  font-family: 'Fraunces', serif;
  color: var(--ink);
  font-size: 34px;
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 64px 0 18px;
}
.prose h3 {
  font-family: 'Fraunces', serif;
  color: var(--ink);
  font-size: 23px;
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  margin: 40px 0 10px;
}
.prose p { margin: 0 0 1.2em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 28px;
  font-variation-settings: "opsz" 96;
  line-height: 1.35;
  color: var(--ink);
  border-left: 1px solid var(--clay);
  padding-left: 26px;
  margin: 36px 0;
  max-width: 24em;
}
.prose code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 3px;
}
.prose pre {
  background: var(--ink);
  color: var(--paper);
  padding: 22px 26px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  margin: 28px 0;
}
.prose pre code { background: transparent; padding: 0; color: var(--paper); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 56px 0; }

/* ============================================================
   CHIPS / INCLUDED LISTS
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: 99px;
  color: var(--ink-soft);
  background: transparent;
}
.chip.clay { color: var(--clay); border-color: rgba(204,120,92,0.4); }
.chip.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.included-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
}
@media (max-width: 720px) { .included-list { grid-template-columns: 1fr; } }
.included-list li {
  list-style: none;
  padding: 20px 0 20px 32px;
  position: relative;
  border-top: 1px solid var(--hair);
  font-size: 15.5px;
  color: var(--ink);
}
.included-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 28px;
  width: 18px; height: 1px;
  background: var(--clay);
}
.included-list li code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 13.5px;
  margin-right: 8px;
  color: var(--ink);
}

/* Outcomes (3 stats) */
.outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 720px) { .outcomes { grid-template-columns: 1fr; } }
.outcomes .o {
  padding: 36px;
  border-right: 1px solid var(--hair);
}
.outcomes .o:last-child { border-right: 0; }
.outcomes .o .v {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
  color: var(--clay);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 14px;
}
.outcomes .o .l { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }

/* Pair cards */
.pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .pairs { grid-template-columns: 1fr; } }
.pair {
  border: 1px solid var(--hair);
  padding: 26px;
  transition: border-color .15s ease, transform .15s ease;
  background: var(--paper-hi);
  border-radius: var(--radius-lg);
}
.pair:hover { border-color: var(--ink); transform: translateY(-2px); }
.pair .pair-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.pair .pair-title {
  font-family: 'Fraunces', serif;
  font-size: 23px;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.012em;
  font-weight: 400;
  margin-bottom: 8px;
}
.pair p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* Comparison table */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.compare thead th {
  text-align: left;
  padding: 22px 18px;
  border-bottom: 1px solid var(--ink);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  vertical-align: bottom;
}
.compare thead th .tname {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.015em;
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
}
.compare thead th .tprice {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.compare tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.compare tbody td:first-child { color: var(--ink-soft); font-weight: 450; }
.compare tbody tr.section-row td {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  padding-top: 30px;
  padding-bottom: 10px;
  font-weight: 500;
  border-bottom: 0;
}
.compare .check { color: var(--clay); font-size: 16px; line-height: 1; }
.compare .dash  { color: var(--ink-mute); opacity: 0.5; }

/* Case study card */
.cs-card {
  border: 1px solid var(--hair);
  background: var(--paper-hi);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  transition: border-color .15s ease;
  border-radius: var(--radius-lg);
}
.cs-card:hover { border-color: var(--ink); }
@media (max-width: 880px) { .cs-card { grid-template-columns: 1fr; gap: 28px; padding: 32px; } }
.cs-card .chips { margin-bottom: 18px; }
.cs-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 34px;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 18px;
}
.cs-card .mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.cs-card .mini-stats .v {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-variation-settings: "opsz" 72;
  color: var(--clay);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 6px;
}
.cs-card .mini-stats .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Model mock */
.model-mock {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/10;
}
.model-mock svg { width: 100%; height: 100%; display: block; }
.model-mock::after {
  content: "Model preview · blurred for client confidentiality";
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(22,20,16,0.85);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 3px;
}

/* Posts grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 880px) { .posts-grid { grid-template-columns: 1fr; } }
.posts-grid .post {
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .2s ease;
  min-height: 280px;
  border-right: 1px solid var(--hair);
}
.posts-grid .post:last-child { border-right: 0; }
.posts-grid .post:hover { background: var(--paper-hi); }
@media (max-width: 880px) {
  .posts-grid .post { border-right: 0; border-bottom: 1px solid var(--hair); }
  .posts-grid .post:last-child { border-bottom: 0; }
}
.post .ptag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}
.post h3 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.015em;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.post .excerpt { color: var(--ink-soft); font-size: 14.5px; flex-grow: 1; }
.post .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: auto;
}

/* Post grid for insights index */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
}
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
.post-grid .post {
  display: flex; flex-direction: column;
  background: var(--paper-hi);
  border: 1px solid var(--hair);
  text-decoration: none; color: inherit;
  transition: background .15s ease, transform .2s ease, border-color .15s ease;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.post-grid .post:hover { background: var(--paper); border-color: var(--hair-strong); transform: translateY(-2px); }
.post-grid .post .ill {
  background: var(--paper-3);
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.post-grid .post .body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.post-grid .post .meta {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.post-grid .post .meta .cat { color: var(--clay); font-weight: 500; }
.post-grid .post h4 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.post-grid .post p {
  font-size: 14.5px;
  color: var(--ink-soft);
  flex-grow: 1;
  margin: 0;
}
.post-grid .post .more {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--hair);
  padding-top: 16px;
  display: flex; justify-content: space-between;
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--hair);
}
.team-card:last-child { border-right: 0; }
.team-card .headshot {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--paper-3);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(22,20,16,0.04) 0,
      rgba(22,20,16,0.04) 1px,
      transparent 1px,
      transparent 9px);
  display: grid; place-items: center;
  color: var(--ink-mute);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  position: relative;
}
.team-card .name {
  font-family: 'Fraunces', serif;
  font-size: 23px;
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.team-card .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--clay);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.team-card .bio { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.team-card .li {
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 2px;
  align-self: flex-start;
}
.team-card .li:hover { border-bottom-color: var(--clay); color: var(--clay); }

/* Code block */
.code {
  background: var(--surface-deep);
  color: var(--surface-deep-fg);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  position: relative;
  border: 1px solid var(--ink);
}
.code .ck { color: var(--gold); }
.code .cv { color: #b3d49a; }
.code .cc { color: rgba(244,238,227,0.45); }
.code .cs { color: var(--clay-soft); }
.code .label-top {
  position: absolute;
  top: 14px; right: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,238,227,0.5);
}

/* Detail stats */
.cs-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 880px) { .cs-detail-stats { grid-template-columns: 1fr 1fr; } }
.cs-detail-stats .stat-cell {
  padding: 36px 28px;
  border-right: 1px solid var(--hair);
}
.cs-detail-stats .stat-cell:last-child { border-right: 0; }
.cs-detail-stats .stat-cell .v {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-variation-settings: "opsz" 96;
  font-weight: 400;
  color: var(--clay);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: 10px;
}
.cs-detail-stats .stat-cell .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.form-grid input,
.form-grid textarea,
.form-grid select {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15.5px;
  padding: 13px 15px;
  border: 1px solid var(--hair-strong);
  background: var(--paper-hi);
  color: var(--ink);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus { border-color: var(--clay); background: var(--paper-hi); }
.form-grid textarea { min-height: 150px; resize: vertical; }

/* Article */
.article { background: var(--paper); }
.article-head {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--hair);
  background: var(--paper-2);
}
.article-head .byline {
  display: flex; align-items: center; gap: 16px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--hair);
  max-width: 760px;
}
.article-head .byline .avatar.small {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--clay); color: var(--paper);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-size: 19px;
}
.article-head .byline .who  { font-weight: 500; font-size: 15px; }
.article-head .byline .when { font-size: 13px; color: var(--ink-mute); }

.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 32px 96px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Helpers */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.text-center { text-align: center; }

/* Focus */
*:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 2px; }

/* Skip link */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: 16px; top: 16px; background: var(--ink); color: var(--paper);
  padding: 10px 14px; z-index: 100; border-radius: 3px;
}

/* Entrance animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fade-up.d1 { animation-delay: 0.08s; }
.fade-up.d2 { animation-delay: 0.18s; }
.fade-up.d3 { animation-delay: 0.28s; }
.fade-up.d4 { animation-delay: 0.38s; }
.fade-up.d5 { animation-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   BRAND PAGE — identity showcase
   ============================================================ */
.brand-page { background: var(--paper-2); padding-bottom: 0; }
.brand-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.brand-tile {
  background: var(--paper-hi);
  border: 1px solid var(--hair);
  padding: 40px;
  border-radius: var(--radius-lg);
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.brand-tile.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.brand-tile .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.brand-tile.ink .meta { color: rgba(244,238,227,0.55); }
.brand-tile .stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 32px 0;
}
.brand-tile.span-6  { grid-column: span 6; }
.brand-tile.span-4  { grid-column: span 4; }
.brand-tile.span-12 { grid-column: span 12; }
@media (max-width: 880px) {
  .brand-tile.span-6, .brand-tile.span-4 { grid-column: span 12; }
}

.swatch-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 880px) { .swatch-row { grid-template-columns: repeat(3, 1fr); } }
.swatch {
  height: 140px;
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  border: 1px solid var(--hair);
}
.swatch .lbl { text-transform: uppercase; }
.swatch .hex { font-weight: 500; }

/* ============================================================
   MOBILE NAVIGATION — hamburger button + drawer
   ============================================================ */
html.menu-open, html.menu-open body { overflow: hidden; }

/* Hamburger button — hidden by default, shown when desktop nav hides. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hair-strong);
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--paper-hi); border-color: var(--ink); }
.nav-toggle:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.nav-toggle svg { display: block; }
.nav-toggle .i-close { display: none; }
.site-header.is-menu-open .nav-toggle .i-open  { display: none; }
.site-header.is-menu-open .nav-toggle .i-close { display: block; }

/* The drawer covers the viewport BENEATH the sticky header (the header
   stays clickable so the close icon works). */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 40;
  padding: 96px 40px 40px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity .3s ease,
    transform .35s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility .35s;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu .mm-nav { display: flex; flex-direction: column; }
.mobile-menu .mm-nav a {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  transition: color .15s ease, padding-left .25s ease;
}
.mobile-menu .mm-nav a:hover,
.mobile-menu .mm-nav a:focus-visible {
  color: var(--clay);
  padding-left: 10px;
  outline: none;
}
.mobile-menu .mm-nav a[aria-current="page"] { color: var(--clay); }
.mobile-menu .mm-footer {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.mobile-menu .mm-footer .btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: 15.5px; }
.mobile-menu .mm-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 981px) {
  .mobile-menu { display: none; }
}
@media (max-width: 720px) {
  .mobile-menu { padding: 88px 22px 32px; gap: 18px; }
}

/* ============================================================
   COMPREHENSIVE MOBILE PASS
   Runs at <=720px. Targets both class-based grids and the inline
   `grid-template-columns` styles scattered across the HTML pages.
   Forces single-column or 2-column layouts, tightens typography
   and section padding, and fixes the pricing toggle / comparison
   table for narrow screens.
   ============================================================ */
@media (max-width: 720px) {

  /* ---- Type & rhythm ----------------------------------------- */
  .display { font-size: clamp(40px, 9.5vw, 60px); line-height: 0.98; }
  .h1      { font-size: clamp(32px, 8vw, 50px); }
  .h2      { font-size: clamp(26px, 6.4vw, 40px); }
  .h3      { font-size: clamp(20px, 4.6vw, 26px); }
  .lede    { font-size: 16px; }
  .lede.lg { font-size: 17.5px; }
  .section    { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .section-lg { padding: 72px 0; }
  .section-head { gap: 14px; margin-bottom: 32px; }
  .page-hero { padding: 48px 0 64px; }
  .page-hero .crumb { margin-bottom: 24px; }

  /* ---- Force 1-column for inline grid overrides ------------- */
  main .services-grid[style*="grid-template-columns"],
  main .three-col[style*="grid-template-columns"],
  main .tiers[style*="grid-template-columns"],
  main .included-list[style*="grid-template-columns"],
  main .pairs[style*="grid-template-columns"],
  main .brand-grid[style*="grid-template-columns"],
  main .wrap[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  main section .wrap[style*="grid-template-columns: 1.1fr"],
  main section .wrap[style*="grid-template-columns: 1.2fr"] {
    gap: 40px !important;
  }
  /* Form fields stack */
  .form-grid { grid-template-columns: 1fr; }

  /* ---- Hero -------------------------------------------------- */
  .hero { padding: 48px 0 40px; }
  .hero .grid { gap: 32px; }
  .hero h1.display { max-width: none; }
  .hero .sub { margin-top: 24px; }
  .hero .cta-row { margin-top: 28px; gap: 10px; }
  .hero .trust { margin-top: 28px; gap: 8px 16px; font-size: 11.5px; }
  .hero-rail { padding: 22px 20px; }
  .hero-rail .rail-head { margin-bottom: 14px; padding-bottom: 12px; }
  .hero-rail .row { padding: 10px 0; font-size: 13.5px; }
  .hero-rail .row .v { font-size: 16.5px; }

  /* ---- Buttons ---------------------------------------------- */
  .btn    { padding: 11px 16px; font-size: 13.5px; }
  .btn-lg { padding: 14px 20px; font-size: 14.5px; }

  /* ---- Cards ------------------------------------------------ */
  .services-grid > .service-card { padding: 32px 24px; min-height: auto; }
  .problem-card { padding: 32px 24px; }
  .problem-card .idx { font-size: 44px; margin-bottom: 14px; }
  .tier { padding: 28px 22px; }
  .tier .price { font-size: 38px; }
  .tier .tname { font-size: 26px; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .tools-grid .tool { padding: 22px 18px; min-height: auto; }
  .tools-grid .tool .name { font-size: 19px; }

  /* ---- Posts grids ------------------------------------------ */
  .posts-grid .post,
  .post-grid .post { border-right: 0; }

  /* ---- CS band ---------------------------------------------- */
  .cs-band { padding: 80px 0; }
  .cs-band .inner { gap: 36px; }
  .cs-band .pull { font-size: 19px; padding-left: 16px; margin: 24px 0; }
  .cs-stats { grid-template-columns: 1fr 1fr; }
  .cs-stats .tile { padding: 24px 20px; }
  .cs-stats .tile .v { font-size: 44px; }
  .cs-stats .tile.span-2 { grid-column: 1 / -1; }
  .cs-card { padding: 28px 24px; }
  .cs-card .mini-stats { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .cs-card .mini-stats .v { font-size: 24px; }
  .cs-detail-stats { grid-template-columns: 1fr 1fr; }

  /* ---- Steps ------------------------------------------------ */
  .steps { gap: 18px; }
  .steps .step { gap: 18px; padding: 24px 0; }
  .steps .step .title { font-size: 22px; }

  /* ---- Final CTA -------------------------------------------- */
  .final-cta { padding: 80px 0; }
  .final-cta .inner { gap: 28px; }

  /* ---- Footer ----------------------------------------------- */
  .site-footer { padding: 80px 0 36px; }
  .site-footer .grid { gap: 32px 20px; margin-bottom: 48px; }
  .site-footer h5 { margin-bottom: 14px; }
  .site-footer .legal { font-size: 10.5px; gap: 12px; padding-top: 24px; }
  .site-footer .legal .creds { gap: 4px 14px; }
  .site-footer .footer-mark { margin-top: 40px; padding-top: 32px; }
  .site-footer .big-logo .big-wordmark { font-size: clamp(60px, 18vw, 120px); }

  /* ---- Umbrella band --------------------------------------- */
  .umbrella-band { padding: 56px 0 64px; }
  .umbrella-band .umbrella-inner { gap: 24px; }
  .umbrella-arc { max-width: 260px; }

  /* ---- Brand page ------------------------------------------ */
  .brand-tile { padding: 28px 24px; min-height: 220px; }
  .brand-grid { gap: 14px; }
  .swatch-row { grid-template-columns: repeat(3, 1fr); }
  .swatch { height: 110px; padding: 12px; }

  /* ---- FAQ -------------------------------------------------- */
  .faq summary { font-size: 19px; gap: 16px; }
  .faq summary::after { font-size: 26px; }

  /* ---- Pricing toggle -------------------------------------- */
  .pt-tabs {
    flex-wrap: wrap;
    padding: 4px;
    gap: 2px;
    max-width: 100%;
    width: max-content;
  }
  .pt-tabs label { padding: 9px 14px; }
  .pt-tabs label .pt-tlabel { font-size: 14px; }
  .pt-tabs label .pt-tmeta  { font-size: 9.5px; letter-spacing: 0.1em; }
  .pt-panels { border-radius: var(--radius); }
  .pt-panel  { padding: 28px 22px; }
  .pt-panel .pt-head { gap: 16px; padding-bottom: 20px; margin-bottom: 20px; flex-direction: column; align-items: flex-start; }
  .pt-panel .pt-price { font-size: 42px; }
  .pt-panel .pt-price .currency,
  .pt-panel .pt-price .dim { font-size: 20px; }
  .pt-panel .pt-bullets { grid-template-columns: 1fr; gap: 10px; }
  .pt-panel .pt-bullets li { font-size: 14.5px; padding-left: 22px; }
  .pt-panel .pt-bullets li::before { top: 10px; }
  .pt-panel .btn { width: 100%; justify-content: center; }

  /* ---- Pricing comparison table ---------------------------- */
  /* Stays a real table but scrolls horizontally — alignment stays
     readable, no awkward stacked card hack. */
  .compare {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    font-size: 13px;
  }
  .compare thead, .compare tbody { display: table; min-width: 700px; }
  .compare thead { width: 100%; }
  .compare tbody { width: 100%; }
  .compare thead th { padding: 14px 12px; }
  .compare thead th .tname { font-size: 18px; }
  .compare tbody td { padding: 12px; }

  /* ---- Logo strip ------------------------------------------ */
  .logo-strip .logo-cell { height: 64px; font-size: 13px; }

  /* ---- Code / article -------------------------------------- */
  .code, .prose pre { padding: 18px; font-size: 12px; }
  .article-body { padding: 48px 22px 64px; font-size: 16.5px; }
  .article-body .pull-quote { margin: 36px -22px; padding: 24px; font-size: 22px; }

  /* ---- Tighter section labels for sub-pages ---------------- */
  .crumb { font-size: 10.5px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .display { font-size: clamp(34px, 10.5vw, 50px); }
  .h2 { font-size: clamp(24px, 7vw, 36px); }
  .lede.lg { font-size: 17px; }

  /* Pricing tabs: hide the meta sub-line on the smallest screens */
  .pt-tabs label { padding: 8px 11px; gap: 0; }
  .pt-tabs label .pt-tlabel { font-size: 13px; }
  .pt-tabs label .pt-tmeta  { display: none; }

  /* Tighter hero rail */
  .hero-rail .row { font-size: 13px; padding: 8px 0; }
  .hero-rail .row .v { font-size: 15px; }

  /* Footer big logo can't blow out the viewport */
  .site-footer .big-logo .big-wordmark { font-size: clamp(54px, 21vw, 96px); }

  /* Hide the CTA in the header bar on the very narrowest screens —
     the mobile menu has it. Keeps the bar uncluttered. */
  .bar-right .btn-cta { display: none; }

  /* CS stats stack at the very narrow end */
  .cs-stats { grid-template-columns: 1fr; }
  .cs-stats .tile { border-right: 0; }

  /* CS card mini stats stack */
  .cs-card .mini-stats { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   Animations v19 — scroll reveal, count-up, tilt, parallax
   ============================================================
   All gated behind prefers-reduced-motion in the JS layer too.
   CSS-only fallback: items start visible if JS is off / disabled.
*/

/* Scroll-reveal: applies to any [data-reveal] element. JS adds
   .is-revealed once the element scrolls 18% into the viewport. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-reveal][data-reveal-delay="1"].is-revealed { transition-delay: 0.06s; }
[data-reveal][data-reveal-delay="2"].is-revealed { transition-delay: 0.12s; }
[data-reveal][data-reveal-delay="3"].is-revealed { transition-delay: 0.18s; }
[data-reveal][data-reveal-delay="4"].is-revealed { transition-delay: 0.24s; }

/* Tilt cards: baseline transform happens in JS — this just sets the
   stage and the focus ring. */
[data-tilt] {
  will-change: transform;
}
[data-tilt]:focus-within {
  transform: none !important;
}

/* Parallax targets — opt-in via [data-parallax]. The .umbrella-arc
   inside .umbrella-band is parallaxed automatically (see site.js). */
.umbrella-band .umbrella-arc,
[data-parallax] {
  will-change: transform;
}

/* Hard kill-switch for users requesting reduced motion. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-tilt]   { transform: none !important; transition: none; }
  .umbrella-band .umbrella-arc,
  [data-parallax] { transform: none !important; }
}

/* ============================================================
   v23 — Editorial motion + visual artifacts (Layers 1 + 2)
   ============================================================
   Quiet, magazine-editorial motion. Everything below respects
   prefers-reduced-motion. Motion factors are conservative — the
   goal is subtle depth, not dazzle.
*/

/* ─── Draw-on clay arcs (Layer 1) ─────────────────────────── */
/* Any <svg class="arc-draw"><path /></svg> gets its path stroke
   drawn on when the SVG scrolls into view. site.js flips the
   .is-drawn class once IntersectionObserver fires. */
.arc-draw path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.arc-draw.is-drawn path {
  stroke-dashoffset: 0;
}

/* Section-transition arc — thin clay curve dropped between big
   editorial sections. Use as: <div class="section-arc"></div>
   at the natural break points. Sizes to viewport width. */
.section-arc {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 0;
  pointer-events: none;
}
.section-arc svg {
  width: min(220px, 30vw);
  height: auto;
  overflow: visible;
}
.section-arc svg path {
  stroke: var(--clay);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

/* ─── Ghost-number parallax (Layer 1) ───────────────────────
   .ghost-num already exists in the base styles. Here we add
   the parallax hook — site.js sets --parallax-y in pixels. */
.ghost-num {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transition: transform 60ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .ghost-num { transform: none !important; }
}

/* ─── Hero H1 line-by-line reveal (Layer 1) ─────────────────
   The <h1 class="display"> at the top of each page reveals
   line-by-line. site.js splits the H1's <br>-separated lines
   into wrapped spans then applies delayed reveal. */
.display .h1-line {
  display: block;
  overflow: hidden;
}
.display .h1-line > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.display .h1-line.is-in > span { transform: none; opacity: 1; }
.display .h1-line:nth-of-type(2) > span { transition-delay: 0.08s; }
.display .h1-line:nth-of-type(3) > span { transition-delay: 0.16s; }
.display .h1-line:nth-of-type(4) > span { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .display .h1-line > span { transform: none; opacity: 1; transition: none; }
}

/* ─── Staggered card grids (Layer 1) ────────────────────────
   Container gets .stagger-grid; direct children reveal in
   sequence. Combine with [data-reveal] on the container. */
.stagger-grid [data-reveal-child] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stagger-grid.is-revealed [data-reveal-child] {
  opacity: 1;
  transform: none;
}
.stagger-grid.is-revealed [data-reveal-child]:nth-child(1) { transition-delay: 0.00s; }
.stagger-grid.is-revealed [data-reveal-child]:nth-child(2) { transition-delay: 0.08s; }
.stagger-grid.is-revealed [data-reveal-child]:nth-child(3) { transition-delay: 0.16s; }
.stagger-grid.is-revealed [data-reveal-child]:nth-child(4) { transition-delay: 0.24s; }
.stagger-grid.is-revealed [data-reveal-child]:nth-child(5) { transition-delay: 0.32s; }
.stagger-grid.is-revealed [data-reveal-child]:nth-child(6) { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .stagger-grid [data-reveal-child] { opacity: 1; transform: none; transition: none; }
}

/* ─── Sticky hero rail (Layer 1) ────────────────────────────
   Marks the .hero-rail on the homepage sticky within its column
   until the parent .hero section scrolls out of view. */
@media (min-width: 981px) {
  .hero .hero-rail {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* ─── Marginalia labels (Layer 2) ──────────────────────────
   Small typographic labels floating in the margins next to
   important paragraphs. Usage:
     <div class="prose has-marginalia">
       <p data-margin="§ 2026-Q2">This paragraph gets a mono-caps
       label in the left margin at desktop widths.</p>
     </div>
   Falls back to nothing at mobile widths (no room for margin). */
.prose.has-marginalia { position: relative; }
.prose.has-marginalia [data-margin] { position: relative; }
.prose.has-marginalia [data-margin]::before {
  content: attr(data-margin);
  position: absolute;
  top: 8px;
  left: -180px;
  width: 140px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
  text-align: right;
}
@media (max-width: 1200px) {
  .prose.has-marginalia [data-margin]::before { display: none; }
}

/* ─── Inline sparkline SVGs (Layer 2) ──────────────────────
   Small two-tone strokes used as inline data marks. Wrapper
   inline-flex so it sits on the baseline of surrounding text. */
.sparkline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: 64px;
  height: 20px;
  margin: 0 6px;
}
.sparkline path.trend {
  fill: none;
  stroke: var(--clay);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparkline path.trail {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.5;
}
.sparkline .dot {
  fill: var(--clay);
}

/* ─── Faint grid overlay (Layer 2) ─────────────────────────
   Add .with-grid to any <section> to layer a 96px baseline grid
   under the content. Extremely subtle — 5% opacity ink. Editorial
   texture; won't be noticed unless you're really looking. */
.with-grid {
  background-image:
    linear-gradient(to right, rgba(22,20,16,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,20,16,0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
}
[data-theme-effective="dark"] .with-grid {
  background-image:
    linear-gradient(to right, rgba(244,238,227,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,238,227,0.04) 1px, transparent 1px);
}

/* ─── Umbrella raindrops (Layer 2) ─────────────────────────
   Existing .umbrella-band gets a wider scatter of tiny drops.
   The three-drop version stays for backwards compat; new pages
   can use .raindrops with 8–12 drops. */
.raindrops {
  position: absolute;
  pointer-events: none;
}
.raindrops circle {
  fill: var(--ink-mute);
  opacity: 0.35;
}
.raindrops circle {
  animation: raindrop-drift 8s ease-in-out infinite;
}
.raindrops circle:nth-child(2n) { animation-delay: -3s; }
.raindrops circle:nth-child(3n) { animation-delay: -5s; }
.raindrops circle:nth-child(4n) { animation-delay: -1s; }
@keyframes raindrop-drift {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(3px); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .raindrops circle { animation: none; }
}

/* ─── Big background Fraunces glyphs (Layer 2) ─────────────
   Extends the .ghost-num pattern for glyphs / symbols rather
   than section numbers. Same absolute positioning; larger
   letterforms; italic accent colour. */
.ghost-glyph {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(220px, 32vw, 480px);
  line-height: 0.9;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transition: transform 60ms linear;
}
[data-theme-effective="dark"] .ghost-glyph {
  color: var(--paper);
  opacity: 0.05;
}
@media (max-width: 720px) {
  .ghost-glyph { font-size: clamp(160px, 60vw, 300px); opacity: 0.035; }
}
@media (prefers-reduced-motion: reduce) {
  .ghost-glyph { transform: none !important; }
}