/* ============================================================================
   Luria marketing surface: the reference template, ported.
   Geometry, rhythm and type scale are read from the template's rendered
   output (the reference clones under 09_assets/inspirations/, repo only):
   1240 container · 80 nav · 1220/32px-radius hero card · 1120 gallery grid ·
   24px cards · 1160 footer. Palette and type are Luria's (theme.css dark
   block, §5 of the template port work order in 01_docs/01_planning/):
   flat fills only, hairlines not shadows, one warm accent for action.
   Semantic hooks the box system targets (box-transition.js TARGET_SEL):
   .t-card .t-panel .t-tile .t-stat, plus the nav/footer classes.
   Load order: theme.css → template.css → boxes.css.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
/* html carries the ground, body stays transparent so the fixed z:-1 ambient
   box layer (client/ambient.js) paints between the canvas and the content */
html { background: var(--bg); scroll-behavior: smooth; }
body { background: transparent; min-width: 320px; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
:where(h1, h2, h3) { color: var(--display-ink); }
.ct { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- buttons: pills, 56 tall in the hero/guarantee, 32 in the nav -------- */
.btn { height: 56px; padding: 0 38px; font-weight: 700; font-size: 16px; line-height: 1; }
.btn-warm  { background: var(--warm); color: var(--on-warm); }
.btn-warm:hover { background: var(--warm-hover); }
.btn-warm:active { background: var(--warm-press); }
/* secondary CTA: a solid cream fill. The old transparent+hairline version
   disappeared into the near-black ground (Baneet: "too blended in"). Cream on
   #07070A is the highest-contrast pairing the palette owns, and amber stays
   the warm action colour so the two never read as the same button. */
.btn-ghost { background: var(--text); color: var(--bg); box-shadow: none; }
.btn-ghost:hover { background: var(--display-ink); }
.btn-ghost:active { background: var(--text-2); }
.btn-ink   { background: var(--text); color: var(--bg); }
.btn-ink:hover { background: var(--display-ink); }
.btn-sm    { height: 32px; padding: 0 20px; font-size: 14px; font-weight: 600; }
.btn-md    { height: 44px; padding: 0 24px; font-size: 15px; font-weight: 600; }
.arr { width: 14px; height: 14px; }

/* ---- nav: 80 tall, logo left, links centered, actions right --------------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav-in { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo { display: flex; align-items: center; gap: 8px; color: var(--text); }
.nav-logo img { width: 26px; height: 28px; object-fit: contain; }
.nav-word { font-family: var(--font-display); font-weight: var(--wt-wordmark); font-size: 25px; line-height: 1; letter-spacing: -0.02em; color: var(--display-ink); }
.nav-links { display: flex; align-items: center; gap: 24px; position: absolute; left: 50%; translate: -50% 0; }
.nav-links a { font-size: 15px; font-weight: 600; line-height: 1; color: var(--text); padding: 8px 2px; }
.nav-links a:hover { color: var(--text-2); }
.nav-links a[aria-current="page"] { color: var(--warm); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; position: relative; }
.nav-burger span { position: absolute; left: 12px; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: translate var(--dur-fast) var(--ease), rotate var(--dur-fast) var(--ease); }
.nav-burger span:first-child { top: 16px; } .nav-burger span:last-child { top: 26px; }
.nav-burger[aria-expanded="true"] span:first-child { translate: 0 5px; rotate: 45deg; }
.nav-burger[aria-expanded="true"] span:last-child { translate: 0 -5px; rotate: -45deg; }
.nav-sheet { display: none; }
.nav-sheet.is-open { display: flex; flex-direction: column; gap: 4px; padding: 8px 24px 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-sheet a { font-size: 17px; font-weight: 600; padding: 12px 0; color: var(--text); }
/* .nav-sheet a (0,1,1) outranks .btn-warm (0,1,0): without this the mobile CTA
   painted cream ink on amber at 1.99:1. Keep the button's own ink. */
.nav-sheet a.btn { justify-content: center; margin-top: 8px; padding: 0 24px; }
.nav-sheet a.btn-warm { color: var(--on-warm); }
.nav-sheet a.btn-ink { color: var(--bg); }
.nav-in { position: relative; }

/* ---- hero card (template: pt-14 pb-11 px-12 rounded-4xl gap-5.5) --------- */
.hero { padding: 18px 24px 40px; }
.hero-card, .t-block {
  position: relative; max-width: 1220px; margin: 0 auto; border-radius: 32px;
  overflow: clip;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* frosted, not solid: the fixed ambient layer sits behind the page at
     z-index -1, so a translucent fill lets those detection boxes read THROUGH
     the panel, and the backdrop blur turns them into frost rather than noise.
     Baneet, 2026-08-20. */
  background: rgba(20, 20, 46, .72);
  backdrop-filter: blur(7px) saturate(1.06);
  -webkit-backdrop-filter: blur(7px) saturate(1.06);
  border: 1px solid rgba(242, 240, 234, .07);
}
/* no backdrop-filter support: fall back to the opaque panel so text never
   lands on a moving box */
@supports not (backdrop-filter: blur(2px)) {
  .hero-card, .t-block { background: var(--hero-block); }
}
.hero-card { padding: 56px 48px 44px; gap: 22px; }
.hero h1 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.1; letter-spacing: -0.025em; max-width: 1100px; position: relative; z-index: 1; }
.hero-sub { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--text-2); max-width: 680px; margin: -6px 0 0; }

/* drift dots: the one template animation kept (7s ease-in-out, -9px travel,
   delays 0.6-3.2s, opacity .4-.5). Recolored: ink, warm, cold blue. */
@keyframes hhfDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.dot { position: absolute; width: 4px; height: 4px; border-radius: 1.5px; background: var(--text); opacity: .4; pointer-events: none;
  animation: hhfDrift 7s ease-in-out infinite; }
.dot.w { background: var(--warm); opacity: .5; } .dot.b { background: var(--accent); opacity: .45; }
.dot.l { width: 6px; height: 6px; } .dot.m { width: 5px; height: 5px; }
.dot:nth-child(1) { top: 8%;  left: 4%; }
.dot:nth-child(2) { top: 62%; left: 9%;  animation-delay: 1.2s; }
.dot:nth-child(3) { top: 22%; left: 20%; animation-delay: 2.1s; }
.dot:nth-child(4) { top: 80%; left: 76%; animation-delay: 1.9s; }
.dot:nth-child(5) { top: 15%; left: 80%; animation-delay: .6s; }
.dot:nth-child(6) { top: 54%; left: 87%; animation-delay: 1.7s; }
.dot:nth-child(7) { top: 27%; left: 92%; animation-delay: 2.6s; }
.dot:nth-child(8) { top: 5%;  left: 44%; animation-delay: 3.2s; }
.dot:nth-child(9) { top: 88%; left: 30%; animation-delay: 2.8s; }
.dot:nth-child(10){ top: 6%;  left: 61%; animation-delay: .9s; }

/* flow tiles: 4 tiles + 3 arrows (template: border/14px/pt-4 pb-3.5 px-3) */
.flow { display: flex; align-items: stretch; width: 100%; max-width: 1000px; position: relative; z-index: 1; }
.t-tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 12px 14px; border-radius: 14px; background: var(--tile);
  border: 1px solid rgba(242,240,234,.14);
}
.t-tile svg { height: 56px; width: auto; }
.t-tile b { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--display-ink); }
.flow-arrow { display: flex; align-items: center; padding: 0 10px; color: var(--warm); font-size: 20px; font-weight: 800; line-height: 1; }

/* check row (template: green check icon + 13px bold) */
.checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 16px; font-size: 14px; font-weight: 600; color: var(--text); position: relative; z-index: 1; }
.checks li { display: flex; align-items: center; gap: 7px; }
.checks li::before { content: "\2713"; font-size: 12px; font-weight: 700; line-height: 1; color: var(--text-2); }
.ctas { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 2px; position: relative; z-index: 1; }
.outcome { font-size: 14px; line-height: 17px; font-weight: 600; font-style: italic; color: var(--text-2); margin-top: 2px; position: relative; z-index: 1; }
.outcome b { display: block; margin-top: 2px; font-style: normal; font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--display-ink); }

/* ---- section heads ------------------------------------------------------- */
.sec { padding: 64px 20px 80px; }
.sec-in { max-width: 1120px; margin: 0 auto; }
.sec h2 { font-size: clamp(29px, 3.3vw, 44px); line-height: 1.14; letter-spacing: -0.02em; text-align: center; }
.sec-sub { margin: 16px auto 0; font-size: 17px; line-height: 1.45; font-weight: 600; text-align: center; color: var(--text-2); max-width: 640px; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--text-3); }

/* ---- use-case gallery (template: 2-col, gap-5, rounded-3xl, pt-7.5) ------ */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.t-card {
  display: flex; justify-content: space-between; align-items: stretch; gap: 10px; min-width: 0;
  padding: 30px 30px 28px; border-radius: 24px; background: var(--surface-1); border: 1px solid var(--line);
  color: var(--text); transition: border-color var(--dur-fast) var(--ease);
}
.t-card:hover { border-color: var(--line-strong); }
.t-card .copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.t-card h3 { font-size: 30px; line-height: 34px; overflow-wrap: anywhere; }
.t-card p { margin: 6px 0 0; font-size: 16px; line-height: 23px; font-weight: 500; color: var(--text-2); }
.t-card .test { margin-top: 14px; font-size: 13px; line-height: 20px; color: var(--text-3); }
.t-card .test b { color: var(--text-2); font-weight: 600; }
.t-card .spacer { flex: 1; min-height: 8px; }
.t-card .btn { margin-top: 18px; height: 42px; padding: 0 24px; font-size: 15px; }
.t-card .art { width: 30%; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }
.t-card .art svg { width: 100%; max-width: 168px; height: auto; }

/* ---- guarantee / CTA block (template: pt-16 pb-17 px-12 rounded-4xl gap-5) */
.guar { padding: 96px 24px 0; }
.guar .t-block { padding: 64px 48px 68px; gap: 20px; }
.guar .eyebrow { color: var(--warm); letter-spacing: .18em; position: relative; z-index: 1; }
.guar h2 { font-size: clamp(32px, 4.3vw, 58px); line-height: 1.08; letter-spacing: -0.025em; max-width: 860px; margin-top: -4px; position: relative; z-index: 1; }
.guar h2 em, .hero h1 em { font-style: normal; color: var(--warm); }
.guar .sub { font-size: 22px; line-height: 1.2; font-weight: 500; color: var(--text-2); position: relative; z-index: 1; }
.guar .ctas { margin-top: 12px; }
.guar .fine { margin-top: -2px; font-size: 14px; font-weight: 600; color: var(--text-3); position: relative; z-index: 1; }
.glyph { position: relative; width: 56px; height: 56px; border: 1px solid var(--text); z-index: 1; }
.glyph::before, .glyph::after, .glyph i::before, .glyph i::after { content: ""; position: absolute; background: var(--text); }
.glyph::before { left: -1px; top: -1px; width: 9px; height: 1px; } .glyph::after { left: -1px; top: -1px; width: 1px; height: 9px; }
.glyph i::before { right: -1px; bottom: -1px; width: 9px; height: 1px; } .glyph i::after { right: -1px; bottom: -1px; width: 1px; height: 9px; }
.glyph b { position: absolute; right: -52px; top: 50%; translate: 0 -50%; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--accent-text); }

/* ---- footer (template: max-w-290, pt-14 pb-6, brand col + 4 link cols) ---- */
.foot { padding: 56px 24px 24px; position: relative; } /* positioned: landing.js spawns a 3-box ambient layer into .foot */
.foot-in { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.foot-top { display: flex; justify-content: space-between; gap: 32px; }
.foot-brand { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.foot-brand .nav-logo img { width: 40px; height: 44px; }
.foot-brand .nav-word { font-size: 29px; }
.foot-brand p { margin: 0; font-size: 18px; line-height: 27px; font-weight: 500; color: var(--text); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(120px, 160px)); gap: 24px; }
.foot-col h4 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--display-ink); }
.foot-col a { display: block; font-size: 14px; line-height: 20px; padding: 3px 0; color: var(--text-2); }
.foot-col a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.foot-bottom a { color: var(--text-3); margin-left: 18px; } .foot-bottom a:hover { color: var(--text); }

/* ---- vertical pages: hero on the ground, then panels ---------------------- */
.vhero { padding: 56px 24px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vhero h1 { font-size: clamp(32px, 4.3vw, 58px); line-height: 1.08; letter-spacing: -0.025em; max-width: 920px; }
.vhero .pill { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0 6px; min-height: 40px; padding: 8px 22px; border-radius: 999px; background: var(--surface-1);
  border: 1px solid var(--line); font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--text);
  max-width: 100%; text-wrap: balance; }
.vhero .pill em { font-style: normal; color: var(--warm); }
.vhero .lede { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--text-2); }
.vhero .ctas { margin-top: 6px; }

/* a proof row: copy | visual, on a raised panel (template: THE PROBLEM card) */
.rows { padding: 24px 24px 0; display: flex; flex-direction: column; gap: 20px; max-width: 1220px; margin: 0 auto; }
.t-panel {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
  padding: 40px 44px; border-radius: 28px; background: var(--surface-1); border: 1px solid var(--line);
}
.t-panel.flip { grid-template-columns: .9fr 1.1fr; }
.t-panel.flip .copy { order: 2; }
.t-panel .copy { min-width: 0; }
.t-panel .eyebrow { display: block; margin-bottom: 12px; }
.t-panel h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.t-panel p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--text-2); max-width: 56ch; }
.t-panel p b, .t-panel p strong { color: var(--text); font-weight: 600; }
.t-panel .num { font-family: var(--font-mono); color: var(--accent-text); font-weight: 600; }
.callout { display: inline-block; margin-top: 20px; padding: 10px 14px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 15px; line-height: 1.35; font-weight: 600; }
.t-panel .art { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; }
.t-panel .art svg { width: 100%; max-width: 360px; height: auto; }

.t-panel.one { grid-template-columns: 1fr; text-align: center; }
.t-panel.one .copy { max-width: 760px; margin: 0 auto; }
.t-panel.one p { margin-left: auto; margin-right: auto; }

/* objection handler: one question, one answer */
.t-panel.qa { grid-template-columns: 1fr; padding: 34px 44px; }
.t-panel.qa h2 { font-size: clamp(24px, 2.4vw, 32px); }
.t-panel.qa p { max-width: 70ch; }

/* ---- stats (results + pricing): mono numbers, cold blue is for data ------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 1000px; position: relative; z-index: 1; }
.t-stat { padding: 18px 14px 16px; border-radius: 14px; background: var(--tile); border: 1px solid rgba(242,240,234,.14); text-align: center; }
.t-stat b { display: block; font-family: var(--font-mono); font-size: 30px; line-height: 1; font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; }
.t-stat span { display: block; margin-top: 8px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-2); }
.t-stat small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* pricing hero: the price block */
.price { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.price .amt { font-family: var(--font-mono); font-size: 64px; line-height: 1; color: var(--display-ink); font-variant-numeric: tabular-nums; }
.price .amt small { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-2); margin-left: 8px; }
.price .cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.price .after { font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 520px; }

/* pricing scale: native range input, tokenized track + thumb */
.scale { width: 100%; max-width: 560px; margin-bottom: 4px; }
.scale input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; background: none; cursor: pointer; display: block;
  /* 44px tall hit target (the visible track stays 4px) and touch-action:none so
     a horizontal drag belongs to the slider instead of being arbitrated away as
     a page scroll, which is what made this unusable on a real phone. */
  height: 44px; touch-action: none;
}
.scale input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  /* the single linear-gradient in this file, and deliberately so: a range
     input's filled track has no other cross-browser expression. Two HARD
     stops, no blend, so it reads as a fill and not as the decorative
     gradients the port stripped out. Firefox uses ::-moz-range-progress. */
  background: linear-gradient(90deg, var(--accent) 0 var(--fill, 0%), var(--tile) var(--fill, 0%) 100%);
}
.scale input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--tile); }
.scale input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.scale input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; background: var(--warm); border: 2px solid var(--bg);
}
.scale input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--warm); border: 2px solid var(--bg); }
.scale input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.scale-ends { display: flex; justify-content: space-between; margin-top: -6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* tier table: the row matching the slider lights up */
.tiers-table { width: 100%; max-width: 820px; margin: 32px auto 0; border: 1px solid var(--line); border-radius: 20px; overflow: clip; background: var(--surface-1); }
.tier-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 22px; transition: background-color var(--dur-fast) var(--ease); }
.tier-row + .tier-row { border-top: 1px solid var(--line); }
.tier-row.is-on { background: var(--accent-tint); }
.tier-row b { font-size: 15px; font-weight: 600; color: var(--text); }
.tier-row span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.tier-row .p { font-family: var(--font-mono); font-size: 18px; color: var(--display-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* feature tiles grid (pricing: "your account comes with") */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.tiles .t-tile { padding: 28px 20px 24px; border-radius: 20px; background: var(--surface-1); border-color: var(--line); gap: 12px; }
.tiles .t-tile svg { height: 44px; }
.tiles .t-tile b { font-size: 17px; line-height: 1.3; }
.tiles .t-tile span { font-size: 14px; line-height: 1.45; color: var(--text-2); text-align: center; }

/* FAQ: native disclosures, hairline separated */
.faq { max-width: 820px; margin: 34px auto 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-1); overflow: clip; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-size: 16px; font-weight: 600; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 16px; color: var(--accent-text); width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 22px 18px; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 70ch; }

/* Ambient box layers are viewport/host sized and their boxes only re-roll on
   their own jump clock, so a viewport RESIZE (phone rotation) can leave a box
   parked outside the new width for up to one jump cycle, which shows as a
   transient horizontal scrollbar. Clipping the layer removes it and costs
   nothing: the boxes are decoration and always roll inside the layer anyway.
   No timing or alpha is touched (notes/ANIMATIONS.md). */
.amb-layer, .ambient-boxes { overflow: clip; }
/* The viewport layer stays BEHIND everything (work order §3a): body is
   transparent, so on the bare ground these read as texture behind the type.
   The big filled cards would otherwise hide them, so those get their own
   layer via client/cardboxes.js, which paints over the card fill and UNDER
   the card's text. */
.card-boxes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.card-boxes .cbox { position: absolute; left: 0; top: 0; border: 1px solid var(--cbox-line); opacity: 0; }
.card-boxes .cbox.on { opacity: 1; transition: opacity 70ms linear; }
.card-boxes .cbox.off { opacity: 0; transition: opacity 70ms linear; }
.card-boxes .cbox i { position: absolute; background: var(--cbox-line); }
.card-boxes .cbox .h { width: 8px; height: 1px; } .card-boxes .cbox .v { width: 1px; height: 8px; }
.card-boxes .cbox .tl { left: -1px; top: -1px; } .card-boxes .cbox .tr { right: -1px; top: -1px; }
.card-boxes .cbox .bl { left: -1px; bottom: -1px; } .card-boxes .cbox .br { right: -1px; bottom: -1px; }
.card-boxes .cbox b { position: absolute; top: -16px; left: 0; font: 400 10px/1 var(--font-mono); color: var(--cbox-label); white-space: nowrap; }
/* dimmer than the frozen ambient alphas on purpose: these sit on a lit card
   behind real copy, and Baneet's note was "a bit dimmer so it's easy to read" */
:root { --cbox-line: rgba(242,240,234,.13); --cbox-label: rgba(242,240,234,.24); }
/* every direct child of a boxed card rides above its box layer */
.hero-card > *:not(.card-boxes):not(.dot), .t-block > *:not(.card-boxes):not(.dot) { position: relative; z-index: 1; }
.hero-card > .dot, .t-block > .dot { z-index: 1; } /* .dot stays absolute, it only needs lifting */

/* ---- inline illustrations: the box language, drawn small ------------------
   .l wireframe stroke · .l2 strong stroke · .f/.f2 fills · .bx detection box
   (cold blue) · .tk its corner ticks · .acc data fill · .mute quiet fill */
.ill { overflow: visible; }
.ill .l { fill: none; stroke: rgba(242,240,234,.34); stroke-width: 1.5; stroke-linecap: round; } /* decoration stays quieter than --text-3 body copy */
.ill .l2 { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.ill .f { fill: var(--tile); }
.ill .f2 { fill: rgba(242,240,234,.08); }
.ill .f.l { fill: var(--tile); stroke: var(--text-3); }
.ill .bx { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.ill .tk, .ill .acc { fill: var(--accent); }
.ill .acc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.ill .mute { fill: rgba(242,240,234,.34); }
.ill .mono-acc, .ill .mono-mute { font-family: var(--font-mono); }
.ill .mono-acc { fill: var(--accent-text); } .ill .mono-mute { fill: rgba(242,240,234,.44); }

/* ---- the split diagram: the widest, most important picture on a vertical --- */
.split-sec { padding-top: 40px; padding-bottom: 24px; }
.split-fig { margin: 28px auto 0; max-width: 860px; }
.split-fig figcaption, .art figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text-3); text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; }
.dgm { width: 100%; height: auto; }
/* on a single-column panel the diagram is the point, so let it fill the row */
.t-panel .art { min-height: 0; }
.t-panel .art .dgm { max-width: 420px; }

/* ---- responsive (template breakpoints: md 572, lg 1025) ------------------- */
@media (max-width: 1024px) {
  .nav-in { height: 64px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .hero { padding: 8px 14px 26px; }
  .hero-card, .t-block { border-radius: 28px; }
  .hero-card { padding: 24px 16px 26px; gap: 14px; }
  .flow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .flow-arrow { display: none; }
  .t-tile { padding: 12px 10px 10px; } .t-tile svg { height: 46px; } .t-tile b { font-size: 12px; line-height: 14px; }
  .checks { font-size: 13px; }
  .ctas { flex-direction: column; width: 100%; max-width: 420px; }
  .ctas .btn { width: 100%; height: 52px; padding: 0 30px; }
  .sec { padding: 48px 14px 56px; }
  /* mono labels get a step up on a phone: 12px uppercase with .18em tracking
     is comfortable on a desktop and tight on a handset */
  .eyebrow { font-size: 13px; letter-spacing: .14em; }
  .price .cap { font-size: 12px; }
  .t-panel p, .sec-sub, .vhero .lede { font-size: 16px; line-height: 1.6; }
  .gallery { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
  .t-card { padding: 20px 16px 18px 18px; gap: 8px; }
  .t-card h3 { font-size: 22px; line-height: 25px; }
  .t-card p { font-size: 14px; line-height: 20px; }
  .t-card .btn { margin-top: 15px; height: 38px; padding: 0 20px; font-size: 14px; }
  .t-card .art { width: 32%; justify-content: center; }
  .guar { padding: 0 14px; margin-top: 48px; }
  .guar .t-block { padding: 44px 20px 52px; gap: 18px; }
  .foot { padding: 56px 24px 24px; }
  .foot-top { flex-direction: column; gap: 32px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; }
  .foot-bottom a { margin: 0 18px 0 0; }
  .vhero { padding: 40px 16px 20px; }
  .rows { padding: 16px 14px 0; gap: 14px; }
  .t-panel, .t-panel.flip, .t-panel.qa { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; border-radius: 22px; }
  .t-panel.flip .copy { order: 0; }
  .t-panel p { font-size: 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .price .amt { font-size: 52px; }
}
@media (max-width: 571px) {
  .t-card { flex-direction: row; }
  .stats { gap: 8px; } .t-stat b { font-size: 24px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---- arrival (client/arrive.js): hero children paint hidden when the page
   was reached through a box-dissolve teardown; 1.5s failsafe if the script
   never runs, so nothing can stay invisible ---- */
@keyframes bt-unhide { to { opacity: 1; } }
html.bt-arrive main .hero-card > :not(.dot), html.bt-arrive main .vhero > *, html.bt-arrive main .t-block > :not(.dot) {
  opacity: 0; animation: bt-unhide 1ms 1500ms forwards;
}

/* ---- motion hygiene -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  html { scroll-behavior: auto; }
}