/* ============================================================
   SEO Browser — Direction 1
   Visual thesis: a page stripped from rendered pixels -> source
   -> text -> link structure. Archivo = the rendered/human view;
   IBM Plex Mono = the machine/source view. One signal colour
   (vermilion) marks only what a crawler keeps.
   ============================================================ */

/* ---- Fonts (self-hosted, no network at runtime) ---- */
@font-face{font-family:Archivo;src:url(fonts/archivo-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---- Tokens ---- */
:root{
  --ink:#0E0E0F;
  --paper:#FFFFFF;
  --mist:#EBEEEA;          /* cool light neutral, not cream */
  --line:#D3D6CF;          /* hairline on light */
  --muted:#585B54;         /* secondary text on light */
  --carbon:#101113;        /* inverted "source" zone */
  --carbon-2:#181A1C;      /* raised carbon panel */
  --carbon-line:#2B2E31;   /* hairline on dark */
  --carbon-muted:#9A9E9B;  /* secondary text on dark */
  --signal:#FF3B00;        /* the kept-signal colour */
  --on-signal:#FFFFFF;

  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter:clamp(20px,4vw,52px);
  --maxw:1200px;
  --stroke:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--signal);color:var(--on-signal)}

/* Focus — always visible, never removed */
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.on-carbon :focus-visible,.zone--source :focus-visible{outline-color:#FF6B3D}

.skip-link{
  position:absolute;left:8px;top:-48px;z-index:20;
  background:var(--ink);color:#fff;padding:10px 16px;
  font-family:var(--mono);font-size:.8rem;text-decoration:none;
  transition:top .12s;
}
.skip-link:focus{top:8px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ============================================================
   Header
   ============================================================ */
.masthead{border-bottom:var(--stroke) solid var(--ink);background:var(--paper)}
.masthead__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand__mark{width:30px;height:30px;flex:0 0 auto}
.brand__mark rect,.brand__mark line{vector-effect:non-scaling-stroke}
.brand__word{display:flex;flex-direction:column;line-height:1}
.brand__name{font-weight:800;font-size:1.06rem;letter-spacing:-.02em}
.brand__desc{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);margin-top:3px}

.masthead__nav{display:flex;align-items:center;gap:6px}
.navlink{
  font-family:var(--mono);font-size:.78rem;text-decoration:none;color:var(--ink);
  padding:7px 10px;border:var(--stroke) solid transparent;
}
.navlink:hover{border-color:var(--line)}
.navlink--cta{background:var(--ink);color:#fff}
.navlink--cta:hover{background:var(--signal);border-color:var(--signal)}

/* ============================================================
   Hero — the rendered view (white)
   ============================================================ */
.hero{padding:clamp(26px,4vw,48px) 0 clamp(30px,4vw,52px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
.hero__grid>*{min-width:0}

.hero__lede{max-width:34ch}
.hero__kicker{font-family:var(--mono);font-size:.74rem;color:var(--signal);font-weight:500;margin:0 0 14px}
h1{
  font-weight:800;font-size:clamp(2.15rem,4.3vw,3.35rem);
  line-height:1.01;letter-spacing:-.025em;margin:0 0 16px;
}
.hero__sub{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--muted);margin:0;max-width:44ch}
.hero__meta{margin:22px 0 0;font-family:var(--mono);font-size:.74rem;color:var(--muted);line-height:1.7}
.hero__meta b{color:var(--ink);font-weight:600}

/* Console */
.console{border:var(--stroke) solid var(--ink);background:var(--paper)}
.console__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:var(--stroke) solid var(--ink);background:var(--ink);color:#fff}
.console__head span{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em}
.console__dot{width:9px;height:9px;background:var(--signal);flex:0 0 auto}
.console__body{padding:clamp(16px,2vw,22px)}

.field{margin:0 0 16px}
.field:last-child{margin-bottom:0}
.field__label{display:block;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:0 0 7px;letter-spacing:.02em}

.urlrow{display:flex;border:var(--stroke) solid var(--ink)}
.urlrow__proto{display:flex;align-items:center;font-family:var(--mono);font-size:.82rem;
  padding:0 10px;background:var(--mist);border-right:var(--stroke) solid var(--ink);color:var(--muted);white-space:nowrap}
.url-input{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--mono);font-size:.92rem;color:var(--ink);
  padding:13px 12px;
}
.url-input::placeholder{color:#9DA09A}
.url-input:focus{outline:none;background:#FFF7F4}

/* Segmented crawler control (real radios) */
.seg{display:flex;flex-wrap:wrap;border:var(--stroke) solid var(--ink)}
.seg__opt{flex:1 1 0;min-width:132px;position:relative}
.seg__opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg__opt+.seg__opt{border-left:var(--stroke) solid var(--ink)}
.seg__face{display:block;padding:10px 12px;cursor:pointer}
.seg__ua{font-family:var(--mono);font-size:.7rem;color:var(--muted);display:block;margin-top:3px}
.seg__opt input:checked+.seg__face{background:var(--ink);color:#fff}
.seg__opt input:checked+.seg__face .seg__ua{color:#C9B7B0}
.seg__opt input:focus-visible+.seg__face{outline:3px solid var(--signal);outline-offset:-3px}
.seg__name{font-weight:600;font-size:.9rem}

/* JS toggle + submit share a row */
.controls-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.controls-row .field{flex:1 1 200px;margin-bottom:0}
.toggle{display:inline-flex;border:var(--stroke) solid var(--ink)}
.toggle__opt{position:relative}
.toggle__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.toggle__opt+.toggle__opt{border-left:var(--stroke) solid var(--ink)}
.toggle__face{display:block;padding:11px 16px;font-family:var(--mono);font-size:.82rem;cursor:pointer}
.toggle__opt input:checked+.toggle__face{background:var(--ink);color:#fff}
.toggle__opt input:focus-visible+.toggle__face{outline:3px solid var(--signal);outline-offset:-3px}

.analyze{
  flex:0 0 auto;border:var(--stroke) solid var(--ink);background:var(--signal);color:var(--on-signal);
  font-family:var(--sans);font-weight:700;font-size:.98rem;letter-spacing:.01em;
  padding:13px 26px;cursor:pointer;
}
.analyze:hover{background:var(--ink);border-color:var(--ink)}
.analyze:active{transform:translateY(1px)}

/* Verdict / prototype notice under the console */
.verdict{margin-top:16px;border:var(--stroke) solid var(--ink);border-left-width:8px;
  padding:13px 16px;font-family:var(--mono);font-size:.82rem;line-height:1.5;display:none}
.verdict[data-state="example"]{display:block;border-left-color:var(--ink)}
.verdict[data-state="notice"]{display:block;border-left-color:var(--signal);background:#FFF3EF}
.verdict b{font-weight:600}

/* ============================================================
   Section scaffolding
   ============================================================ */
.zone{padding:clamp(48px,6vw,84px) 0}
.zone--mist{background:var(--mist);border-top:var(--stroke) solid var(--ink)}
.zone--source{background:var(--carbon);color:#EDEEEC;border-top:var(--stroke) solid var(--ink)}
.zone--rule{border-top:var(--stroke) solid var(--ink)}

.sec-head{display:flex;align-items:baseline;gap:16px;margin:0 0 clamp(24px,3vw,40px);flex-wrap:wrap}
.sec-head__no{font-family:var(--mono);font-size:.78rem;color:var(--signal);font-weight:500;padding-top:6px}
.sec-head__text{max-width:60ch}
h2{font-weight:700;font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.02em;line-height:1.06;margin:0 0 8px}
.sec-head p{margin:0;color:var(--muted);font-size:1rem;max-width:56ch}
.zone--source .sec-head p{color:var(--carbon-muted)}
.zone--source h2{color:#fff}

/* ============================================================
   Transformation figure (the core image) — real example.com bytes
   ============================================================ */
.strip{border:var(--stroke) solid var(--ink);background:var(--paper)}
.strip__caption{border-top:var(--stroke) solid var(--ink);padding:11px 16px;
  font-family:var(--mono);font-size:.72rem;color:var(--muted);background:var(--mist)}
.strip__caption b{color:var(--ink);font-weight:600}
.strip__track{display:grid;grid-template-columns:repeat(4,1fr)}
.stage{padding:16px 15px;position:relative;min-height:230px;border-right:var(--stroke) solid var(--ink)}
.stage:last-child{border-right:0}
.stage__no{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.stage__title{font-weight:700;font-size:.98rem;margin:2px 0 4px;letter-spacing:-.01em}
.stage__kept{font-family:var(--mono);font-size:.66rem;color:var(--signal);margin-bottom:12px;display:block}
.stage__arrow{position:absolute;top:50%;right:-13px;z-index:2;width:24px;height:24px;
  background:var(--paper);border:var(--stroke) solid var(--ink);display:grid;place-items:center;transform:translateY(-50%)}
.stage:last-child .stage__arrow{display:none}
.stage__arrow svg{width:12px;height:12px}

/* Stage 1: rendered mini-browser (mimics real example.com styling honestly) */
.mini{border:1px solid var(--line);background:#eee;font-family:system-ui,Arial,sans-serif}
.mini__bar{display:flex;align-items:center;gap:5px;padding:6px 8px;background:#fff;border-bottom:1px solid var(--line)}
.mini__u{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mini__addr{margin-left:6px;font-family:var(--mono);font-size:.58rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini__page{padding:16px 14px}
.mini__h1{font-size:.98rem;font-weight:700;margin:0 0 7px;color:#111}
.mini__p{font-size:.66rem;line-height:1.45;color:#333;opacity:.85;margin:0 0 7px}
.mini__a{font-size:.66rem;color:#3355aa;text-decoration:underline}

/* Stage 2: source */
.src{font-family:var(--mono);font-size:.6rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--ink);margin:0}
.src .tag{color:var(--muted)}
.src .kept{background:var(--signal);color:var(--on-signal);padding:0 1px}

/* Stage 3: extracted text */
.txt{font-family:var(--sans)}
.txt p{margin:0 0 9px;font-size:.72rem;line-height:1.45;border-left:3px solid var(--signal);padding-left:9px}
.txt .txt__role{display:block;font-family:var(--mono);font-size:.58rem;color:var(--muted);margin-bottom:2px;border:0;padding:0}

/* Stage 4: link structure */
.graph{font-family:var(--mono);font-size:.64rem;line-height:1.5}
.graph__node{border:var(--stroke) solid var(--ink);padding:6px 8px;margin-bottom:9px;background:var(--paper);word-break:break-word}
.graph__node--self{border-style:solid}
.graph__edge{color:var(--signal);margin:0 0 9px 6px}
.graph__node--out{border-color:var(--signal)}
.graph__note{color:var(--muted);margin-top:4px}

/* ============================================================
   Diagnostics — four groups
   ============================================================ */
.diag{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.panel{border:var(--stroke) solid var(--ink);background:var(--paper);display:flex;flex-direction:column}
.panel--access{grid-column:span 5}
.panel--content{grid-column:span 7}
.panel--render{grid-column:span 7}
.panel--links{grid-column:span 5}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 15px;border-bottom:var(--stroke) solid var(--ink)}
.panel__head h3{min-width:0}
.panel__tag{margin-left:auto}
.panel__head h3{margin:0;font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.panel__tag{font-family:var(--mono);font-size:.64rem;color:var(--muted)}
.panel__body{padding:6px 15px 15px}

.kv{width:100%;border-collapse:collapse;font-size:.86rem}
.kv th,.kv td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}
.kv th{font-weight:500;color:var(--muted);width:44%;font-size:.8rem}
.kv td{font-family:var(--mono);font-size:.82rem;word-break:break-word}
.kv td .unknown{color:var(--muted);font-style:normal}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.8rem;
  border:var(--stroke) solid var(--ink);padding:2px 9px}
.pill::before{content:"";width:8px;height:8px;background:var(--ink)}
.pill--ok::before{background:var(--signal)}

.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp__col{border:1px solid var(--line);padding:12px}
.cmp__col h4{margin:0 0 8px;font-family:var(--mono);font-size:.72rem;color:var(--muted);font-weight:500}
.cmp__val{font-weight:700;font-size:1.5rem;letter-spacing:-.02em;line-height:1}
.cmp__note{font-size:.78rem;color:var(--muted);margin:5px 0 0}
.verdict-line{margin:14px 0 0;font-size:.86rem;line-height:1.5}
.verdict-line b{font-weight:700}

.linklist{list-style:none;margin:0;padding:0;font-size:.86rem}
.linklist li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.linklist li:last-child{border-bottom:0}
.linklist .lk__k{color:var(--muted)}
.linklist .lk__v{font-family:var(--mono);text-align:right;word-break:break-word}
.linklist .lk__v a{color:var(--signal)}

/* ============================================================
   Specialist tools — asymmetric modules (not a bento)
   ============================================================ */
.tools{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;border:var(--stroke) solid var(--ink)}
.toolcard{padding:clamp(20px,2.4vw,30px);text-decoration:none;color:var(--ink);
  border-right:var(--stroke) solid var(--ink);display:flex;flex-direction:column;min-height:220px;background:var(--paper)}
.toolcard:last-child{border-right:0}
.toolcard:hover{background:var(--ink);color:#fff}
.toolcard:hover .toolcard__path,.toolcard:hover .toolcard__desc{color:#C9B7B0}
.toolcard__path{font-family:var(--mono);font-size:.72rem;color:var(--signal)}
.toolcard__title{font-weight:700;font-size:1.24rem;letter-spacing:-.02em;margin:12px 0 10px;line-height:1.1}
.toolcard__desc{color:var(--muted);font-size:.9rem;margin:0}
.toolcard__go{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:.74rem;display:inline-flex;align-items:center;gap:8px}
.toolcard__go svg{width:14px;height:14px}
.toolcard:hover .toolcard__go{color:var(--signal)}
.toolcard--lead .toolcard__title{font-size:1.5rem}

/* ============================================================
   Crawl -> render -> index (source zone, inverted)
   ============================================================ */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:var(--stroke) solid var(--carbon-line)}
.flow__step{padding:22px 22px 26px;border-right:var(--stroke) solid var(--carbon-line)}
.flow__step:last-child{border-right:0}
.flow__no{font-family:var(--mono);font-size:.72rem;color:var(--signal)}
.flow__step h3{margin:8px 0 8px;font-size:1.16rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.flow__step p{margin:0;color:var(--carbon-muted);font-size:.9rem}
.limitation{margin:26px 0 0;border-left:8px solid var(--signal);background:var(--carbon-2);padding:18px 20px}
.limitation p{margin:0;font-size:.96rem;line-height:1.55;color:#EDEEEC;max-width:74ch}
.limitation b{color:#fff}

/* ============================================================
   Footer + prototype disclosure
   ============================================================ */
.footer{background:var(--carbon);color:#EDEEEC;border-top:var(--stroke) solid var(--carbon-line);padding:44px 0 40px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.footer__brand .brand__name{color:#fff}
.footer__brand p{color:var(--carbon-muted);font-size:.86rem;margin:14px 0 0;max-width:34ch}
.footer h4{font-family:var(--mono);font-size:.72rem;color:var(--carbon-muted);font-weight:500;margin:0 0 12px;letter-spacing:.04em}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 9px}
.footer a{color:#EDEEEC;text-decoration:none;font-size:.9rem}
.footer a:hover{color:var(--signal)}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--carbon-line);
  font-family:var(--mono);font-size:.72rem;color:var(--carbon-muted)}

.disclosure{background:var(--mist);border-top:var(--stroke) solid var(--ink);padding:26px 0}
.disclosure__inner{font-family:var(--mono);font-size:.76rem;line-height:1.6;color:var(--muted);max-width:88ch}
.disclosure__inner b{color:var(--ink);display:block;margin-bottom:6px;font-size:.72rem;letter-spacing:.06em}

/* ============================================================
   Responsive — recomposition, not stacking
   ============================================================ */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .hero__lede{max-width:52ch}
  .diag{gap:16px}
  .panel--access,.panel--content,.panel--render,.panel--links,.panel--compare,.panel--robots{grid-column:span 12}
  .tools{grid-template-columns:1fr 1fr}
  .toolcard{border-right:var(--stroke) solid var(--ink);border-bottom:var(--stroke) solid var(--ink)}
  .toolcard:nth-child(2){border-right:0}
  .toolcard:last-child{border-bottom:0;grid-column:span 2}
}
@media (max-width:760px){
  /* Transformation figure: vertical sequence with down-arrows */
  .strip__track{grid-template-columns:1fr}
  .stage{border-right:0;border-bottom:var(--stroke) solid var(--ink);min-height:0}
  .stage:last-child{border-bottom:0}
  .stage__arrow{top:auto;bottom:-13px;right:50%;transform:translateX(50%) rotate(90deg)}
  .flow{grid-template-columns:1fr}
  .flow__step{border-right:0;border-bottom:var(--stroke) solid var(--carbon-line)}
  .flow__step:last-child{border-bottom:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:span 2}
}
@media (max-width:560px){
  .masthead__row{min-height:54px}
  .brand__desc{display:none}
  .navlink{padding:7px 8px;font-size:.72rem}
  .hero__grid{gap:16px}
  .hero__meta{margin-top:12px}
  .console__body{padding:14px}
  .field{margin-bottom:12px}
  .seg__opt{flex:1 1 100%;min-width:0}
  .seg__opt+.seg__opt{border-left:0;border-top:var(--stroke) solid var(--ink)}
  .seg__ua{display:none}
  .seg__face{padding:11px 12px}
  .seg__opt input:focus-visible+.seg__face{outline-offset:-3px}
  .controls-row{flex-direction:column;align-items:stretch}
  .controls-row .field{flex:1 1 auto}
  .toggle{width:100%}
  .toggle__opt{flex:1}
  .toggle__face{text-align:center}
  .analyze{width:100%}
  .cmp{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .toolcard{border-right:0}
  .toolcard:nth-child(2){border-right:0}
  .toolcard:last-child{grid-column:auto}
  .footer__grid{grid-template-columns:1fr}
  .footer__brand{grid-column:auto}
}
@media (max-width:640px){
  /* On mobile the header keeps only the primary CTA; the footer carries full
     navigation. Prevents the wider production nav labels from overflowing. */
  .masthead__nav .navlink:not(.navlink--cta){display:none}
}
@media (max-width:360px){
  .brand__name{font-size:.98rem}
  h1{font-size:2rem}
  .console__body{padding:10px}
  .seg{flex-wrap:nowrap}
  .seg__opt{flex:1 1 33.333%;min-width:0}
  .seg__opt+.seg__opt{border-top:0;border-left:var(--stroke) solid var(--ink)}
  .seg__face{height:100%;padding:10px 6px;display:flex;align-items:center}
  .seg__name{font-size:.72rem;line-height:1.18;overflow-wrap:anywhere}
}

/* ---- Motion: one user-triggered reveal, disabled on request ---- */
.verdict{transition:none}
@media (prefers-reduced-motion:no-preference){
  .verdict{animation:reveal .18s ease-out}
  .analyze,.toolcard,.navlink{transition:background .12s ease,color .12s ease,border-color .12s ease}
}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================
   Production additions — analyzer note, disclosure, results,
   prose pages. Same tokens and hard-rule system as Direction 1.
   ============================================================ */

/* Analyzer note + advanced disclosure */
.console__note{margin:16px 0 0;font-family:var(--mono);font-size:.74rem;line-height:1.6;color:var(--muted)}
.console__note b{color:var(--ink);font-weight:600}
.advanced{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.advanced summary{font-family:var(--mono);font-size:.74rem;color:var(--ink);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:8px}
.advanced summary::before{content:"+";color:var(--signal);font-weight:700}
.advanced[open] summary::before{content:"–"}
.advanced summary:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.advanced__body{margin-top:10px;font-size:.86rem;color:var(--muted);line-height:1.55}
.advanced__body code{font-family:var(--mono);font-size:.9em}

/* Light-zone variants of the dark flow/limitation */
.flow--light{border-color:var(--line)}
.flow--light .flow__step{border-color:var(--line)}
.flow--light .flow__no{color:var(--signal)}
.flow--light .flow__step h3{color:var(--ink)}
.flow--light .flow__step p{color:var(--muted)}
.limitation--light{background:var(--paper);border-left-color:var(--signal)}
.limitation--light p{color:var(--ink)}
.limitation--light a{color:var(--signal)}

/* Even tool grid + static (non-link) cards */
.tools--even{grid-template-columns:repeat(4,1fr)}
.toolcard--static{cursor:default}
.toolcard--static:hover{background:var(--paper);color:var(--ink)}
.toolcard--static:hover .toolcard__path,.toolcard--static:hover .toolcard__desc{color:inherit}
.toolcard--static .toolcard__path{color:var(--signal)}
.toolcard--static .toolcard__desc{color:var(--muted)}
@media (max-width:1080px){.tools--even{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tools--even{grid-template-columns:1fr}}

/* ---- Results page ---- */
.result{padding-top:clamp(28px,4vw,44px)}
.result__empty{max-width:52ch;padding:clamp(20px,4vw,40px) 0}
.result__empty h1{margin:6px 0 12px}
.result__body{display:block}

.verdictbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:var(--stroke) solid var(--ink);border-left-width:10px;padding:16px 20px;margin:0 0 20px;background:var(--paper)}
.verdictbar__state{font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.verdictbar__meta{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
/* Verdict states stay within the two-colour system: vermilion = the loud
   signal (a failure demands attention), ink = firm-but-neutral (warn), a hairline
   = quiet (pass). No second accent hue. */
.verdictbar--pass{border-left-color:var(--line)}
.verdictbar--warn{border-left-color:var(--ink)}
.verdictbar--fail{border-left-color:var(--signal)}

.findings{display:flex;flex-direction:column;gap:8px;margin:0 0 22px}
.finding{margin:0;border:var(--stroke) solid var(--ink);border-left-width:8px;padding:11px 15px;
  font-size:.9rem;line-height:1.5;background:var(--paper)}
.finding b{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;margin-right:8px}
.finding--fail{border-left-color:var(--signal)}
.finding--warn{border-left-color:var(--ink)}
.finding--pass{border-left-color:var(--line)}

.evidence{margin:28px 0 0;border-top:var(--stroke) solid var(--ink);padding-top:22px}
.evidence__h{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
.evidence .advanced{border:var(--stroke) solid var(--ink);border-top:var(--stroke) solid var(--ink);
  padding:12px 15px;margin-bottom:10px}
.evidence__pre{font-family:var(--mono);font-size:.76rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow:auto;margin:0;background:var(--mist);padding:12px;border:1px solid var(--line)}
.evidence__links{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.76rem;max-height:340px;overflow:auto}
.evidence__links li{padding:6px 0;border-bottom:1px solid var(--line);word-break:break-word}
.result__disclaim{margin:26px 0 0;font-family:var(--mono);font-size:.74rem;color:var(--muted);line-height:1.6;max-width:80ch}
.result__disclaim a{color:var(--signal)}

/* Extended result surfaces — same ink + vermilion system, no second accent.
   These two-per-row spans are DESKTOP-ONLY. They are gated behind the same
   1080px boundary as the diagnostics stacking rule above; without the min-width
   gate they would (being later in source order) override that stacking and leave
   Source-vs-rendered/Browser-vs-crawler and robots/Access cramped side-by-side on
   phones. Below 1081px every top-level panel spans all 12 columns (full width). */
@media (min-width:1081px){
  .panel--render{grid-column:span 7}
  .panel--compare{grid-column:span 5}
  .panel--robots{grid-column:span 5}
  .panel--access{grid-column:span 7}
}
.verdictbar__again{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--signal);
  text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:1px}
.verdictbar__again:hover{background:var(--signal);color:#fff;border-bottom-color:var(--signal)}
.verdict-line--muted{color:var(--muted)}
.verdict-line--muted b{color:var(--ink)}
.kv--cmp{table-layout:fixed}
.kv--cmp thead th{font-family:var(--mono);font-size:.7rem;color:var(--muted);font-weight:500;
  text-transform:capitalize;border-bottom:var(--stroke) solid var(--ink);padding-bottom:7px}
.kv--cmp th:first-child,.kv--cmp tbody th{width:24%}
.kv--cmp td{width:38%;word-break:break-all}
/* Separate the two identity columns so adjacent values (e.g. equal Final URLs)
   never read as one concatenated string. A right-side divider on the first
   value column leaves the .kv--diff signal border on the second untouched. */
.kv--cmp tbody td:first-of-type,.kv--cmp thead th:nth-child(2){padding-right:14px;border-right:1px solid var(--line)}
.kv--cmp tbody td+td,.kv--cmp thead th:nth-child(3){padding-left:14px}
.result .kv td{overflow-wrap:anywhere}
.result .evidence__pre{overflow-wrap:anywhere}
.kv--diff th,.kv--diff td{border-left:3px solid var(--signal);padding-left:8px}
.kv--diff th{color:var(--ink)}
.pill--robots::before{background:var(--muted)}
.pill--allowed::before{background:var(--signal)}
.pill--blocked{border-color:var(--signal)}
.pill--blocked::before{background:var(--signal);box-shadow:inset 0 0 0 2px var(--paper)}
.pill--unknown::before{background:var(--line)}
.evidence__shot{max-width:100%;height:auto;border:var(--stroke) solid var(--ink);display:block}
.evidence__trunc{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:0 0 8px}
.evidence__links .add{color:var(--signal);font-weight:700}
.evidence__links .rem{color:var(--muted);font-weight:700}
.limitation--inline{margin:24px 0 0;background:var(--paper);border-left:8px solid var(--signal)}
.limitation--inline p{color:var(--ink);max-width:80ch}
.limitation--inline b{color:var(--ink)}
.result__prefill{max-width:640px}
.result__again{margin:30px 0 0;border-top:var(--stroke) solid var(--ink);padding-top:22px;max-width:640px}
.lk__ref{font-family:var(--mono)}

/* ---- Prose pages (guide / about / privacy) ---- */
.prose-zone{padding:clamp(30px,5vw,64px) 0}
.prose{max-width:70ch}
.prose h1{font-size:clamp(2rem,3.6vw,2.8rem);letter-spacing:-.025em;line-height:1.03;margin:6px 0 18px}
.prose h2{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em;margin:34px 0 10px}
.prose__lead{font-size:1.12rem;color:var(--muted);line-height:1.6;margin:0 0 8px}
.prose p{margin:0 0 14px;line-height:1.65}
.prose a{color:var(--signal);text-underline-offset:2px}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--mist);padding:1px 4px}
.prose__list{margin:0 0 16px;padding-left:20px;line-height:1.65}
.prose__list li{margin:0 0 7px}
.prose__cta{margin:26px 0 0}
.prose__cta .navlink--cta{display:inline-block}