/* ============================================================
   hands on with.ai — console redesign (Comp E lane)
   Jersey 25 (pixel display) · Rubik (body) · VT323 (ticker)
   Evergreen bookend: deep-green hero + closing/footer, light proof zone between.
   (Sitewide CRT scanlines retired 2026-06-10; the about cut-out keeps its
   local scanline texture. Hero went evergreen 2026-06-11.)
   ============================================================ */

:root {
  --bg:          oklch(0.98 0.006 150);
  --bg-tint:     oklch(0.955 0.022 150);   /* offer section */
  --panel:       oklch(1 0 0);
  --ink:         oklch(0.24 0.03 250);
  --ink-soft:    oklch(0.45 0.03 250);
  --green:       oklch(0.56 0.16 150);     /* brand green = surname */
  --green-btn:   oklch(0.52 0.15 150);     /* interactive: white text passes */
  --green-d:     oklch(0.39 0.13 152);     /* green text on light */
  --green-deep:  oklch(0.30 0.08 155);     /* drenched closing / footer */
  --green-bright:oklch(0.74 0.16 150);
  --blue:        oklch(0.55 0.15 245);
  --red:         oklch(0.57 0.20 27);
  --coral:       oklch(0.62 0.17 30);      /* about cut-out panel */
  --coral-d:     oklch(0.44 0.15 30);      /* its hard pixel shadow */
  --gold:        oklch(0.80 0.15 85);
  --cream:       oklch(0.95 0.02 120);
  --rule:        oklch(0.28 0.03 250);     /* dark outline + pixel shadow */
  --line:        oklch(0.88 0.02 250);     /* subtle hairline */

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 48px);

  --pixel: "Jersey 25", ui-sans-serif, system-ui, sans-serif;
  --body:  "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --term:  "VT323", ui-monospace, "Courier New", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-nav: 50; --z-overlay: 99;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* html bg matches the hero/footer drench so rubber-band overscroll stays green */
html { scroll-behavior: smooth; background: var(--green-deep); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  position: relative;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 3px solid var(--green-d); outline-offset: 2px; border-radius: 3px; }
/* on the dark green surfaces (hero, closing, footer) the defaults vanish: flip them */
.hero ::selection, .closing ::selection, .footer ::selection { background: var(--cream); color: var(--green-deep); }
.hero :focus-visible, .closing :focus-visible, .footer :focus-visible,
.nav :focus-visible { outline-color: var(--green-bright); }
.nav.scrolled :focus-visible, .nav.open :focus-visible { outline-color: var(--green-d); }

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -50px; z-index: 200;
  background: var(--green-btn); color: #fff; padding: .6rem 1rem; border-radius: 6px;
  font-weight: 600; transition: top .2s var(--ease);
}
.skip:focus { top: 8px; }

/* ---------- Wordmark ---------- */
.wordmark { font-family: var(--pixel); font-size: 1.85rem; line-height: 1; color: var(--ink); }
.wordmark .dot, .wordmark .ai { color: var(--green-d); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-weight: 700; font-size: .98rem; line-height: 1;
  padding: .72rem 1.15rem; min-height: 44px; border-radius: 6px; border: 2px solid var(--rule);
  cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .15s ease;
}
.btn .arrow { transition: transform .15s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--green-btn); color: #fff; box-shadow: 0 4px 0 var(--rule); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--rule); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rule); }
.btn-ghost { background: var(--panel); color: var(--ink); box-shadow: 0 4px 0 var(--line); border-color: var(--rule); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line); }
.btn-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn-on-green { background: var(--cream); color: var(--green-deep); border-color: oklch(0.18 0.05 155); box-shadow: 0 4px 0 oklch(0.18 0.05 155); }
.btn-on-green:hover { transform: translateY(-2px); box-shadow: 0 6px 0 oklch(0.18 0.05 155); }
.btn-on-green:active { transform: translateY(2px); box-shadow: 0 1px 0 oklch(0.18 0.05 155); }
.btn-ghost-green { background: transparent; color: var(--cream); border-color: color-mix(in oklab, var(--cream) 55%, transparent); }
.btn-ghost-green:hover { background: color-mix(in oklab, var(--cream) 14%, transparent); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  /* pad into the notch/status-bar safe area so the scrolled bg fills the strips
     either side of the notch instead of letting the page show through */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  border-bottom: 2px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav.scrolled, .nav.open {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--rule);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: .85rem; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links > a:not(.btn) { font-weight: 500; font-size: .95rem; color: var(--ink-soft); transition: color .2s ease; }
.nav-links > a:not(.btn):hover { color: var(--ink); }
/* at the top of the page the nav floats over the evergreen hero: run it light.
   .scrolled / .open (mobile menu) give it a solid light bg, so revert to ink. */
.nav .wordmark { color: var(--cream); transition: color .3s ease; }
.nav .wordmark .dot, .nav .wordmark .ai { color: var(--green-bright); transition: color .3s ease; }
.nav .nav-links > a:not(.btn) { color: color-mix(in oklab, var(--cream) 80%, transparent); }
.nav .nav-links > a:not(.btn):hover { color: #fff; }
.nav.scrolled .wordmark, .nav.open .wordmark { color: var(--ink); }
.nav.scrolled .wordmark .dot, .nav.scrolled .wordmark .ai,
.nav.open .wordmark .dot, .nav.open .wordmark .ai { color: var(--green-d); }
.nav.scrolled .nav-links > a:not(.btn), .nav.open .nav-links > a:not(.btn) { color: var(--ink-soft); }
.nav.scrolled .nav-links > a:not(.btn):hover, .nav.open .nav-links > a:not(.btn):hover { color: var(--ink); }
.nav-toggle {
  display: none; width: 44px; height: 44px; background: transparent;
  border: 2px solid color-mix(in oklab, var(--cream) 55%, transparent); border-radius: 6px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav.scrolled .nav-toggle, .nav.open .nav-toggle {
  background: var(--panel); border-color: var(--rule); box-shadow: 0 3px 0 var(--line);
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--cream); position: relative;
}
.nav.scrolled .nav-toggle .bars, .nav.scrolled .nav-toggle .bars::before, .nav.scrolled .nav-toggle .bars::after,
.nav.open .nav-toggle .bars, .nav.open .nav-toggle .bars::before, .nav.open .nav-toggle .bars::after {
  background: var(--ink);
}
.nav-toggle .bars::before { position: absolute; top: -6px; }
.nav-toggle .bars::after  { position: absolute; top:  6px; }
.nav-mobile { display: none; }

/* ---------- Section scaffold ---------- */
.section { padding-block: clamp(3.5rem, 8vh, 6.5rem); }
.section-head {
  font-family: var(--pixel); font-size: clamp(2rem, 4.8vw, 3.3rem); line-height: 1;
  max-width: 20ch; text-wrap: balance;
}
.section-sub { color: var(--ink-soft); max-width: 56ch; margin-top: 1rem; font-size: 1.1rem; }

/* ---------- Hero (full viewport; entrance choreography replaces the old splash) ---------- */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  padding-block: clamp(6rem, 12vh, 8rem) clamp(3rem, 7vh, 5rem);
  position: relative; overflow: clip;
  /* evergreen bookend: the hero shares the closing/footer drench, so the
     site opens and closes on brand green with the light proof zone between */
  background: var(--green-deep);
  color: var(--cream);
  border-bottom: 2px solid var(--rule);
}
.hero-grid { width: 100%; display: grid; grid-template-columns: 1.22fr .78fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; animation: rise .6s var(--ease) .05s both; }
.chip { font-family: var(--pixel); font-size: 1.1rem; line-height: 1; color: #fff; padding: .36rem .62rem .28rem; border-radius: 5px; border: 2px solid color-mix(in oklab, var(--cream) 50%, transparent); }
.chip-g { background: var(--green-btn); } .chip-b { background: var(--blue); } .chip-r { background: var(--red); }
.headline {
  font-family: var(--pixel); font-size: clamp(2.9rem, 5.4vw, 4.6rem); line-height: 1; margin-top: 1.2rem;
}
.headline .g { color: var(--green-bright); }
/* word entrance — three groups rise in: "hand-built" · "AI tools" · "for your
   business" at 0.10 / 0.48 / 0.86s. Lead arrives whole at 1.24s. Buttons
   bounce in at 1.45 / 1.59s; widget swipes in at 2.40s. */
.headline .w { display: inline-block; --dx: 0; --dy: 18px; animation: word-in .38s var(--ease) both; }
.headline .w:nth-child(1) { animation-delay: .08s; }
.headline .w:nth-child(2) { animation-delay: .30s; }
.headline .w:nth-child(4) { animation-delay: .52s; }
@keyframes word-in { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -12px)); } }
.lead { font-size: 1.25rem; line-height: 1.65; max-width: 44ch; margin-top: 1.35rem; color: color-mix(in oklab, var(--cream) 90%, transparent); }
.lead strong { color: var(--green-bright); font-weight: 700; }
.lead.lc { --dx: 0; --dy: 12px; animation: word-in .38s var(--ease) .74s both; }
.ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.hero .ctas .btn { animation: btn-land .45s var(--ease) both; }
.hero .ctas .btn:nth-child(1) { animation-delay: .92s; }
.hero .ctas .btn:nth-child(2) { animation-delay: 1.04s; }
@keyframes btn-land {
  from  { opacity: 0; transform: translateY(14px); }
  70%   { opacity: 1; transform: translateY(-4px); }
  to    { opacity: 1; transform: translateY(0); }
}
.ctas-center { justify-content: center; }

/* ---- time-saved dashboard: high-res product-UI mock (iMessage-leaning) ---- */
/* the widget waits for buttons to land and settle (~0.4s pause after 1.59s),
   then swipes in from the right at 2.40s */
.appcard { position: relative; font-family: var(--body); isolation: isolate; }
.ac-gauge { animation: swipe-in .45s var(--ease) 1.50s both; }
.ac-panel { animation: swipe-in .45s var(--ease) 1.62s both; }
@keyframes swipe-in { from { opacity: 0; transform: translateX(48px); } }
/* gradient arc stops */
.ac-arc .s0 { stop-color: var(--green-bright); }
.ac-arc .s1 { stop-color: var(--green); }
.ac-arc .s2 { stop-color: var(--green-deep); }

/* slim gauge bar: dial + readout in one quiet horizontal strip floating over
   the feed panel (legend retired 2026-06-11 — the copy column carries the
   page's weight, the widget just hums; layout C of the three Chris reviewed) */
.ac-gauge {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .9rem;
  width: 100%; margin-bottom: -14px;
  background: linear-gradient(180deg, oklch(1 0 0), oklch(0.985 0.006 150));
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px oklch(0.24 0.03 250 / .06), 0 14px 28px -12px oklch(0.24 0.03 250 / .28);
  padding: .55rem .95rem;
}
.ac-arc { display: block; width: 80px; height: auto; margin: 0; flex: none; overflow: visible; }
.ac-track, .ac-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.ac-track { stroke: var(--line); }
.ac-fill { stroke: url(#acg); stroke-dasharray: 164; stroke-dashoffset: 164; transition: stroke-dashoffset 1.15s var(--ease); }
.appcard.play .ac-fill { stroke-dashoffset: 49; }          /* ~70% of the dial */
.ac-readout { text-align: left; margin-top: 0; }
.ac-num { display: inline; font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); margin-right: .4rem; }
.ac-unit { display: inline; font-size: .8rem; font-weight: 500; color: var(--ink-soft); }

/* feed panel tucked under the gauge card */
.ac-panel {
  position: relative; z-index: 1; overflow: hidden; /* clips the feed roll */
  background: linear-gradient(180deg, oklch(0.975 0.012 150), oklch(0.96 0.016 150));
  border: 1px solid var(--line); border-radius: 20px;
  padding: 1.75rem 1rem 1rem; box-shadow: 0 1px 2px oklch(0.24 0.03 250 / .05);
}
.ac-head {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 .25rem .6rem;
}
.ac-feed { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.ac-row {
  display: flex; align-items: center; gap: .6rem;
  background: oklch(1 0 0 / .8); border: 1px solid var(--line); border-radius: 14px;
  padding: .6rem .7rem; box-shadow: 0 1px 1px oklch(0.24 0.03 250 / .04);
  opacity: 0; transform: translateX(18px) scale(.985); /* rows reveal from the right */
}
.appcard.play .ac-row { animation: ac-row-in .55s var(--ease) forwards; }
.appcard.play .ac-row:nth-child(1) { animation-delay: .55s; }
.appcard.play .ac-row:nth-child(2) { animation-delay: .68s; }
.appcard.play .ac-row:nth-child(3) { animation-delay: .81s; }
.appcard.play .ac-row:nth-child(4) { animation-delay: .94s; }
/* once the live feed takes over (.live), rows stand on their own — the
   nth-child reveal above would refire as rows shift position on each push.
   New rows swoop in from beyond the panel's clipped right edge while the
   stack slides up to open the slot (the .08s delay lets the gap appear). */
.appcard.live .ac-row { animation: none; opacity: 1; transform: none; }
.appcard.live .ac-row.feed-anim-swoop { animation: swoop-in .55s var(--ease) .08s both; }
@keyframes swoop-in { from { transform: translateX(calc(100% + 28px)); } }
.ac-bars { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 16px; flex: none; }
.ac-bars i { width: 3.5px; border-radius: 1px; display: block; }
.ac-bars i:nth-child(1) { height: 7px; opacity: .55; } .ac-bars i:nth-child(2) { height: 11px; opacity: .78; } .ac-bars i:nth-child(3) { height: 16px; }
.b-green i { background: var(--green); } .b-coral i { background: var(--coral); }
.b-gold  i { background: var(--gold);  } .b-blue  i { background: var(--blue);  }
.ac-task { font-size: .92rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-pill {
  margin-left: auto; flex: none; font-size: .8rem; font-weight: 500; color: var(--ink-soft);
  background: oklch(0.96 0.012 150); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .6rem;
}
.ac-pill b { font-weight: 700; color: var(--green-d); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes ac-row-in { to { opacity: 1; transform: none; } }

/* No-JS / reduced-motion fallback: settled state */
html:not(.js) .ac-fill { stroke-dashoffset: 49; }
html:not(.js) .ac-row { opacity: 1; transform: none; }

/* ---------- Process ---------- */
.process .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.proc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; overflow: clip; }
.pcard { background: var(--panel); border: 2px solid var(--rule); border-radius: 8px; box-shadow: 0 5px 0 var(--rule); overflow: hidden; display: flex; flex-direction: column; }
.pcard .cap { font-family: var(--pixel); font-size: 1.7rem; line-height: 1; color: #fff; margin: 0; padding: .5rem .8rem .45rem; }
.pcard .cap { background: var(--green-btn); }
.pcard-in { padding: 1.1rem 1.1rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.pcard .when { font-family: var(--term); font-size: 1.05rem; color: var(--ink-soft); margin-top: 0; }
.pcard p { margin-top: .8rem; font-size: .96rem; color: var(--ink-soft); line-height: 1.5; }
.pricing { font-size: 1rem; color: var(--ink-soft); max-width: 62ch; margin-top: 2.2rem; line-height: 1.6; }
.pricing strong { color: var(--ink); font-weight: 700; }

/* ---------- Backbones: data + audit ---------- */
.bb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3rem); }
/* min-width 0: the log-strip's nowrap rows must not set the card's minimum
   (they ellipsis-clip instead); without it the grid blows out under ~1080px */
.bb-card { background: var(--panel); border: 2px solid var(--rule); border-radius: 12px; box-shadow: 0 6px 0 var(--rule); padding: clamp(1.5rem, 3.5vw, 2.2rem); min-width: 0; }
.bb-tag { font-family: var(--pixel); font-size: 1.05rem; line-height: 1; color: #fff; background: var(--green-btn); display: inline-block; padding: .32rem .6rem .24rem; border-radius: 5px; border: 2px solid var(--rule); }
.bb-tag-b { background: var(--blue); }
.bb-head { font-family: var(--pixel); font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.04; margin-top: .9rem; }
.bb-card > p { color: var(--ink-soft); line-height: 1.55; margin-top: .7rem; max-width: 46ch; }
.bb-points { display: grid; gap: .75rem; margin-top: 1.2rem; }
.bb-point { border: 2px solid var(--line); border-radius: 8px; padding: .8rem 1rem; }
.bb-k { font-family: var(--pixel); font-size: 1.2rem; line-height: 1; color: var(--green-d); display: block; }
.bb-v { color: var(--ink-soft); font-size: .95rem; line-height: 1.4; margin-top: .32rem; display: block; }
/* live decision-log strip: the audit trail, shown not told */
.log-strip {
  margin-top: 1.2rem; background: oklch(0.25 0.02 270); border-radius: 10px;
  padding: .8rem .9rem; font-family: var(--term); font-size: 1.02rem; line-height: 1.5;
  color: oklch(0.86 0.02 150); overflow: hidden;
}
.log-strip .lg-row { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-strip .t { color: oklch(0.68 0.02 270); margin-right: .55em; }
.log-strip .k { color: var(--green-bright); display: inline-block; min-width: 5.2em; }
.log-strip .flag { color: oklch(0.78 0.13 35); }
/* one complete decision record per entry: doc, verdict, the rule applied,
   the evidence found, the inputs read — the full anatomy of one judgement.
   On handover the outgoing record goes absolute (overlaying in place, fading)
   while the incoming one's lines scan in — see the rec-in rules with the
   feed-engine classes. */
.log-strip { position: relative; }
.log-strip .lg-rec { display: block; }
.log-strip .lg-rec.rec-out { position: absolute; left: .9rem; right: .9rem; top: .8rem; animation: rec-out .5s ease forwards; }
/* (log-row typing-in lives in the .play choreography block further down) */

/* ---------- Pricing ---------- */
.pricing-sec { background: var(--bg-tint); border-block: 2px solid var(--line); }
.price-triad { font-family: var(--pixel); font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.05; color: var(--green-d); margin-top: .7rem; }
.price-path { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.ppstep { background: var(--panel); border: 2px solid var(--rule); border-radius: 10px; box-shadow: 0 6px 0 var(--rule); padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; }
.pp-price { font-family: var(--pixel); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--green-d); }
.pp-free { color: var(--green-btn); }
.pp-label { font-family: var(--pixel); font-size: 1.3rem; line-height: 1.1; margin-top: .6rem; }
.ppstep p { color: var(--ink-soft); font-size: .96rem; line-height: 1.5; margin-top: .7rem; }
.after-build { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.ab-head { font-family: var(--pixel); font-size: 1.6rem; line-height: 1.1; }
.ab-aside { display: block; font-size: .62em; color: var(--ink-soft); margin-top: .25rem; }
.after-build .fork { margin-top: 1.3rem; }

.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.fork-card { background: var(--panel); border: 2px solid var(--rule); border-radius: 10px; box-shadow: 0 6px 0 var(--rule); padding: 1.6rem 1.6rem 1.5rem; }
.fork-tag { font-family: var(--pixel); font-size: 1.05rem; line-height: 1; color: #fff; display: inline-block; padding: .32rem .6rem .24rem; border-radius: 5px; border: 2px solid var(--rule); }
.fork-tag-g { background: var(--green-btn); } .fork-tag-b { background: var(--blue); }
.fork-card h3 { font-family: var(--pixel); font-size: 1.9rem; line-height: 1; margin-top: 1rem; }
.fork-card p { margin-top: .9rem; color: var(--ink-soft); line-height: 1.6; max-width: 46ch; }
.fork-foot { font-family: var(--term); font-size: 1.1rem; color: var(--green-d); margin-top: 1.1rem; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
.about-photo { position: relative; }
/* character-select cut-out panel */
.cutout-panel {
  position: relative; aspect-ratio: 4/5; max-height: 460px; overflow: hidden;
  background: var(--coral); border: 3px solid var(--rule); border-radius: 12px;
  box-shadow: 0 8px 0 var(--coral-d);
  display: flex; align-items: flex-end; justify-content: center;
}
.cutout-panel::before { /* dither texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 9px 9px; opacity: .5;
}
.cutout-panel::after { /* scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.09) 2px 3px);
}
.cutout-panel img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 97%; width: auto; max-width: 108%; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.22)); }
.cutout-tag {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-family: var(--pixel); font-size: 1.05rem; line-height: 1; color: var(--coral-d);
  background: var(--cream); padding: .3rem .55rem .22rem; border-radius: 5px; border: 2px solid var(--coral-d);
}
.about-body .prose { margin-top: 1.5rem; max-width: 58ch; }
.about-body .prose p + p { margin-top: 1.1rem; }
/* ---------- What I build: showcase grid (contained product micro-UIs) ---------- */
.work .section-head { margin-bottom: 0; }
.show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: clamp(2rem, 4vw, 3rem); }
.show-card {
  background: var(--panel); border: 2px solid var(--rule); border-radius: 12px;
  box-shadow: 0 6px 0 var(--rule); overflow: hidden;
  display: flex; flex-direction: column;
}
.show-card.wide {
  grid-column: span 2;
  display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch;
}
.show-card.wide .sc-copy { align-self: center; padding: 2rem 2.2rem; }
.show-card.wide .sc-shot { border-top: none; border-left: 1px solid var(--line); }
/* zig-zag rhythm: the second wide card flips (shot left, copy right) */
.show-card.wide.flip { grid-template-columns: 1.15fr 0.85fr; }
.show-card.wide.flip .sc-copy { order: 2; }
.show-card.wide.flip .sc-shot { order: 1; border-left: none; border-right: 1px solid var(--line); }
.sc-copy { padding: 1.4rem 1.5rem 1.1rem; }
.sc-title-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.sc-title { font-family: var(--pixel); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1; }
.sc-status {
  font-family: var(--term); font-size: 1.02rem; line-height: 1; padding: .2rem .55rem .15rem;
  border-radius: 5px; border: 2px solid var(--rule); color: #fff; background: var(--green-btn);
}
.sc-status.s-mine { background: var(--coral-d); }
.sc-desc { color: var(--ink-soft); font-size: .98rem; line-height: 1.5; margin-top: .55rem; max-width: 58ch; }
.sc-shot {
  flex: 1; padding: 1.4rem 1.5rem 1.7rem; position: relative;
  background:
    radial-gradient(120% 90% at 50% 110%, oklch(0.93 0.04 150 / .9), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 100%);
  border-top: 1px solid var(--line);
  display: grid; place-items: center;
}

/* shared phone / app frame (high-res product surface) */
.app-frame {
  width: 100%; max-width: 430px; background: oklch(0.965 0.01 250);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 1px 2px oklch(0.24 0.03 250 / .06), 0 14px 30px -12px oklch(0.24 0.03 250 / .25);
  overflow: hidden; font-size: .88rem; line-height: 1.45;
}
.af-bar {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .95rem; background: oklch(1 0 0 / .85);
  border-bottom: 1px solid var(--line);
}
.af-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem;
}
.av-green { background: linear-gradient(160deg, var(--green-bright), var(--green-d)); }
.av-coral { background: linear-gradient(160deg, oklch(0.78 0.13 35), var(--coral)); }
.af-name { font-weight: 600; font-size: .9rem; color: var(--ink); display: block; }
.af-sub { font-size: .74rem; color: var(--ink-soft); display: block; }
.af-sub .on { color: var(--green-d); }

/* chat thread */
.chat { padding: .9rem .8rem 1rem; display: flex; flex-direction: column; gap: .45rem; }
.stamp { text-align: center; font-size: .7rem; color: var(--ink-soft); margin-block: .25rem; }
.msg { max-width: 82%; border-radius: 18px; padding: .55rem .8rem;
  box-shadow: 0 1px 1px oklch(0.24 0.03 250 / .05); }
.msg.in  { align-self: flex-start; background: oklch(0.93 0.012 250); border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: linear-gradient(180deg, var(--green), var(--green-btn));
  color: #fff; border-bottom-right-radius: 6px; }
.msg.out .meta { color: oklch(1 0 0 / .75); }
.meta { display: block; font-size: .68rem; color: var(--ink-soft); margin-top: .25rem; }
.doc-chip {
  display: flex; align-items: center; gap: .55rem;
  background: oklch(1 0 0 / .22); border: 1px solid oklch(1 0 0 / .35);
  border-radius: 10px; padding: .45rem .6rem; margin-bottom: .35rem;
}
.doc-ico {
  width: 28px; height: 34px; flex: none; border-radius: 4px; background: #fff;
  border: 1px solid var(--line); position: relative;
}
.doc-ico::before { content: ""; position: absolute; inset: 7px 6px auto; height: 2px; background: var(--line); box-shadow: 0 5px 0 var(--line), 0 10px 0 var(--line); }
.doc-name { font-size: .78rem; font-weight: 600; display: block; }
.doc-kb { font-size: .68rem; opacity: .75; display: block; }
.verdict { display: flex; flex-direction: column; gap: .45rem; }
.v-row { display: flex; align-items: flex-start; gap: .5rem; background: oklch(1 0 0 / .85);
  border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; }
.v-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: .32rem; }
.v-ok   { background: var(--green); }
.v-flag { background: var(--coral); }
.v-row b { font-size: .8rem; display: block; }
.v-row span { font-size: .74rem; color: var(--ink-soft); display: block; }
.typing { display: inline-flex; gap: 4px; padding: .65rem .85rem; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: .45; }

/* document UI (GDPR generator) — interview-then-clause layout */
/* .docapp: top half = chat interview, bottom half = clause being written.
   Fixed height keeps the card in the 420-490px band alongside the other cards.
   The .sc-shot padding adds ~46px on top + bottom, so frame height ~380px -> card ~426px. */
.docapp { display: flex; flex-direction: column; height: 380px; }
.cite {
  display: inline-block; font-size: .62rem; font-weight: 600; color: var(--green-d);
  background: oklch(0.94 0.04 150); border: 1px solid oklch(0.86 0.06 150);
  border-radius: 999px; padding: .08rem .45rem; margin-top: .5rem; margin-right: .3rem;
}

/* Interview chat strip (top half of docapp) */
.gdpr-chat { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--line); background: oklch(0.965 0.01 250); }
.gdpr-chat-bar {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .9rem; background: oklch(1 0 0 / .85);
  border-bottom: 1px solid var(--line); flex: none;
}
.gdpr-thread {
  padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .38rem;
  overflow: clip; flex: 1;
}
/* JS locks height and bottom-aligns for the rolling feed */
html.js .gdpr-thread { height: 150px; justify-content: flex-end; }
.gdpr-thread .msg { font-size: .82rem; line-height: 1.42; }
.gdpr-thread .msg.in { max-width: 88%; }
.gdpr-thread .msg.out { max-width: 88%; }
.gdpr-thread .feed-roll { gap: .38rem; }

/* Generated clause panel (bottom half of docapp): ~190px reserved for doc area */
.gdpr-doc { flex: 0 0 190px; background: #fff; border-top: none; overflow: hidden; }
.gdpr-doc-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .9rem .45rem; background: oklch(0.96 0.012 150);
  border-bottom: 1px solid oklch(0.88 0.04 150); flex: none;
}
.gdpr-doc-label { font-family: var(--pixel); font-size: .9rem; line-height: 1; color: var(--green-d); }
.gdpr-doc-gen { font-size: .65rem; color: var(--ink-soft); font-style: italic; }
.gdpr-clause-wrap { padding: .75rem .9rem .85rem; display: flex; flex-direction: column; gap: .6rem; overflow: hidden; }
.gdpr-clause { background: oklch(0.99 0.004 150); border: 1px solid oklch(0.91 0.025 150); border-radius: 8px; padding: .6rem .7rem; }
.gc-head { font-weight: 700; font-size: .78rem; color: var(--ink); margin-bottom: .4rem; }
.gc-line { height: 6px; border-radius: 3px; background: oklch(0.91 0.012 250); margin-top: .42rem; }
.gc-line.w88 { width: 88%; } .gc-line.w80 { width: 80%; } .gc-line.w72 { width: 72%; } .gc-line.w70 { width: 70%; } .gc-line.w68 { width: 68%; } .gc-line.w65 { width: 65%; }
.gc-answer-ref {
  display: inline-block; font-size: .62rem; color: var(--blue); font-style: italic;
  background: oklch(0.94 0.03 245); border: 1px solid oklch(0.86 0.06 245);
  border-radius: 6px; padding: .1rem .42rem; margin-top: .45rem; margin-right: .25rem;
}

/* hidden states for the feed engine */
.gdpr-clause.gdpr-hidden, .gc-line.gdpr-hidden, .gc-answer-ref.gdpr-hidden, .gdpr-clause .cite.gdpr-hidden { opacity: 0; }
.gc-line, .gc-answer-ref, .gdpr-clause .cite { position: relative; }
.gdpr-doc-caret {
  position: absolute; left: calc(100% + 4px); top: -1px;
  width: 6px; height: 10px; border-radius: 1px; background: var(--green-d);
}

@media (max-width: 460px) {
  .docapp { min-height: auto; }
  .gdpr-thread { height: auto !important; }
}

/* dark feed (odds engine) */
.feed-dark {
  background: oklch(0.27 0.02 270); color: oklch(0.93 0.01 270);
  border-radius: 22px; border: 1px solid oklch(0.35 0.02 270);
  box-shadow: 0 1px 2px oklch(0.24 0.03 250 / .06), 0 14px 30px -12px oklch(0.24 0.03 250 / .25);
  overflow: hidden; width: 100%; max-width: 430px; font-size: .85rem;
}
.fd-bar { display: flex; align-items: center; gap: .6rem; padding: .68rem .95rem;
  background: oklch(0.23 0.02 270); border-bottom: 1px solid oklch(0.33 0.02 270); }
.fd-hash { color: oklch(0.68 0.02 270); font-weight: 700; }
.fd-name { font-weight: 600; font-size: .88rem; }
.fd-body { padding: .85rem .95rem 1rem; }
.fd-post { display: flex; gap: .65rem; }
.fd-ava { width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, var(--green-bright), var(--green-d));
  display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .8rem; }
.fd-author { font-weight: 600; color: var(--green-bright); font-size: .85rem; }
.fd-author .bot { font-size: .58rem; font-weight: 700; background: var(--blue); color: #fff;
  border-radius: 4px; padding: .1rem .3rem; margin-left: .35rem; vertical-align: 1px; }
.fd-time { font-size: .68rem; color: oklch(0.62 0.02 270); margin-left: .4rem; }
.fd-text { margin-top: .15rem; font-size: .82rem; color: oklch(0.88 0.01 270); }
.fd-table { margin-top: .55rem; border: 1px solid oklch(0.36 0.02 270); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.fd-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center;
  padding: .48rem .65rem; font-size: .78rem; background: oklch(0.30 0.02 270); }
.fd-row + .fd-row { border-top: 1px solid oklch(0.35 0.02 270); }
.fd-row .odds { font-family: var(--term); font-size: 1rem; color: oklch(0.85 0.01 270); }
.edge { font-weight: 700; font-size: .74rem; padding: .12rem .45rem; border-radius: 999px; }
.edge.pos { color: oklch(0.85 0.14 150); background: oklch(0.56 0.16 150 / .18); }
.fd-foot { margin-top: .5rem; font-size: .68rem; color: oklch(0.68 0.02 270); }

/* live widgets: main.js runs each micro-UI as a continuous slow feed once its
   card is on screen (paused off-screen, so it is always mid-action when you
   arrive). Without JS, or with reduced motion, the static finished frame in
   the HTML simply shows. Card ENTRANCES stay scroll-tied (the sitewide
   reveal); the widget STORIES run on their own clock. */
@media (prefers-reduced-motion: no-preference) {
  /* entrance classes the feed engine puts on nodes it spawns */
  .feed-anim { animation: msg-in .5s var(--ease) both; }
  .feed-anim-top { animation: msg-in-top .5s var(--ease) both; }
  .feed-anim-right { animation: msg-in-right .5s var(--ease) both; }
  /* audit record handover: old record fades in place while the new one's
     lines scan in from the left, one by one */
  .log-strip .rec-in .lg-row { opacity: 0; animation: rec-line-in .45s var(--ease) forwards; }
  .log-strip .rec-in .lg-row:nth-child(1) { animation-delay: .08s; }
  .log-strip .rec-in .lg-row:nth-child(2) { animation-delay: .26s; }
  .log-strip .rec-in .lg-row:nth-child(3) { animation-delay: .44s; }
  .log-strip .rec-in .lg-row:nth-child(4) { animation-delay: .62s; }
  .log-strip .rec-in .lg-row:nth-child(5) { animation-delay: .8s; }
  .wipe-anim { animation: line-wipe .45s var(--ease) both; transform-origin: left; }
  .cite-anim { animation: cite-pop .4s var(--ease) both; }

  /* idle loops: the page breathes at rest */
  .typing i { animation: blip 1.2s infinite; }
  .typing i:nth-child(2) { animation-delay: .18s; }
  .typing i:nth-child(3) { animation-delay: .36s; }
  .af-sub .on { animation: pulse-dot 2.4s ease-in-out infinite; }
  .dp-caret { animation: caret-blink 1.1s steps(2, start) infinite; }
  .gdpr-doc-caret { animation: caret-blink 1.1s steps(2, start) infinite; }

  /* spotlight: the card under the reading line (38% down the viewport)
     carries the focus and is the only feed playing — motion lives where
     the eye is. filter, not opacity: the entrance reveal animates opacity
     and its fill would override a static opacity dim. Idle loops (typing
     dots, on-dot pulse, caret blink) also hold still on dimmed cards. */
  html.js .show-grid.spot .show-card { transition: filter .5s ease; }
  html.js .show-grid.spot .show-card:not(.focus) { filter: saturate(.6) opacity(.75); }
  html.js .show-grid.spot .show-card:not(.focus) :is(.typing i, .af-sub .on, .dp-caret, .gdpr-doc-caret) { animation-play-state: paused; }
}

/* fixed feed windows: chats hold their height and bottom-align so new
   messages push old ones up and out under the frame's overflow clip */
html.js .chat { height: 330px; justify-content: flex-end; overflow: clip; }
.gdpr-hidden { opacity: 0; }
.dp-line, .dp-h { position: relative; }
.dp-caret {
  position: absolute; left: calc(100% + 5px); top: -2px;
  width: 7px; height: 12px; border-radius: 1px; background: var(--green-d);
}
/* rolling feed rows truncate rather than wrap so row height stays stable */
html.js .fd-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the engine moves feed children into an inner roller it can translate
   (the clip stays on the outer box, so the frame never moves) */
.feed-roll { display: flex; flex-direction: column; min-width: 0; }
.chat .feed-roll { gap: .45rem; }
@keyframes blip { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-3px); opacity: .9; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes msg-in-top { from { opacity: 0; transform: translateY(-14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes msg-in-right { from { opacity: 0; transform: translateX(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rec-out { to { opacity: 0; } }
@keyframes rec-line-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes line-wipe { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes cite-pop { from { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: none; } }
/* ---------- Card hover pop ---------- */
/* Very slow hover drift: the card just rises, glacially — pure visual, so it
   can take its time (socket-style). Shadow stays put; the card alone lifts.
   Scoped to the three card groups; touch and reduced-motion unaffected. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Transition declared at rest so the drift applies on enter AND leave. */
  .pcard, .ppstep, .fork-card {
    transition: transform 1.2s var(--ease);
  }
  /* On hover, clear any scroll-driven reveal animation (its fill-mode would
     otherwise win the cascade and block the transform). The card is already
     fully visible by the time the cursor arrives, so dropping the fill is safe. */
  .pcard:hover, .ppstep:hover, .fork-card:hover {
    animation: none;
    transform: translateY(-6px);
  }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 4vw, 4rem); }
.faq-list { border-top: 2px solid var(--rule); }
.faq-item { border-bottom: 2px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.3rem; font-family: var(--pixel); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex: none; width: 26px; height: 26px; border: 2px solid var(--rule); border-radius: 5px; position: relative; transition: transform .25s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--green-d); top: 50%; left: 50%; }
.faq-icon::before { width: 11px; height: 2px; transform: translate(-50%,-50%); }
.faq-icon::after { width: 2px; height: 11px; transform: translate(-50%,-50%); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { color: var(--ink-soft); line-height: 1.65; max-width: 64ch; padding-bottom: 1.4rem; }

/* ---------- Closing (green drench, copy left + breathing pixel cluster right) ---------- */
.closing { background: var(--green-deep); color: var(--cream); overflow: clip; }
.closing-in { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.closing-head { font-family: var(--pixel); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; max-width: 16ch; text-wrap: balance; }
.closing-sub { color: color-mix(in oklab, var(--cream) 82%, transparent); max-width: 46ch; margin-top: 1.3rem; line-height: 1.6; }
.closing .ctas { margin-top: 2rem; }
/* breathing pixel constellation: the hero's corner-grid motif echoed at the
   close — the evergreen bookend ends on the same texture it opened with.
   Grid-snapped squares, slow full fade cycles, anchor square only dims. */
.px-cluster {
  --u: clamp(18px, 2.6vw, 28px);
  position: relative; justify-self: center;
  width: calc(var(--u) * 8); height: calc(var(--u) * 7);
}
.px-cluster i { position: absolute; display: block; width: var(--u); height: var(--u); border-radius: 2px; opacity: var(--o, .3); }
.px-cluster i:nth-child(1)  { left: calc(var(--u) * 1); top: calc(var(--u) * 1); width: calc(var(--u) * 2 - 5px); height: calc(var(--u) * 2 - 5px); background: var(--green-bright); --o: .5; }
.px-cluster i:nth-child(2)  { left: calc(var(--u) * 4); top: calc(var(--u) * 0); background: var(--gold);         --o: .35; }
.px-cluster i:nth-child(3)  { left: calc(var(--u) * 6); top: calc(var(--u) * 1); background: var(--green-bright); --o: .28; }
.px-cluster i:nth-child(4)  { left: calc(var(--u) * 0); top: calc(var(--u) * 3); background: var(--coral);        --o: .3; }
.px-cluster i:nth-child(5)  { left: calc(var(--u) * 3); top: calc(var(--u) * 3); background: var(--green-bright); --o: .4; }
.px-cluster i:nth-child(6)  { left: calc(var(--u) * 5); top: calc(var(--u) * 4); background: var(--cream);        --o: .22; }
.px-cluster i:nth-child(7)  { left: calc(var(--u) * 1); top: calc(var(--u) * 5); background: var(--green-bright); --o: .25; }
.px-cluster i:nth-child(8)  { left: calc(var(--u) * 6); top: calc(var(--u) * 5); background: var(--gold);         --o: .3; }
.px-cluster i:nth-child(9)  { left: calc(var(--u) * 4); top: calc(var(--u) * 6); background: var(--green-bright); --o: .2; }
.px-cluster i:nth-child(10) { left: calc(var(--u) * 7); top: calc(var(--u) * 3); background: var(--coral);        --o: .2; }
@media (prefers-reduced-motion: no-preference) {
  .px-cluster i { animation: px-breathe 10s ease-in-out infinite; }
  .px-cluster i:nth-child(2n) { animation-duration: 13s; animation-delay: -4.5s; }
  .px-cluster i:nth-child(3n) { animation-duration: 15s; animation-delay: -8s; }
  .px-cluster i:nth-child(1)  { animation: twinkle 7s ease-in-out infinite; }
}

/* ---------- Footer ---------- */
.footer { background: var(--green-deep); border-top: 2px solid color-mix(in oklab, var(--cream) 22%, transparent); padding-block: 3rem 2.4rem; }
.wordmark-footer { color: var(--cream); }
.wordmark-footer .dot, .wordmark-footer .ai { color: var(--green-bright); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.footer-brand p { font-size: .9rem; color: color-mix(in oklab, var(--cream) 70%, transparent); margin-top: .8rem; max-width: 30ch; line-height: 1.55; }
.footer-col h3 { font-family: var(--pixel); font-size: 1.15rem; line-height: 1; color: var(--green-bright); }
.footer-col ul { list-style: none; margin-top: .8rem; display: grid; gap: .45rem; }
.footer-col a, .footer-col span { font-size: .92rem; color: color-mix(in oklab, var(--cream) 78%, transparent); }
.footer-col a:hover { color: var(--cream); }
/* hit-area padding cancelled by margins: touch target grows, layout doesn't */
.footer-col a { display: inline-block; padding-block: .45rem; margin-block: -.45rem; }
.wordmark-footer { display: inline-block; padding-block: .3rem; margin-block: -.3rem; }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
  font-size: .82rem; color: color-mix(in oklab, var(--cream) 62%, transparent);
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 360px; }
  .faq-grid { grid-template-columns: 1fr; }
  .proc-row { grid-template-columns: repeat(2, 1fr); }
  .fork { grid-template-columns: 1fr; }
  .bb-grid { grid-template-columns: 1fr; }
  .price-path { grid-template-columns: 1fr; }
  .show-grid { grid-template-columns: 1fr; }
  .show-card.wide { grid-column: auto; grid-template-columns: 1fr; }
  .show-card.wide .sc-copy { align-self: start; padding: 1.4rem 1.5rem 1.1rem; }
  .show-card.wide .sc-shot { border-left: none; border-top: 1px solid var(--line); }
  .show-card.wide.flip { grid-template-columns: 1fr; }
  .show-card.wide.flip .sc-copy { order: 0; }
  .show-card.wide.flip .sc-shot { order: 0; border-right: none; border-top: 1px solid var(--line); }
  .closing-in { grid-template-columns: 1fr; }
  .px-cluster { --u: 13px; justify-self: start; margin-top: 1.2rem; margin-left: 1rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 460px) {
  .docapp { grid-template-columns: 1fr; }
  .doc-page { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile {
    display: none; flex-direction: column; gap: .25rem;
    padding: .5rem var(--gutter) 1.2rem; background: var(--panel); border-top: 2px solid var(--line);
  }
  .nav-mobile.open { display: flex; }
  .nav-mobile > a:not(.btn) { padding-block: .8rem; font-weight: 500; color: var(--ink); }
  .nav-mobile .btn { justify-content: center; margin-top: .4rem; }
}
@media (max-width: 540px) {
  .proc-row { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cutout-panel img { transition: none; }
  * { scroll-behavior: auto !important; }
  .headline, .headline .w, .chips, .lead, .lead.lc, .hero .ctas, .hero .ctas .btn, .appcard, .ac-gauge, .ac-panel { animation: none !important; }
  .ac-fill { stroke-dashoffset: 49 !important; transition: none; }
  .ac-row { opacity: 1 !important; transform: none !important; animation: none !important; }
  .typing i { animation: none !important; }
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- Hero ambient: pixel-grid clusters (lower corners + top-right echo) ---------- */
/* Larger squares snapped to a shared grid and anchored in the lower corners.
   Each square breathes fully in and out on its own long cycle so the
   constellation slowly drifts; the three corner anchors only dim (the
   corners never empty out). Static at --o under reduced motion. */
.hero > .container { position: relative; z-index: 1; }
.pixels { position: absolute; inset: 0; z-index: 0; pointer-events: none; --u: 30px; --px: 24px; }
.pixels i { position: absolute; display: block; width: var(--px); height: var(--px); border-radius: 2px; opacity: var(--o, .3); }
/* JS adds .px-idle while a cluster is off-screen: infinite loops sleep.
   !important: the breathe/twinkle animation shorthands later in the sheet
   would otherwise reset play-state to running */
.pixels.px-idle i, .px-cluster.px-idle i { animation-play-state: paused !important; }
/* bottom-left block (1-12): stair-stepped, dense at the corner */
.pixels i:nth-child(1)  { left: calc(12px + var(--u) * 0); bottom: calc(14px + var(--u) * 0); width: calc(var(--u) * 2 - 6px); height: calc(var(--u) * 2 - 6px); background: var(--green-bright); --o: .5; }
.pixels i:nth-child(2)  { left: calc(12px + var(--u) * 2); bottom: calc(14px + var(--u) * 0); background: var(--gold);         --o: .38; }
.pixels i:nth-child(3)  { left: calc(12px + var(--u) * 3); bottom: calc(14px + var(--u) * 0); background: var(--green-bright); --o: .3;  }
.pixels i:nth-child(4)  { left: calc(12px + var(--u) * 5); bottom: calc(14px + var(--u) * 0); background: var(--coral);        --o: .32; }
.pixels i:nth-child(5)  { left: calc(12px + var(--u) * 7); bottom: calc(14px + var(--u) * 0); background: var(--green-bright); --o: .18; }
.pixels i:nth-child(6)  { left: calc(12px + var(--u) * 0); bottom: calc(14px + var(--u) * 2); background: var(--green-bright); --o: .42; }
.pixels i:nth-child(7)  { left: calc(12px + var(--u) * 1); bottom: calc(14px + var(--u) * 2); background: var(--cream);        --o: .24; }
.pixels i:nth-child(8)  { left: calc(12px + var(--u) * 3); bottom: calc(14px + var(--u) * 2); background: var(--gold);         --o: .26; }
.pixels i:nth-child(9)  { left: calc(12px + var(--u) * 0); bottom: calc(14px + var(--u) * 3); background: var(--green-bright); --o: .3;  }
.pixels i:nth-child(10) { left: calc(12px + var(--u) * 1); bottom: calc(14px + var(--u) * 4); background: var(--coral);        --o: .2;  }
.pixels i:nth-child(11) { left: calc(12px + var(--u) * 0); bottom: calc(14px + var(--u) * 5); background: var(--green-bright); --o: .18; }
.pixels i:nth-child(12) { left: calc(12px + var(--u) * 4); bottom: calc(14px + var(--u) * 1); background: var(--cream);        --o: .18; }
/* bottom-right block (13-18): smaller mirror under the app card */
.pixels i:nth-child(13) { right: calc(12px + var(--u) * 0); bottom: calc(14px + var(--u) * 0); width: calc(var(--u) * 2 - 6px); height: calc(var(--u) * 2 - 6px); background: var(--green-bright); --o: .4; }
.pixels i:nth-child(14) { right: calc(12px + var(--u) * 2); bottom: calc(14px + var(--u) * 0); background: var(--coral);        --o: .3;  }
.pixels i:nth-child(15) { right: calc(12px + var(--u) * 4); bottom: calc(14px + var(--u) * 0); background: var(--green-bright); --o: .22; }
.pixels i:nth-child(16) { right: calc(12px + var(--u) * 0); bottom: calc(14px + var(--u) * 2); background: var(--gold);         --o: .28; }
.pixels i:nth-child(17) { right: calc(12px + var(--u) * 1); bottom: calc(14px + var(--u) * 3); background: var(--green-bright); --o: .2;  }
.pixels i:nth-child(18) { right: calc(12px + var(--u) * 2); bottom: calc(14px + var(--u) * 2); background: var(--cream);        --o: .18; }
/* top-right echo (19-22): smaller squares, clears the fixed nav */
.pixels i:nth-child(19) { right: calc(16px + var(--u) * 0); top: calc(96px + var(--u) * 0); width: 16px; height: 16px; background: var(--green-bright); --o: .32; }
.pixels i:nth-child(20) { right: calc(16px + var(--u) * 2); top: calc(96px + var(--u) * 0); width: 12px; height: 12px; background: var(--coral);        --o: .26; }
.pixels i:nth-child(21) { right: calc(16px + var(--u) * 0); top: calc(96px + var(--u) * 2); width: 12px; height: 12px; background: var(--gold);         --o: .26; }
.pixels i:nth-child(22) { right: calc(16px + var(--u) * 4); top: calc(96px + var(--u) * 1); width: 12px; height: 12px; background: var(--green-bright); --o: .2;  }

@media (prefers-reduced-motion: no-preference) {
  .pixels i { animation: px-breathe 9s ease-in-out infinite; }
  .pixels i:nth-child(2n)   { animation-duration: 12s; animation-delay: -4s;   }
  .pixels i:nth-child(3n)   { animation-duration: 14s; animation-delay: -8s;   }
  .pixels i:nth-child(4n+1) { animation-duration: 10s; animation-delay: -2.5s; }
  .pixels i:nth-child(5n+2) { animation-delay: -6s; }
  /* corner anchors only dim, never vanish */
  .pixels i:nth-child(1), .pixels i:nth-child(13), .pixels i:nth-child(19) { animation: twinkle 7s ease-in-out infinite; }
  .pixels i:nth-child(13) { animation-delay: -2.5s; }
  .pixels i:nth-child(19) { animation-delay: -4.5s; }
}
@media (max-width: 720px) {
  .pixels { --u: 22px; --px: 16px; }
  /* drop the sparse outliers and the whole top-right echo (it collides with the chips) */
  .pixels i:nth-child(5), .pixels i:nth-child(12), .pixels i:nth-child(15),
  .pixels i:nth-child(19), .pixels i:nth-child(20), .pixels i:nth-child(21), .pixels i:nth-child(22) { display: none; }
}
@keyframes px-breathe { 0%, 100% { opacity: 0; } 30%, 60% { opacity: var(--o); } }
@keyframes twinkle { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * .35); } }

/* ---------- Sitewide scroll-reveal (progressive enhancement) ---------- */
/* Default: everything visible. Only browsers with scroll-driven timelines
   (and no reduced-motion preference) get the reveal — never hides content otherwise. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* .pcard excluded: the JS entrance handles process cards; removing it here
       means no-JS users always see pcards fully visible (no scroll-driven hide). */
    .section-head, .show-card, .bb-card, .ppstep, .fork-card, .faq-item, .about-grid, .closing-in, .price-triad, .after-build {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Process section: metrical card entrance (JS-driven, one-shot) ---------- */
/* Gate: html.js ensures initial hidden state only applies when JS is running.
   Reduced-motion users and no-JS users always see cards fully visible. */
@keyframes pcard-enter {
  from { opacity: 0; transform: translateX(160px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Initial hidden state: only set when JS has added html.js (so no-JS = always visible) */
  html.js .proc-row.proc-ready .pcard {
    opacity: 0;
    transform: translateX(160px);
  }
  /* Cards enter on .proc-entered — each with its metrical delay */
  html.js .proc-row.proc-entered .pcard {
    animation: pcard-enter 0.45s var(--ease) both;
  }
  html.js .proc-row.proc-entered .pcard:nth-child(1) { animation-delay: 0s; }
  html.js .proc-row.proc-entered .pcard:nth-child(2) { animation-delay: 0.42s; }
  html.js .proc-row.proc-entered .pcard:nth-child(3) { animation-delay: 0.84s; }
  html.js .proc-row.proc-entered .pcard:nth-child(4) { animation-delay: 0.98s; }
  /* Once .proc-settled, clear the entrance animation so hover transform works freely */
  html.js .proc-row.proc-settled .pcard {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* Hover override: must beat the settled rule (specificity 0,3,0 + :hover = 0,4,0).
     Mirrors the existing hover block so the card floats after settling. */
  html.js .proc-row.proc-settled .pcard:hover {
    animation: none;
    transform: translateY(-6px);
  }
}