/* Seccuti marketing site.

   Direction: a field instrument, not a SaaS brochure. The product's claim is that an autonomous
   attacker runs inside a boundary a human drew, so the boundary is the design: a surveyed
   perimeter with corner ticks, coordinate labels and a refusal state. That device is the one
   thing repeated on every page.

   Colour carries meaning rather than decoration. The page is achromatic slate and bone; the only
   chroma that ever appears is EMBER for something the gate refused or a critical finding, and
   EYESHINE for something that is live right now. A reader can therefore tell "the system acted"
   from "the system stopped" without reading a word.
*/

:root {
  /* Surfaces. Deep slate-green with real hue in it. Never pure black. */
  --bg-0: #141815;
  --bg-1: #1a1f1b;
  --bg-2: #212824;
  --bg-3: #2a322d;
  --line: #313b35;
  --line-2: #42504a;

  /* Text. Bone rather than white: white on a dark field glares and reads cheap. */
  --ink: #e9e7dc;
  --ink-2: #a0a89f;
  --ink-3: #6f7a73;

  /* The only two chromatic tokens on the site. */
  --ember: #e4552b;        /* refused, blocked, critical */
  --ember-soft: #7a2a16;
  --eyeshine: #d9c44b;     /* live, running, now */

  /* Severity ramp. Distinguishable by more than hue: every use also carries a glyph or a label. */
  --sev-critical: #e4552b;
  --sev-high: #d98026;
  --sev-medium: #c2a63a;
  --sev-low: #7f8f7a;
  --sev-info: #63706c;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wide: 1280px;
  --gut: clamp(20px, 4vw, 56px);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;

  --tick: 14px; /* corner tick length: the signature */
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font: 400 17px/1.62 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--eyeshine); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.2vw, 72px); }
h2 { font-size: clamp(30px, 3.9vw, 50px); }
h3 { font-size: clamp(19px, 1.5vw, 23px); font-stretch: 108%; letter-spacing: -0.012em; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.prose { max-width: 62ch; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }

/* The label system. Mono, uppercase, wide tracking: instrument marking, not a badge. */
.label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label--live { color: var(--eyeshine); }
.label--stop { color: var(--ember); }

.eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 90px; }

/* ---------------------------------------------------------------------------------------------
   THE SIGNATURE: a surveyed perimeter. Corner ticks on an otherwise borderless panel. It is the
   product's authorization envelope drawn as a frame, and it appears on every panel that describes
   something bounded.
   ------------------------------------------------------------------------------------------- */
.env {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-1);
}
.env::before, .env::after,
.env > .env__c1, .env > .env__c2 {
  content: "";
  position: absolute;
  width: var(--tick);
  height: var(--tick);
  border: 1px solid var(--line-2);
  pointer-events: none;
}
.env::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.env::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.env > .env__c1 { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.env > .env__c2 { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.env--stop::before, .env--stop::after,
.env--stop > .env__c1, .env--stop > .env__c2 { border-color: var(--ember); }

/* --- top bar ------------------------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
}
.top__in { display: flex; align-items: center; gap: var(--sp-6); height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark { width: 30px; height: 30px; display: block; }
.brand__name {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: 20px; letter-spacing: -0.02em;
}
.nav { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px 12px;
  font-family: var(--display); font-weight: 600; font-stretch: 100%;
  font-size: 15px; letter-spacing: -0.004em;
  color: var(--ink-2); text-decoration: none;
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: var(--eyeshine);
  scale: 0 1; transform-origin: left; transition: scale 0.22s ease;
}
.nav__link:hover, .nav__item:hover .nav__link { color: var(--ink); }
.nav__item:hover .nav__link::after { scale: 1 1; }
.nav__caret { width: 8px; height: 8px; opacity: 0.5; transition: rotate 0.2s ease; }
.nav__item:hover .nav__caret { rotate: 180deg; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .nav__link::after, .nav__caret { transition: none; }
}

/* Mega panel. Groups mirror the URL structure, so the menu and the sitemap agree. */
.mega {
  position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0;
  min-width: 640px; padding: var(--sp-6);
  background: var(--bg-1); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: none; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-7);
}
.mega::before, .mega::after {
  content: ""; position: absolute; top: 0; width: 10px; height: 10px;
  border-top: 1px solid var(--eyeshine); pointer-events: none;
}
.mega::before { left: 0; border-left: 1px solid var(--eyeshine); }
.mega::after { right: 0; border-right: 1px solid var(--eyeshine); }
.nav__item:hover .mega, .nav__item:focus-within .mega { display: grid; }
.mega__col > .label { display: block; margin-bottom: var(--sp-3); }
.mega__link { display: block; padding: 8px 0 8px 14px; text-decoration: none;
  border-left: 1px solid transparent; transition: border-color 0.15s; }
.mega__link:hover { border-left-color: var(--eyeshine); }
.mega__link b { display: block; font-family: var(--display); font-weight: 600;
  font-stretch: 100%; font-size: 15.5px; letter-spacing: -0.006em; }
.mega__link span { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.mega__link:hover b { color: var(--eyeshine); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 1px solid var(--line-2); background: transparent;
  color: var(--ink); font: 600 15px/1 var(--body); text-decoration: none;
  cursor: pointer; border-radius: 2px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--ink-2); background: var(--bg-2); }
.btn--solid { background: var(--ink); color: var(--bg-0); border-color: var(--ink); font-weight: 600; }
.btn--solid:hover { background: #fff; border-color: #fff; color: var(--bg-0); }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--xl { padding: 20px 34px; font-size: 17px; font-family: var(--display);
  font-weight: 700; font-stretch: 105%; letter-spacing: 0.005em; }
.nav__cta { display: flex; align-items: center; gap: var(--sp-3); margin-left: var(--sp-4); }

.burger { display: none; background: none; border: 1px solid var(--line-2); padding: 9px 11px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 3.5px 0; }

/* --- hero ---------------------------------------------------------------------------------- */
.hero { position: relative; padding: var(--sp-8) 0 var(--sp-8); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-8); align-items: center;
}
.hero h1 { margin-bottom: var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--eyeshine); }
.hero__lede { font-size: 19px; color: var(--ink-2); max-width: 54ch; margin-bottom: var(--sp-6); }

/* The scan form is the primary action on the page. */
.scan {
  position: relative; max-width: 540px;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: color-mix(in srgb, var(--bg-1) 66%, transparent);
  border: 1px solid var(--line);
}
.scan::before, .scan::after,
.scan .env__c1, .scan .env__c2 {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--eyeshine); pointer-events: none;
}
.scan::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.scan::after { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.scan .env__c1 { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.scan .env__c2 { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.scan__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); gap: var(--sp-3); }
/* One command control: a mono prompt, the target field, and the Scan button as an integrated
   segment - so it reads as "run a scan against this", not as a large empty input box. */
.scan__bar {
  display: flex; align-items: stretch; min-width: 0;
  background: var(--bg-0); border: 1px solid var(--line-2); border-radius: 4px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.scan__bar:focus-within {
  border-color: var(--eyeshine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eyeshine) 15%, transparent);
}
.scan__prompt {
  align-self: center; padding: 0 2px 0 15px;
  font: 500 15px/1 var(--mono); color: var(--eyeshine); user-select: none;
}
.scan__input {
  flex: 1; min-width: 0; padding: 14px 12px;
  background: transparent; border: 0; border-radius: 0;
  color: var(--ink); font: 400 16px/1.2 var(--mono); letter-spacing: 0.01em;
}
.scan__input::placeholder { color: var(--ink-3); }
.scan__input:focus { outline: none; }
.scan__go {
  flex: none; border: 0; border-left: 1px solid var(--line-2); border-radius: 0;
  padding: 0 22px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; letter-spacing: 0.01em;
}
.scan__go-arrow { transition: transform .16s ease; }
.scan__go:hover .scan__go-arrow, .scan__bar:focus-within .scan__go-arrow { transform: translateX(3px); }
.scan__note { margin-top: var(--sp-3); font-size: 13px; color: var(--ink-3); line-height: 1.55; max-width: 46ch; }
.scan__err { margin-top: var(--sp-3); font-size: 13px; color: var(--ember); display: none; }
.scan__err[data-shown="true"] { display: block; }

/* --- hero stage: the raccoon inside the envelope ------------------------------------------- */
.stage { position: relative; aspect-ratio: 1 / 1; min-height: 460px; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__racc {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 74%; max-width: 500px; 
}
.stage__racc svg { width: 100%; height: auto; display: block; }
.racc g[class^="ink"] path { fill: none; stroke: #070a09; stroke-linecap: round; }
.racc .lit path { fill: none; stroke: #dedcce; stroke-linecap: round; }
.racc .rim path { fill: none; stroke: #454c46; stroke-linecap: round; }
.racc .whisker { fill: none; stroke: #e6e2d4; stroke-width: 1.5; stroke-linecap: round; }
.racc-part { transform-box: fill-box; }

.stage__frame { position: absolute; inset: 4%; pointer-events: none; }
.stage__cap {
  position: absolute; bottom: -6px; left: 0; right: 0;
  display: flex; justify-content: space-between; gap: var(--sp-4);
}

/* --- live readout strip -------------------------------------------------------------------- */
.readout {
  margin-top: var(--sp-8);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-right: 0;
}
.readout__cell { padding: var(--sp-5); border-right: 1px solid var(--line); }
.readout__n {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: 34px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  display: block; line-height: 1;
}
.readout__cell--stop .readout__n { color: var(--ember); }
.readout__l { display: block; margin-top: 8px; }

/* --- sections ------------------------------------------------------------------------------ */
.sec { padding: var(--sp-9) 0; border-top: 1px solid var(--line); }
.sec__head { max-width: 68ch; margin-bottom: var(--sp-8); }
.sec__head h2 { margin-bottom: var(--sp-4); }
.sec__head p { color: var(--ink-2); font-size: 18px; }

/* The loop is a real sequence, so it is numbered. Nothing else on the site is. */
.loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.loop__step { background: var(--bg-0); padding: var(--sp-6); position: relative; }
.loop__n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.16em; display: block; margin-bottom: var(--sp-4);
}
.loop__step h3 { margin-bottom: var(--sp-3); }
.loop__step p { font-size: 15px; color: var(--ink-2); }
.loop__step::after {
  content: ""; position: absolute; left: var(--sp-6); bottom: var(--sp-5);
  width: 0; height: 2px; background: var(--eyeshine); transition: width 0.7s ease;
}
.loop__step[data-seen="true"]::after { width: 42px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

.card { background: var(--bg-1); border: 1px solid var(--line); padding: var(--sp-6); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { font-size: 15px; color: var(--ink-2); }

/* Refusal rows: the trust surface, and the only place ember appears in quantity. */
.refuse { border: 1px solid var(--line); }
.refuse__row {
  display: grid; grid-template-columns: 110px minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-4); align-items: baseline;
  padding: 14px var(--sp-5); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px;
}
.refuse__row:last-child { border-bottom: 0; }
.refuse__verdict { color: var(--ember); letter-spacing: 0.1em; }
.refuse__verdict--ok { color: var(--ink-3); }
.refuse__what { color: var(--ink-2); overflow-wrap: anywhere; }
.refuse__why { color: var(--ink-3); font-size: 12px; text-align: right; overflow-wrap: anywhere; }

.faq__q { border-top: 1px solid var(--line); padding: var(--sp-6) 0; }
.faq__q:last-child { border-bottom: 1px solid var(--line); }
.faq__q h3 { margin-bottom: var(--sp-3); }
.faq__q p { color: var(--ink-2); max-width: 74ch; }

.cta { text-align: center; padding: var(--sp-9) 0; }
.cta h2 { margin-bottom: var(--sp-4); }
.cta p { color: var(--ink-2); margin-bottom: var(--sp-6); }
.cta__row { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }

/* --- footer -------------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: var(--sp-8) 0 var(--sp-7); }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); }
.foot__col > .label { display: block; margin-bottom: var(--sp-4); }
.foot__col a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.foot__col a:hover { color: var(--ink); }
.foot__bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg-0); padding: 10px 16px;
}
.skip:focus { left: var(--gut); }

/* --- responsive ---------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .stage { min-height: 380px; max-width: 520px; margin-inline: auto; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav, .nav__cta { display: none; }
  .burger { display: block; margin-left: auto; }
  .nav[data-open="true"] {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--bg-1); border-bottom: 1px solid var(--line);
    padding: var(--sp-4); gap: 0; margin: 0;
  }
  .nav[data-open="true"] .mega { position: static; translate: none; min-width: 0; display: grid; border: 0; padding: var(--sp-3) var(--sp-4); background: transparent; }
  .nav[data-open="true"] .nav__caret { display: none; }
  .loop, .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .readout { grid-template-columns: 1fr 1fr; border-right: 1px solid var(--line); }
  .readout__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .scan__go { padding: 0 16px; }
  .scan__input { font-size: 15px; }
}
@media (max-width: 420px) {
  .refuse__row { grid-template-columns: 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .loop__step::after { transition: none; width: 42px; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------------------------------------
   Section components (components.py). No generic card grid anywhere: each shape below encodes
   something about the content it holds, which is what keeps the pages from reading as the same
   stack of equal boxes every product site ships.
   ------------------------------------------------------------------------------------------- */

/* plate: the page header, built like a specimen label. */
.plate { padding: var(--sp-9) 0 var(--sp-7); border-bottom: 1px solid var(--line); }
.plate h1 { max-width: 20ch; margin-bottom: var(--sp-5); }
.plate__lede { font-size: 20px; color: var(--ink-2); max-width: 62ch; }
.plate__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.plate__meta dt { margin-bottom: 6px; }
.plate__meta dd { margin: 0; font: 400 14px/1.4 var(--mono); color: var(--ink-2); }

/* spec: dense key and value, for facts a reader scans. */
.spec { margin: 0; border-top: 1px solid var(--line); }
.spec__row {
  display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: var(--sp-5);
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.spec__k { font: 500 13px/1.5 var(--mono); color: var(--ink-2); letter-spacing: 0.02em; }
.spec__v { margin: 0; color: var(--ink-2); font-size: 16px; }
.spec__v b, .spec__v strong { color: var(--ink); font-weight: 600; }
.spec__cap { display: block; margin-bottom: var(--sp-4); }

/* rail: a numbered sequence on a continuous line. Used only where order carries meaning. */
.rail { list-style: none; margin: 0; padding: 0; position: relative; }
.rail::before {
  content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px;
  width: 1px; background: var(--line);
}
.rail__item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-5); padding: var(--sp-5) 0; }
.rail__n {
  position: relative; z-index: 1;
  width: 56px; height: 30px; display: inline-flex; align-items: center;
  background: var(--bg-0); font: 500 13px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.1em;
}
.rail__item[data-seen="true"] .rail__n { color: var(--eyeshine); }
.rail__body h3 { margin-bottom: var(--sp-3); }
.rail__body p { color: var(--ink-2); max-width: 68ch; }

/* versus: comparisons belong in a table, not in two columns of cards. */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); }
.vs { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.vs caption { text-align: left; padding: var(--sp-4) var(--sp-5); color: var(--ink-3); font-size: 13px; border-bottom: 1px solid var(--line); }
.vs th, .vs td { padding: 16px var(--sp-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.vs thead th {
  font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); background: var(--bg-1); white-space: nowrap;
}
.vs tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.vs td { color: var(--ink-2); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }

/* idx: cross links as an index, so a hub page reads as a contents page rather than a card wall. */
.idx { border-top: 1px solid var(--line); }
.idx__row {
  display: grid; grid-template-columns: 48px minmax(200px, 320px) 1fr; gap: var(--sp-5);
  align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; transition: background 0.15s;
}
.idx__row:hover { background: var(--bg-1); }
.idx__n { font: 500 12px/1.6 var(--mono); color: var(--ink-3); letter-spacing: 0.1em; }
.idx__t { font-family: var(--display); font-weight: 600; font-stretch: 104%; font-size: 18px; }
.idx__row:hover .idx__t { color: var(--eyeshine); }
.idx__d { color: var(--ink-3); font-size: 15px; }

/* note: one bordered statement, for the single thing that must land on a page. */
.note {
  border-left: 2px solid var(--eyeshine); padding: 4px 0 4px var(--sp-5);
  margin: var(--sp-6) 0; color: var(--ink); font-size: 17px; max-width: 70ch;
}
.note--stop { border-left-color: var(--ember); }

.env__body { margin-top: var(--sp-5); display: grid; gap: 14px; }
.env__body p { color: var(--ink-2); font-size: 15.5px; }
.env__body b { color: var(--ink); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; gap: 6px; }
  .idx__row { grid-template-columns: 36px 1fr; }
  .idx__d { grid-column: 2; }
  .rail__item { grid-template-columns: 44px 1fr; gap: var(--sp-4); }
  .rail::before { left: 21px; }
  .rail__n { width: 44px; }
}

.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;
}

/* ---------------------------------------------------------------------------------------------
   Centred hero. The headline is gone: the illustration leads, the action follows directly under
   it, and there is nothing between the visitor and the one thing the page wants them to do. The
   h1 remains in the markup as the accessible page name so the document still has a heading.
   ------------------------------------------------------------------------------------------- */
.hero--centred { padding: var(--sp-5) 0 var(--sp-8); }
.hero__stack {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
}
.hero--centred .stage {
  width: min(660px, 92vw); aspect-ratio: 1.12 / 1; min-height: 0; margin: 0;
}
.hero--centred .stage__racc { width: 46%; max-width: 320px; }
.hero--centred .stage__cap {
  position: static; width: min(660px, 92vw);
  display: flex; justify-content: space-between; margin-bottom: var(--sp-2);
}
.hero--centred .scan { width: min(660px, 92vw); max-width: none; }
.hero--centred .scan__note { text-align: left; }

@media (max-width: 640px) {
  .hero--centred .stage { width: 94vw; }
  .hero--centred .stage__racc { width: 72%; }
}

/* ---------------------------------------------------------------------------------------------
   Split hero: the action on the left, the animal on the right, the pair centred as one block.
   The circles and target labels that used to surround the raccoon are gone - the illustration
   carries the hero on its own and the ring was competing with it.
   ------------------------------------------------------------------------------------------- */
.hero--split {
  padding: var(--sp-8) 0 var(--sp-8);
  /* Atmosphere: a faint eyeshine halo sits behind the raccoon (right of centre), so it emerges out
     of the dark instead of floating on a flat field - depth without a busy background. */
  background:
    radial-gradient(52% 60% at 76% 60%,
      color-mix(in srgb, var(--ember) 4%, transparent) 0%, transparent 100%);
}
.hero__pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(24px, 5vw, 80px); align-items: center; justify-items: center;
}
.hero--split .scan { width: min(620px, 100%); max-width: none; justify-self: end; }

.stage {
  position: relative; width: min(430px, 100%); aspect-ratio: 1312 / 1354;
  min-height: 0; margin: 0; justify-self: start;
  /* Isolate the plate so scrolling the page cannot force it to repaint. */
  contain: layout paint;
}
.stage__plate {
  width: 100%; height: auto; display: block;
  /* The pointer follow is a transform on this element, so hint it to its own layer once rather
     than promoting and demoting it on every move. */
  will-change: transform;
}
.stage__eyes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.racc-pupil { transform-box: fill-box; transform-origin: center; }

@media (max-width: 940px) {
  .hero__pair { grid-template-columns: 1fr; justify-items: center; }
  .hero--split .scan { justify-self: center; order: 2; }
  .stage { order: 1; justify-self: center; width: min(360px, 78vw); }
}

/* ---------------------------------------------------------------------------------------------
   Header, second pass. The bar reads as an instrument fascia rather than as a web nav: a hairline
   rule under it, the brand separated by a rule rather than by whitespace, and the mega panel
   opening as a full-width sheet under the bar instead of a floating card. A floating dropdown is
   the shape every site uses; a sheet that spans the header reads as part of the chrome.
   ------------------------------------------------------------------------------------------- */
.top { border-bottom: 1px solid var(--line); }
.top__in { height: 74px; gap: var(--sp-5); }
.brand { padding-right: var(--sp-5); border-right: 1px solid var(--line); height: 74px; }
.brand__mark { width: 26px; height: 26px; }
.brand__name { font-size: 19px; letter-spacing: -0.024em; }

.nav { gap: 2px; }
.nav__link { padding: 26px 15px; font-size: 14.5px; letter-spacing: 0.004em; }
.nav__link::after { left: 15px; right: 15px; bottom: 20px; height: 1.5px; }

/* The panel spans the full header width and is anchored to the bar, not to the item. */
.mega {
  top: 100%; left: 50%; translate: -50% 0;
  width: 100vw; max-width: var(--wide); min-width: 0;
  padding: var(--sp-7) var(--gut) var(--sp-6);
  background: var(--bg-1); border: 0; border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-8);
}
.mega::before, .mega::after { display: none; }
.mega__col > .label { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.mega__link {
  padding: 12px 0 12px 16px; border-left: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.mega__link:hover { border-left-color: var(--eyeshine); background: var(--bg-2); }
.mega__link b { font-size: 16px; margin-bottom: 3px; }
.mega__link span { font-size: 13.5px; }

/* A hairline between the nav and the actions, so the two groups do not read as one row of links. */
.nav__cta { margin-left: var(--sp-5); padding-left: var(--sp-5); border-left: 1px solid var(--line); height: 74px; align-items: center; }
.nav__cta .btn { padding: 11px 18px; font-size: 14.5px; }

@media (max-width: 820px) {
  .brand { border-right: 0; height: auto; padding-right: 0; }
  .top__in { height: 64px; }
  .nav[data-open="true"] { top: 64px; }
  .nav[data-open="true"] .mega { width: auto; padding: var(--sp-3) var(--sp-4); box-shadow: none; }
}

/* The eye overlay sits above the plate, and the lids inside it sit above the pupils, so the eye
   still has a lid in front of it now that the plate is a flat image. */
.stage__eyes { z-index: 1; }

/* The panel was positioned against the nav ITEM, so a full width sheet ended up centred on
   whichever menu label opened it and ran off the left edge. Anchor it to the header bar instead:
   the item stops being a positioning context, the sheet spans the bar, and its contents are held
   to the same measure as the rest of the page. */
.nav__item { position: static; }
.mega {
  left: 0; right: 0; translate: none;
  width: auto; max-width: none;
  padding-inline: max(var(--gut), calc((100% - var(--wide)) / 2 + var(--gut)));
}
@media (max-width: 820px) {
  .nav[data-open="true"] .mega { position: static; padding-inline: var(--sp-4); }
}

/* --- hero supporting copy -------------------------------------------------------------------
   A single form on an empty field reads as a utility page, not as a marketing page. The claim
   above the form says what the product does, the points below say what pressing the button costs
   you, and the band underneath puts something concrete on the page before the long sections. */
.hero__copy { grid-column: 1; max-width: 620px; width: 100%; justify-self: end; }
/* The display headline the hero was missing: a single confident line, set large, so the page opens
   with a statement rather than a paragraph. "in" carries the eyeshine accent - the one gold word. */
.hero__title {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(30px, 3.4vw, 52px); line-height: 1.04;
  letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 var(--sp-4); text-wrap: balance; max-width: 18ch;
}
.hero__title em { font-style: normal; color: var(--eyeshine); }
.hero__claim { font-size: 19px; color: var(--ink-2); margin: 0; max-width: 56ch; }
.hero__points {
  grid-column: 1; list-style: none; margin: 0; padding: 0;
  max-width: 620px; width: 100%; justify-self: end;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6);
}
.hero__points li {
  font-size: 14px; color: var(--ink-3); line-height: 1.5;
  padding-left: 14px; border-left: 1px solid var(--line);
}
.hero__points b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }

.hero__pair { grid-template-rows: auto auto auto; align-items: start; row-gap: var(--sp-5); }
.hero--split .stage { grid-column: 2; grid-row: 1 / 4; align-self: center; }

.band { border-top: 1px solid var(--line); padding: var(--sp-7) 0; background: var(--bg-1); }
.band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-7); }
.band__item > .label { display: block; margin-bottom: 10px; color: var(--eyeshine); }
.band__item p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

@media (max-width: 940px) {
  .hero__pair { grid-template-rows: none; }
  .hero--split .stage { grid-column: 1; grid-row: auto; }
  .hero__copy, .hero__points { justify-self: center; }
  .band__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero__points, .band__grid { grid-template-columns: 1fr; }
}

/* The right half was mostly empty around a small portrait, and the left half was carrying three
   blocks of prose about the same thing. Give the illustration the room and cut the copy to a
   single line each: the hero states the claim, the pages below make the argument. */
.hero__pair { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; position: relative; }
.hero--split .stage { width: min(500px, 100%); justify-self: center; z-index: 2; }

/* ==========================================================================================
   Right cell = an OPERATIONS FIELD, not a floating head. Three layers, all siblings of the head
   so the eye/head tracking (which reads .stage's rect + a fixed 640x660 viewBox) is untouched:
   (1) .opfield  - a faint gated run the raccoon is reading, framed by the site corner ticks,
                   masked to vanish over the face so it is fragments-from-dark, never a panel;
   (2) .stage__glow - an eyeshine spotlight the head resolves OUT of, so it stops floating;
   (3) .stage__sill - the cropped neck fades into a lit shelf, so it stops reading as severed.
   ========================================================================================== */
.stage__head { position: relative; z-index: 1; }
.stage__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 44% at 50% 34%,
      color-mix(in srgb, var(--eyeshine) 16%, transparent) 0%,
      color-mix(in srgb, var(--eyeshine) 5%, transparent) 44%, transparent 72%),
    radial-gradient(80% 80% at 50% 42%, transparent 54%, var(--bg-0) 100%);
}
.stage__sill {
  position: absolute; inset: auto 0 0 0; height: 26%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    var(--bg-0) 0%, var(--bg-0) 6%,
    color-mix(in srgb, var(--bg-0) 68%, transparent) 34%, transparent 100%);
}
.stage__sill::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 30%; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--eyeshine) 60%, transparent), transparent);
}

.opfield {
  grid-column: 2; grid-row: 1 / 4; position: relative; z-index: 1;
  align-self: stretch; justify-self: stretch; pointer-events: none;
}
.opfield__tick { position: absolute; width: var(--tick, 12px); height: var(--tick, 12px); border: 1px solid var(--line-2); }
.opfield__tick--tl { top: 4%; left: 2%; border-right: 0; border-bottom: 0; }
.opfield__tick--tr { top: 4%; right: 2%; border-left: 0; border-bottom: 0; }
.opfield__tick--bl { bottom: 4%; left: 2%; border-right: 0; border-top: 0; }
.opfield__tick--br { bottom: 4%; right: 2%; border-left: 0; border-top: 0; }
.opfield__rail {
  position: absolute; left: calc(2% + var(--tick) + 14px); top: 50%; translate: 0 -50%;
  margin: 0; padding: 0; list-style: none; display: grid; gap: 15px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
}
.op { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); white-space: nowrap; }
.op__g { font-weight: 700; width: 9px; text-align: center; }
.op--ok .op__g { color: var(--eyeshine); }
.op--no .op__g, .op--hit .op__g { color: var(--ember); }
.op--hit { color: var(--ink-2); }
.opfield__tag {
  position: absolute; z-index: 3; font: 500 10px/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 7px;
}
.opfield__tag--tl { top: 4%; left: calc(2% + var(--tick) + 9px); color: var(--eyeshine); }
.opfield__tag--tr { top: 4%; right: calc(2% + var(--tick) + 9px); }
.opfield__tag--bl { bottom: 4%; left: calc(2% + var(--tick) + 9px); }
.opfield__tag--br { bottom: 4%; right: calc(2% + var(--tick) + 9px); }
.opfield__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eyeshine); }
@media (prefers-reduced-motion: no-preference) {
  .opfield__dot { animation: opdot 2.6s ease-out infinite; }
}
@keyframes opdot {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--eyeshine) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--eyeshine) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 940px) { .opfield { display: none; } }
.hero__claim { font-size: 20px; max-width: 46ch; }
.hero__points {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
}
.hero__points li {
  padding: 7px 13px; border: 1px solid var(--line); border-left: 1px solid var(--line);
  font: 500 11px/1 var(--mono); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3);
}
.hero__points b { display: none; }
.scan__note { max-width: 54ch; }
@media (max-width: 940px) {
  .hero--split .stage { width: min(400px, 82vw); }
}

/* ---------------------------------------------------------------------------------------------
   Head tracking. A flat translate slides the picture around; it does not turn a head. Giving the
   stage a perspective and rotating the plate on two axes produces real foreshortening - the near
   side of the face widens and the far side compresses - which is the thing that reads as a turn.

   The pivot sits low, at the neck, because a head rotates about the spine and not about the middle
   of its own bounding box; that is what makes the chin swing while the crown barely moves.

   The plate and the eye overlay are wrapped together so they rotate as one object. Rotating only
   the image would leave the pupils behind and the eyes would slide out of their sockets.
   ------------------------------------------------------------------------------------------- */
.stage { perspective: 820px; perspective-origin: 50% 42%; }
.stage__head {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 96%;   /* the neck */
  will-change: transform;
}
.stage__plate { will-change: auto; }