/* ==========================================================================
   KAIRO — "Earthy" system

   Adopted 2026-09-06 (brand/earthy-concept-design-system.md). Replaces the
   navy/amber/Fraunces system in full — no old tokens kept alongside.

   THE RULES THIS FILE MUST NOT BREAK:
     1. Dark forest green ground by default. Cream paper is the one light
        surface, used for sections with real reading.
     2. THREE VOICES, POLICED.
        Bricolage Grotesque 700/800 — every headline. Mixed case, never
          uppercase.
        DM Sans 400            — all body copy.
        DM Mono 400            — kickers, labels, metadata. Uppercase, tracked.
     3. ONE ACCENT HUE — burnt orange. Kickers, bullet marks, inline
        emphasis, one highlighted number. Never a background, never a
        headline color. No italic anywhere; emphasis is an orange <em>.
     4. NO ROUNDED CORNERS on structural elements. NO DROP SHADOWS anywhere.
        Hairline 1px borders only.
     5. Every dark surface carries the atmospheric wood glow.
     6. Bullet marks are an em dash in mono orange, never a dot or check.
   ========================================================================== */

:root{
  /* Ground */
  --bg-dark:#232E26;
  --bg-dark-alt:#2E3D30;

  /* Paper — the one light surface */
  --paper:#EDE6D0;
  --paper-alt:#E4DAC4;

  /* Ink — opacity ladder, not a grey ramp */
  --t-1:#F0E8D2;                    /* primary on dark */
  --t-2:rgba(240,232,210,.58);      /* secondary on dark */
  --t-3:rgba(240,232,210,.56);      /* real reading content: card copy, list
                                        items, footer links. Verified >=4.5:1
                                        on --bg-dark, so this rung is never
                                        used for anything smaller than AA. */
  --t-4:rgba(240,232,210,.3);       /* tertiary / metadata on dark */
  --hair:rgba(240,232,210,.16);
  --hair-soft:rgba(240,232,210,.10);
  --sunk:rgba(240,232,210,.05);

  /* Accent — ONE hue */
  --accent:#C07030;
  --accent-dim:#C07030;
  --accent-glow:rgba(192,112,48,.16);
  --wood-glow:#7A4E24;

  --card-bg:var(--bg-dark-alt);

  /* Type */
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,monospace;

  /* Scale — authored at 1920px in the spec, converted to clamp() here */
  --f-mono:13px; --f-xs:14px; --f-sm:15px; --f-base:17px; --f-lg:19px;
  --f-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --f-2xl:clamp(1.6rem,1.3rem + 1.2vw,2rem);
  --f-3xl:clamp(2rem,1.4rem + 2.4vw,2.75rem);
  --f-4xl:clamp(2.3rem,1.4rem + 3.6vw,3.9rem);
  --f-5xl:clamp(2.6rem,1.2rem + 6vw,6.6rem);
  --f-stat:clamp(2.2rem,1.2rem + 4vw,5.4rem);

  /* No rounded corners on structural elements, per spec */
  --r-card:0; --r-sm:0; --r-pill:0;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:420ms; --dur-micro:180ms;
  --container:74rem;
}

/* ---- The light (paper) surface -------------------------------------------
   Contrast verified against the cream ground (#EDE6D0):
     --ink-dark #1E2820        on #EDE6D0 -> ~13.8:1
     --ink-dark-2 rgba(30,40,32,.6) on #EDE6D0 -> ~7.3:1  (AA/AAA for body)
   Both comfortably clear AA at any size used here.                         */
.light{
  --t-1:#1E2820;
  --t-2:rgba(30,40,32,.72);
  --t-3:rgba(30,40,32,.68);          /* verified >=4.5:1 on --paper */
  --t-4:rgba(30,40,32,.55);
  --hair:rgba(30,40,32,.16);
  --hair-soft:rgba(30,40,32,.10);
  --sunk:rgba(30,40,32,.04);
  --card-bg:var(--paper-alt);
  background:var(--paper);
  color:var(--t-1);
}
.light .btn-white{background:var(--bg-dark);color:var(--t-1);}
.light .btn-primary{color:var(--paper);}
.light .btn-primary:hover{background:#A8611E;}
.light .card{border-color:var(--hair);}
.light .stat{background:var(--paper);}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  background:var(--bg-dark); color:var(--t-1);
  font-family:var(--font-body);
  font-size:var(--f-base); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  display:flex; flex-direction:column; min-height:100vh;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;padding:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;border-radius:0;}
main{flex:1;}
::selection{background:var(--accent);color:var(--paper);}

/* ---- Type ------------------------------------------------------------------
   RULE: headlines are Bricolage 700/800, mixed case, never uppercase, tight
   negative tracking. Body is DM Sans. No italic anywhere.                    */
h1,h2,h3{
  font-family:var(--font-display);
  letter-spacing:-.022em;line-height:1.05;text-wrap:balance;font-weight:800;
}
h1{font-size:var(--f-5xl);letter-spacing:-.025em;}
h2{font-size:var(--f-4xl);font-weight:700;}
h3{font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em;line-height:1.25;}
p{text-wrap:pretty;color:var(--t-2);}

/* Emphasis inside a headline — the orange <em>. NOT a second typeface. */
.said, em{
  font-style:normal;
  font-family:inherit;
  color:var(--accent);
  font-weight:inherit;
}
.said-plain{color:var(--t-1);}

/* Bracket label — the technical voice. Mono, tracked, always uppercase. */
.tag{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--font-mono);
  font-size:var(--f-mono);font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-4);
}
.tag::before{content:"—";color:var(--accent);font-weight:400;}
.tag.no-rule::before{display:none;}
.tag.accent{color:var(--accent);}

.lead{font-size:var(--f-lg);line-height:1.65;color:var(--t-2);font-weight:400;font-family:var(--font-body);}
.measure{max-width:38rem;} .measure-lg{max-width:46rem;}
.mx-auto{margin-inline:auto;} .center{text-align:center;}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.9rem}.mt-4{margin-top:1.4rem}
.mt-5{margin-top:2rem}.mt-6{margin-top:3rem}.mt-8{margin-top:5rem}

/* ---- Layout -------------------------------------------------------------- */
.container{width:100%;margin-inline:auto;padding-inline:1.5rem;max-width:var(--container);}
@media(min-width:768px){.container{padding-inline:2.5rem;}}
.section{padding-block:clamp(4.5rem,2rem + 8vw,8rem);position:relative;}
.section-tight{padding-block:clamp(3rem,1.5rem + 5vw,5rem);position:relative;}
.rule{height:1px;background:var(--hair-soft);}

/* The field: dark ground carrying the mandatory atmospheric wood glow,
   anchored per spec at 70% 80%. This is part of the surface, not optional. */
.field{position:relative;isolation:isolate;overflow:hidden;}
.field::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse at 70% 80%, rgba(122,78,36,.28) 0%, rgba(80,50,20,.14) 40%, transparent 70%),
    var(--bg-dark);
}

/* ---- Nav ---------------------------------------------------------------- */
.navwrap{position:fixed;inset-inline:0;top:0;z-index:60;padding-top:max(1rem,env(safe-area-inset-top));
  transition:transform var(--dur) var(--ease);}
.navwrap.scrolled{transform:translate3d(0,-.25rem,0);}
.nav{display:flex;justify-content:center;padding-inline:1.5rem;position:relative;}
.nav-pill{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  width:100%;max-width:var(--container);
  padding:.7rem .8rem .7rem 1.15rem;
  border:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.navwrap.scrolled .nav-pill{
  background:rgba(35,46,38,.88);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-color:var(--hair);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .navwrap.scrolled .nav-pill{background:rgba(35,46,38,.98);}
}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.02em;font-size:1.0625rem;}
.brand img{width:26px;height:26px;}
.nav-links{display:none;align-items:center;gap:.35rem;}
@media(min-width:900px){.nav-links{display:flex;}}
.nav-links a{padding:.5rem .9rem;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:var(--t-3);transition:color var(--dur-micro) var(--ease);position:relative;}
.nav-links a:hover{color:var(--t-1);}
.nav-links a::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.28rem;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-micro) var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:.55rem;flex-shrink:0;}
.menu-toggle{display:inline-grid;place-content:center;gap:4px;width:44px;height:44px;
  border:1px solid var(--hair);color:var(--t-1);}
.menu-toggle span{display:block;width:16px;height:1.5px;background:currentColor;transition:transform var(--dur-micro) var(--ease),opacity var(--dur-micro) var(--ease);}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.mobile-menu{display:none;position:absolute;top:calc(100% + .65rem);left:1.5rem;right:1.5rem;
  padding:.6rem;border:1px solid var(--hair);background:#1E2820;}
.navwrap.menu-open .mobile-menu{display:block;}
.mobile-menu a{display:block;padding:.9rem 1rem;color:var(--t-2);font-size:16px;min-height:44px;display:flex;align-items:center;}
.mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--t-1);background:var(--sunk);}
@media(min-width:900px){.menu-toggle,.mobile-menu{display:none!important;}}

/* ---- Buttons — rectangular, hairline, no shadow --------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.5rem;min-height:48px;
  font-family:var(--font-mono);
  font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease);
}
.btn-primary{background:var(--accent);color:var(--paper);border-color:var(--accent);font-weight:500;}
.btn-primary:hover{background:#D3813C;}
.btn-ghost{border:1px solid var(--hair);color:var(--t-2);}
.btn-ghost:hover{border-color:var(--t-3);color:var(--t-1);}
.btn-white{background:var(--paper);color:var(--bg-dark);font-weight:500;}
.btn-sm{padding:.6rem 1rem;font-size:12px;min-height:40px;}
.btn .arw{transition:transform var(--dur-micro) var(--ease);}
.btn:hover .arw{transform:translateX(3px);}

/* ---- Cards — strict rectangles, hairline border, no shadow ---------------- */
.card{
  border:1px solid var(--hair);
  background:var(--card-bg);
  padding:1.9rem;
  transition:border-color var(--dur) var(--ease);
}
.card.lift:hover{border-color:var(--accent);}
.card h3{color:var(--t-1);}
.card p{color:var(--t-3);font-size:var(--f-sm);margin-top:.7rem;}
.grid{display:grid;gap:1px;background:var(--hair-soft);}
.grid .card{background:var(--bg-dark);}
.light .grid .card{background:var(--paper);}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(3,1fr);}}
@media(max-width:699px){.g3{grid-template-columns:1fr;}}

/* ---- Step rows — the named-method page ---------------------------------- */
.step{display:grid;gap:1.6rem;padding-block:3.2rem;border-top:1px solid var(--hair-soft);}
@media(min-width:900px){.step{grid-template-columns:14rem 1fr;gap:3rem;}}
.step-n{font-family:var(--font-mono);font-size:3rem;
  font-weight:400;color:var(--t-4);line-height:1;letter-spacing:-.02em;}
.step h3{font-size:var(--f-2xl);letter-spacing:-.02em;line-height:1.15;}
.step ul{margin-top:1.5rem;display:grid;gap:.6rem;}
.step li{position:relative;padding-left:1.6rem;color:var(--t-3);font-size:var(--f-sm);}
.step li::before{content:"—";position:absolute;left:0;top:0;
  font-family:var(--font-mono);color:var(--accent);}
.step .close{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--hair-soft);
  color:var(--t-4);font-size:var(--f-sm);}

/* ---- Stat strip ---------------------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--hair-soft);border-block:1px solid var(--hair-soft);}
@media(min-width:700px){.stats{grid-template-columns:repeat(3,1fr);}}
.stat{background:var(--bg-dark);padding:2.2rem 1.5rem;text-align:center;}
.stat b{display:block;font-family:var(--font-display);font-size:var(--f-stat);font-weight:800;letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;}
.stat span{display:block;margin-top:.8rem;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-4);}

/* ---- Motion — one curve, and it respects the user -------------------------
   Only transform and opacity are animated, so nothing here touches layout or
   paint. Scroll-driven where supported; IntersectionObserver fallback in
   base.html, gated by CSS.supports so the two never both run.               */
@supports (animation-timeline: view()){
  .rise{
    opacity:1;transform:none;
    animation:rise-scroll linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 26%;
  }
  @keyframes rise-scroll{
    from{opacity:0;transform:translateY(26px);}
    to{opacity:1;transform:none;}
  }
  .hero-drift{
    animation:hero-settle linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 90%;
  }
  @keyframes hero-settle{
    from{opacity:1;transform:none;}
    to{opacity:.4;transform:translateY(-18px);}
  }
}

.rise{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);}
.rise.in{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(16px);
  animation:rise-in .7s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 70ms);}
@keyframes rise-in{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .rise{opacity:1;transform:none;}
  .stagger>*{opacity:1;transform:none;animation:none;}
}

/* ---- Footer -------------------------------------------------------------- */
footer{border-top:1px solid var(--hair-soft);padding-block:3.5rem 2.5rem;}
.foot-grid{display:grid;gap:2.5rem;}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr;}}
footer a{color:var(--t-3);font-size:var(--f-xs);transition:color var(--dur-micro) var(--ease);}
footer a:hover{color:var(--accent);}
footer li{margin-top:.55rem;}
.foot-bottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--hair-soft);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  color:var(--t-4);font-size:var(--f-xs);font-family:var(--font-mono);letter-spacing:.04em;}
/* The copyright line is decorative metadata (t-4 is fine at 2.4:1), but the
   two links beside it are real navigation and were inheriting that same low
   contrast because .foot-bottom's class-level color beats the plain "footer
   a" element selector. Named explicitly so a link is always readable. */
.foot-bottom a{color:var(--t-3);}
.foot-bottom a:hover{color:var(--accent);}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--accent);
  color:var(--paper);padding:.7rem 1.1rem;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---- .prose — long-form document pages (/terms/) ------------------------- */
.prose h1{font-size:var(--f-3xl);letter-spacing:-.022em;line-height:1.1;}
/* h2 here is the document's own title line (e.g. "Kairo — Privacy Policy"),
   demoted from h1 by build.py's md_to_html(shift=1) so the page still has
   only one real h1 — the one already set in the hero above this block. It
   reads as a subtitle, not a repeating section divider. */
.prose h2{font-size:var(--f-lg);font-weight:700;color:var(--t-2);margin-top:0;}
/* h3 is the repeating numbered section header ("1. Project documents...").
   This is the border-and-space treatment the old system gave its h2s,
   carried down one level along with the heading shift. */
.prose h3{font-size:var(--f-xl);margin-top:3.25rem;padding-top:1.9rem;border-top:1px solid var(--hair-soft);}
.prose hr+h3{margin-top:0;padding-top:0;border-top:0;}
.prose h4{font-size:var(--f-lg);margin-top:1.9rem;}
.prose p{margin-top:1rem;line-height:1.72;font-family:var(--font-body);}
.prose ul{margin-top:1rem;padding-left:1.35rem;}
.prose li{list-style:none;position:relative;margin-top:.5rem;color:var(--t-3);padding-left:1.4rem;}
.prose li::before{content:"—";position:absolute;left:0;font-family:var(--font-mono);color:var(--accent);}
.prose strong{color:var(--t-1);font-weight:700;}
.prose code{font-family:var(--font-mono);font-size:.875em;
  background:var(--sunk);padding:.1em .35em;}
.prose hr{border:0;border-top:1px solid var(--hair-soft);margin:2.5rem 0;}
.prose blockquote{margin-top:1.5rem;padding:1.2rem 1.4rem;
  background:var(--sunk);border-left:3px solid var(--accent);line-height:1.65;}

/* Exclusion list — needs a visible marker or the items read as loose
   paragraphs. An em dash, not a bullet: these are things you do NOT get. */
.excl{display:grid;gap:0;}
.excl li{position:relative;padding:.95rem 0 .95rem 2rem;color:var(--t-3);
  font-size:var(--f-sm);border-top:1px solid var(--hair-soft);}
.excl li:last-child{border-bottom:1px solid var(--hair-soft);}
.excl li::before{content:"—";position:absolute;left:.45rem;top:.9em;
  font-family:var(--font-mono);color:var(--accent);}

/* ---- Instant Estimator demo ----------------------------------------------- */
.est-label{display:block;font-size:.9375rem;font-weight:500;color:var(--t-1);
  margin-bottom:.5rem;margin-top:1.25rem}
.est-label:first-of-type{margin-top:1.25rem}
.est-input{width:100%;font:inherit;font-size:16px;color:var(--t-1);
  background:var(--bg-dark);border:1px solid var(--hair);border-radius:0;
  -webkit-appearance:none;appearance:none;
  padding:.85rem 1rem;
  transition:border-color var(--dur-micro) var(--ease);min-height:48px}
select.est-input{
  background-image:linear-gradient(45deg,transparent 50%,var(--t-3) 50%),
    linear-gradient(135deg,var(--t-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 15px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.5rem;}
.light .est-input{background:var(--paper);}
.est-input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:transparent}
.est-hint{margin-top:.5rem;font-size:.8125rem;color:var(--t-4)}
.est-gate{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--hair-soft)}
.est-gate-title{font-size:.9375rem;font-weight:500;color:var(--t-1)}
.est-result{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--hair-soft)}
.est-range{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.05;margin-top:.9rem;color:var(--accent)}
.est-note{margin-top:.7rem;font-size:.9375rem;color:var(--t-3)}
.est-disclaimer{margin-top:1rem;font-size:.8125rem;color:var(--t-4);line-height:1.5}
.est-source{margin-top:1.5rem;font-size:.8125rem;color:var(--t-4);line-height:1.6;text-align:center}
.est-source strong{color:var(--t-2);font-weight:600}
.est-error{color:#E0776B;font-size:.8125rem;margin-top:.5rem}

/* ---- Cursor spotlight — subtle, wood-glow toned, fine pointer only -------- */
.spot{
  position:absolute;top:0;left:0;width:38rem;height:38rem;
  margin:-19rem 0 0 -19rem;
  z-index:-1;pointer-events:none;
  background:radial-gradient(circle closest-side,
    rgba(192,112,48,.09) 0%, rgba(122,78,36,.05) 38%, transparent 70%);
  opacity:0;transition:opacity 600ms var(--ease);
  will-change:transform;
}
.spot.on{opacity:1;}
@media(hover:none){.spot{display:none;}}

/* ---- Headline reveal -------------------------------------------------------
   CSS-only mount animation. No JS mount, so it never freezes at opacity 0 in
   a background tab.                                                          */
.rv{overflow:hidden;display:block;padding-bottom:.14em;margin-bottom:-.14em;}
.rv>span{
  display:block;
  animation:rv-up 1.15s var(--ease) both;
}
.rv-late>span{animation-delay:.18s;}
@keyframes rv-up{
  from{transform:translate3d(0,110%,0);opacity:0;}
  to  {transform:translate3d(0,0,0);opacity:1;}
}

/* ---- Cards that answer the cursor (kept, recolored, no shadow) ------------ */
.card{position:relative;overflow:hidden;--cx:50%;--cy:0%;}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(20rem 20rem at var(--cx) var(--cy),
    var(--accent-glow),transparent 68%);
  opacity:0;transition:opacity 320ms var(--ease);
}
.card.lift:hover::before{opacity:1;}
.card>*{position:relative;}

/* ---- The seam between dark and paper sections ----------------------------- */
.light{position:relative;}
.light::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2.5rem;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,40,32,.10),rgba(30,40,32,.02) 55%,transparent);
}
.light + .light::before,
.stats.light::before{display:none;}

/* ---- Hero proof panel ------------------------------------------------------ */
.hero-mid{max-width:54rem;margin-inline:auto;text-align:center;}
.hero-mid .lead{margin-inline:auto;max-width:40rem;}
.hero-mid .tag{justify-content:center;}
.hero-acts{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;}

.hero-spec{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2.75rem;}
.hero-rule{width:28px;height:1px;background:var(--hair);}
.hero-spec-t{
  font-family:var(--font-mono);
  font-size:12px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t-4);
  line-height:1.9;
}
.hero-below{max-width:46rem;margin:4rem auto 0;}
@media(max-width:767px){
  .hero-spec{margin-top:2rem;}
  .hero-below{margin-top:2.5rem;}
}

.hero-grid{display:grid;gap:3.5rem;align-items:center;}
@media(min-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:4rem;}
}
@media(max-width:767px){
  .field.hero-drift{padding-top:7.5rem!important;padding-bottom:3.5rem!important;}
  .hero-grid{gap:2.5rem;}
  .nav{padding-inline:1rem;}
  .nav-pill{gap:.45rem;padding:.58rem .6rem .58rem .9rem;}
  .nav-cta{padding:.68rem .9rem;font-size:12px;}
  .mobile-menu{left:1rem;right:1rem;}
}
.mock{
  border:1px solid var(--hair);
  background:var(--bg-dark-alt);
  overflow:hidden;
  animation:mock-in 1.2s var(--ease) .45s both;
}
@keyframes mock-in{from{opacity:0;transform:translate3d(0,26px,0) scale(.985);}
  to{opacity:1;transform:none;}}
.mock-float{animation:mock-float 9s ease-in-out infinite;}
@keyframes mock-float{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-6px,0);}}
.mock-bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem .9rem;border-bottom:1px solid var(--hair-soft);
  background:rgba(240,232,210,.03);
}
.mock-bar u{display:block;width:8px;height:8px;background:var(--hair);}
.mock-url{
  margin-left:.4rem;flex:1;text-align:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--t-4);background:rgba(240,232,210,.05);
  padding:.3rem .8rem;
}
.mock-body{padding:1.5rem 1.5rem 1.6rem;}
.mock-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--hair-soft);font-size:var(--f-xs);}
.mock-row span:first-child{color:var(--t-4);}
.mock-row span:last-child{color:var(--t-2);font-weight:500;}
.mock-out{margin-top:1.4rem;}
.mock-num{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,1.1rem + 1.7vw,2.4rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.05;margin-top:.55rem;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.mock-sub{margin-top:.5rem;font-size:12px;color:var(--t-4);line-height:1.5;}
.mock-toast{
  display:flex;align-items:center;gap:.65rem;
  margin-top:1.3rem;padding:.75rem .9rem;
  border:1px solid rgba(192,112,48,.32);
  background:rgba(192,112,48,.08);
  font-size:12px;color:var(--t-2);
  animation:toast-in 700ms var(--ease) 2.1s both;
}
@keyframes toast-in{from{opacity:0;transform:translate3d(0,10px,0);}to{opacity:1;transform:none;}}
.mock-dot{width:7px;height:7px;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,112,48,.5);}
  70%,100%{box-shadow:0 0 0 9px rgba(192,112,48,0);}}

/* ---- Split section header -------------------------------------------------- */
.split{display:grid;gap:1.4rem;}
@media(min-width:1000px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:4.5rem;align-items:start;}
  .split-b{padding-top:.6rem;}
}
.split-b p + p{margin-top:1.1rem;}
.split-a h2{margin-top:.9rem;}

/* ---- Respect the user ------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .mock-float,.mock-dot{animation:none!important;}
  .spot{display:none;}
  .rv>span,.mock,.mock-toast{animation:none!important;opacity:1!important;transform:none!important;}
}

/* ---- Nav on a phone --------------------------------------------------------
   Below the desktop nav breakpoint the pill is always visible, no scroll
   state to toggle, so nothing flickers on iOS scroll-position jitter.       */
@media(max-width:899px){
  .nav-pill,
  .navwrap.scrolled .nav-pill{
    background:rgba(30,40,33,.92);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    border-color:var(--hair);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .nav-pill,
    .navwrap.scrolled .nav-pill{background:rgba(30,40,33,.98);}
  }
  /* The open mobile menu sits directly under the pill in the same fixed
     stacking context. Some engines composite a blurred backdrop-filter
     against the wrong layer there, showing the hero text ghosted through
     the menu panel. Dropping the blur while the menu is open removes the
     bug and costs nothing visible — the pill is already solid at .92. */
  .navwrap.menu-open .nav-pill{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(30,40,33,.98);
  }
  .navwrap,
  .navwrap.scrolled{transform:none;}
  .navwrap{padding-top:calc(1.1rem + env(safe-area-inset-top,0px));}
  .nav{padding-inline:max(1.25rem,env(safe-area-inset-left,0px));}
}

/* Inline text links are supporting actions, not competing primary calls to action. */
.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(192,112,48,.45);
  padding-bottom: 1px;
  transition: border-color 200ms ease, color 200ms ease;
}
.link::after {
  content: " \2192";
}
.link:hover,
.link:focus-visible {
  border-bottom-color: currentColor;
}