@import url("/fonts.css");

/* ============================================================
   BLACKBAR — declassified document, dark+orange
   --mark (orange) = detected, not destroyed
   --burn (black)  = destroyed. The only pure black on the page.
   ============================================================ */
:root{
  --bg:#0b0c0e; --panel:#131519; --panel-2:#0e1013;
  --rule:#2a2f37; --rule-soft:#20242b;
  --ink:#e9ebee; --ink-2:#9aa1ab; --ink-3:#6b7280;
  --mark:#ff6b35; --mark-soft:#ffb199; --mark-ink:#1a0e08;
  --burn:#000000; --bar-edge:#3a3f48;
  --rail:120px; --pad:24px; --maxw:1440px;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --disp:"Archivo","Arial Narrow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
::selection{background:var(--mark);color:var(--mark-ink)}

/* mono data voice */
.data{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.data-lg{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-2)}

/* focus */
:focus{outline:none}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

/* ---------- classification banners ---------- */
.banner{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);background:var(--panel-2);
  border-block:1px solid var(--rule);
  padding:8px var(--pad);display:flex;justify-content:center;gap:2.5em;flex-wrap:wrap;
}
.banner.top{position:sticky;top:0;z-index:50;border-top:0;backdrop-filter:blur(8px);background:rgba(11,12,14,.85)}
.banner b{color:var(--mark);font-weight:500}

/* ---------- document grid ---------- */
.page{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec{
  display:grid;
  grid-template-columns:[rail]var(--rail) [c]repeat(12,minmax(0,1fr));
  column-gap:20px;position:relative;
  border-top:1px solid var(--rule);
}
/* margin rule that runs down the page */
.sec::after{content:"";position:absolute;left:calc(var(--rail) + 10px);top:0;bottom:0;width:1px;background:var(--rule-soft)}
.note{grid-column:rail;position:sticky;top:96px;align-self:start;padding-top:var(--sp,40px);
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.note .fig{color:var(--mark);display:block;margin-bottom:8px}
.body{grid-column:c 1 / span 12;position:relative}
/* faint form column rules over content */
.body.ruled::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to right,var(--rule-soft) 0 1px,transparent 1px calc(100%/12))}

/* section field label */
.field{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  display:flex;gap:12px;align-items:baseline;padding-bottom:22px}
.field .s{color:var(--mark)}

/* display + body type */
.display{font-family:var(--disp);font-weight:800;font-stretch:125%;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(34px,5vw,72px);text-wrap:balance}
h1.display{font-weight:800;font-size:clamp(46px,8.5vw,128px);line-height:.92}
.lead{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink-2);max-width:34ch}

/* buttons + links */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;padding:14px 22px;border-radius:2px;border:1px solid var(--mark);
  background:var(--mark);color:var(--mark-ink);cursor:pointer;transition:transform .12s,background .12s}
.btn:hover{background:#ff7d4d;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.mlink{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.mlink:hover{color:var(--ink);border-color:var(--mark)}
.arrow{color:var(--mark)}

/* redaction primitives */
.mark{background:var(--mark);color:var(--mark-ink);padding:0 .18em;border-radius:1px}
.bar{display:inline-block;background:var(--burn);border:1px solid var(--bar-edge);color:var(--mark);
  font-family:var(--mono);font-weight:500;letter-spacing:.02em;padding:0 .5em;border-radius:1px;
  transform-origin:center top}

/* ---------- masthead ---------- */
.masthead{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-bottom:1px solid var(--rule)}
.wordmark{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:800;font-stretch:125%;
  font-size:20px;letter-spacing:.02em}
.wordmark .m{width:40px;height:16px;background:var(--burn);border:1px solid var(--bar-edge);position:relative;border-radius:1px}
.wordmark .m::after{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--mark)}
.mnav{display:flex;gap:26px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.mnav a:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero .body{padding:clamp(48px,9vw,120px) 0 0}
.hero h1{max-width:14ch;margin-bottom:34px}
.redact-line{font-family:var(--mono);font-size:clamp(13px,1.5vw,16px);line-height:2.1;color:var(--ink-2);
  border:1px solid var(--rule);border-left:2px solid var(--mark);background:var(--panel-2);
  padding:18px 20px;margin:0 0 30px;max-width:760px;overflow-x:auto;white-space:nowrap}
.redact-line .k{color:var(--ink-3)}
.tok{position:relative;display:inline-block}
.tok .plain{display:none}
.cta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:clamp(48px,7vw,90px)}
.bleed{grid-column:1 / -1;margin:0 calc(-1 * var(--pad));border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:var(--panel-2);overflow:hidden}
.hero-shot{position:relative;max-width:1200px;margin:0 auto;padding:clamp(24px,5vw,64px) var(--pad)}
.hero-shot .layer{will-change:transform}
.hero-shot img{border:1px solid var(--rule);box-shadow:0 40px 120px -50px #000}
.hero-shot .rects{position:absolute;inset:0;pointer-events:none}

/* ---------- burn (pinned scrub) ---------- */
.burn .body{padding:clamp(60px,10vw,140px) 0}
.burnstage{position:relative;max-width:1000px;margin:34px auto 0}
.burnstage .frame{position:relative;border:1px solid var(--rule);background:#000;overflow:hidden;aspect-ratio:980/496}
.burnstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.burnstage .after{clip-path:inset(0 0 0 0)} /* revealed L→R by JS via --wipe */
.burnstage .before{clip-path:inset(0 0 0 var(--wipe,0%))}
.wipe-edge{position:absolute;top:0;bottom:0;left:var(--wipe,0%);width:2px;background:var(--mark);box-shadow:0 0 18px var(--mark);opacity:0}
.counter{font-family:var(--disp);font-weight:800;font-stretch:125%;font-size:clamp(40px,7vw,88px);line-height:1;color:var(--mark)}
.counter small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;margin-top:8px}

/* ---------- two rules (sticky) ---------- */
.rules .body{padding:clamp(60px,9vw,120px) 0}
.rule-row{display:grid;grid-template-columns:4fr 8fr;gap:40px;padding:44px 0;border-top:1px solid var(--rule)}
.rule-row:first-of-type{border-top:0}
.rule-head{position:sticky;top:120px;align-self:start}
.rule-n{font-family:var(--disp);font-weight:800;font-stretch:125%;font-size:clamp(48px,7vw,96px);line-height:.9;color:var(--mark)}
.rule-head h3{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:22px;margin-top:10px}
.rule-body p{font-size:18px;color:var(--ink-2);max-width:52ch}
.rule-body p+p{margin-top:16px}

/* ---------- pipeline ---------- */
.pipe .body{padding:clamp(48px,8vw,96px) 0}
.steps{display:flex;align-items:flex-start;gap:0;position:relative;flex-wrap:wrap}
.steps::before{content:"";position:absolute;top:34px;left:0;right:0;height:1px;background:var(--rule)}
.step{flex:1 1 200px;position:relative;padding-right:24px}
.key{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:68px;padding:0 14px;
  font-family:var(--mono);font-weight:500;font-size:22px;background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;position:relative;z-index:1}
.step h4{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px;color:var(--mark)}
.step p{font-size:15px;color:var(--ink-2)}

/* ---------- detectors: marquee + table ---------- */
.detect .body{padding:clamp(60px,9vw,120px) 0}
.marquee{border-block:1px solid var(--rule);overflow:hidden;padding:16px 0;margin-bottom:44px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:flex;gap:14px;width:max-content;will-change:transform}
.mtrack+.mtrack{margin-top:12px}
.mtoken{font-family:var(--mono);font-size:13px;color:var(--ink-2);border:1px solid var(--rule);padding:6px 12px;white-space:nowrap;background:var(--panel-2)}
.mtoken.red{background:var(--burn);border-color:var(--bar-edge);color:var(--mark)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable{width:100%;min-width:560px;border-collapse:collapse;font-family:var(--mono);font-size:13px}
.dtable th{text-align:left;font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--ink-3);
  padding:12px 14px;border-bottom:1px solid var(--rule)}
.dtable td{padding:11px 14px;border-bottom:1px solid var(--rule-soft);color:var(--ink-2);white-space:nowrap}
.dtable tr:hover td{background:var(--panel-2)}
.dtable .ex{color:var(--ink);overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.act{font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;
  padding:4px 11px;border-radius:2px;border:1px solid var(--rule);white-space:nowrap}
.act::before{content:"";width:10px;height:10px;border-radius:1px;flex:none}
.act.burn{color:var(--mark);background:var(--burn);border-color:var(--bar-edge)}
.act.burn::before{background:var(--burn);border:1px solid var(--mark)}
.act.mark{color:var(--mark-ink);background:var(--mark);border-color:var(--mark)}
.act.mark::before{background:var(--mark-ink)}
.act.skip{color:var(--ink-3)}
.act.skip::before{background:var(--ink-3)}

/* ---------- offline (inverted-treatment) ---------- */
.offline{border-top:1px solid var(--rule)}
.offline .body{grid-column:1/-1;padding:0}
.offblk{border:1px solid var(--mark);outline:1px solid var(--rule);outline-offset:6px;margin:clamp(60px,9vw,120px) 0;
  padding:clamp(40px,7vw,90px) clamp(28px,5vw,72px);background:var(--panel-2)}
.offblk .field{color:var(--mark-soft)}
.offblk .huge{font-family:var(--mono);font-weight:500;font-size:clamp(20px,3.6vw,44px);line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:22ch}
.offblk .huge b{color:var(--mark);font-weight:500}
.offblk p{margin-top:24px;color:var(--ink-2);max-width:56ch}

/* ---------- themes ---------- */
.themes .body{padding:clamp(48px,8vw,96px) 0}
.strip{display:flex;gap:20px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.tcard{flex:0 0 min(78vw,520px);scroll-snap-align:start}
.tcard img{border:1px solid var(--rule)}
.tcard .cap{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:12px;display:flex;justify-content:space-between}
.tcard .cap .n{color:var(--mark)}

/* ---------- pricing ---------- */
.pricing .body{padding:clamp(56px,9vw,120px) 0}
.price{display:grid;grid-template-columns:6fr 6fr;gap:48px;align-items:start}
.price .amt{font-family:var(--disp);font-weight:800;font-stretch:125%;font-size:clamp(72px,12vw,150px);line-height:.85;letter-spacing:-.03em}
.price .amt span{font-size:.24em;color:var(--ink-3);letter-spacing:.04em}
.plist{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:14px}
.plist li{padding:11px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-2);display:flex;gap:14px}
.plist li::before{content:"—";color:var(--mark)}
.buyblk{margin-top:22px}
.buyblk .fine{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:14px}

/* ---------- faq ---------- */
.faq .body{padding:clamp(44px,7vw,72px) 0}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--mono);font-size:15px;letter-spacing:.02em;
  display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mark);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding:0 0 22px;max-width:70ch}

/* ---------- footer ---------- */
.foot{grid-column:1/-1;border-top:1px solid var(--rule);padding:40px 0 60px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.foot .data{line-height:2}
.foot a.mlink{display:inline-block;margin-right:18px}

/* ---------- reduced motion / no-JS = final (burned) state ---------- */
.redact-line .tok .plain{display:none}
html:not(.anim) .tok .bar{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .burnstage .before{clip-path:inset(0 0 0 100%)} /* fully wiped → after showing */
  .mtrack{transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--rail:0px}
  .sec{grid-template-columns:1fr;column-gap:0}
  .sec::after{display:none}
  .note{position:static;grid-column:1;padding-top:24px;display:flex;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--rule-soft);padding-bottom:14px;top:0}
  .body{grid-column:1}
  .body.ruled::before{display:none}
  .rule-row{grid-template-columns:1fr;gap:18px}
  .rule-head{position:static;top:auto}
  .price{grid-template-columns:1fr;gap:28px}
  .foot{grid-template-columns:1fr}
  .steps::before{display:none}
  .mnav{display:none}
}
@media (max-width:560px){
  /* Expanded width overflows narrow screens — drop to normal width, shrink type */
  h1.display{font-size:clamp(25px,6.6vw,128px);font-stretch:100%;letter-spacing:-.03em}
  .display{font-size:clamp(23px,5.8vw,72px);font-stretch:100%;letter-spacing:-.03em}
  .rule-n,.counter,.price .amt,.rel .ver,.clhead h1{font-stretch:100%}
  .price .amt{font-size:clamp(58px,17vw,150px)}
  .cta-row{flex-direction:column;align-items:flex-start;gap:16px}
  .banner{font-size:10px;letter-spacing:.08em;gap:1em;padding:8px 16px}
  .wordmark{font-size:18px}
}
@media (max-width:420px){
  body{font-size:16px}
  .redact-line{font-size:12px}
  .field{flex-wrap:wrap}
}

/* hero self-redaction sweep + tilt */
.plain.marking{background:linear-gradient(var(--mark),var(--mark)) left center/var(--mw,0%) 100% no-repeat;color:var(--mark-ink);border-radius:1px;padding:0 .12em}
.hero-shot{transform-style:preserve-3d;will-change:transform}