/* KOLLAZ Software design system v2 (E2: High-Vis Rescue Service,
   alive). Owner-approved 2026-11-09: safety-yellow industrial field,
   black deepened as the ground the signal moves on, condensed caps
   signage type, motion on edges, dividers, tracks, tabs and
   backgrounds only. Text never moves and reading surfaces stay
   still and high-contrast. All animation honours
   prefers-reduced-motion, pauses off-screen, and every page is
   complete with JS disabled. All fonts self-hosted (Font Embedding
   Law): zero external requests. Button system carries the full
   state set, including the hover shine sweep on primaries and the
   E2 border-run. Class names btn-primary / btn-secondary are the
   v1 pages' names, grounded contextually: black signage on light
   fields, yellow on black fields. */

@font-face {
  font-family: "Carlito";
  src: url("/software-assets/carlito-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/software-assets/carlito-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/software-assets/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/software-assets/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Angle for the button border-run; unsupported engines keep a static arc. */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --yellow: #FFD21A;
  --yellow-deep: #F5C400;
  --yellow-soft: #FFF3B0;
  --black: #101010;
  --ink: #161616;
  --ink-soft: #3D3D3D;
  --white: #FFFFFF;
  --off-white: #F2F2F2;
  --red: #E8321E;
  --danger: #B3261E;
  /* Condensed signage stack: no condensed family is self-hosted in the
     house set, so system condensed faces lead, Noto Sans backs them. */
  --sign: "Arial Narrow", "Liberation Sans Narrow", "Noto Sans", sans-serif;
  --font: "Noto Sans", sans-serif;
  --body: "Carlito", "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--yellow); color: var(--ink);
  font-family: var(--body); font-size: 19px; line-height: 1.5;
}
img { max-width: 100%; height: auto; }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible,
.section-black :focus-visible, .plate :focus-visible,
.seal :focus-visible, .sticky-bar :focus-visible {
  outline-color: var(--yellow);
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 80;
  background: var(--black); color: var(--yellow); padding: 10px 18px;
  font-family: var(--font); font-weight: 700; text-decoration: none;
  transition: top 200ms ease;
}
.skip-link:focus { top: 12px; color: var(--yellow); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.mut { color: var(--ink-soft); }
.prose { max-width: 820px; color: var(--ink-soft); margin: 0 0 18px; }
.section-black .prose, .prose-light { color: #CFCFCF; }
.lede { font-size: 21px; line-height: 1.55; margin: 0 0 18px; max-width: 62ch; }

/* Scroll progress hairline: yellow, rides the very top edge. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 70;
  pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; background: var(--yellow);
  box-shadow: 0 1px 0 rgba(16,16,16,0.45);
  transform: scaleX(0); transform-origin: left center;
}

/* Drifting hazard stripes: section dividers and clock track share the drift. */
.hazard {
  height: 14px;
  background: repeating-linear-gradient(45deg, var(--black) 0 16px, var(--yellow) 16px 32px);
  background-size: 45.25px 45.25px;
  border-top: 3px solid var(--black); border-bottom: 3px solid var(--black);
  animation: hazard-drift 26s linear infinite;
}
@keyframes hazard-drift {
  from { background-position: 0 0; }
  to { background-position: 45.25px 0; }
}
.hazard.paused, .clock-track-fill.paused { animation-play-state: paused; }

/* Buttons: square signage, full state set, shine sweep on primaries,
   plus an animated border-run on hover. btn-primary is the solid
   signage button (black on light fields, yellow on black fields);
   btn-secondary is the outline (black outline on light, yellow
   outline on black). btn-black / btn-yellow / btn-outline are the
   explicit E2 names used where a ground is fixed by the component. */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 18px; line-height: 1.15;
  padding: 14px 24px; border: 3px solid var(--black); border-radius: 4px;
  text-decoration: none; cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-black, .btn-primary { background: var(--black); color: var(--yellow); }
.btn-yellow { background: var(--yellow); color: var(--black); }
.btn-outline, .btn-secondary { background: transparent; color: var(--black); }
.btn-big { font-size: 20px; padding: 17px 30px; }
.btn .arr { display: inline-block; transition: transform 250ms ease; }
/* Solid primaries on black fields turn yellow. */
.site-header .btn-primary, .section-black .btn-primary,
.seal .btn-primary, .plate .btn-primary, .sticky-bar .btn-primary,
.site-footer .btn-primary { background: var(--yellow); color: var(--black); }
/* Outlines on black fields turn yellow-outlined. */
.site-header .btn-secondary, .section-black .btn-secondary,
.seal .btn-secondary, .plate .btn-secondary, .sticky-bar .btn-secondary,
.site-footer .btn-secondary {
  background: transparent; color: var(--yellow); border-color: var(--yellow);
}
@media (hover: hover) and (pointer: fine) {
  .btn-black:hover, .btn-primary:hover { background: #2A2A2A; color: var(--yellow); }
  .btn-yellow:hover { background: var(--yellow-deep); color: var(--black); }
  .btn-outline:hover, .btn-secondary:hover { background: var(--black); color: var(--yellow); }
  .site-header .btn-primary:hover, .section-black .btn-primary:hover,
  .seal .btn-primary:hover, .plate .btn-primary:hover,
  .sticky-bar .btn-primary:hover, .site-footer .btn-primary:hover {
    background: var(--yellow-deep); color: var(--black);
  }
  .site-header .btn-secondary:hover, .section-black .btn-secondary:hover,
  .seal .btn-secondary:hover, .plate .btn-secondary:hover,
  .sticky-bar .btn-secondary:hover, .site-footer .btn-secondary:hover {
    background: var(--yellow); color: var(--black);
  }
  .btn:hover::after, .btn-primary:hover::after {
    transform: translateX(120%); transition: transform 550ms ease;
  }
  /* Border-run: a comet of the opposite colour travels the border.
     The layered background replaces the flat fill only while hovering. */
  .btn-black:hover, .btn-primary:hover {
    border-color: transparent;
    background:
      linear-gradient(#2A2A2A, #2A2A2A) padding-box,
      conic-gradient(from var(--a), rgba(255,210,26,0) 0 68%, var(--yellow) 86%, rgba(255,210,26,0) 100%) border-box;
    animation: border-run 1.6s linear infinite;
  }
  .btn-yellow:hover {
    border-color: transparent;
    background:
      linear-gradient(var(--yellow-deep), var(--yellow-deep)) padding-box,
      conic-gradient(from var(--a), rgba(16,16,16,0) 0 68%, var(--black) 86%, rgba(16,16,16,0) 100%) border-box;
    animation: border-run 1.6s linear infinite;
  }
  .site-header .btn-primary:hover, .section-black .btn-primary:hover,
  .seal .btn-primary:hover, .plate .btn-primary:hover,
  .sticky-bar .btn-primary:hover, .site-footer .btn-primary:hover {
    border-color: transparent;
    background:
      linear-gradient(var(--yellow-deep), var(--yellow-deep)) padding-box,
      conic-gradient(from var(--a), rgba(16,16,16,0) 0 68%, var(--black) 86%, rgba(16,16,16,0) 100%) border-box;
    animation: border-run 1.6s linear infinite;
  }
  .plate:hover .btn .arr, .btn:hover .arr { transform: translateX(5px); }
}
@keyframes border-run { to { --a: 360deg; } }
.btn:active { transform: scale(0.97); }
.btn:active::after { transform: translateX(-120%); transition: none; }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 3px solid rgba(128,128,128,0.4); border-top-color: currentColor;
  animation: btn-spin 800ms linear infinite;
}
.btn.is-success { pointer-events: none; }
.btn.is-success::before { content: "✓"; font-weight: 700; flex: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Persistent rescue edge tab (NCC Group device, promoted):
   a slow, dignified halo pulse, never a strobe. */
.edge-tab {
  position: fixed; right: 0; top: 42%; z-index: 40;
  background: var(--black); color: var(--yellow);
  font-family: var(--sign); font-weight: 700; letter-spacing: 0.22em;
  font-size: 17px; text-decoration: none;
  writing-mode: vertical-rl; padding: 20px 11px;
  border-radius: 6px 0 0 6px; border: 2px solid var(--black);
  box-shadow: -3px 3px 0 rgba(16,16,16,0.25);
  animation: tab-pulse 2.8s ease-in-out infinite;
}
@keyframes tab-pulse {
  0% { box-shadow: -3px 3px 0 rgba(16,16,16,0.25), 0 0 0 0 rgba(255,210,26,0.50); }
  70% { box-shadow: -3px 3px 0 rgba(16,16,16,0.25), 0 0 0 13px rgba(255,210,26,0); }
  100% { box-shadow: -3px 3px 0 rgba(16,16,16,0.25), 0 0 0 0 rgba(255,210,26,0); }
}
.edge-tab:hover { background: #2A2A2A; color: var(--yellow); }
.edge-tab:focus-visible { outline: 3px solid var(--black); outline-offset: -3px; }

/* Header: black band, yellow type, light Gemstone master. */
.site-header { background: var(--black); }
.header-in { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.brand img { width: 168px; display: block; }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 17px; text-decoration: none; color: var(--yellow);
  border-bottom: 3px solid transparent; padding: 4px 1px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover { border-bottom-color: var(--yellow); }
.header-cta { margin: 0 0 0 auto; }
.header-cta .btn { padding: 11px 20px; font-size: 16px; }

/* Hero: yellow field. The home hero splits around a black diagonal
   panel (gentle parallax); subpage heroes are the plain field. */
.hero { position: relative; overflow: hidden; background: var(--yellow); padding: 52px 0 60px; }
.hero-panel {
  position: absolute; inset: -30px 0; z-index: 0; background: var(--black);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  will-change: transform;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.hero h1 {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 5.8vw, 68px); line-height: 0.98;
  letter-spacing: 0.005em; margin: 6px 0 20px;
}
.hero-grid h1 { font-size: clamp(44px, 6.4vw, 76px); }
/* Highlighter swipe on the key word: the finished state is the base
   state (black band, yellow word); motion only draws it in. */
.hl {
  color: var(--yellow); padding: 0 0.07em;
  background: linear-gradient(var(--black), var(--black)) left center / 100% 92% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .hl { animation: hl-in 900ms cubic-bezier(0.22, 0.8, 0.3, 1) 350ms both; }
  @keyframes hl-in {
    from { background-size: 0% 92%; color: var(--ink); }
    to { background-size: 100% 92%; color: var(--yellow); }
  }
}
.split-ctas, .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.split-note {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 15px; margin: 16px 0 0;
}
.cta-note { margin-top: 14px; color: var(--ink-soft); font-size: 1rem; max-width: 62ch; }
.kicker {
  display: inline-block; font-family: var(--sign); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px;
  background: var(--black); color: var(--yellow);
  padding: 4px 10px; margin: 0 0 14px;
}
.kicker span { color: var(--white); }

/* Rescue clock: a living progress track and a live timer readout. */
.clock-card {
  background: var(--white); border: 4px solid var(--black); border-radius: 6px;
  box-shadow: 8px 8px 0 rgba(255,210,26,0.9); padding: 24px 26px 20px;
}
.clock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-bottom: 3px solid var(--black); padding-bottom: 12px; }
.clock-head h2 {
  font-family: var(--sign); text-transform: uppercase; font-size: 27px;
  margin: 0; letter-spacing: 0.02em; line-height: 1.1;
}
.clock-price { font-family: var(--font); font-weight: 700; font-size: 15px; margin: 0; background: var(--yellow); border: 2px solid var(--black); padding: 4px 10px; }
.clock-track {
  position: relative; height: 14px; margin: 18px 0 2px;
  background: var(--black); border-radius: 3px; overflow: hidden;
}
.clock-track-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 6%;
  background:
    repeating-linear-gradient(45deg, rgba(16,16,16,0.22) 0 10px, rgba(16,16,16,0) 10px 20px),
    var(--yellow);
  background-size: 28.28px 28.28px, auto;
  transition: width 900ms cubic-bezier(0.22, 0.8, 0.3, 1);
  animation: track-drift 5s linear infinite;
}
@keyframes track-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 28.28px 0, 0 0; }
}
.clock-track-fill::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 9px; height: 9px; background: var(--black);
  transform: translateY(-50%) rotate(45deg);
}
.clock-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.clock-step {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 18px; padding: 12px 6px;
  background: var(--white); border: 3px solid var(--black); border-radius: 4px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 150ms ease, color 150ms ease, transform 120ms ease;
}
.clock-step:hover { background: var(--yellow-soft); }
.clock-step:active { transform: scale(0.97); }
.clock-step.is-active { background: var(--black); color: var(--yellow); }
.clock-step .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  display: none;
}
.clock-step.is-active .dot { display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.clock-body h3 { font-family: var(--sign); text-transform: uppercase; font-size: 24px; margin: 0 0 8px; line-height: 1.1; }
.clock-body p { margin: 0 0 10px; color: var(--ink-soft); }
.clock-cost { font-family: var(--font); font-weight: 700; color: var(--ink) !important; }
.clock-live {
  display: flex; align-items: center; gap: 9px; margin: 14px 0 0;
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 14px;
}
.clock-live .live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red);
  animation: pulse 2.4s ease-in-out infinite;
}
.clock-elapsed {
  font-family: var(--mono);
  font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.clock-foot { font-size: 15.5px; color: var(--ink-soft); border-top: 2px dashed #B9B9B9; padding-top: 12px; margin: 10px 0 0; }

/* Sections: black, yellow and white fields alternate down the page.
   .section is the white field; .section-alt is the yellow field;
   .section-black is the black field. */
.section { padding: 58px 0; background: var(--white); }
.section-alt { background: var(--yellow); }
.section-black { background: var(--black); color: var(--off-white); }
.section h2, .sec-title {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.02; margin: 0 0 28px;
}
.sec-title-light { color: var(--yellow); }
.section-black h2 { color: var(--yellow); }

/* Protocol and guarantee cards: white signage cards, offset shadows. */
.protocol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.protocol-card, .guarantee-card {
  border: 3px solid var(--black); border-radius: 6px; padding: 24px 24px 26px;
  background: var(--white); color: var(--ink); display: flex; flex-direction: column;
  box-shadow: 6px 6px 0 rgba(16,16,16,0.9);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.section-black .protocol-card, .section-black .guarantee-card {
  box-shadow: 6px 6px 0 rgba(255,210,26,0.9);
}
.protocol-card:hover, .guarantee-card:hover {
  transform: translateY(-4px);
  box-shadow: 10px 10px 0 rgba(16,16,16,0.9);
}
.section-black .protocol-card:hover, .section-black .guarantee-card:hover {
  box-shadow: 10px 10px 0 rgba(255,210,26,0.9);
}
.protocol-tag, .guarantee-num {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 14px; margin: 0 0 10px;
  background: var(--yellow); border: 2px solid var(--black);
  padding: 3px 9px; align-self: flex-start;
}
.protocol-card h3, .guarantee-card h3 {
  font-family: var(--sign); text-transform: uppercase; font-size: 25px;
  line-height: 1.05; margin: 0 0 10px;
}
.first-step, .what { margin: 0 0 16px; color: var(--ink-soft); }
.time-cost { font-family: var(--font); font-weight: 700; font-size: 15.5px; margin: 0 0 20px; }
.row-action { margin: auto 0 0; }
.ledger-row .row-action, .triage-row .row-action { margin: 16px 0 0; }

/* Product plates: black plates, yellow sweep and advancing arrow. */
.plate-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plate {
  position: relative; overflow: hidden;
  background: var(--black); color: #F5F5F5; border-radius: 6px;
  padding: 26px 28px 28px; display: flex; flex-direction: column;
}
.plate::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 2;
  width: 100%; height: 5px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,210,26,0.09) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 650ms ease;
}
.plate:hover::before { transform: scaleX(1); }
.plate:hover::after { transform: translateX(120%); }
.plate > * { position: relative; z-index: 1; }
.plate h3 {
  font-family: var(--sign); text-transform: uppercase; color: var(--yellow);
  font-size: 27px; line-height: 1.05; margin: 0 0 10px;
}
.plate .what { color: #D8D8D8; }
.plate .status {
  font-family: var(--font); font-weight: 700; font-size: 16px;
  margin: 0 0 20px; color: #fff;
}

/* Ledger rows (subpages): the same card language, one per row. */
.ledger { display: grid; gap: 20px; margin-top: 8px; }
.ledger-row, .triage-row {
  border: 3px solid var(--black); border-radius: 6px; padding: 24px 24px 26px;
  background: var(--white); color: var(--ink);
  box-shadow: 6px 6px 0 rgba(16,16,16,0.9);
}
.ledger-row h3, .triage-row h3 {
  font-family: var(--sign); text-transform: uppercase; font-size: 25px;
  line-height: 1.05; margin: 0 0 10px;
}
.ledger-row .what, .triage-row .first-step { margin: 0 0 6px; color: var(--ink-soft); max-width: 75ch; }
.ledger-row .status {
  display: inline-block; font-family: var(--sign); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px;
  background: var(--yellow); border: 2px solid var(--black);
  padding: 3px 9px; margin: 10px 0 0;
}
.triage-row .time-cost { margin: 10px 0 0; }

/* Timeline (first hour, the gate): numbered signage rows. */
.timeline { display: grid; gap: 14px; margin-top: 8px; }
.timeline-step {
  display: grid; grid-template-columns: 56px 1fr; gap: 4px 20px;
  background: var(--white); border: 3px solid var(--black); border-radius: 6px;
  padding: 20px 22px; align-items: start;
}
.timeline-step .n {
  font-family: var(--sign); font-weight: 700; font-size: 22px; line-height: 1;
  background: var(--yellow); border: 2px solid var(--black);
  padding: 8px 0; text-align: center; margin: 0;
}
.timeline-step h3 {
  font-family: var(--sign); text-transform: uppercase; font-size: 22px;
  line-height: 1.1; margin: 0 0 6px;
}
.timeline-step p { margin: 0; color: var(--ink-soft); max-width: 68ch; }

/* Sample artefacts: dashed signage plates. */
.sample {
  border: 3px dashed var(--black); border-radius: 6px;
  background: var(--white); padding: 20px 22px; margin: 22px 0;
}
.sample .sample-tag {
  display: inline-block; font-family: var(--sign); font-weight: 700;
  font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--yellow); border: 2px solid var(--black);
  padding: 3px 9px; margin: 0 0 12px;
}
.sample p { margin: 6px 0; color: var(--ink); }
.sample .mono { font-family: var(--mono); font-size: 15px; }

/* Note line: a yellow block with a black frame. */
.note-line {
  background: var(--yellow); border: 3px solid var(--black); border-radius: 6px;
  padding: 16px 20px; margin-top: 28px; max-width: 78ch; color: var(--ink);
}
.seal .note-line { background: transparent; border: none; padding: 0; color: #BDBDBD; }

/* Leads page pieces. */
.specimen {
  border: 4px solid var(--black); border-radius: 6px;
  background: var(--white); padding: 24px 26px; margin: 34px 0 0; max-width: 680px;
  box-shadow: 8px 8px 0 rgba(16,16,16,0.9);
}
.specimen figcaption {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  font-size: 22px; margin-bottom: 12px;
}
.specimen-rows { margin: 0; }
.s-row {
  display: grid; grid-template-columns: 170px 1fr; gap: 4px 24px;
  padding: 10px 0; border-top: 2px solid rgba(16,16,16,0.16);
}
.s-row dt { font-family: var(--font); font-weight: 700; }
.s-row dd { margin: 0; }
.covered {
  display: inline-block; width: 150px; height: 1em; vertical-align: -0.12em;
  background: var(--black); border-radius: 3px; margin-right: 10px;
}
.s-note { color: var(--ink-soft); }
.steps, .field-list, .rule-list { list-style: none; margin: 0; padding: 0; }
.price-block {
  border: 4px solid var(--black); border-radius: 6px;
  background: var(--white); padding: 30px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px;
  box-shadow: 8px 8px 0 rgba(16,16,16,0.9);
}
.price-amount {
  font-family: var(--sign); font-size: 4rem; font-weight: 700; line-height: 1;
}
.price-region { color: var(--ink-soft); margin: 6px 0 16px; }
.price-pick { font-family: var(--font); font-weight: 700; margin: 0 0 12px; }
.price-actions .btn { width: 100%; }
.price-alt { margin-top: 16px; }
.faq-list { display: grid; gap: 14px; }
.faq-list details {
  background: var(--white); border: 3px solid var(--black); border-radius: 6px;
  padding: 6px 22px;
}
.faq-list summary {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  font-size: 19px; cursor: pointer; min-height: 48px;
  display: flex; align-items: center; padding: 8px 0;
}
.faq-list details p { margin: 4px 0 16px; max-width: 65ch; color: var(--ink-soft); }

/* Seal plate: black plate, yellow frame, on the black field. */
.seal {
  border: 3px solid var(--yellow); border-radius: 6px;
  padding: 22px 24px; margin-top: 26px; background: #181818; color: #EDEDED;
}
.seal-head { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; margin-bottom: 6px; }
.seal-head h3 {
  font-family: var(--sign); text-transform: uppercase; margin: 0;
  color: var(--yellow); font-size: 22px;
}
.seal-head .seal-meta { font-family: var(--font); font-size: 14px; color: #BDBDBD; margin: 0; }
.seal-scroll { overflow-x: auto; }
.seal table { border-collapse: collapse; width: 100%; font-size: 15px; }
.seal th, .seal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #3A3A3A; vertical-align: top; }
.seal th {
  font-family: var(--sign); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--yellow); font-weight: 700;
}
.seal td.hash { font-family: var(--mono); font-size: 12.5px; word-break: break-all; color: #EDEDED; }
.seal td.state { font-family: var(--font); font-weight: 700; color: #BDBDBD; white-space: nowrap; }
.seal td.state.ok { color: var(--yellow); }
.seal td.state.bad {
  color: var(--white); background: var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger);
}
.seal-foot { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.stamp {
  display: none; font-family: var(--sign); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--yellow);
  border: 3px solid var(--yellow); border-radius: 4px; padding: 4px 12px;
  transform: rotate(-3deg);
}
.stamp.show { display: inline-block; }
.stamp.fail { color: var(--white); background: var(--danger); border-color: var(--danger); }

/* Method long-read: Atkinson, the older-reader face. */
.longread {
  font-family: "Atkinson Hyperlegible", "Carlito", sans-serif;
  font-size: 18px; line-height: 1.55; max-width: 65ch; color: var(--ink);
}
.longread p { margin: 0 0 18px; }
.longread h2 {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.8vw, 36px); line-height: 1.05; margin: 34px 0 14px;
}
.longread h2:first-child { margin-top: 0; }

/* Rescue sticky action bar (phone). */
.sticky-bar { display: none; }

/* Footer: black, under a drifting hazard strip. */
.site-footer { background: var(--black); color: #EDEDED; padding: 44px 0 50px; }
.footer-in { display: flex; flex-direction: column; gap: 16px; }
.site-footer .brand img { width: 150px; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-nav a {
  font-family: var(--sign); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 15px; color: var(--yellow); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer-nav a:hover { text-decoration: underline; }
.site-footer a { color: var(--yellow); }
.footer-line { margin: 0; font-size: 16px; color: #BDBDBD; max-width: 820px; }

/* Scroll-triggered reveals. Progressive enhancement: .reveal is fully
   visible by default; only a JS-capable page (html.js) starts it
   lowered, and the observer raises it once, ease-out. */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { clip-path: polygon(0 58%, 100% 48%, 100% 100%, 0 100%); }
  .protocol-grid { grid-template-columns: 1fr; }
  .plate-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .price-block { grid-template-columns: 1fr; }
  .s-row { grid-template-columns: 1fr; }
  .timeline-step { grid-template-columns: 48px 1fr; padding: 16px; }
  .hero { padding: 40px 0 44px; }
  .sticky-bar {
    display: flex; position: sticky; bottom: 0; z-index: 5;
    background: var(--black);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    justify-content: center;
  }
  .sticky-bar .btn { flex: 1; max-width: 430px; }
}
@media (max-width: 640px) {
  .btn { width: 100%; }
  .header-cta { margin-left: 0; }
  .header-cta .btn, .seal-foot .btn, .sticky-bar .btn { width: auto; }
  .edge-tab { top: auto; bottom: 88px; font-size: 15px; padding: 16px 9px; }
  .clock-card { box-shadow: 5px 5px 0 rgba(255,210,26,0.9); }
  .clock-steps { gap: 6px; }
  .clock-step { font-size: 16px; }
}

/* Reduced motion: a complete static fallback that still looks finished. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .btn:hover::after { transform: translateX(-120%); }
  .plate::before { transform: scaleX(1); }
  .plate::after { display: none; }
  .protocol-card:hover, .guarantee-card:hover { transform: none; }
}
@media print {
  .scroll-progress, .edge-tab, .sticky-bar { display: none; }
  .hazard, .clock-track-fill, .edge-tab { animation: none; }
  html.js .reveal { opacity: 1; transform: none; }
  .hero-panel { display: none; }
  .hero, .section-alt { background: #FFFFFF; }
  .section-black, .site-footer, .site-header { background: #FFFFFF; color: #000; }
  .clock-card, .ledger-row, .price-block, .specimen { box-shadow: none; }
}
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .covered { background: CanvasText; }
  .plate, .seal, .ledger-row, .timeline-step, .sample, .faq-list details {
    border: 1px solid CanvasText;
  }
}