/* ============================================================
   PICTUREMATTERS V11 — "HELIX"
   Futuristic HUD design system. Dark-first, light optional.
   READABILITY FLOOR: body 16px; nothing below 12px.
   Fonts are self-hosted via assets/fonts.css (OFL-licensed).
   ============================================================ */
@import url('fonts.css');

:root{
  --bg:#04070d; --bg2:#070b14;
  --panel:rgba(13,20,34,.78); --panel2:rgba(19,28,46,.72); --raise:rgba(27,38,60,.6);
  --ink:#e8eefc; --ink2:#aebcd8; --mut:#7c8bab; --faint:#5a6a8a;
  --line:rgba(120,150,210,.16); --line2:rgba(120,150,210,.3);
  --cy:#22d3ee; --vi:#8b5cf6; --gr:#34d399; --am:#fbbf24; --rd:#fb7185;
  --grid:rgba(99,135,220,.07);
  --glow:0 0 24px rgba(34,211,238,.14);
  --sh:0 18px 50px rgba(0,0,0,.5);
  --r:16px; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --disp:'Space Grotesk','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
html[data-theme=light]{
  --bg:#f2f5fb; --bg2:#e9eef8;
  --panel:rgba(255,255,255,.86); --panel2:rgba(255,255,255,.72); --raise:rgba(240,244,252,.9);
  --ink:#0d1830; --ink2:#3c4a66; --mut:#5c6b8c; --faint:#8d9ab8;
  --line:rgba(40,70,140,.14); --line2:rgba(40,70,140,.26);
  --grid:rgba(40,80,180,.06);
  --glow:0 0 24px rgba(34,211,238,.1);
  --sh:0 18px 50px rgba(30,50,110,.1);
}
*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--cy);color:#031018;font:700 14px var(--body);padding:10px 16px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
/* The hidden attribute must always win over component display rules
   (.sel-file{display:flex} etc. would otherwise override it). */
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:hidden}
/* Fixed off-canvas drawers escape body overflow-x:hidden on mobile;
   clip them at the viewport so they can't create horizontal scroll. */
html:has(.hist-drawer){overflow-x:clip}
body{max-width:100vw}
body{
  margin:0;min-height:100vh;color:var(--ink2);background:var(--bg);
  font:16px/1.65 var(--body);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s;
}
/* Futuristic atmosphere: dot grid + twin aurora fields */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1000px 500px at 12% -10%,rgba(139,92,246,.16),transparent 60%),
    radial-gradient(900px 500px at 95% 5%,rgba(34,211,238,.13),transparent 55%),
    radial-gradient(700px 600px at 50% 115%,rgba(52,211,153,.08),transparent 60%),
    repeating-linear-gradient(0deg,transparent 0 39px,var(--grid) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,var(--grid) 39px 40px);}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:var(--cy)}
code,pre{font-family:var(--mono)}
.wrap{width:min(1200px,calc(100% - 40px));margin:0 auto}
::selection{background:rgba(34,211,238,.3)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line)}
.nav-in{width:min(1200px,calc(100% - 40px));margin:auto;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:700 20px var(--disp);letter-spacing:-.02em}
.brand b{background:linear-gradient(90deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.logo-mark{width:40px;height:40px;flex:none}
.logo-mark svg{width:100%;height:100%;overflow:visible}
.logo-shield{fill:rgba(34,211,238,.07);stroke:var(--cy);stroke-width:2.4;stroke-linejoin:round}
.logo-ring{fill:none;stroke:var(--ink);stroke-width:2.4}
.logo-pupil{fill:var(--vi)}
.logo-blades{fill:none;stroke:var(--cy);stroke-width:2;stroke-linecap:round}
.logo-arc{fill:none;stroke:var(--vi);stroke-width:2;stroke-linecap:round}
.logo-dot{fill:var(--am)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--mut);text-decoration:none;font-weight:600;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.nav-cta{color:#031018;font-size:13px}
.ver-chip{font:600 12px var(--mono);color:var(--cy);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;background:rgba(34,211,238,.06)}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;font-size:17px;display:grid;place-items:center;transition:.2s}
.icon-btn:hover{border-color:var(--cy);box-shadow:var(--glow)}

/* ---------- Buttons & pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;text-decoration:none;
  font:700 15px var(--disp);letter-spacing:.01em;border-radius:14px;padding:14px 22px;transition:.2s}
.btn-primary{color:#031018;background:linear-gradient(95deg,var(--cy),#7dd3fc 55%,var(--vi));box-shadow:0 10px 34px rgba(34,211,238,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(34,211,238,.4)}
.btn-primary:disabled{opacity:.5;cursor:wait;transform:none}
.btn-ghost{color:var(--ink);border:1px solid var(--line2);background:var(--panel)}
.btn-ghost:hover{border-color:var(--cy);box-shadow:var(--glow)}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:11px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line2);background:var(--panel);font:600 12.5px var(--mono);color:var(--ink2);letter-spacing:.06em}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gr);box-shadow:0 0 10px var(--gr);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.eyebrow{font:700 12px var(--mono);letter-spacing:.22em;color:var(--cy);text-transform:uppercase}
.grad-text{background:linear-gradient(92deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Hero ---------- */
.hero{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:72px 0 48px;display:grid;grid-template-columns:1.02fr 1.1fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(42px,5.2vw,68px);line-height:1.02;font-weight:700;margin:20px 0 18px}
.hero h1 .dim{color:var(--mut);font-weight:600}
.hero-sub{font-size:17px;line-height:1.75;color:var(--ink2);max-width:560px}
.hero-sub strong{color:var(--ink);font-weight:600}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.feat{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.feat i{font-style:normal;font-size:17px;line-height:1.3}
.feat b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.feat span{display:block;color:var(--mut);font-size:12.5px;line-height:1.5}
.stat-row{display:flex;gap:34px;margin-top:28px;flex-wrap:wrap}
.stat b{display:block;font:700 30px var(--disp);color:var(--ink);letter-spacing:-.02em}
.stat span{font:600 12px var(--mono);color:var(--mut);letter-spacing:.08em;text-transform:uppercase}

/* ---------- Console (upload + compare + specimen) ---------- */
.console{border:1px solid var(--line2);border-radius:22px;background:var(--panel);box-shadow:var(--sh),var(--glow);overflow:hidden;position:relative}
.console::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cy),var(--vi),transparent)}
.console-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.console-head .t{font:600 13px var(--mono);letter-spacing:.12em;color:var(--ink)}
.console-head .t i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gr);box-shadow:0 0 12px var(--gr);margin-right:9px}
.console-head .s{font:600 12px var(--mono);color:var(--gr);letter-spacing:.14em}
.console-body{padding:16px}
.tabs{display:flex;gap:7px;margin-bottom:14px}
.tab{flex:1;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--mut);
  font:600 13.5px var(--disp);cursor:pointer;transition:.2s;text-align:center}
.tab:hover{color:var(--ink)}
.tab.active{color:#031018;background:linear-gradient(95deg,var(--cy),var(--vi));border-color:transparent;font-weight:700}
.pane{display:none}.pane.active{display:block;animation:rise .35s ease}

.dropzone{position:relative;display:block;padding:42px 24px 30px;border:1.5px dashed var(--line2);border-radius:18px;cursor:pointer;
  text-align:center;background:linear-gradient(180deg,rgba(34,211,238,.045),rgba(139,92,246,.05));transition:.25s;overflow:hidden}
.dropzone::after{content:"";position:absolute;left:0;top:0;bottom:0;width:56px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.09),transparent);animation:scanline 4.5s ease-in-out infinite}
@keyframes scanline{0%{transform:translateX(-70px)}55%,100%{transform:translateX(calc(100vw))}}
.dropzone:hover,.dropzone.drag{border-color:var(--cy);box-shadow:var(--glow);transform:translateY(-2px)}
.dropzone input{display:none}
.dz-art{width:86px;height:86px;margin:0 auto 16px;border-radius:24px;display:grid;place-items:center;position:relative;
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(139,92,246,.2));border:1px solid var(--line2);animation:hover 5s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-8px)}}
.dz-art svg{width:42px;height:42px;color:var(--cy)}
.dz-orbit{position:absolute;inset:-9px;border:1px solid rgba(34,211,238,.3);border-radius:28px;animation:spin 12s linear infinite}
.dz-orbit.o2{inset:-18px;border-color:rgba(139,92,246,.25);animation-duration:19s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.dz-art svg{position:relative;z-index:1}
.dropzone h3{font-size:19px;margin-bottom:6px}
.dropzone p{color:var(--mut);font-size:14px}
.dropzone p strong{color:var(--cy);font-weight:600}
.fmt-row{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.fmt-row span{font:600 12px var(--mono);color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:6px 10px;letter-spacing:.06em}

.sel-file{display:flex;align-items:center;gap:13px;margin-top:12px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.sel-thumb{width:66px;height:56px;flex:none;border-radius:10px;overflow:hidden;background:var(--bg2);display:grid;place-items:center;border:1px solid var(--line)}
.sel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-fallback{font:700 12px var(--mono);color:var(--cy);letter-spacing:.08em}
.sel-copy{flex:1;min-width:0}
.sel-copy small{display:block;font:700 12px var(--mono);letter-spacing:.14em;color:var(--cy)}
.sel-copy b{display:block;color:var(--ink);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sel-copy span{display:block;color:var(--mut);font-size:12.5px}
.rm-btn{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--mut);cursor:pointer;font-size:15px}
.rm-btn:hover{color:var(--rd);border-color:var(--rd)}

.preflight{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pf-cell{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.pf-cell small{display:block;font:700 12px var(--mono);letter-spacing:.12em;color:var(--mut)}
.pf-cell b{display:block;margin-top:3px;color:var(--ink);font-size:13.5px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-cell.wide{grid-column:1/-1}

/* Entropy mini-chart in preflight */
.entropy-mini{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.entropy-mini .lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.entropy-mini .lbl small{font:700 12px var(--mono);letter-spacing:.12em;color:var(--mut)}
.entropy-mini .lbl b{font:600 12.5px var(--mono);color:var(--cy)}
.entropy-bars{display:flex;align-items:flex-end;gap:2px;height:54px}
.entropy-bars span{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--cy),rgba(139,92,246,.75))}

.btn-row{display:flex;gap:9px;margin-top:14px}
.btn-row .btn{flex:1}

.progress{margin-top:12px}
.progress-top{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);margin-bottom:6px}
.progress-top b{color:var(--ink)}
.progress-track{height:7px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.progress-track span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cy),var(--vi));transition:width .15s}
.err-box{margin-top:12px;padding:11px 14px;border-radius:12px;border:1px solid rgba(251,113,133,.35);background:rgba(251,113,133,.08);color:var(--rd);font-size:14px}
.hint{display:flex;align-items:center;gap:8px;margin-top:13px;color:var(--mut);font-size:12.5px}
.hint b{color:var(--gr);font-weight:600}

/* Compare pane */
.cmp-zones{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.cmp-zone{padding:22px 14px;border:1.5px dashed var(--line2);border-radius:16px;text-align:center;cursor:pointer;background:rgba(34,211,238,.035);transition:.2s;min-height:170px;display:flex;flex-direction:column;justify-content:center}
.cmp-zone:hover{border-color:var(--cy)}
.cmp-zone.filled{border-style:solid;border-color:var(--line);background:var(--panel2)}
.cmp-zone img{max-width:100%;max-height:120px;border-radius:9px;margin:0 auto 8px;display:block}
.cmp-zone b{color:var(--ink);font-size:13.5px;word-break:break-all}
.cmp-zone span{color:var(--mut);font-size:12px}
.cmp-vs{font:700 15px var(--mono);color:var(--vi)}
.cmp-note{margin-top:12px;color:var(--mut);font-size:13px;line-height:1.7}

/* Specimen pane */
.spec-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.spec-controls label{display:block}
.spec-controls span{display:block;font:700 12px var(--mono);letter-spacing:.12em;color:var(--mut);margin-bottom:5px}
.spec-controls select,.spec-controls input{width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--line2);
  background:var(--bg2);color:var(--ink);font:500 14px var(--body)}
.spec-controls select:focus,.spec-controls input:focus{outline:none;border-color:var(--cy);box-shadow:var(--glow)}
.spec-preview{display:flex;align-items:center;gap:13px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);margin-bottom:12px}
.spec-preview img{width:66px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.spec-note{color:var(--mut);font-size:13px;line-height:1.7;margin-bottom:12px}

/* ---------- Ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--panel)}
.ticker-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.ticker-row{display:flex;align-items:center;gap:22px;padding:13px 22px;white-space:nowrap}
.ticker-row span{font:600 12.5px var(--mono);letter-spacing:.14em;color:var(--mut)}
.ticker-row i{width:5px;height:5px;border-radius:50%;background:var(--vi)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.sec{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:84px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin-bottom:30px}
.sec-head h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.025em;margin-top:10px}
.sec-head p{max-width:470px;color:var(--mut);font-size:15px;line-height:1.75}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.layer{position:relative;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);transition:.25s;overflow:hidden}
.layer::after{content:"";position:absolute;right:-56px;bottom:-56px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.1),transparent 70%);opacity:0;transition:.3s}
.layer:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--sh)}
.layer:hover::after{opacity:1}
.layer .num{position:absolute;top:18px;right:20px;font:600 12px var(--mono);color:var(--faint)}
.layer .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(139,92,246,.16));border:1px solid var(--line);margin-bottom:16px}
.layer h3{font-size:17px;margin-bottom:6px}
.layer p{color:var(--mut);font-size:14px;line-height:1.65}
.layer .tag{display:block;margin-top:16px;font:700 12px var(--mono);letter-spacing:.16em;color:var(--faint)}

.method{border-top:1px solid var(--line)}
.method-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.method h2{font-size:clamp(34px,4vw,52px);line-height:1.05;margin-top:10px}
.steps{display:grid;gap:10px}
.step{display:flex;gap:15px;padding:17px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:.2s}
.step:hover{transform:translateX(6px);border-color:var(--line2)}
.step b{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.2));color:var(--cy);font:600 13px var(--mono)}
.step h3{font-size:15.5px;margin-bottom:3px}
.step p{color:var(--mut);font-size:13.5px;line-height:1.65}

.faq-list{display:grid;gap:10px;max-width:860px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 19px;cursor:pointer;
  list-style:none;color:var(--ink);font:600 15.5px var(--disp)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--cy)}
.faq-x{color:var(--cy);font-size:19px;font-weight:600;transition:transform .2s}
.faq-item[open] .faq-x{transform:rotate(45deg)}
.faq-item p{padding:0 19px 17px;color:var(--mut);font-size:14.5px;line-height:1.75}

.privacy-band{width:min(1200px,calc(100% - 40px));margin:0 auto 84px;padding:30px 34px;display:grid;grid-template-columns:.55fr 1.45fr;gap:44px;
  border:1px solid rgba(52,211,153,.28);border-radius:20px;background:linear-gradient(120deg,rgba(52,211,153,.07),rgba(34,211,238,.05))}
.privacy-band .pb{font:700 12px var(--mono);letter-spacing:.2em;color:var(--gr)}
.privacy-band h2{font-size:25px;margin-bottom:7px}
.privacy-band p{color:var(--mut);font-size:14.5px;line-height:1.75}
footer{width:min(1200px,calc(100% - 40px));margin:auto;padding:26px 0 34px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--mut);font-size:13px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-vis{opacity:1;transform:none}

/* ---------- Report page ---------- */
.rp{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:54px 0 80px}
.rp-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:18px}
.rp-hero h1{font-size:clamp(38px,4.6vw,58px);line-height:1.03;margin:12px 0 14px}
.rp-hero h1 em{font-style:normal;color:var(--mut);font-weight:600}
.rp-hero p{color:var(--mut);font-size:15px;max-width:620px;line-height:1.75}
.rp-hero p b{color:var(--ink)}
.gauge{width:128px;height:128px;flex:none;position:relative;display:grid;place-items:center}
.gauge svg{position:absolute;inset:0;transform:rotate(-90deg)}
.gauge .trk{fill:none;stroke:var(--line2);stroke-width:6.5}
.gauge .val{fill:none;stroke:url(#gaugeGrad);stroke-width:6.5;stroke-linecap:round;stroke-dasharray:308;stroke-dashoffset:308;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.gauge .g-in{position:relative;text-align:center;max-width:104px;padding:0 2px}
.gauge .g-in span{display:block;font:700 12px var(--mono);letter-spacing:.07em;color:var(--mut);white-space:nowrap}
.gauge .g-in strong{display:block;font:700 30px var(--disp);color:var(--ink);line-height:1.15;margin-top:1px}
.gauge .g-in small{font:600 12px var(--mono);color:var(--mut)}

.verdict{display:grid;grid-template-columns:1.35fr .9fr;gap:28px;align-items:center;margin-bottom:14px;padding:22px 26px;border-radius:18px;
  border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden;box-shadow:var(--sh)}
.verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mut)}
.verdict.warn{border-color:rgba(251,191,36,.35)} .verdict.warn::before{background:var(--am);box-shadow:0 0 18px var(--am)}
.verdict.good{border-color:rgba(52,211,153,.35)} .verdict.good::before{background:var(--gr);box-shadow:0 0 18px var(--gr)}
.v-label{font:700 12px var(--mono);letter-spacing:.2em;color:var(--mut)}
.verdict h2{font-size:24px;margin:7px 0 8px}
.verdict p{color:var(--mut);font-size:14px;line-height:1.7;max-width:640px}
.v-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.v-chips span{padding:7px 12px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);font:500 12.5px var(--mono);color:var(--ink2)}

.file-card{display:flex;align-items:center;gap:15px;padding:13px;margin-bottom:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.file-card .fc-thumb{width:92px;height:72px;flex:none;border-radius:11px;overflow:hidden;background:var(--bg2);display:grid;place-items:center;border:1px solid var(--line)}
.file-card .fc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.file-card h3{font-size:15px;margin:5px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-card p{color:var(--mut);font-size:13px}
.fc-hash{margin-left:auto;text-align:right;flex:none}
.fc-hash span{display:block;font:700 12px var(--mono);letter-spacing:.14em;color:var(--mut)}
.fc-hash b{display:block;font:500 12px var(--mono);color:var(--ink2);margin-top:3px}

.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--sh2,none)}
.card.wide{grid-column:1/-1}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.card-label{font:700 12px var(--mono);letter-spacing:.18em;color:var(--mut)}
.card-idx{font:600 12px var(--mono);color:var(--faint)}
.card p{color:var(--mut);font-size:14px;line-height:1.72;margin-top:12px}
.card p b{color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;font:600 13.5px var(--disp)}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.status.good{background:rgba(52,211,153,.12);color:var(--gr)}
.status.warn{background:rgba(251,191,36,.1);color:var(--am)}
.status.neutral{background:var(--panel2);color:var(--ink2);border:1px solid var(--line)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.tags span{padding:6px 12px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);color:var(--ink2);font-size:13px}
.kv-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.kv-grid>div{padding:12px 8px 12px 0;border-bottom:1px solid var(--line)}
.kv-grid small{display:block;font:700 12px var(--mono);letter-spacing:.12em;color:var(--mut)}
.kv-grid b{display:block;margin-top:3px;color:var(--ink);font-size:14px;font-weight:600;word-break:break-word}
.mono-line{font:500 13px var(--mono);color:var(--ink2);word-break:break-all;margin-top:12px!important}
.copy-btn{margin-top:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);border-radius:9px;padding:7px 13px;cursor:pointer;font:600 12px var(--mono);transition:.2s}
.copy-btn:hover{color:var(--cy);border-color:var(--cy)}
.copy-btn.done{color:var(--gr);border-color:var(--gr)}

/* dHash grid */
.dhash-wrap{margin-top:16px}
.dhash-wrap small{display:block;font:700 12px var(--mono);letter-spacing:.14em;color:var(--mut);margin-bottom:9px}
.dhash-grid{display:grid;grid-template-columns:repeat(8,17px);gap:3px;width:max-content;margin-bottom:9px}
.dhash-grid span{width:17px;height:17px;border-radius:4px;background:var(--panel2);border:1px solid var(--line)}
.dhash-grid span.on{background:linear-gradient(135deg,var(--cy),var(--vi));border-color:transparent;box-shadow:0 0 8px rgba(34,211,238,.4)}
.dhash-wrap code{font:500 13px var(--mono);color:var(--mut)}

/* Entropy chart */
.entropy-head{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:15px}
.entropy-head small{display:block;font:700 12px var(--mono);letter-spacing:.14em;color:var(--mut)}
.entropy-head b{display:block;margin-top:4px;color:var(--ink);font-size:15px;font-weight:600}
.entropy-chart{display:flex;align-items:flex-end;gap:2px;height:130px;padding:12px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(34,211,238,.04),transparent)}
.entropy-chart span{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--cy),rgba(139,92,246,.8))}

/* Byte signature */
.bytesig{display:grid;gap:8px;margin-top:14px}
.bs-row{display:grid;grid-template-columns:52px 1fr 56px;align-items:center;gap:11px}
.bs-row code{font:500 13px var(--mono);color:var(--ink2)}
.bs-bar{height:10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.bs-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cy),var(--vi))}
.bs-row b{font:500 13px var(--mono);color:var(--ink);text-align:right}

/* Palette — padding-bottom leaves room for hex tooltips inside the clipped box */
.palette{display:flex;height:78px;padding-bottom:26px;border-radius:13px;overflow:hidden;border:1px solid var(--line);margin-top:14px}
.palette span{flex:1;position:relative}
.palette span::after{content:attr(data-hex);position:absolute;left:0;right:0;bottom:4px;text-align:center;font:500 12px var(--mono);color:#fff;mix-blend-mode:difference;opacity:0;transition:.2s;pointer-events:none}
.palette:hover span::after{opacity:1}

/* Strings */
.str-list{display:grid;gap:7px;margin-top:13px}
.str-list code{display:block;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);
  font:500 13px var(--mono);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.str-list code i{font-style:normal;color:var(--faint);margin-right:10px}

.loc-pin{font-size:26px;color:var(--gr);margin-bottom:9px}
.loc-card h2{font-size:23px;margin-bottom:4px}
.loc-card p{margin-bottom:11px!important}
.loc-card code{display:inline-block;padding:8px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;font:500 13px var(--mono);color:var(--ink2)}
.empty-state>i{display:block;font-style:normal;font-size:26px;color:var(--faint);margin-bottom:9px}
.empty-state h3{font-size:16px;margin-bottom:4px}
.empty-state p{margin:0!important;font-size:14px}
.egrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0 0}
.egrid>div{padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}
.egrid small{display:block;font:700 12px var(--mono);letter-spacing:.14em;color:var(--mut)}
.egrid b{display:block;margin-top:4px;color:var(--ink);font-size:14.5px;font-weight:600}
.meter{height:6px;margin-top:8px;border-radius:99px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--vi));border-radius:99px}
.note-band{display:flex;gap:11px;margin:15px 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.06);
  color:var(--ink2);font-size:13.5px;line-height:1.7}
.note-band>span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(251,191,36,.14);color:var(--am);font-weight:700}
.note-band p{margin:0}
.rp-cta{display:inline-flex;margin-top:4px}

/* Journey + structure map (V12) */
.journey-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.fn-chip{min-width:0;font:500 12.5px var(--mono);color:var(--mut);border:1px solid var(--line);border-radius:9px;padding:7px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fn-chip b{color:var(--ink2);font-weight:600}
.jline{display:grid;gap:10px;margin-top:16px}
.jstep{display:flex;gap:13px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);min-width:0}
.jico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(139,92,246,.18));color:var(--cy);font-size:15px}
.jstep h4{font-size:14.5px}
.jstep p{color:var(--mut);font-size:13px;line-height:1.6;margin-top:2px}
.struct-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:14px}
.seg{border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:9px 11px;min-width:0}
.seg b{display:block;font:600 12px var(--mono);color:var(--cy)}
.seg i{display:block;font:500 12px var(--mono);font-style:normal;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg.bad{border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.07)}
.seg.bad b{color:var(--rd)}
/* Dropzone “file loaded” state (was missing → looked broken) */
.dropzone.muted{opacity:.45;pointer-events:none}
/* Flex-overflow guards */
.file-card>div{min-width:0}
.fc-hash b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
@media(max-width:1020px){
  .gauge{margin-top:14px}
}

/* ---------- History drawer ---------- */
.hist-drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);z-index:80;background:var(--bg2);border-left:1px solid var(--line2);
  box-shadow:-30px 0 70px rgba(0,0,0,.5);transform:translateX(105%);transition:transform .3s ease;display:flex;flex-direction:column;
  visibility:hidden}
.hist-drawer.open{transform:none;visibility:visible}
.hist-drawer.open{transform:none}
.hist-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.hist-head b{font:700 15px var(--disp);color:var(--ink)}
.hist-head small{display:block;font:500 12px var(--mono);color:var(--mut);margin-top:2px}
.hist-list{flex:1;overflow-y:auto;padding:14px;display:grid;gap:9px;align-content:start}
.hist-item{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel);text-decoration:none;transition:.2s}
.hist-item:hover{border-color:var(--cy);transform:translateX(-3px)}
.hist-item b{display:block;color:var(--ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item span{display:block;color:var(--mut);font-size:12px;margin-top:3px;font-family:var(--mono)}
.hist-clear{margin:12px 14px;border:1px solid var(--line2);background:transparent;color:var(--mut);border-radius:11px;padding:10px;cursor:pointer;font:600 13px var(--body)}
.hist-clear:hover{color:var(--rd);border-color:var(--rd)}
.hist-empty{color:var(--mut);font-size:13.5px;text-align:center;padding:30px 10px;line-height:1.7}
.scrim{position:fixed;inset:0;background:rgba(2,5,12,.6);backdrop-filter:blur(3px);z-index:70;opacity:0;pointer-events:none;transition:.25s}
.scrim.on{opacity:1;pointer-events:auto}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:52px}
  .layers{grid-template-columns:1fr 1fr}
  .method-grid{grid-template-columns:1fr;gap:36px}
  .verdict{grid-template-columns:1fr}.v-chips{justify-content:flex-start}
  .rp-hero{flex-direction:column;align-items:flex-start}.gauge{align-self:flex-end;margin-top:-30px}
  .nav-links{gap:12px}
  .nav-links a{display:none}.nav-links a.nav-cta{display:inline-flex}
}
@media(max-width:680px){
  .wrap,.nav-in,.hero,.sec,.privacy-band,footer,.rp{width:calc(100% - 30px)}
  .nav-links a{display:none}.nav-links a.nav-cta{display:inline-flex}.ver-chip{display:none}
  .nav-in{height:auto;min-height:64px;padding:8px 0;flex-wrap:wrap;row-gap:2px}
  .brand{font-size:17px}.logo-mark{width:32px;height:32px}
  .hero{padding:44px 0 36px}.hero h1{font-size:40px}
  .feat-grid{grid-template-columns:1fr}
  .layers{grid-template-columns:1fr}
  .sec{padding:60px 0}
  .sec-head{display:block}.sec-head p{margin-top:12px}
  .preflight{grid-template-columns:1fr 1fr}
  .cmp-zones{grid-template-columns:1fr}.cmp-vs{text-align:center;padding:4px 0}
  .spec-controls{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr}.card.wide{grid-column:auto}
  .egrid{grid-template-columns:1fr 1fr}
  .entropy-head{grid-template-columns:1fr 1fr}
  .fc-hash{display:none}
  .kv-grid{grid-template-columns:1fr 1fr}
  .privacy-band{grid-template-columns:1fr;gap:12px;padding:24px}
  .stat-row{gap:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   CONTENT PAGES (tools, guides, trust, 404) — V13 architecture
   Reuses the Helix tokens; adds article + component styles.
   ============================================================ */
.page{width:min(1200px,calc(100% - 40px));margin:0 auto;padding-bottom:70px}

/* Tool/guide hero */
.tool-hero{padding:58px 0 8px;max-width:860px}
.tool-hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.05;margin:18px 0 16px}
.lead{font-size:17px;line-height:1.75;color:var(--ink2);max-width:720px}
.lead b{color:var(--ink)}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* Breadcrumbs */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font:600 13px var(--body);margin-bottom:16px}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--cy)}
.crumbs [aria-current]{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}

/* Card grid shared by tools/guides/related */
.tool-hero-cards{margin:36px 0 10px}
.pm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.pm-card{display:flex;flex-direction:column;gap:7px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-decoration:none;transition:.22s;min-width:0}
.pm-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--sh)}
.pm-card b{color:var(--ink);font:600 15.5px var(--disp);letter-spacing:-.01em}
.pm-card>span:last-child{color:var(--mut);font-size:13.5px;line-height:1.6}
.pm-card-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:17px;color:var(--cy);
  background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(139,92,246,.16));border:1px solid var(--line);margin-bottom:4px}
.pm-ico-guide{color:var(--vi)}

/* Article body */
article{max-width:860px}
.art-sec{margin:44px 0}
.art-sec h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:16px;letter-spacing:-.02em}
.art-sec h3{font-size:18px;margin:22px 0 8px}
.art-sec p{color:var(--ink2);font-size:15.5px;line-height:1.8;margin:0 0 14px}
.art-sec p b{color:var(--ink)}
.art-sec ul,.art-sec ol{margin:0 0 14px;padding-left:22px;display:grid;gap:9px}
.art-sec li{color:var(--ink2);font-size:15px;line-height:1.7}
.art-sec li b{color:var(--ink)}
.art-sec a{color:var(--cy)}
.art-sec code{font:500 13px var(--mono);color:var(--cy);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 7px}

/* Definition grid (metadata families, dates, retention) */
.def-list{display:grid;gap:10px;margin:6px 0 14px}
.def-list>div{padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.def-list b{display:block;color:var(--ink);font:600 15px var(--disp);margin-bottom:5px}
.def-list p{color:var(--mut)!important;font-size:14px!important;line-height:1.65;margin:0!important}

/* Data tables (tool chooser, research data) */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:6px 0 14px}
.tbl{width:100%;border-collapse:collapse;min-width:520px}
.tbl th{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink2);font-size:14.5px;line-height:1.6}
.tbl tr:last-child td{border-bottom:0}
.tbl td a{color:var(--cy);text-decoration:none}
.tbl td a:hover{text-decoration:underline}
.tbl td b{color:var(--ink)}

/* CTA band ("Use the tool") */
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;margin:52px 0 8px;padding:28px 30px;
  border:1px solid rgba(34,211,238,.3);border-radius:20px;background:linear-gradient(120deg,rgba(34,211,238,.08),rgba(139,92,246,.08));box-shadow:var(--glow)}
.cta-band h2{font-size:24px;margin-bottom:6px}
.cta-band p{color:var(--mut);font-size:14.5px;line-height:1.7;max-width:640px}
.cta-band .btn{flex:none}

/* Article byline */
.art-meta{display:flex;align-items:center;gap:12px;padding:46px 0 4px}
.art-meta b{display:block;color:var(--ink);font-size:14px}
.art-meta span{display:block;color:var(--mut);font-size:13px}
.art-meta time{color:var(--mut)}
.pm-ava{width:42px;height:42px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  line-height:1;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,var(--cy),var(--vi));color:#031018;font:700 14px var(--disp);letter-spacing:.04em}

/* Site footer (all pages) */
.site-footer{width:min(1200px,calc(100% - 40px));margin:auto;padding:44px 0 26px;border-top:1px solid var(--line)}
.sf-in{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:34px}
.sf-brand{display:flex;gap:13px;align-items:flex-start}
.sf-brand>div{min-width:0}
.sf-brand b{display:block;color:var(--ink);font:700 17px var(--disp);letter-spacing:-.02em}
.sf-brand b b:last-child{background:linear-gradient(90deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent}
.sf-brand span{display:block;color:var(--mut);font-size:13px;line-height:1.65;margin:7px 0}
.sf-brand a{color:var(--cy);font-size:13.5px;text-decoration:none}
.sf-col b{display:block;color:var(--ink);font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sf-col a{color:var(--mut);text-decoration:none;font-size:13.5px;line-height:1.5}
.sf-col a:hover{color:var(--cy)}
.sf-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}

/* Homepage extras */
.ticker-row a{color:var(--mut);text-decoration:none;font:600 12.5px var(--mono);letter-spacing:.14em}
.ticker-row a:hover{color:var(--cy)}
.layer .tag{text-decoration:none}
.layer a.tag:hover{color:var(--cy)}
.step{text-decoration:none;color:inherit}
.rp-related{margin-top:16px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--mut);font-size:13.5px;line-height:1.7}
.rp-related a{color:var(--cy);text-decoration:none}
.rp-related a:hover{text-decoration:underline}

@media(max-width:1020px){
  .pm-cards{grid-template-columns:1fr 1fr}
  .sf-in{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .page{width:calc(100% - 30px)}
  .tool-hero{padding-top:40px}
  .pm-cards{grid-template-columns:1fr}
  .sf-in{grid-template-columns:1fr;gap:26px}
  .cta-band{padding:22px}
  .art-sec{margin:36px 0}
}