/* Return Path
   Type: Instrument Serif (display) / IBM Plex Sans (UI) / IBM Plex Mono (values).
   A forensic report should read like a document, not a SaaS page. */

:root {
  --bg:        #070809;
  --bg-2:      #0b0d11;
  --panel:     #101319;
  --panel-2:   #141821;
  --raise:     #0c0f14;
  --line:      #1e232d;
  --line-soft: #171b23;

  --ink:       #eaeef5;
  --ink-2:     #a7b0bf;
  --ink-3:     #7b8595;
  --ink-4:     #828c9c;

  --accent:    #5fd8cb;
  --accent-2:  #8be8dd;
  --accent-dim:#1d4e49;

  --critical:  #ff6b6b;
  --high:      #ff9f45;
  --medium:    #f0c948;
  --low:       #7aa2ff;
  --info:      #8d97a8;
  --good:      #45d489;

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Display is the same family, just tighter and heavier. One voice. */
  --serif: var(--sans);

  --maxw: 1160px;
  --ease: cubic-bezier(.22, .68, .28, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* clip, not hidden: hidden on body alone still lets <html> report the wide
     content and produce a scrollbar, while hidden on both would make them
     scroll containers and break position:sticky. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

code {
  font-family: var(--mono); font-size: .86em; line-height: 1.5;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; padding: .1em .38em; word-break: break-word;
}
kbd {
  font-family: var(--mono); font-size: .72em; line-height: 1.6;
  background: var(--panel-2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--ink-2);
}

.topbar, .hero, .stage, .results, .section, .cta, .foot-main {
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
}

/* ══════════════════════════════════════════════ texture */

/* Haze drifting across the top of the page. Each layer is three seamless
   tiles wide and translates by exactly one tile, so the motion is continuous,
   one-directional and never reaches an edge. */
/* The sky is a 360-degree equirectangular render of a real volumetric cloud
   deck (tools/render_clouds.py), cropped to its cloud band. It tiles because
   it is a full panorama: drifting it sideways is turning your head, and after
   one full turn you are looking at the same sky again. No fade, no mirror.

   --tile is the panorama's display width. Each layer is three tiles wide and
   travels exactly one tile, so the loop is exact; the height follows the
   render's own 3600x553 aspect so the clouds are never stretched. */
/* The sky is a 360-degree equirectangular render of a real volumetric cloud
   deck (tools/render_clouds.py), cropped to its cloud band. It tiles because
   it is a full panorama: drifting it sideways is turning your head, and after
   one full turn you are looking at the same sky again. No fade, no mirror.

   --tile is the panorama's display width. Each layer is three tiles wide and
   travels exactly one tile, so the loop is exact; the height follows the
   render's own 3600x553 aspect so the clouds are never stretched.

   The band is pulled well above the fold on purpose. Only its thin lower
   wisps reach the page: background should frame the content from the edges,
   not sit behind the headline competing with it. */
.sky {
  --tile: 2730px;
  position: absolute; top: -142px; left: 0; right: 0;
  height: 600px;                       /* 2730 * 553/3600 */
  z-index: 0; pointer-events: none; overflow: hidden;
  /* A single gradient. Two masks with mask-composite cut a hard horizontal
     band across the middle in Chromium. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.30) 66%, rgba(0,0,0,.10) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.30) 66%, rgba(0,0,0,.10) 82%, transparent 100%);
}

/* Clears the centre so the headline sits on clean black and the cloud is left
   framing the corners. Painted in the page colour rather than masked, because
   compositing two masks is what caused the band above. */
.cloud {
  position: absolute; top: 0; left: 0;
  width: calc(var(--tile) * 3); height: 100%;
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  animation-name: driftX;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* One tile of travel, forever. */
@keyframes driftX {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--tile) * -1), 0, 0); }
}

/* Dim on purpose: night cloud at the edge of vision, not a photograph. */
.cloud-near {
  background-image: url("../img/cloud-near.webp");
  opacity: .44;
  animation-duration: 150s;
}
.cloud-mid {
  background-image: url("../img/cloud-mid.webp");
  opacity: .27;
  animation-duration: 260s;
}
.cloud-far {
  background-image: url("../img/cloud-far.webp");
  opacity: .17;
  animation-duration: 420s;
}

/* A cool wash at the very top edge, the way Bolt and Cosmos light a dark
   hero: colour at the boundary, nothing in the middle. */
/* Fine film grain. Keeps large flat areas of near-black from looking like a
   default background, which is most of what reads as "generated". */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: .5;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
}

main, .topbar, .foot { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════ motion */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.rise {
  opacity: 0;
  animation: riseIn .85s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
/* The headline is the largest paint; do not sit on it. */
.hero h1.rise { animation-duration: .45s; animation-delay: 0ms; }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-par], .reveal-l[data-par], .reveal-r[data-par] { transform: none; }

/* Directional variants, so a two-column section resolves inward rather than
   both halves rising in parallel. */
.reveal-l, .reveal-r {
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal-l { transform: translateX(-34px); }
.reveal-r { transform: translateX(34px); }
.reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rise, .reveal, .reveal-l, .reveal-r { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════ topbar */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 24px 28px;
  position: relative; z-index: 3;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 23px; height: 23px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.brand-name { font-weight: 500; letter-spacing: -0.01em; font-size: .98rem; line-height: 1.5; }

.topbar-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar-link { color: var(--ink-3); text-decoration: none; font-size: .86rem; line-height: 1.5; transition: color .2s var(--ease); }
.topbar-link:hover { color: var(--ink); }

.offline-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .72rem; line-height: 1.7; color: var(--accent);
  background: rgba(95,216,203,.05);
  border: 1px solid var(--accent-dim); border-radius: 100px; padding: 4px 12px;
}
.offline-badge .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none;
}

/* box-shadow repaints every frame; a transformed pseudo-element is free. */
.offline-badge .dot, .banner-dot { position: relative; }
.offline-badge .dot::after, .banner-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid rgba(95,216,203,.45);
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .55; transform: scale(.72); }
  50%      { opacity: 0;   transform: scale(1.25); }
}

/* ============================================== hero + composer */

.hero {
  position: relative;
  padding: 92px 28px 96px;
  text-align: center;
}

.hero h1 {
  font-family: var(--sans);
  font-size: clamp(1.95rem, 4.1vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.1;
  margin: 0 auto 42px;
  max-width: 23ch;
  color: #f2f5fa;
  padding-bottom: .06em;
}
.hero h1 em { font-style: normal; color: var(--accent-2); }

.composer { max-width: 740px; margin: 0 auto; }

/* Tabs sit on the card's top edge, left aligned - the active one is part of
   the card rather than a pill floating above it. */
.tabs { display: flex; gap: 2px; padding-left: 14px; }

.tab {
  font: inherit; font-size: .84rem; line-height: 1.5;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px 10px;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: transparent; color: var(--ink-3);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.tab svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round;
}
.tab:hover { color: var(--ink-2); }
.tab.is-on {
  color: var(--ink);
  background: #161b23;
  border-color: var(--line);
  margin-bottom: -1px; padding-bottom: 11px;
}

.box {
  position: relative;
  background: #161b23;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.012),
    0 30px 80px -28px rgba(0,0,0,.92),
    0 0 100px -46px rgba(95,216,203,.3);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  text-align: left;
}
.box:focus-within {
  border-color: #3a4a52;
  box-shadow:
    0 0 0 2px rgba(95,216,203,.55),
    0 30px 80px -28px rgba(0,0,0,.92),
    0 0 110px -44px rgba(95,216,203,.42);
}

#input {
  display: block; width: 100%;
  min-height: 132px; max-height: 340px; resize: vertical;
  background: transparent; color: var(--ink);
  border: 0; outline: none;
  padding: 18px 20px 6px;
  font-family: var(--mono); font-size: .8rem; line-height: 1.8; tab-size: 2;
}
#input::placeholder { color: #828c9c; font-family: var(--sans); font-size: .95rem; }

.box-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 12px;
}

.icon-btn {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--ink-3); cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.icon-btn:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line); }

.box-status {
  margin-left: auto;
  font-family: var(--mono); font-size: .64rem; line-height: 1.9;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--line); border-radius: 100px; padding: 2px 10px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.box-status[data-s="forged"]        { color: var(--critical); border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.07); }
.box-status[data-s="suspicious"]    { color: var(--high);     border-color: rgba(255,159,69,.35);  background: rgba(255,159,69,.07); }
.box-status[data-s="unverified"]    { color: var(--medium);   border-color: rgba(240,201,72,.32);  background: rgba(240,201,72,.06); }
.box-status[data-s="authenticated"] { color: var(--good);     border-color: rgba(69,212,137,.32);  background: rgba(69,212,137,.06); }

.send {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 9px; cursor: pointer;
  background: var(--accent); color: #052622;
  transition: background .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.send:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 20px -8px rgba(95,216,203,.8); }
.send:active { transform: translateY(0); }

.drop-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(7,8,9,.94); border: 2px dashed var(--accent);
  border-radius: 14px; color: var(--accent); font-size: .95rem;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.box.over .drop-overlay { opacity: 1; }

.error {
  margin-top: 12px; text-align: left;
  background: rgba(255,107,107,.06);
  border: 1px solid rgba(255,107,107,.28);
  border-left: 3px solid var(--critical);
  border-radius: 9px; padding: 13px 17px;
  color: #ffc6c6; font-size: .89rem; line-height: 1.7;
  animation: riseIn .4s var(--ease);
}

.banner {
  display: flex; align-items: center; gap: 11px;
  margin: 14px auto 0; max-width: 690px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 11px 16px;
  text-decoration: none; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.banner:hover { border-color: var(--line); background: var(--panel); }
.banner-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent);
}
.banner-text { color: var(--ink-3); font-size: .83rem; line-height: 1.6; flex: 1; }
.banner-link { color: var(--accent); font-size: .83rem; line-height: 1.6; white-space: nowrap; }

.sample-row {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap; margin-top: 22px;
}
.sample-label {
  font-family: var(--mono); font-size: .66rem; line-height: 1.9;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4);
  margin-right: 3px;
}
.chip {
  font: inherit; font-size: .79rem; line-height: 1.55;
  color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 13px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease), transform .12s var(--ease);
}
.chip:hover { color: var(--ink); border-color: #2c3340; background: var(--panel-2); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
.chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-dim); background: rgba(95,216,203,.08); }

.btn {
  font: inherit; font-size: .88rem; line-height: 1.5;
  border-radius: 8px; padding: 10px 19px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary { background: var(--accent); color: #052622; font-weight: 600; }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 22px -8px rgba(95,216,203,.7); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: #38414f; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════ disclosure (animated) */

.disclosure-head {
  font: inherit; font-size: .86rem; line-height: 1.7;
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  color: var(--ink-3); transition: color .2s var(--ease);
}
.disclosure-head:hover { color: var(--ink); }
.disclosure-mark {
  position: relative; width: 9px; height: 9px; flex: none;
}
.disclosure-mark::before, .disclosure-mark::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform .34s var(--ease), opacity .24s var(--ease);
}
.disclosure-mark::before { left: 0; top: 4px; width: 9px; height: 1px; }
.disclosure-mark::after  { left: 4px; top: 0; width: 1px; height: 9px; }
.disclosure-head[aria-expanded="true"] .disclosure-mark::after { transform: rotate(90deg); opacity: 0; }

.disclosure-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.disclosure[data-open="1"] .disclosure-wrap { grid-template-rows: 1fr; }
.disclosure-body {
  overflow: hidden; min-height: 0;
  /* 0fr hides it visually; without this it stays in the tab order and is
     still announced by screen readers. */
  visibility: hidden;
  transition: visibility 0s linear .4s;
}
.disclosure[data-open="1"] .disclosure-body {
  visibility: visible;
  transition-delay: 0s;
}
.disclosure-body > * { margin-top: 0; }

.help { margin: 20px 0 0; max-width: 62ch; }
.help .disclosure-head { margin: 0; }
.help-dl {
  margin: 12px 0 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 20px 22px;
  display: grid; grid-template-columns: minmax(126px, auto) 1fr; gap: 9px 20px;
}
.help-dl dt { color: var(--ink); font-weight: 500; font-size: .86rem; line-height: 1.6; }
.help-dl dd { margin: 0; color: var(--ink-2); font-size: .86rem; line-height: 1.6; }
.help-note { margin: 12px 0 2px; color: var(--ink-4); font-size: .82rem; }

/* ══════════════════════════════════════════════ results */

.results { padding: 8px 28px 56px; }

.report-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.report-title {
  font-size: .72rem; line-height: 1.9; margin: 0;
  font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4);
}
.report-meta { font-family: var(--mono); font-size: .72rem; line-height: 1.9; color: var(--ink-4); }

.verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 28px 34px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 28px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  animation: riseIn .6s var(--ease);
}
.verdict::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--info);
}
.verdict[data-level="forged"]::before        { background: var(--critical); }
.verdict[data-level="suspicious"]::before    { background: var(--high); }
.verdict[data-level="unverified"]::before    { background: var(--medium); }
.verdict[data-level="authenticated"]::before { background: var(--good); }

.verdict[data-level="forged"]        { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%); }
.verdict[data-level="suspicious"]    { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%); }
.verdict[data-level="unverified"]    { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%); }
.verdict[data-level="authenticated"] { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%); }

.verdict-left { min-width: 0; }
.verdict-right { min-width: 0; border-left: 1px solid var(--line); padding-left: 32px; }

.verdict-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.verdict-label {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -0.005em; line-height: 1.12; color: var(--info);
  padding-bottom: .04em;
}
.verdict[data-level="forged"] .verdict-label        { color: var(--critical); }
.verdict[data-level="suspicious"] .verdict-label    { color: var(--high); }
.verdict[data-level="unverified"] .verdict-label    { color: var(--medium); }
.verdict[data-level="authenticated"] .verdict-label { color: var(--good); }

.verdict-tally { display: flex; gap: 6px; flex-wrap: wrap; }
.tally {
  font-family: var(--mono); font-size: .7rem; line-height: 1.8;
  border: 1px solid var(--line); border-radius: 100px; padding: 2px 10px; color: var(--ink-3);
}
.tally b { font-weight: 500; }
.tally[data-s="critical"] { color: var(--critical); border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.06); }
.tally[data-s="high"]     { color: var(--high);     border-color: rgba(255,159,69,.3);  background: rgba(255,159,69,.06); }
.tally[data-s="medium"]   { color: var(--medium);   border-color: rgba(240,201,72,.28); background: rgba(240,201,72,.05); }
.tally[data-s="good"]     { color: var(--good);     border-color: rgba(69,212,137,.28); background: rgba(69,212,137,.05); }

.verdict-summary { color: var(--ink); font-size: .98rem; line-height: 1.66; max-width: 46ch; margin: 0 0 18px; }

.verdict-action {
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.018);
  padding: 14px 16px; margin-bottom: 18px;
}
.action-label {
  display: block;
  font-family: var(--mono); font-size: .64rem; line-height: 2;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 5px;
}
.verdict-action p { margin: 0; color: var(--ink-2); font-size: .87rem; line-height: 1.7; }

.verdict-subject {
  font-family: var(--mono); font-size: .77rem; line-height: 1.85;
  border-top: 1px solid var(--line); padding-top: 14px;
  display: grid; grid-template-columns: minmax(62px, auto) 1fr; gap: 3px 16px;
}
.verdict-subject b { color: var(--ink-4); font-weight: 400; }
.verdict-subject span { color: var(--ink-2); word-break: break-word; }

.env-caption { color: var(--ink-4); font-size: .82rem; line-height: 1.65; margin: 0 0 14px; }

.envelope { display: grid; gap: 7px; }
.env-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 14px;
  transition: border-color .2s var(--ease);
}
.env-row:hover { border-color: #272e3a; }
.env-label { grid-column: 1; color: var(--ink-4); font-size: .71rem; line-height: 1.7; }
.env-label b { font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--ink-2); margin-right: 7px; }
.env-value { grid-column: 1; font-family: var(--mono); font-size: .78rem; line-height: 1.7; color: var(--ink); word-break: break-word; min-width: 0; }
.env-value .dom { color: var(--accent); }
.env-value .dom.bad { color: var(--critical); }
.env-value .muted { color: var(--ink-4); }
.env-none { color: var(--ink-4); font-style: italic; font-family: var(--sans); font-size: .82rem; }

.env-verdict {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--mono); font-size: .66rem; line-height: 1.9;
  border-radius: 100px; padding: 2px 10px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink-3);
}
.env-verdict[data-v="aligned"]    { color: var(--good);     border-color: rgba(69,212,137,.3);  background: rgba(69,212,137,.06); }
.env-verdict[data-v="misaligned"] { color: var(--high);     border-color: rgba(255,159,69,.3);  background: rgba(255,159,69,.06); }
.env-verdict[data-v="forged"]     { color: var(--critical); border-color: rgba(255,107,107,.32);background: rgba(255,107,107,.06); }

.authstrip { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.auth {
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 13px; background: var(--panel-2);
  font-family: var(--mono); font-size: .74rem; line-height: 1.7;
}
.auth-k { color: var(--ink-4); }
.auth-v { font-weight: 500; }
.auth[data-r="pass"] .auth-v     { color: var(--good); }
.auth[data-r="fail"] .auth-v     { color: var(--critical); }
.auth[data-r="softfail"] .auth-v { color: var(--high); }
.auth[data-r="none"] .auth-v,
.auth[data-r="neutral"] .auth-v  { color: var(--ink-3); }
.auth-d { color: var(--ink-4); font-size: .68rem; }

/* ══════════════════════════════════════════════ panels */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px; margin-bottom: 18px; min-width: 0;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 18px; flex-wrap: wrap; margin-bottom: 6px;
}
.panel-title { font-size: 1.02rem; font-weight: 500; margin: 0; letter-spacing: -0.012em; }
.count { font-family: var(--mono); font-size: .72rem; line-height: 1.9; color: var(--ink-4); }
.panel-sub { color: var(--ink-3); font-size: .86rem; line-height: 1.65; max-width: 74ch; margin: 0 0 18px; }
.panel-sub b { color: var(--ink-2); font-weight: 500; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: start; }

/* ══════════════════════════════════════════════ findings */

.findings { display: grid; gap: 7px; }

.finding {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); overflow: hidden;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.finding:hover { border-color: #2a313d; }
.finding-head:focus-visible { outline-offset: -3px; }
.finding-head {
  font: inherit; text-align: left; width: 100%;
  background: none; border: 0; cursor: pointer;
  padding: 13px 16px; color: inherit;
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px 14px;
}

.sev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); display: block; }
.finding[data-s="critical"] .sev-dot { background: var(--critical); box-shadow: 0 0 0 3px rgba(255,107,107,.14); }
.finding[data-s="high"]     .sev-dot { background: var(--high);     box-shadow: 0 0 0 3px rgba(255,159,69,.13); }
.finding[data-s="medium"]   .sev-dot { background: var(--medium); }
.finding[data-s="low"]      .sev-dot { background: var(--low); }
.finding[data-s="good"]     .sev-dot { background: var(--good); }

.finding-title { font-size: .92rem; font-weight: 400; line-height: 1.6; color: var(--ink); min-width: 0; }
.finding-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pill {
  font-family: var(--mono); font-size: .63rem; line-height: 1.95;
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: 100px; padding: 2px 9px;
  border: 1px solid var(--line); color: var(--info);
}
.finding[data-s="critical"] .pill { color: var(--critical); border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.07); }
.finding[data-s="high"]     .pill { color: var(--high);     border-color: rgba(255,159,69,.3);  background: rgba(255,159,69,.07); }
.finding[data-s="medium"]   .pill { color: var(--medium);   border-color: rgba(240,201,72,.28); }
.finding[data-s="low"]      .pill { color: var(--low);      border-color: rgba(122,162,255,.28); }
.finding[data-s="good"]     .pill { color: var(--good);     border-color: rgba(69,212,137,.28); background: rgba(69,212,137,.06); }

.finding-tag { font-family: var(--mono); font-size: .66rem; line-height: 1.95; color: var(--ink-4); }

.finding-body { padding: 2px 16px 16px 34px; }
.finding-why { color: var(--ink-2); font-size: .89rem; line-height: 1.75; margin: 0 0 13px; max-width: 78ch; }
.evidence { display: grid; gap: 6px; }
.ev {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 3px 16px;
  font-family: var(--mono); font-size: .75rem; line-height: 1.8;
  background: var(--raise); border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 9px 13px;
}
.ev-k { color: var(--ink-4); }
.ev-v { color: var(--ink); word-break: break-word; white-space: pre-wrap; }

.passed { margin-top: 10px; }
.passed .disclosure-head { color: var(--good); font-family: var(--mono); font-size: .74rem; }
.passed .disclosure-mark::before, .passed .disclosure-mark::after { background: var(--good); }
.passed .findings { padding-top: 8px; }

/* ══════════════════════════════════════════════ message */

.message {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px 22px;
  font-size: .91rem; line-height: 1.8; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 440px; overflow: auto;
}

.lnk {
  font: inherit; font-size: .93em; line-height: 1.7; text-align: left;
  background: rgba(122,162,255,.09);
  border: 1px solid rgba(122,162,255,.3); border-bottom-width: 2px;
  color: #a9c2ff; border-radius: 5px; padding: 1px 7px;
  cursor: pointer; white-space: normal;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lnk[data-risk="bad"]  { background: rgba(255,107,107,.1);  border-color: rgba(255,107,107,.4);  color: #ffb0b0; }
.lnk[data-risk="warn"] { background: rgba(255,159,69,.09);  border-color: rgba(255,159,69,.36); color: #ffce9e; }
.lnk:hover { filter: brightness(1.3); }
.lnk::after { content: " ↗"; opacity: .5; font-size: .85em; }

.lnk-note {
  display: block; margin: 7px 0 13px;
  font-family: var(--mono); font-size: .73rem; line-height: 1.8;
  color: var(--ink-3); border-left: 2px solid var(--line);
  padding: 3px 0 3px 13px; white-space: pre-wrap; word-break: break-word;
  animation: riseIn .34s var(--ease);
}
.lnk-note b { color: var(--ink-2); font-weight: 500; }
.lnk-note .bad { color: #ffb0b0; }

/* ══════════════════════════════════════════════ links table */

.linktable { display: grid; gap: 7px; }
.link-row {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 15px; display: grid; gap: 5px;
}
.link-line { display: grid; grid-template-columns: minmax(86px, auto) 1fr; gap: 3px 16px; font-family: var(--mono); font-size: .76rem; line-height: 1.8; }
.link-line .k { color: var(--ink-4); }
.link-line .v { color: var(--ink); word-break: break-all; }
.link-line .v.danger { color: #ffb0b0; }
.link-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.flag {
  font-family: var(--mono); font-size: .65rem; line-height: 1.95;
  border-radius: 100px; padding: 2px 9px;
  background: rgba(255,107,107,.09); border: 1px solid rgba(255,107,107,.28); color: #ffb0b0;
}
.flag[data-ok="1"] { background: rgba(69,212,137,.07); border-color: rgba(69,212,137,.24); color: var(--good); }

/* ══════════════════════════════════════════════ hops */

.hops { display: grid; }
.hop { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-bottom: 15px; position: relative; }
.hop:last-child { padding-bottom: 0; }
.hop:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 25px; bottom: 2px; width: 1px; background: var(--line);
}
.hop-num {
  width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem; line-height: 1; color: var(--ink-3); flex: none;
}
.hop-body { min-width: 0; padding-top: 2px; }
.hop-main { font-family: var(--mono); font-size: .78rem; line-height: 1.7; color: var(--ink); word-break: break-word; }
.hop-main .arrow { color: var(--ink-4); }
.hop-meta { font-family: var(--mono); font-size: .7rem; line-height: 1.7; color: var(--ink-4); margin-top: 2px; word-break: break-word; }
.hop-meta .delta { color: var(--ink-2); }

/* ══════════════════════════════════════════════ raw */

.rawwrap { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--raise); }
.raw {
  margin: 0; padding: 16px 18px;
  font-family: var(--mono); font-size: .72rem; line-height: 1.95;
  color: var(--ink-4); white-space: pre-wrap; word-break: break-word;
}
.raw .hl { color: var(--ink); background: rgba(95,216,203,.08); border-radius: 3px; box-shadow: 0 0 0 1px rgba(95,216,203,.16); display: inline-block; padding: 0 3px; }
.raw .hl-bad { color: #ffc6c6; background: rgba(255,107,107,.09); box-shadow: 0 0 0 1px rgba(255,107,107,.2); }

/* ══════════════════════════════════════════════ landing sections */

.section { padding: 84px 28px; scroll-margin-top: 20px; }

.section-head { margin-bottom: 44px; max-width: 46rem; }
.kicker {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px; line-height: 1.8;
}
.section h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1; letter-spacing: -0.028em;
  color: #f4f7fb; margin: 0 0 18px; padding-bottom: .04em;
}
.section-lede { color: var(--ink-2); font-size: 1rem; line-height: 1.7; max-width: 52ch; margin: 0; }

/* cards */

.cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.card {
  background: var(--bg-2); padding: 26px 24px 28px;
  transition: background .3s var(--ease);
}
.card:hover { background: var(--panel); }
.card-n {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; color: var(--ink-4); margin-bottom: 30px; line-height: 1.8;
}
.card h3 {
  font-size: 1.02rem; font-weight: 500; line-height: 1.35;
  color: var(--ink); margin: 0 0 10px; letter-spacing: -0.012em;
}
.card p { color: var(--ink-3); font-size: .85rem; line-height: 1.68; margin: 0; }
.card code { font-size: .84em; background: rgba(255,255,255,.04); }
.card b { color: var(--ink-2); font-weight: 500; }

/* steps */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.step {
  background: var(--bg-2); padding: 26px 28px;
  display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start;
  transition: background .3s var(--ease);
}
.step:hover { background: var(--panel); }
.step-n {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--accent-dim); background: rgba(95,216,203,.06);
  color: var(--accent); display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; line-height: 1;
}
.step h3 { font-size: 1.02rem; font-weight: 500; margin: 4px 0 8px; letter-spacing: -0.012em; }
.step p { color: var(--ink-3); font-size: .89rem; line-height: 1.7; margin: 0; max-width: 62ch; }
.step b { color: var(--ink-2); font-weight: 500; }

/* how it works - Greptile's layout: tag, heading, ruled pill, framed steps */

.how { max-width: var(--maxw); margin: 0 auto; padding: 84px 28px; }
.how-head { max-width: 52rem; }
.how-tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px; line-height: 1.8;
}
.how h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1;
  letter-spacing: -0.028em; color: #f2f5fa; margin: 0 0 16px; padding-bottom: .04em;
}
.how-sub { color: var(--ink-2); font-size: 1rem; line-height: 1.7; max-width: 58ch; margin: 0; }

/* a hairline across the section with the label sitting in a gap */
.how-rule {
  position: relative; height: 1px; background: var(--line);
  margin: 46px 0 34px; display: flex; justify-content: center;
}
.how-rule span {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--bg); padding: 0 14px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4); line-height: 1.8;
}

.how-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
}
.how-step { min-width: 0; will-change: transform; }
.how-shot {
  height: 190px; overflow: hidden; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2);
  position: relative;
}
/* corner ticks, the way Greptile frames each visual */
.how-shot::before, .how-shot::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 1px solid var(--accent-dim);
}
.how-shot::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.how-shot::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.how-shot img {
  display: block; width: 100%; height: auto;
  transform: scale(1.01); transform-origin: 50% 0;
  transition: transform .6s var(--ease);
}
.how-step:hover .how-shot img { transform: scale(1.05); }

.how-n {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin: 0 0 7px; line-height: 1.8;
}
.how-step h3 {
  font-size: 1.04rem; font-weight: 500; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 9px; line-height: 1.35;
}
.how-step p { color: var(--ink-3); font-size: .88rem; line-height: 1.68; margin: 0; }
.how-step b { color: var(--ink-2); font-weight: 500; }

/* vector art ------------------------------------------------------------
   All the illustrations are inline SVG rather than screenshots: sharp at any
   size and on any display, a few hundred bytes each, and they recolour with
   the theme because everything below is driven by CSS rather than baked in. */

.art { display: block; width: 100%; height: 100%; }

.a-panel { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; }
.a-panel-bad { fill: rgba(255,107,107,.05); stroke: rgba(255,107,107,.42); }
.a-phone { fill: var(--raise); stroke: var(--line); stroke-width: 1.5; }
.a-chip { fill: var(--panel-2); stroke: rgba(122,162,255,.38); stroke-width: 1; }
.a-chip-bad { stroke: rgba(255,107,107,.45); fill: rgba(255,107,107,.05); }
.a-pill { fill: rgba(69,212,137,.07); stroke: rgba(69,212,137,.32); stroke-width: 1; }
.a-file { fill: var(--panel-2); stroke: var(--line); stroke-width: 1.5; }
.a-file-fold { fill: none; stroke: var(--line); stroke-width: 1.5; }
.a-hl { fill: rgba(95,216,203,.10); stroke: var(--accent-dim); stroke-width: 1; }

.a-dot-ok  { fill: var(--accent); }
.a-dot-bad { fill: var(--critical); }
.a-stop    { fill: var(--panel-2); stroke: var(--ink-4); stroke-width: 2; }
.a-stop-bad{ stroke: var(--critical); }

.a-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.a-line-acc { stroke: var(--accent-dim); }
.a-track { stroke: var(--line); stroke-width: 2; }
.a-join { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }
.a-strike { stroke: var(--critical); stroke-width: 1.5; opacity: .5; }
.a-arrow { fill: none; stroke: var(--ink-4); stroke-width: 1.8; }
.a-arrow-head { fill: var(--ink-4); }
.a-arrow-head-bad { fill: var(--critical); }
.a-back { fill: none; stroke: var(--critical); stroke-width: 1.6; opacity: .8; }
.a-tick { fill: none; stroke: var(--good); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.a-bang { stroke: var(--critical); stroke-width: 3.4; stroke-linecap: round; }
.a-bang-dot { fill: var(--critical); }
.a-glass { fill: rgba(95,216,203,.05); stroke: var(--accent); stroke-width: 2; }
.a-glass-stem { stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }

.a-lab {
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em;
  fill: var(--ink-4);
}
.a-lab-bad { fill: var(--critical); opacity: .85; }
.a-lab-acc { fill: var(--accent); }
.a-big  { font-family: var(--sans); font-size: 16px; font-weight: 500; fill: var(--ink); }
.a-sub  { font-family: var(--sans); font-size: 11px; fill: var(--ink-4); }
.a-tiny { font-family: var(--sans); font-size: 10px; fill: var(--ink-2); }
.a-xs   { font-size: 9px; }
.a-dim  { fill: var(--ink-4); }
.a-ok   { fill: var(--good); }
.a-bad  { fill: var(--critical); }
.a-acc  { fill: var(--accent); }
.a-ask  { font-family: var(--mono); font-size: 10px; fill: var(--ink-4); }
.a-no   { font-family: var(--sans); font-size: 15px; fill: var(--critical); }
.a-mono-bad { font-family: var(--mono); font-size: 13px; fill: var(--critical); }
.a-link { font-family: var(--mono); font-size: 13px; fill: #a9c2ff; }
.a-link-bad { font-family: var(--mono); font-size: 13px; fill: #ffb0b0; }
.a-cmp  { font-family: var(--mono); font-size: 20px; }
.a-cmp-ok { fill: var(--ink-2); }
.a-cmp-bad { fill: var(--critical); }
.a-cmp .a-hi { fill: #fff; paint-order: stroke; }
.a-sm { font-size: 16px; }

/* frames that hold the art */
.bcard-art {
  height: 178px; margin-bottom: 18px; padding: 14px 18px 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.bcard-art-wide { height: 100%; border-bottom: 0; border-right: 1px solid var(--line);
  display: flex; align-items: center; padding: 26px; }
.how-art {
  height: 190px; margin-bottom: 18px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); position: relative;
}
.how-art::before, .how-art::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 1px solid var(--accent-dim);
}
.how-art::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.how-art::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }

/* privacy */

.privacy-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(170deg, var(--panel) 0%, var(--bg-2) 60%);
  padding: 54px 52px 48px;
}
.privacy-card > * { position: relative; }
.privacy-card h2 { margin-bottom: 22px; }
.privacy-lede { color: var(--ink-2); font-size: 1rem; line-height: 1.72; max-width: 58ch; }

.privacy-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px; margin: 36px 0 30px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.privacy-stats b {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: 2.9rem; line-height: 1; color: var(--accent); margin-bottom: 8px;
}
.privacy-stats span { color: var(--ink-3); font-size: .85rem; line-height: 1.6; }
.privacy-cost { color: var(--ink-4); font-size: .86rem; line-height: 1.7; max-width: 62ch; margin: 0; }

/* ticker: the header names this thing actually reads, moving past */

.ticker-wrap {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0;
  margin: 26px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker { display: flex; width: max-content; animation: tick 46s linear infinite; }
.ticker-run {
  display: flex; align-items: center; gap: 22px; padding-right: 22px;
  font-family: var(--mono); font-size: .82rem; line-height: 1.8;
  color: var(--ink-4); white-space: nowrap;
}
.ticker-run i { color: var(--accent-dim); font-style: normal; }
@keyframes tick {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* exactly one of the two runs */
}

/* showcase: copy one side, a real screenshot the other */

.showcase {
  max-width: var(--maxw); margin: 0 auto;
  padding: 76px 28px;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 30px 56px; align-items: center;
}
.showcase-flip .showcase-copy { order: 2; }
.showcase-flip .showcase-shot { order: 1; }

.showcase-copy h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12;
  letter-spacing: -0.028em; color: #f2f5fa; margin: 0 0 18px; padding-bottom: .04em;
}

.tickList { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.tickList li {
  position: relative; padding-left: 26px;
  color: var(--ink-2); font-size: .92rem; line-height: 1.6;
}
.tickList li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 11px; height: 6px; border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg);
}

.showcase-shot {
  margin: 0; position: relative;
  transform-style: preserve-3d; will-change: transform;
}
/* The reveal animates opacity only on parallax elements, because the rAF loop
   owns their transform and the two would overwrite each other. */
.reveal-l[data-par], .reveal-r[data-par], .reveal[data-par] { transform: none; }
.showcase-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel);
  box-shadow: none;
  transition: transform .6s var(--ease);
}

.showcase-shot:hover img { transform: translateY(-5px); }

/* product plates -----------------------------------------------------------
   Linear's move: a headline, a line of copy, then a large real screenshot of
   the product doing the thing. No illustration and no glow behind it - the
   product is the image. */

.lede-shot { max-width: var(--maxw); margin: 0 auto; padding: 72px 28px 0; }
.lede-shot-copy { max-width: 44rem; margin-bottom: 28px; }
.lede-shot-copy h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12;
  letter-spacing: -0.03em; color: #f2f5fa; margin: 0 0 12px;
}
.lede-shot-copy p { color: var(--ink-3); font-size: .97rem; line-height: 1.65; max-width: 54ch; margin: 0; }

.plate { margin: 0; will-change: transform; }
.plate img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
}

/* blueprint --------------------------------------------------------------
   Garden's register: a technical drawing with measurement callouts, a scan
   line that never stops, and a list that advances itself so the panel is
   still doing something when the reader has stopped. */

.spec { max-width: var(--maxw); margin: 0 auto; padding: 84px 28px; }
.spec-head { margin-bottom: 40px; max-width: 46rem; }
.spec-body {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 20px 46px; align-items: center;
}

.blueprint {
  will-change: transform;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--bg-2); overflow: hidden; position: relative;
}
.blueprint svg { display: block; width: 100%; height: auto; }

.bp-grid { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.bp-line { fill: none; stroke: var(--ink-4); stroke-width: 1.4; }
.bp-faint { stroke: var(--line); }
.bp-object { opacity: .9; }

.bp-dim path { fill: none; stroke: var(--accent-dim); stroke-width: 1; }
.bp-dim text {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  fill: var(--ink-4);
}

/* each callout waits its turn */
.bp-plate { opacity: .22; transition: opacity .55s var(--ease); }
.bp-plate.is-on { opacity: 1; }
.bp-node { fill: var(--bg-2); stroke: var(--accent); stroke-width: 2; }
.bp-plate.is-on .bp-node { fill: var(--accent); }
.bp-lead { fill: none; stroke: var(--accent-dim); stroke-width: 1; stroke-dasharray: 3 4; }
.bp-plate.is-on .bp-lead { stroke: var(--accent); stroke-dasharray: none; }
.bp-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; fill: var(--ink-4);
}
.bp-val { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }
.bp-val-bad { fill: var(--critical); }

/* the sweep: idle motion, always running */
.bp-scan { animation: sweep 5.2s linear infinite; }
@keyframes sweep {
  from { transform: translateY(0); }
  to   { transform: translateY(500px); }
}

.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.spec-row {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start;
  padding: 16px 16px 16px 12px; border-radius: 11px; cursor: default;
  border-left: 2px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease);
  opacity: .42;
}
.spec-row.is-on { opacity: 1; background: rgba(255,255,255,.022); border-left-color: var(--accent); }
.spec-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spec-n {
  font-family: var(--mono); font-size: .76rem; line-height: 1.7; color: var(--ink-4);
  transition: color .4s var(--ease);
}
.spec-row.is-on .spec-n { color: var(--accent); }
.spec-row h3 {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.014em;
  color: var(--ink); margin: 0 0 5px; line-height: 1.35;
}
.spec-row p { color: var(--ink-3); font-size: .88rem; line-height: 1.65; margin: 0; }

/* bento */

.bento {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bcard {
  position: relative; overflow: hidden; will-change: transform;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 15px;
  padding: 0 0 22px;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.bcard:hover { border-color: #2c3543; background: var(--panel); transform: translateY(-3px); }
/* The rAF loop owns transform on these, so transitioning it would restart a
   transition every frame and the hover lift would never render. */
.bcard[data-par] { transition-property: border-color, background; }
.bcard[data-par]:hover { transform: none; }

.bcard-shot {
  height: 178px; overflow: hidden; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.bcard-shot img {
  display: block; width: 100%; height: auto;
  transform: scale(1.02); transform-origin: 50% 0;
  transition: transform .6s var(--ease);
}
.bcard:hover .bcard-shot img { transform: scale(1.06); }

.bcard h3 {
  font-size: 1.02rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 9px; padding: 0 22px;
}
.bcard p { color: var(--ink-3); font-size: .87rem; line-height: 1.68; margin: 0; padding: 0 22px; }
.bcard code { font-size: .84em; background: rgba(255,255,255,.04); }
.bcard b { color: var(--ink-2); font-weight: 500; }

/* the wide one carries the argument, so it gets two columns and a side layout */
.bcard-wide {
  grid-column: span 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 0; padding: 0;
}
.bcard-wide .bcard-shot {
  height: 100%; margin: 0; border-bottom: 0; border-right: 1px solid var(--line);
  -webkit-mask-image: none; mask-image: none;
  display: flex; align-items: center;
}
.bcard-wide .bcard-body { padding: 26px 26px 26px 24px; }
.bcard-wide h3 { padding: 0; font-size: 1.14rem; margin-bottom: 11px; }
.bcard-wide p { padding: 0; }

/* the two cards that are type rather than screenshot */
.bcard-glyph {
  display: flex; flex-direction: column; justify-content: center;
  height: 178px; margin-bottom: 18px; padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
  font-family: var(--mono); font-size: 1.02rem; line-height: 1.5;
  color: var(--ink-4); letter-spacing: -0.01em; word-break: break-all;
}
.bcard-glyph em {
  font-style: normal; color: var(--critical); font-size: 1.28rem; margin-top: 7px;
}
.bcard-glyph-file em { color: var(--high); }

/* photographs */

/* limits */

.limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; max-width: 78ch; }
.limits li {
  color: var(--ink-2); font-size: .93rem; line-height: 1.75;
  border-left: 2px solid var(--line); padding-left: 20px;
  transition: border-color .3s var(--ease);
}
.limits li:hover { border-left-color: var(--accent-dim); }
.limits b { color: var(--ink); font-weight: 500; }

/* cta */

.cta { padding: 72px 28px 90px; text-align: left; }
.cta h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08;
  color: #f4f7fb; margin: 0 0 30px; padding-bottom: .05em;
}
.cta h2 em { font-style: normal; color: var(--accent-2); }
.cta-row { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }

/* ══════════════════════════════════════════════ footer */

.foot { border-top: 1px solid var(--line-soft); }
.foot-main { padding: 34px 28px 60px; }
.foot p { color: var(--ink-4); font-size: .85rem; max-width: 78ch; line-height: 1.75; }
.foot b { color: var(--ink-2); font-weight: 500; }
.foot-small { font-size: .8rem; }

/* ══════════════════════════════════════════════ responsive */

@media (max-width: 1000px) {
  .spec-body { grid-template-columns: 1fr; gap: 26px; }
  .spec { padding: 60px 28px; }
  .how-steps { grid-template-columns: 1fr; gap: 30px; }
  .how { padding: 60px 28px; }
  .showcase { grid-template-columns: 1fr; gap: 28px; padding: 56px 28px; }
  .showcase-flip .showcase-copy { order: 1; }
  .showcase-flip .showcase-shot { order: 2; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcard-wide { grid-column: span 2; grid-template-columns: 1fr; }
  .bcard-wide .bcard-art-wide { border-right: 0; border-bottom: 1px solid var(--line); height: 200px; }
}

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .verdict { grid-template-columns: 1fr; gap: 22px; }
  .verdict-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .verdict-summary { max-width: none; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Two of the three plates are parallax depth that is invisible at this
     width, and they cost ~790 kB of download plus a large decoded bitmap on
     exactly the devices least able to spare either. */
  .cloud-mid, .cloud-far { display: none; }
  .cloud-near { opacity: .34; }
}

@media (max-width: 760px) {
  .hero { padding: 54px 16px 60px; }
  .privacy-card { padding: 34px 22px 30px; border-radius: 14px; }
  .privacy-stats { grid-template-columns: 1fr; gap: 18px; padding: 22px 0; }
  .privacy-stats b { font-size: 2.3rem; }
  .section { padding: 60px 16px; }
  .section-head { margin-bottom: 30px; }
  .cta { padding: 52px 16px 66px; }
}

@media (max-width: 680px) {
  .showcase { padding: 44px 16px; }
  .how { padding: 48px 16px; }
  .spec { padding: 48px 16px; }
  .lede-shot { padding: 48px 16px 0; }
  .how-art { height: 170px; }
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bcard-wide { grid-column: span 1; }
  .bcard-art { height: 150px; }
  .ticker-run { font-size: .74rem; gap: 16px; }
    body { font-size: 15px; }
  .topbar { padding: 16px; gap: 12px; }
  .topbar-right { gap: 14px; }
  .results { padding: 4px 16px 36px; }
  .foot-main { padding-left: 16px; padding-right: 16px; }
  .panel, .verdict { padding: 18px 16px; border-radius: 12px; }

  .cards { grid-template-columns: 1fr; }
  .card { padding: 22px 18px 24px; }
  .card-n { margin-bottom: 18px; }
  .step { grid-template-columns: 34px 1fr; gap: 14px; padding: 22px 18px; }
  .step-n { width: 30px; height: 30px; font-size: .74rem; }

  .finding-head { grid-template-columns: 10px 1fr; padding: 12px 14px; }
  .finding-right { grid-column: 2; grid-row: 2; }
  .finding-body { padding: 2px 14px 14px 32px; }

  .ev, .link-line, .verdict-subject, .help-dl { grid-template-columns: 1fr; gap: 2px; }
  .help-dl dd { margin-bottom: 10px; }
  .message { padding: 16px 15px; }

  .composer { max-width: none; }
  .tabs { padding-left: 8px; }
  .tab { font-size: .79rem; padding: 8px 12px 9px; }
  .tab.is-on { padding-bottom: 10px; }
  #input { min-height: 112px; padding: 15px 16px 4px; }
  #input::placeholder { font-size: .88rem; }
  .banner { flex-wrap: wrap; gap: 6px 10px; padding: 11px 14px; }
  .banner-text { flex: 1 1 100%; order: 2; }
  .banner-link { order: 3; margin-left: auto; }
}