/* ==========================================================================
   AI Watermark Detector — forensic paper
   A light, instrument-like surface: warm paper, ink text, one teal accent,
   and functional colour used only for findings. Deliberately not the usual
   dark "AI tool" gradient — this is meant to read as a measuring device.
   ========================================================================== */

:root{
  --paper:#f5f4f1;
  --paper-2:#efeee9;
  --card:#ffffff;

  --ink:#14161b;
  --ink-2:#565c66;
  --ink-3:#888e97;

  --line:rgba(20,22,27,.10);
  --line-2:rgba(20,22,27,.18);
  --line-3:rgba(20,22,27,.30);

  --accent:#0d6b63;
  --accent-2:#0a544e;
  --accent-soft:rgba(13,107,99,.09);
  --accent-line:rgba(13,107,99,.30);

  --clean:#15803d;
  --clean-soft:rgba(21,128,61,.10);
  --flag:#b45309;
  --flag-soft:rgba(180,83,9,.11);
  --danger:#b3261e;
  --danger-soft:rgba(179,38,30,.10);

  --serif:"Instrument Serif",ui-serif,Georgia,"Songti SC",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --r:12px;
  --r-sm:8px;
  --r-xs:6px;

  --shadow:0 1px 2px rgba(20,22,27,.05),0 8px 24px -12px rgba(20,22,27,.14);
  --shadow-lg:0 1px 3px rgba(20,22,27,.06),0 20px 48px -20px rgba(20,22,27,.22);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* faint engineering grid — reads as graph paper, not decoration */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(20,22,27,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(20,22,27,.035) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,transparent,#000 240px,#000 calc(100% - 200px),transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 240px,#000 calc(100% - 200px),transparent);
}
.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
a{color:var(--accent)}
h1,h2,h3,h4{font-weight:400;line-height:1.14;margin:0;letter-spacing:-.01em}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------------ typography */

/* Measure is set in `ch`. `ch` is the advance of "0", which is not the average
   character width: in Inter "0" is 0.63em, so Nch is ~1.27x more characters
   than N. These values were converted so the rendered pixel widths stay as
   reviewed. `ch` now resolves against our own webfont, so the measure no
   longer changes with the fonts installed on the visitor's machine. */

.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;
}
h1.display{
  font-family:var(--serif);
  font-size:clamp(2.3rem,4.6vw,4.05rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0 0 18px;
}
h1.display em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(1rem,1.35vw,1.135rem);color:var(--ink-2);margin:0 0 22px;max-width:36.46ch}
h2.section{
  font-family:var(--serif);font-size:clamp(1.65rem,2.7vw,2.4rem);
  line-height:1.1;margin:0 0 14px;letter-spacing:-.018em;
}
.section-lede{color:var(--ink-2);margin:0 0 30px;max-width:49.14ch;font-size:1.02rem}
.mono{font-family:var(--mono);font-variant-ligatures:none}

/* ---------------------------------------------------------------- header */

.site-head{
  position:sticky;top:0;z-index:40;
  background:rgba(245,244,241,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);padding:9px 4px;margin:-9px -4px}
.brand-mark{
  width:26px;height:26px;border-radius:7px;flex:0 0 auto;
  background:var(--ink);position:relative;display:grid;place-items:center;
}
.brand-mark svg{width:15px;height:15px;display:block}
.brand-text{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.brand-text span{color:var(--ink-3);font-weight:400}
.head-nav{display:flex;align-items:center;gap:2px}
.head-nav a{
  color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:500;
  padding:9px 11px;border-radius:var(--r-xs);transition:color .2s,background .2s;
}
.head-nav a:hover{color:var(--ink);background:rgba(20,22,27,.05)}

/* ------------------------------------------------------------------ hero */

.hero{padding:clamp(38px,5.4vw,72px) 0 clamp(30px,3.4vw,48px);position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,4vw,60px);align-items:start}
.hero-copy{padding-top:6px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.trust li{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--ink-2);font-weight:500;
}
.trust svg{width:14px;height:14px;flex:0 0 auto;color:var(--accent)}

/* ------------------------------------------------------------- tool panel */

.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.tabs{display:flex;gap:3px;background:rgba(20,22,27,.05);padding:3px;border-radius:var(--r-sm)}
.tab{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-2);
  padding:7px 13px;border-radius:6px;transition:background .18s,color .18s;
  min-height:30px;
}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(20,22,27,.10)}
.tab:hover:not([aria-selected="true"]){color:var(--ink)}
.panel-badge{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.panel-badge i{width:6px;height:6px;border-radius:50%;background:var(--clean);display:block}

.panel-body{padding:14px}
.field{position:relative}
textarea#input{
  width:100%;min-height:158px;resize:vertical;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:13px;line-height:1.65;
  padding:13px 14px;transition:border-color .2s,box-shadow .2s;
}
textarea#input::placeholder{color:var(--ink-3)}
textarea#input:focus{
  outline:none;border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.counter{
  position:absolute;right:10px;bottom:9px;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  background:var(--paper);padding:1px 6px;border-radius:4px;pointer-events:none;
}

/* drop zone */
.drop{
  display:flex;align-items:center;gap:13px;
  border:1.5px dashed var(--line-3);border-radius:var(--r-sm);
  background:var(--paper);padding:20px 16px;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s var(--ease);
  text-align:left;width:100%;
}
.drop:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.drop.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.006)}
.drop svg{width:26px;height:26px;color:var(--accent);flex:0 0 auto}
.drop-t{font-size:14px;font-weight:600;margin:0 0 2px}
.drop-s{font-size:12.5px;color:var(--ink-3);margin:0}

.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.btn{
  appearance:none;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;
  padding:10px 17px;border-radius:var(--r-sm);min-height:40px;
  transition:background .18s,border-color .18s,transform .12s var(--ease),color .18s;
  display:inline-flex;align-items:center;gap:7px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--line-3);color:var(--ink);background:rgba(20,22,27,.03)}
.btn svg{width:15px;height:15px}
.hint{font-size:12.5px;color:var(--ink-3);margin:11px 0 0}
.samples{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:13px}
.samples span{font-size:12px;color:var(--ink-3)}
.chip{
  appearance:none;cursor:pointer;border:1px solid var(--line-2);background:transparent;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  padding:4px 9px;border-radius:99px;min-height:26px;
  transition:border-color .18s,color .18s,background .18s;
}
.chip:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}

/* ---------------------------------------------------------------- results */

.results{padding:8px 0 6px;position:relative;z-index:1}
.verdict{
  display:flex;align-items:flex-start;gap:14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px;
  border-left:4px solid var(--ink-3);
}
.verdict[data-level="clean"]{border-left-color:var(--clean);background:linear-gradient(var(--clean-soft),var(--clean-soft)),var(--card)}
.verdict[data-level="low"]{border-left-color:var(--flag)}
.verdict[data-level="medium"]{border-left-color:var(--flag);background:linear-gradient(var(--flag-soft),var(--flag-soft)),var(--card)}
.verdict[data-level="high"]{border-left-color:var(--danger);background:linear-gradient(var(--danger-soft),var(--danger-soft)),var(--card)}
.verdict-icon{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center}
.verdict[data-level="clean"] .verdict-icon{background:var(--clean);color:#fff}
.verdict[data-level="low"] .verdict-icon,
.verdict[data-level="medium"] .verdict-icon{background:var(--flag);color:#fff}
.verdict[data-level="high"] .verdict-icon{background:var(--danger);color:#fff}
.verdict-icon svg{width:18px;height:18px}
.verdict-t{font-size:17px;font-weight:600;margin:0 0 3px;letter-spacing:-.01em}
.verdict-s{margin:0;color:var(--ink-2);font-size:14px}
.verdict-s b{color:var(--ink);font-weight:600}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}
.card-head{
  padding:13px 17px;border-bottom:1px solid var(--line);background:var(--paper-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.card-head h3{font-size:14px;font-weight:600;margin:0;letter-spacing:-.005em}
.card-head .mono{font-size:11px;color:var(--ink-3)}
.card-body{padding:16px 17px}
.card-body.tight{padding:0}

/* finding rows */
.finding{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:12px 17px;border-bottom:1px solid var(--line);
}
.finding:last-child{border-bottom:0}
.finding:hover{background:rgba(20,22,27,.02)}
.finding-code{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  padding:3px 7px;border-radius:5px;white-space:nowrap;
  background:var(--flag-soft);color:var(--flag);
}
.finding[data-sev="3"] .finding-code{background:var(--danger-soft);color:var(--danger)}
.finding[data-sev="1"] .finding-code{background:rgba(20,22,27,.06);color:var(--ink-2)}
.finding-name{font-size:13.5px;font-weight:600;margin:0 0 3px;word-break:break-word}
.finding-note{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.55}
.finding-pos{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;padding-top:2px}

.group-row{
  display:flex;align-items:center;gap:11px;padding:11px 17px;
  border-bottom:1px solid var(--line);
}
.group-row:last-child{border-bottom:0}
.group-dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.group-dot[data-sev="3"]{background:var(--danger)}
.group-dot[data-sev="2"]{background:var(--flag)}
.group-dot[data-sev="1"]{background:var(--ink-3)}
.group-label{font-size:13.5px;font-weight:600;flex:1;min-width:0}
.group-count{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}

/* decoded payload */
.payload{
  margin:0 17px 16px;padding:14px 16px;border-radius:var(--r-sm);
  background:#14161b;border:1px solid #14161b;
}
.payload-t{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:#7ee0d2;margin:0 0 8px;
}
.payload-text{
  font-family:var(--mono);font-size:13px;line-height:1.6;color:#f2f0ec;
  margin:0;white-space:pre-wrap;word-break:break-word;
}
.payload-note{font-size:12px;color:#9aa0a8;margin:9px 0 0;line-height:1.5}
.payload[data-confidence="inferred"] .payload-t{color:#ffc978}

/* compare view */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.compare-col{padding:15px 17px;min-width:0}
.compare-col + .compare-col{border-left:1px solid var(--line)}
.compare-h{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);margin:0 0 10px;display:flex;align-items:center;gap:7px;
}
.compare-h b{color:var(--ink-2);font-weight:600}
.text-out{
  font-family:var(--mono);font-size:13px;line-height:1.75;
  white-space:pre-wrap;word-break:break-word;margin:0;
  max-height:280px;overflow:auto;
}
.text-out.raw{color:var(--ink-2)}
mark.rm{
  background:var(--danger-soft);color:var(--danger);
  border-radius:4px;padding:1px 5px;margin:0 1px;
  font-size:11px;font-weight:600;cursor:help;
  border-bottom:1px solid rgba(179,38,30,.35);
  vertical-align:1px;
}
.clean-note{
  display:flex;align-items:center;gap:9px;margin-top:13px;
  padding-top:13px;border-top:1px dashed var(--line-2);
}

/* position strip */
.strip{
  display:flex;height:22px;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper);margin:0 0 6px;
}
.strip i{display:block;height:100%}
.strip i.s3{background:var(--danger)}
.strip i.s2{background:var(--flag)}
.strip i.s1{background:rgba(20,22,27,.22)}
.strip-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.strip-legend span{display:flex;align-items:center;gap:5px}
.strip-legend b{width:8px;height:8px;border-radius:2px;display:block}

.empty{
  padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;
}

/* SynthID handoff. Sits under the image results, at the moment the visitor has
   just seen "no provenance metadata found" and still wants an answer. Reads as
   an aside in the same language as .doc-note -- flat card, accent left border,
   no gradient. The outbound anchor is the only element on this page that leaves
   the site, so it is the only element here with a solid fill. */
.next-step{
  margin:16px 0 0;padding:18px 20px;
  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-start;justify-content:space-between;
  border:1px solid var(--line-2);border-left:3px solid var(--accent);
  border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);
}
/* 20em, not 24em: this element inherits the 16px body size, so 24em resolved
   to 384px and pushed the action onto its own row at 768px. */
.next-step-main{flex:1 1 20em;min-width:0}
.next-step-h{
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.005em;
  margin:0 0 7px;color:var(--ink);
}
/* 34em, not ch: `ch` is the width of "0" in whichever face renders it. At
   13.5px this resolves to 459px, about 74 characters per line -- inside the
   45-75 target. The same paragraph at 44em ran to 97 characters. */
.next-step-b{margin:0;font-size:13.5px;color:var(--ink-2);max-width:34em}
.next-step-act{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.next-step-a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:600;
  padding:10px 17px;min-height:40px;border-radius:var(--r-sm);
  background:var(--ink);color:#fff;text-decoration:none;
  transition:background .18s,transform .12s var(--ease);
}
.next-step-a:hover{background:#000}
.next-step-a:active{transform:translateY(1px)}
.next-step-ico{font-size:13px;line-height:1;opacity:.72}
.next-step-f{margin:0;font-size:13px}
.next-step-f a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(13,107,99,.34)}
.next-step-f a:hover{border-bottom-color:var(--accent)}

/* ------------------------------------------------------------- marketing */

section.band{padding:clamp(54px,7vw,96px) 0;position:relative;z-index:1}
section.band.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{counter-increment:s}
.step-n{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);
  margin:0 0 10px;display:flex;align-items:center;gap:9px;
}
.step-n::after{content:"";height:1px;flex:1;background:var(--accent-line)}
.step h3{font-size:1.08rem;margin:0 0 7px;font-weight:600;letter-spacing:-.01em}
.step p{margin:0;color:var(--ink-2);font-size:14.5px}

.scope{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.scope-col{padding:26px 26px 28px}
.scope-col + .scope-col{border-left:1px solid var(--line);background:var(--paper)}
.scope-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;margin:0 0 16px}
.scope-h .badge{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
}
.scope-h .badge svg{width:12px;height:12px}
.scope-yes .badge{background:var(--clean);color:#fff}
.scope-no .badge{background:var(--ink-3);color:#fff}
.scope ul{margin:0;padding:0;list-style:none}
.scope li{position:relative;padding-left:20px;margin-bottom:11px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.scope li:last-child{margin-bottom:0}
.scope li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%}
.scope-yes li::before{background:var(--clean)}
.scope-no li::before{background:var(--ink-3)}
.scope li b{color:var(--ink);font-weight:600}

.callout{
  margin-top:24px;padding:18px 20px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  font-size:14.5px;color:var(--ink-2);
}
.callout b{color:var(--ink);font-weight:600}

/* FAQ */
.faq{max-width:820px}
details.q{border-bottom:1px solid var(--line)}
details.q summary{
  cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.008em;
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
details.q[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.q summary:hover{color:var(--accent)}
details.q .a{padding:0 34px 22px 0;color:var(--ink-2);font-size:14.5px;line-height:1.68}
details.q .a p{margin:0 0 11px}
details.q .a p:last-child{margin-bottom:0}
details.q .a code{font-family:var(--mono);font-size:12.5px;background:rgba(20,22,27,.06);padding:1.5px 5px;border-radius:4px}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:38px 0 46px;background:var(--paper-2);position:relative;z-index:1}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot-brand{font-family:var(--serif);font-size:1.32rem;margin:0 0 7px}
.foot-note{font-size:13px;color:var(--ink-3);margin:0;max-width:38.04ch}
.foot-meta{font-size:12.5px;color:var(--ink-3);margin:12px 0 0}
.foot-meta a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(13,107,99,.34)}
.foot-meta a:hover{border-bottom-color:var(--accent)}

/* Inline links in prose keep a non-colour cue, so they are still
   distinguishable from body text without relying on hue alone (WCAG 1.4.1). */
.scope-col li a,.scope-col li a:visited,
details.q .a a,details.q .a a:visited{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(13,107,99,.34)
}
.scope-col li a:hover,details.q .a a:hover{border-bottom-color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}
.foot-links a{color:var(--ink-2);text-decoration:none;font-size:13.5px;padding:5px 0}
.foot-links a:hover{color:var(--accent)}

/* -------------------------------------------------------------- motion */

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:active{transform:none}
  .next-step-a:active{transform:none}
  .drop.over{transform:none}
}

/* ------------------------------------------------------------ responsive */

@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .lede{max-width:47.55ch}
}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .scope{grid-template-columns:1fr}
  .scope-col + .scope-col{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .compare{grid-template-columns:1fr}
  .compare-col + .compare-col{border-left:0;border-top:1px solid var(--line)}
  .head-nav{display:none}
  .hero{padding-top:30px}
}
@media (max-width:520px){
  .finding{grid-template-columns:auto 1fr;gap:10px}
  .finding-pos{grid-column:2;padding-top:0}
  .actions .btn{flex:1 1 auto;justify-content:center}
  .panel-badge{display:none}
  .next-step{padding:16px 17px}
  .next-step-act{width:100%}
  .next-step-a{width:100%;justify-content:center}
}

/* --------------------------------------------------------- document pages
   Shared layout for /synthid-detector/, /about/, /contact/, /privacy-policy/
   and /terms/. Same paper and ink as the checker; a narrower measure, because
   these are read rather than scanned. */

.doc{padding:54px 0 78px;position:relative;z-index:1}
.doc-wrap{max-width:730px;margin:0 auto;padding:0 26px}
.doc h1{font-family:var(--serif);font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.06;margin:0 0 14px}
.doc-lede{font-size:1.06rem;color:var(--ink-2);margin:0 0 10px;max-width:45.97ch}
.doc-meta{font-size:12.5px;color:var(--ink-3);margin:0 0 32px}
.doc h2{font-family:var(--serif);font-size:1.44rem;line-height:1.2;margin:40px 0 12px}
.doc p{margin:0 0 15px;color:var(--ink-2);max-width:52.31ch}
.doc strong{color:var(--ink);font-weight:600}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin:0 0 9px;color:var(--ink-2);max-width:50.72ch}
.doc a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(13,107,99,.34)}
.doc a:hover{border-bottom-color:var(--accent)}
.doc code{
  font-family:var(--mono);font-size:.87em;color:var(--ink);
  background:rgba(20,22,27,.055);padding:2px 5px;border-radius:var(--r-xs);word-break:break-word
}
/* Sub-headings inside a long document page. Sans, not serif: the serif h2 is
   the section marker and h3 is a step inside it, so they must not read as
   the same level. */
.doc h3{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;margin:26px 0 8px;color:var(--ink)}
.doc ol{margin:0 0 16px;padding-left:22px}
.doc ol li{margin:0 0 9px;color:var(--ink-2);max-width:50.72ch}

/* Comparison table. Scrolls sideways on a narrow screen rather than
   squashing the cells into unreadable columns. */
.doc-table-wrap{
  margin:4px 0 22px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card)
}
.doc-table{width:100%;border-collapse:collapse;font-size:14px;min-width:540px}
.doc-table caption{
  caption-side:top;text-align:left;padding:13px 16px 0;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-3)
}
.doc-table th,.doc-table td{
  padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2);line-height:1.5
}
.doc-table thead th{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-3);background:var(--paper)
}
.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table td{color:var(--ink-2)}
.doc-table td:first-child{color:var(--ink);width:38%}
.doc-table strong{color:var(--ink);font-weight:600}

.doc-note{
  border:1px solid var(--line-2);border-left:3px solid var(--accent);
  background:var(--card);border-radius:var(--r);padding:17px 19px;margin:0 0 30px
}
.doc-note h2{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;margin:0 0 9px;color:var(--ink)}
.doc-note p{margin:0;color:var(--ink);max-width:49.14ch}
.doc-note p + p{margin-top:11px}

.doc-mail{
  display:inline-block;font-family:var(--mono);font-size:1rem;color:var(--ink);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-sm);padding:11px 15px;margin:2px 0 4px
}

@media (max-width:760px){
  .doc{padding:38px 0 60px}
  .doc-wrap{padding:0 18px}
}