/* QA Beast landing: page styles on top of the scrollcraft floor. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/onest.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("/fonts/redhatmono.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --night: #0C1410; --moss: #16231C; --bone: #F2EFE6; --ink: #0E1511; --chart: #D4F53C;
  --pass: #2FA36B; --fail: #E5484D; --healed: #E3A008;
  --moss-2: #1D2D24;
  --sc-canvas: var(--night);
  --sc-surface: var(--moss);
  --sc-ink: var(--bone);
  --sc-ink-soft: #AEB8AE;
  --sc-accent: var(--chart);
  --sc-accent-ink: var(--ink);
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text: "Onest", system-ui, sans-serif;
  --sc-font-mono: "Red Hat Mono", ui-monospace, monospace;
  --sc-shadow-color: 150 40% 2%;
  --r-ctl: 10px; --r-card: 14px;
  --bar-h: 68px;
  --rail: 0px;
}
@media (min-width: 1100px) { :root { --rail: 150px; } }

body { font-size: 1.0625rem; line-height: 1.64; letter-spacing: 0; }
.visually-hidden, .qb-sprite { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--chart); color: var(--ink); padding: 10px 14px; border-radius: var(--r-ctl); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
code { font-family: var(--sc-font-mono); font-size: 0.9em; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* wide wrappers leave room for the watch rail */
.sc-wrap { padding-inline-end: calc(var(--sc-gutter) + var(--rail)); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--r-ctl);
  font: 600 0.98rem/1 var(--sc-font-text); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--accent { background: var(--chart); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -6px rgba(0,0,0,.6); }
.btn--ghost { color: var(--bone); border-color: color-mix(in oklab, var(--bone) 34%, transparent); background: color-mix(in oklab, var(--night) 40%, transparent); }
.btn--lg { min-height: 52px; padding: 14px 24px; font-size: 1.05rem; }
.btn--small { min-height: 34px; padding: 6px 12px; font-size: 0.86rem; }
.btn--healed { background: var(--healed); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: #E2FF63; }
  .btn--ghost:hover { border-color: var(--bone); background: color-mix(in oklab, var(--bone) 8%, transparent); }
}

/* ------------------------------------------------------------------- bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h); display: flex; align-items: center; gap: 16px;
  padding-inline: var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--night) 88%, transparent), transparent);
}
.bar__brand img { height: 34px; width: auto; }
.bar__brand { border-radius: 6px; }
.bar__clock { display: none; margin: 0; font: 500 0.82rem/1 var(--sc-font-mono); color: var(--chart); letter-spacing: 0.06em; padding: 7px 9px; border: 1px solid color-mix(in oklab, var(--chart) 35%, transparent); border-radius: 8px; }
.bar__nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bar__link { color: var(--bone); text-decoration: none; font-weight: 500; padding: 10px 12px; border-radius: var(--r-ctl); }
@media (hover: hover) and (pointer: fine) { .bar__link:hover { text-decoration: underline; } }

/* ----------------------------------------------------------- watch clock */
.watch { position: fixed; right: 14px; padding: 14px 10px 12px 12px; border-radius: 12px; background: color-mix(in oklab, var(--night) 72%, transparent); top: 50%; transform: translateY(-50%); z-index: calc(var(--sc-z-chrome) - 1); display: none; width: 136px; }
@media (min-width: 1100px) { .watch { display: block; } }
.watch__now { margin: 0 0 14px; font: 600 1.6rem/1 var(--sc-font-mono); color: var(--chart); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.watch__list { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--sc-hairline-strong); position: relative; }
.watch__list::before { content: ""; position: absolute; left: -4px; top: var(--watch-y, 0px); width: 7px; height: 7px; border-radius: 50%; background: var(--chart); transition: top 120ms linear; }
.watch__list li { margin: 0; }
.watch__list a { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font: 500 0.74rem/1.3 var(--sc-font-mono); color: color-mix(in oklab, var(--bone) 58%, transparent); text-decoration: none; letter-spacing: 0.03em; border-radius: 4px; white-space: nowrap; }
.watch__list a span { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.watch__list a.is-now { color: var(--bone); }
.watch__list a.is-now span { color: var(--chart); }
@media (hover: hover) and (pointer: fine) { .watch__list a:hover { color: var(--bone); } }

/* ------------------------------------------------------------ type bits */
.stamp { margin: 0; font: 500 0.8rem/1.4 var(--sc-font-mono); letter-spacing: 0.04em; color: var(--sc-ink-soft); }
.stamp time { color: var(--chart); margin-right: 10px; font-weight: 600; }
.h2 { font: 700 clamp(2.05rem, 1.35rem + 2.6vw, 3.6rem)/1.02 var(--sc-font-display); letter-spacing: -0.03em; margin: 0; text-wrap: balance; max-width: 17ch; }
.h3 { font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--sc-font-display); letter-spacing: -0.02em; margin: 0; }
.lede { margin: 0; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.5; color: var(--bone); max-width: 38ch; text-wrap: pretty; }
.body { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.entry { position: relative; }
.entry:not([data-sc-act="pin"]):not([data-sc-act="pan"]) { padding-block: var(--sc-section); }
.sc-stack > .stamp + .h2 { margin-top: var(--sc-4); }

/* ================================================================= HERO */
.hero__stage { background: var(--night); --p: var(--sc-p, 0); }
.hero__plane { position: absolute; pointer-events: none; }
.hero__plate { inset: -3%; transform: scale(calc(1.02 + var(--p) * 0.09)) translateY(calc(var(--p) * -1.5%)); transform-origin: 60% 55%; will-change: transform; }
.hero__plate img, .hero__plate picture { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hero__mist { inset: 0; }
.hero__mist--back {
  background: radial-gradient(60% 34% at 70% 58%, rgba(214, 226, 218, 0.16), transparent 70%),
              radial-gradient(40% 22% at 22% 70%, rgba(214, 226, 218, 0.10), transparent 70%);
  transform: translate3d(calc(var(--p) * -5%), calc(var(--p) * -3%), 0);
}
.hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 46% at 12% 84%, rgba(8, 14, 11, 0.82), transparent 72%), linear-gradient(100deg, rgba(8, 14, 11, 0.9) 0%, rgba(8, 14, 11, 0.72) 28%, rgba(8, 14, 11, 0.2) 52%, transparent 66%); }
.hero__copy { position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--bar-h) + 8vh); max-width: min(40rem, 50vw); }
.hero__copy .stamp { margin-bottom: var(--sc-5); }
.hero__title { margin: 0; font: 800 clamp(2.6rem, 1.4rem + 4.3vw, 5.4rem)/0.98 var(--sc-font-display); letter-spacing: -0.035em; max-width: 12ch; text-wrap: balance; }
.hero__sub { margin: var(--sc-5) 0 0; font-size: clamp(1.06rem, 0.98rem + 0.35vw, 1.28rem); line-height: 1.5; color: #DCE2DA; max-width: 34ch; text-wrap: pretty; }
.hero__cta { margin: var(--sc-6) 0 0; display: flex; gap: 12px; flex-wrap: wrap; }

.hero__beast { z-index: 6; right: calc(var(--rail) + 1vw); bottom: 7vh; width: min(60vw, 1000px); }
.hero__beast-in { position: relative; transform-origin: 62% 66%; transform: translate3d(calc(var(--p) * -4vw), calc(var(--p) * -2vh), 0) scale(calc(1 + var(--p) * 0.16)); will-change: transform; }
.hero__cham, .hunter__img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%); mask-image: linear-gradient(to right, transparent 0%, #000 24%); }
.hero__cham { width: 100%; height: auto; max-width: none; filter: brightness(0.76) saturate(0.82) hue-rotate(-6deg) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); }
.eye { position: absolute; left: 92.05%; top: 12.94%; width: 4.19%; height: auto; transform: translate(-50%, -50%); overflow: visible; }
.eye__pupil { fill: #0A0D0B; }
.eye__glint { fill: rgba(255, 255, 255, 0.75); }
.eye__look { transform: translate(var(--look-x, 0px), var(--look-y, 0px)); }

.hero__second { position: absolute; z-index: 7; left: var(--sc-gutter); top: calc(var(--bar-h) + 12vh); margin: 0; max-width: 22ch;
  font: 700 clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem)/1.06 var(--sc-font-display); letter-spacing: -0.025em; text-wrap: balance; }
.hero__mist--front { z-index: 8; background: linear-gradient(to top, rgba(170, 190, 178, 0.14), transparent 38%); transform: translate3d(0, calc(var(--p) * -8%), 0); }
.hero__leaves { z-index: 9; bottom: -2vh; width: min(52vw, 900px); will-change: transform; }
.hero__leaves img { width: 100%; height: auto; max-width: none; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 96%); mask-image: linear-gradient(to right, #000 62%, transparent 96%); filter: brightness(1.1) saturate(0.95); }
.hero__leaves--l { left: -6vw; transform-origin: 0 100%; transform: translate3d(calc(var(--p) * -16vw), calc(var(--p) * 12vh), 0) scale(calc(1 + var(--p) * 0.3)); }
.hero__leaves--r { right: -10vw; bottom: -6vh; transform-origin: 100% 100%; transform: translate3d(calc(var(--p) * 16vw), calc(var(--p) * 12vh), 0) scale(calc(1 + var(--p) * 0.3)); }
.hero__leaves--r img { transform: scaleX(-1); }
.hero__floor { position: absolute; inset: auto 0 0 0; height: 9vh; z-index: 10; background: linear-gradient(to top, var(--night), transparent); }

/* ================================================================ LEARN */
.learn__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.learn { --p: var(--sc-p, 0); }
.findings { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.findings li { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; color: var(--bone); padding: 10px 0; border-top: 1px solid var(--sc-hairline); }
.findings .ic { color: var(--chart); }
.map { margin: 0; }
.map__svg { width: 100%; height: auto; overflow: visible; }
.map__edges path { fill: none; stroke: color-mix(in oklab, var(--bone) 34%, transparent); stroke-width: 1.4; stroke-dasharray: 1 1; --draw: clamp(0, calc((var(--p) - 0.18) * 2.6), 1); stroke-dashoffset: calc(1 - var(--draw)); }
.map__edges path.flow { stroke: var(--chart); stroke-width: 2.4; --draw: clamp(0, calc((var(--p) - 0.32) * 2.4), 1); }
.node circle { fill: var(--night); stroke: var(--bone); stroke-width: 1.6; }
.node text { fill: var(--sc-ink-soft); font: 500 13px var(--sc-font-mono); text-anchor: middle; }
.node--key circle { stroke: var(--chart); fill: color-mix(in oklab, var(--chart) 22%, var(--night)); }
.node--key text { fill: var(--bone); }
.node--bad circle { stroke: var(--fail); fill: color-mix(in oklab, var(--fail) 25%, var(--night)); }
.node .node__tag { fill: var(--fail); font-weight: 600; }
.map__nodes .node { opacity: clamp(0.15, calc((var(--p) - 0.14) * 3), 1); }
.cap { margin-top: var(--sc-4); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 0.78rem/1.4 var(--sc-font-mono); color: var(--sc-ink-soft); }
.key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: -6px; }
.key--flow { background: var(--chart); }
.key--bad { background: var(--fail); height: 9px; width: 9px; border-radius: 50%; }
.cap__note { margin-left: auto; opacity: 0.8; }

/* ============================================================= DESCRIBE */
.describe__stage { display: flex; align-items: center; padding-top: var(--bar-h); }
.describe__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.describe__lead .h2 { margin-top: var(--sc-4); }
.ask { margin-top: var(--sc-6); background: var(--moss); border: 1px solid var(--sc-hairline-strong); border-radius: var(--r-card); padding: 16px 18px 18px; box-shadow: var(--sc-e2), var(--sc-edge); }
.ask__label { margin: 0 0 8px; display: flex; justify-content: space-between; font: 500 0.74rem/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.ask__label span { color: var(--chart); }
.ask__text { margin: 0; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--bone); min-height: 4.5em; }
.ask__caret { display: inline-block; width: 2px; height: 1.1em; background: var(--chart); vertical-align: -0.18em; margin-left: 2px; }
.describe__note { margin-top: var(--sc-5); font-size: 0.98rem; }
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline;
  padding: 11px 14px; border-radius: 12px; background: color-mix(in oklab, var(--moss) 80%, transparent); border: 1px solid var(--sc-hairline);
  opacity: 0.16; transform: translateY(6px); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); }
.step.is-on { opacity: 1; transform: none; }
.step__n { font: 600 0.8rem/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.step__do { margin: 0; font-weight: 600; color: var(--bone); line-height: 1.35; }
.step__why { grid-column: 2 / 4; margin: 0; font-size: 0.9rem; color: var(--sc-ink-soft); line-height: 1.4; }
.eng { font: 600 0.72rem/1 var(--sc-font-mono); letter-spacing: 0.04em; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.eng--pw { color: var(--bone); border: 1px solid color-mix(in oklab, var(--bone) 40%, transparent); }
.eng--jev { color: var(--ink); background: var(--chart); }

/* =============================================================== DRY RUN */
.dryrun__stage { display: flex; align-items: center; }
.strip { align-items: center; gap: clamp(14px, 1.6vw, 26px); padding-inline: var(--sc-gutter) calc(var(--sc-gutter) + var(--rail)); padding-top: var(--bar-h); }
.strip::after { content: ""; flex: 0 0 calc(var(--sc-gutter) + var(--rail)); }
.strip__lead { flex: 0 0 min(30rem, 84vw); padding-right: 2vw; }
.strip__lead .h2 { margin: var(--sc-4) 0 var(--sc-4); }
.frame { flex: 0 0 clamp(168px, 15vw, 224px); margin: 0; }
.frame figcaption { margin-top: 10px; display: flex; align-items: center; gap: 8px; font: 500 0.78rem/1.3 var(--sc-font-mono); color: var(--bone); }
.frame figcaption b { color: var(--sc-ink-soft); font-weight: 500; }
.ic--ok { width: 16px; height: 16px; color: var(--pass); stroke-width: 2.4; margin-left: auto; }
.shot { aspect-ratio: 9 / 17; border-radius: 14px; background: #EFEDE4; border: 5px solid #1B2621; box-shadow: var(--sc-e3); position: relative; overflow: hidden; padding: 14% 10% 0; display: grid; gap: 7%; align-content: start; }
.shot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 9%; background: #22342A; }
.shot i, .shot b { display: block; border-radius: 6px; background: #D9D6CA; }
.shot--shop, .shot--pick { grid-template-columns: 1fr 1fr; }
.shot--shop i, .shot--pick i { aspect-ratio: 3 / 4; background: linear-gradient(to bottom, #9DB59A 0 62%, #D9D6CA 62%); }
.shot--pick i.on { outline: 3px solid var(--chart); outline-offset: 2px; }
.shot--product i { aspect-ratio: 1; background: #9DB59A; }
.shot--product b, .shot--cart b, .shot--done b { height: 20px; background: #22342A; }
.shot--cart i { height: 26px; }
.shot--form i { height: 16px; background: #fff; border: 1px solid #C8C4B6; }
.shot--confirm { align-content: center; justify-items: center; padding-top: 0; }
.shot--confirm i:first-child { width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--pass); }
.shot--confirm i + i { width: 70%; height: 14px; }
.strip__end { flex: 0 0 min(24rem, 80vw); padding-left: 2vw; display: grid; gap: var(--sc-4); }
.sched { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sched li { font: 500 0.8rem/1 var(--sc-font-mono); padding: 9px 11px; border-radius: 8px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); }
.sched li.on { border-color: var(--chart); color: var(--chart); }

/* ================================================================== WAIT */
.wait { min-height: 92vh; display: flex; align-items: flex-end; }
.wait__in { width: 100%; }
.wait__line { margin: var(--sc-3) 0 0; font: 600 clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem)/1.3 var(--sc-font-display); letter-spacing: -0.015em; color: color-mix(in oklab, var(--bone) 86%, transparent); max-width: 30ch; }

/* ================================================================= CATCH */
.catch__stage { --enter: 0; }
.catch__head { position: absolute; left: var(--sc-gutter); top: calc(var(--bar-h) + 3vh); z-index: 4; max-width: min(24rem, 30vw); }
.catch__head .h2 { margin-top: var(--sc-3); font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.9rem); }
.phone { position: absolute; left: 46%; top: 52%; transform: translate(-50%, -50%); z-index: 3;
  width: clamp(210px, 19vw, 280px); aspect-ratio: 9 / 18.6; border-radius: 34px; background: #151D19; padding: 10px;
  box-shadow: var(--sc-e3), inset 0 0 0 1px rgba(255,255,255,.08); }
.phone__screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #F4F1E8; color: #1A221D; }
.co { padding: 18% 9% 0; font-size: 13px; line-height: 1.3; }
.co__brand { margin: 0; font: 700 14px/1 var(--sc-font-display); letter-spacing: -0.01em; color: #2C4A36; }
.co__h { margin: 12% 0 8%; font: 700 21px/1 var(--sc-font-display); }
.co__line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #DDD8CB; }
.co__field { height: 26px; margin-top: 10px; border-radius: 7px; background: #fff; border: 1px solid #CFCABB; }
.co__field--half { width: 55%; }
.co__btn { position: absolute; left: 9%; right: 9%; bottom: 7.5%; height: 42px; border-radius: 10px; background: #22342A; color: #F4F1E8; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.co__promo { position: absolute; left: 0; right: 0; bottom: 0; height: 13.5%; background: #E7D9A8; color: #3B3217; display: flex; align-items: center; justify-content: space-between; padding: 0 9%; font-size: 12px; font-weight: 600; box-shadow: 0 -6px 14px rgba(0,0,0,.14); }
.co__promo span { text-decoration: underline; }
.catch__stage.is-failed .co__promo { outline: 2px dashed var(--fail); outline-offset: -3px; }
.catch__side { position: absolute; right: calc(var(--sc-gutter) + var(--rail)); top: 50%; transform: translateY(-46%); width: min(25rem, 25vw); z-index: 4; display: grid; }
.catch__side > * { grid-area: 1 / 1; }
.runlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; font: 500 0.84rem/1.45 var(--sc-font-mono); transition: opacity 240ms var(--sc-ease-out); }
.runlog li { opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); color: var(--bone); }
.runlog li.is-on { opacity: 1; transform: none; }
.runlog time { color: var(--sc-ink-soft); margin-right: 8px; }
.runlog .ok { color: var(--pass); font-weight: 700; margin-right: 6px; }
.runlog .bad { color: var(--fail); font-weight: 700; margin-right: 6px; }
.runlog__why { font-family: var(--sc-font-text); font-size: 0.98rem; color: #DCE2DA; padding-left: 0; }
.report { opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); pointer-events: none;
  background: var(--moss); border: 1px solid var(--sc-hairline-strong); border-radius: var(--r-card); padding: 20px; box-shadow: var(--sc-e3), var(--sc-edge); }
.catch__stage.is-caught .runlog { opacity: 0; }
.catch__stage.is-caught .report { opacity: 1; transform: none; pointer-events: auto; }
.report__tag { margin: 0; display: inline-flex; align-items: center; gap: 6px; font: 700 0.76rem/1 var(--sc-font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); background: var(--chart); padding: 7px 9px; border-radius: 6px; }
.report__tag .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.report__title { margin: 14px 0 8px; font: 700 1.45rem/1.12 var(--sc-font-display); letter-spacing: -0.02em; }
.report__why { margin: 0; color: #DCE2DA; font-size: 0.96rem; line-height: 1.55; }
.tg { margin-top: 16px; background: #0F1914; border-radius: 12px; padding: 12px 12px 10px; border: 1px solid var(--sc-hairline); }
.tg__from { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.88rem; color: var(--chart); }
.tg__msg { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--bone); }
.tg__btns { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tg__btns span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.84rem; font-weight: 600; padding: 8px; border-radius: 8px; background: var(--moss-2); color: var(--bone); }
.tg__btns .ic { width: 15px; height: 15px; }
.hunter { position: absolute; z-index: 5; left: -25.5vw; bottom: 3vh; width: 56vw; pointer-events: none;
  transform: translate3d(calc((1 - var(--enter)) * -70%), calc((1 - var(--enter)) * 8%), 0); opacity: clamp(0, calc(var(--enter) * 3), 1); will-change: transform; }
.hunter__img { width: 100%; height: auto; max-width: none; filter: brightness(0.74) saturate(0.9) drop-shadow(0 20px 26px rgba(0,0,0,.55)); }
.tongue { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.tongue__line { fill: none; stroke: #C9737A; stroke-width: 7; stroke-linecap: round; }
.tongue__tip { fill: #D98991; }

/* ================================================================== HEAL */
.heal { overflow: hidden; }
.heal__skin { position: absolute; inset: 0 0 0 38%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 80%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 80%, transparent 100%); }
.heal__skin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; filter: brightness(0.62); }
.heal__amber { position: absolute; inset: 0; }
.heal__amber img { filter: brightness(0.7) hue-rotate(-48deg) saturate(1.15); }
.heal__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.heal__card { background: color-mix(in oklab, var(--moss) 94%, transparent); border: 1px solid var(--sc-hairline-strong); border-radius: var(--r-card); padding: 22px; box-shadow: var(--sc-e3), var(--sc-edge); display: grid; gap: 12px; }
.heal__status { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 0.8rem/1 var(--sc-font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--healed); }
.heal__step { margin-left: auto; color: var(--sc-ink-soft); text-transform: none; font-weight: 500; letter-spacing: 0.02em; }
.heal__row { margin: 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 0.95rem; }
.heal__k { width: 6.5rem; flex: none; color: var(--sc-ink-soft); font-size: 0.86rem; }
.heal__row code { color: var(--bone); }
.strike { text-decoration: line-through; text-decoration-color: var(--fail); color: var(--sc-ink-soft) !important; }
.diff { border-radius: 10px; overflow: hidden; font: 500 0.82rem/1.5 var(--sc-font-mono); border: 1px solid var(--sc-hairline); }
.diff p { margin: 0; padding: 8px 12px; overflow-wrap: anywhere; }
.diff span { display: inline-block; width: 1.2em; }
.diff__del { background: color-mix(in oklab, var(--fail) 16%, var(--night)); color: #F2C5C6; }
.diff__add { background: color-mix(in oklab, var(--pass) 18%, var(--night)); color: #C9EBD7; }
.heal__apply { margin: 4px 0 0; display: flex; align-items: center; justify-content: space-between; }
.heal__example { font: 500 0.74rem/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--pass { background: var(--pass); } .dot--fail { background: var(--fail); } .dot--healed { background: var(--healed); }

/* =================================================================== KIT */
.kit__head .h2 { margin-top: var(--sc-4); }
.kit__list { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); }
.kit__list li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--sc-hairline); }
.kit__list .ic { color: var(--chart); margin-top: 3px; width: 22px; height: 22px; }
.kit__list h3 { margin: 0; font: 650 1.08rem/1.3 var(--sc-font-text); color: var(--bone); }
.kit__list p { margin: 4px 0 0; color: var(--sc-ink-soft); font-size: 0.98rem; line-height: 1.5; }
.plans { margin-top: var(--sc-10); scroll-margin-top: var(--bar-h); }
.plans__head .h2 { margin-top: var(--sc-4); }
.plans__table { margin-top: var(--sc-7); overflow-x: auto; }
.plans table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; }
.plans th, .plans td { text-align: left; padding: 13px 16px; border-top: 1px solid var(--sc-hairline); vertical-align: top; }
.plans thead th, .plans thead td { border-top: 0; padding-bottom: 18px; vertical-align: bottom; }
.plans tbody th { font-weight: 500; color: var(--sc-ink-soft); width: 20%; }
.plans tbody td { color: var(--bone); font-variant-numeric: tabular-nums; }
.plans tfoot td { border-top: 1px solid var(--sc-hairline); padding-top: 18px; }
.plan__name { display: block; font: 700 1.25rem/1.1 var(--sc-font-display); color: var(--bone); letter-spacing: -0.01em; }
.plan__price { display: block; margin-top: 6px; font: 500 0.9rem/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.plan__price b { font: 700 2rem/1 var(--sc-font-display); color: var(--bone); letter-spacing: -0.02em; margin-right: 2px; }
.plans .is-pro { background: color-mix(in oklab, var(--chart) 7%, transparent); }
.plans thead .is-pro { border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: inset 0 3px 0 var(--chart); }
.plans tfoot .is-pro { border-radius: 0 0 var(--r-card) var(--r-card); }

/* ================================================================== DAWN */
.dawn__stage { display: flex; flex-direction: column; justify-content: center; }
.dawn__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; filter: brightness(0.7) saturate(0.9); }
.dawn__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14, 20, 15, 0.9) 0%, rgba(14, 20, 15, 0.7) 40%, rgba(14, 20, 15, 0.35) 70%, rgba(14, 20, 15, 0.5) 100%), linear-gradient(to top, rgba(14,20,15,.85), transparent 30%); }
.dawn__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dawn__h { margin: var(--sc-4) 0 var(--sc-4); }
.digest { background: #F4F1E8; color: #16201A; border-radius: 18px; padding: 18px; box-shadow: var(--sc-e3); max-width: 27rem; justify-self: end; width: 100%; }
.digest__from { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.digest__from img { border-radius: 50%; background: var(--night); padding: 3px; }
.digest__from span { display: grid; line-height: 1.2; }
.digest__from b { font-size: 0.98rem; }
.digest__from small { font: 500 0.74rem/1.3 var(--sc-font-mono); color: #56645A; }
.digest__from time { margin-left: auto; font: 500 0.76rem/1 var(--sc-font-mono); color: #56645A; }
.digest__msg { background: #fff; border-radius: 14px 14px 14px 4px; padding: 14px 16px; display: grid; gap: 9px; font-size: 0.95rem; line-height: 1.45; }
.digest__msg p { margin: 0; display: flex; gap: 9px; align-items: baseline; }
.digest__msg .dot { transform: translateY(-1px); }
.digest__btns { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.digest__btns .btn--ghost { color: #16201A; border-color: #BDB7A6; background: #fff; }
@media (hover: hover) and (pointer: fine) { .digest__btns .btn--ghost:hover { border-color: #16201A; background: #fff; } }
.foot { position: absolute; z-index: 2; left: var(--sc-gutter); right: calc(var(--sc-gutter) + var(--rail)); bottom: 18px; display: flex; align-items: center; gap: 22px; font: 500 0.8rem/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.foot img { height: 24px; width: auto; }
.foot p { margin: 0; }
.foot a { color: var(--bone); }

/* ================================================================ BEETLE */
.beetle { position: fixed; left: 0; top: 0; width: 34px; height: 34px; z-index: 50; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55)); will-change: transform, opacity; }

/* =============================================================== PHONES */
@media (max-width: 860px) {
  .bar__clock { display: block; }
  .bar__link { display: none; }
  .bar__brand img { height: 28px; }
  .learn__grid, .describe__grid, .heal__grid, .dawn__grid { grid-template-columns: minmax(0, 1fr); }
  .kit__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  :root { --bar-h: 60px; }
  .hero__scrim { background: linear-gradient(to bottom, rgba(8,14,11,.92) 0%, rgba(8,14,11,.78) 36%, rgba(8,14,11,.2) 58%, transparent 70%); }
  .hero__copy { top: calc(var(--bar-h) + 3vh); right: var(--sc-gutter); max-width: none; }
  .hero__copy .stamp { margin-bottom: var(--sc-3); }
  .hero__title { font-size: clamp(2.3rem, 9.6vw, 3rem); max-width: 11ch; }
  .hero__sub { font-size: 1.02rem; margin-top: var(--sc-4); }
  .hero__cta { margin-top: var(--sc-5); }
  .hero__cta .btn--lg { min-height: 48px; padding: 12px 18px; }
  .hero__beast { width: 122vw; right: -6vw; bottom: 9vh; }
  .hero__second { top: calc(var(--bar-h) + 6vh); right: var(--sc-gutter); }
  .hero__leaves { width: 78vw; bottom: -3vh; }
  .hero__leaves--l { left: -22vw; }
  .hero__leaves--r { right: -26vw; }
  .findings { grid-template-columns: 1fr; gap: 0; }
  .cap__note { margin-left: 0; width: 100%; }

  .describe__stage { align-items: flex-start; padding-top: calc(var(--bar-h) + 2vh); }
  .describe__grid { gap: 14px; }
  .describe__lead .h2 { font-size: 1.7rem; margin-top: 8px; }
  .describe__note { display: none; }
  .ask { margin-top: 14px; padding: 12px 14px; }
  .ask__text { font-size: 0.98rem; min-height: 4.6em; }
  .plan { gap: 5px; }
  .step { padding: 7px 10px; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; }
  .step__do { font-size: 0.9rem; }
  .step__why { font-size: 0.78rem; }
  .eng { font-size: 0.66rem; padding: 4px 6px; }

  .strip__lead { flex-basis: 80vw; }
  .frame { flex-basis: 46vw; }

  .catch__head { top: calc(var(--bar-h) + 1vh); right: var(--sc-gutter); max-width: none; }
  .catch__head .stamp { white-space: nowrap; }
  .catch__head .h2 { font-size: 1.55rem; }
  .phone { top: calc(var(--bar-h) + 12svh); transform: translateX(-50%); left: 50%; width: auto; height: 35svh; border-radius: 24px; padding: 7px; transition: opacity 260ms var(--sc-ease-out); }
  .catch__stage.is-caught .phone { opacity: 0.3; }
  .phone__screen { border-radius: 18px; }
  .co { font-size: 10px; }
  .co__h { font-size: 15px; }
  .co__brand { font-size: 11px; }
  .co__field { height: 16px; margin-top: 6px; }
  .co__btn { height: 26px; font-size: 11px; }
  .co__promo { font-size: 9px; }
  .catch__side { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 3svh; transform: none; }
  .runlog { font-size: 0.74rem; gap: 5px; }
  .runlog__why { font-size: 0.86rem; }
  .report { padding: 14px; }
  .report__title { font-size: 1.15rem; margin: 10px 0 6px; }
  .report__why { font-size: 0.84rem; }
  .tg { margin-top: 10px; padding: 9px; }
  .tg__msg { font-size: 0.8rem; }
  .hunter { width: 118vw; left: -74vw; bottom: auto; top: 26svh; }
  .tongue__line { stroke-width: 5; }

  .heal__skin { inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, #000 80%, transparent 100%); }
  .heal__row { gap: 4px; }

  .plans__table { overflow: visible; }
  .plans table, .plans thead, .plans tbody, .plans tfoot, .plans tr, .plans th, .plans td { display: block; }
  .plans thead { display: none; }
  .plans tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--sc-hairline); padding: 10px 0; }
  .plans tbody th { grid-column: 1 / -1; width: auto; border: 0; padding: 0 0 6px; font-size: 0.82rem; }
  .plans tbody td { border: 0; padding: 0 8px 0 0; font-size: 0.9rem; }
  .plans tbody td::before { content: attr(data-plan); display: block; font: 500 0.7rem/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); }
  .plans .is-pro { background: none; }
  .plans tfoot tr { display: grid; gap: 8px; padding-top: 14px; }
  .plans tfoot td { border: 0; padding: 0; }
  .plans tfoot td:first-child { display: none; }
  .plans tfoot .btn { width: 100%; }

  .dawn__stage { justify-content: flex-start; padding-top: calc(var(--bar-h) + 2vh); }
  .dawn__grid { gap: 16px; }
  .dawn__h { font-size: 1.75rem; margin: 8px 0; }
  .dawn__text .body { font-size: 0.92rem; }
  .digest { justify-self: stretch; padding: 12px; }
  .digest__msg { font-size: 0.86rem; padding: 11px 12px; gap: 6px; }
  .foot { bottom: 12px; gap: 14px; flex-wrap: wrap; }
  .foot img { height: 20px; }
  .beetle { width: 26px; height: 26px; }
}

/* ======================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .hero__plate, .hero__beast-in, .hero__leaves--l, .hero__mist { transform: none !important; }
  .hero__leaves--r { transform: none !important; }
  .map__edges path { stroke-dashoffset: 0; }
  .map__nodes .node { opacity: 1; }
  .step, .runlog li, .report { transition-duration: 1ms; transform: none; }
  .hunter { transform: none; }
  .watch__list::before { transition: none; }
}