/* ============================================================
   WARRANT — Targeting Judgment & Assurance Workbench
   Aesthetic: operational-document instrument.
   Editorial gravitas (Fraunces) + working grotesque (Archivo)
   + operational log mono (JetBrains Mono).
   Restrained ink palette; color reserved for gate semantics.
   ============================================================ */

:root{
  /* ink + surfaces */
  --ink:        #0c0f0d;
  --ink-2:      #14181a;
  --panel:      #171c1f;
  --panel-2:    #1d2327;
  --bone:       #f4efe4;   /* document surface */
  --bone-2:     #e9e2d2;
  --rule:       rgba(244,239,228,.14);
  --rule-2:     rgba(244,239,228,.08);

  /* type colors */
  --fg:         #ece7da;
  --fg-dim:     #a7a395;
  --fg-faint:   #6f6e63;

  /* command accent (signal ochre) + secondary (steel) */
  --signal:     #d9a441;
  --signal-deep:#a9772a;
  --steel:      #6f93a8;

  /* gate semantics — the ONLY saturated colors */
  --pass:       #6fae72;
  --warn:       #d9a441;
  --block:      #c8553d;

  --pass-bg:    rgba(111,174,114,.12);
  --warn-bg:    rgba(217,164,65,.12);
  --block-bg:   rgba(200,85,61,.14);

  --shadow:     0 24px 60px rgba(0,0,0,.5);
  --shadow-sm:  0 8px 24px rgba(0,0,0,.35);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui:      "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--fg);
  background:var(--ink);
  background-image:
    radial-gradient(1200px 600px at 78% -10%, rgba(217,164,65,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(111,147,168,.06), transparent 55%);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}

/* fine print-grain + faint engineering grid for "document" atmosphere */
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.gridlines{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--rule-2) 1px,transparent 1px),linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:80px 80px;mask-image:radial-gradient(circle at 50% 22%,#000,transparent 75%)}

a{color:var(--fg)}
.skip{position:absolute;left:-999px;top:8px;background:var(--bone);color:#000;padding:.7rem 1rem;z-index:99;border-radius:6px}
.skip:focus{left:8px}

/* corner registration ticks — subtle "instrument" framing */
.tick{position:fixed;width:14px;height:14px;z-index:5;pointer-events:none;border-color:var(--rule);border-style:solid;opacity:.7}
.tick.tl{top:14px;left:14px;border-width:1px 0 0 1px}
.tick.tr{top:14px;right:14px;border-width:1px 1px 0 0}
.tick.bl{bottom:14px;left:14px;border-width:0 0 1px 1px}
.tick.br{bottom:14px;right:14px;border-width:0 1px 1px 0}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.85rem clamp(1rem,4vw,3.5rem);
  background:linear-gradient(180deg,rgba(12,15,13,.96),rgba(12,15,13,.7));
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:.85rem}
.mark{width:40px;height:40px;flex:none;position:relative;border:1px solid var(--rule);border-radius:8px;display:grid;place-items:center;background:var(--ink-2)}
.mark::before{content:"";position:absolute;inset:8px;border:1px solid var(--signal);border-radius:4px;transform:rotate(45deg);opacity:.85}
.mark::after{content:"";position:absolute;width:6px;height:6px;background:var(--signal);border-radius:50%;box-shadow:0 0 12px var(--signal)}
.brand h1{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:.02em;margin:0;line-height:1}
.brand .sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint);margin:.28rem 0 0}
.topnav{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.topnav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fg-dim);padding:.5rem .7rem;border-radius:6px}
.topnav a:hover{color:var(--fg);background:rgba(244,239,228,.05)}

.btn{font-family:var(--ui);font-weight:600;font-size:.84rem;border:1px solid var(--rule);background:rgba(244,239,228,.04);color:var(--fg);
  padding:.62rem 1rem;border-radius:8px;cursor:pointer;transition:.16s ease;letter-spacing:.01em;display:inline-flex;align-items:center;gap:.5rem}
.btn:hover{border-color:var(--signal);background:rgba(217,164,65,.08)}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#1a1206}
.btn.primary:hover{background:#e6b455}
.btn.ghost{background:transparent}
.btn.wide{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}

main{padding:0 clamp(1rem,4vw,3.5rem) 4rem;max-width:1400px;margin:0 auto}

.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--signal);margin:0 0 .7rem;font-weight:500}
.muted{color:var(--fg-dim)}
.classbar{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);
  border:1px solid var(--rule);border-radius:6px;padding:.4rem .7rem;display:inline-flex;gap:.6rem;align-items:center;align-self:flex-start}
.classbar b{color:var(--signal);font-weight:600}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,7vw,5.5rem) 0 2rem;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:2.5rem;align-items:end;border-bottom:1px solid var(--rule)}
.hero h2{font-family:var(--display);font-weight:340;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.015em;margin:1.1rem 0 1.1rem}
.hero h2 em{font-style:italic;color:var(--signal)}
.lede{font-size:clamp(1rem,1.4vw,1.16rem);color:var(--fg-dim);max-width:46ch;margin:0 0 1.7rem}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.thesis{border-left:2px solid var(--signal);padding:.2rem 0 .2rem 1.1rem;font-family:var(--display);font-style:italic;font-size:1.18rem;line-height:1.45;color:var(--fg)}
.thesis small{display:block;font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-top:.7rem}

/* ---------- live assurance rail ---------- */
.statebar{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:2.2rem 0}
.statebar .cell{background:var(--ink-2);padding:1.05rem 1.15rem}
.statebar .cell .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.statebar .cell .v{font-family:var(--display);font-weight:500;font-size:2.05rem;line-height:1;margin-top:.45rem;transition:color .3s}
.statebar .cell .bar{height:3px;border-radius:2px;background:rgba(244,239,228,.1);margin-top:.6rem;overflow:hidden}
.statebar .cell .bar i{display:block;height:100%;background:var(--steel);transition:width .6s ease,background .3s}
.statebar .posture{background:var(--panel-2);display:flex;flex-direction:column;justify-content:center;min-width:190px;padding:1.05rem 1.3rem}
.statebar .posture .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.statebar .posture .v{font-family:var(--display);font-size:1.5rem;font-weight:500;margin-top:.3rem;color:var(--signal)}
.statebar .posture .gate{font-family:var(--mono);font-size:.68rem;color:var(--fg-dim);margin-top:.35rem;letter-spacing:.05em}

/* ---------- section scaffolding ---------- */
section{scroll-margin-top:90px}
.section-head{padding:3.2rem 0 1.4rem}
.section-head h3{font-family:var(--display);font-weight:360;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.01em;margin:.3rem 0 .5rem;max-width:24ch}
.section-head p{color:var(--fg-dim);max-width:62ch;margin:0}

/* ---------- guided run (centerpiece) ---------- */
.run{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);gap:1.4rem}
@media(max-width:1000px){.run{grid-template-columns:1fr}}
.stage{border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow:hidden;position:relative;min-height:430px;display:flex;flex-direction:column}
.stage-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid var(--rule);background:var(--ink-2)}
.stage-head .scn{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.stage-head .scn b{color:var(--fg);font-weight:600}
.phase-track{display:flex;gap:.4rem}
.phase-track .dot{width:26px;height:6px;border-radius:3px;background:rgba(244,239,228,.12);transition:.3s}
.phase-track .dot.done{background:var(--steel)}
.phase-track .dot.active{background:var(--signal);box-shadow:0 0 10px rgba(217,164,65,.5)}
.phase-track .dot.blocked{background:var(--block)}

.stage-body{padding:1.5rem 1.7rem;flex:1;display:flex;flex-direction:column;justify-content:center}
.stage-body .phaseno{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.stage-body h4{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;margin:.6rem 0 .9rem}
.stage-body .narr{color:var(--fg-dim);font-size:1.02rem;max-width:54ch}
.stage-flag{margin-top:1.2rem;border-radius:10px;padding:.95rem 1.1rem;border:1px solid var(--rule);background:rgba(244,239,228,.03);font-size:.92rem}
.stage-flag.block{border-color:var(--block);background:var(--block-bg)}
.stage-flag.pass{border-color:var(--pass);background:var(--pass-bg)}
.stage-flag.warn{border-color:var(--warn);background:var(--warn-bg)}
.stage-flag .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;display:block;margin-bottom:.35rem}
.stage-flag.block .tag{color:var(--block)}
.stage-flag.pass .tag{color:var(--pass)}
.stage-flag.warn .tag{color:var(--warn)}

.stage-foot{display:flex;gap:.6rem;align-items:center;padding:1rem 1.3rem;border-top:1px solid var(--rule);background:var(--ink-2);flex-wrap:wrap}
.stage-foot .spacer{flex:1}
.stage-foot .progress{font-family:var(--mono);font-size:.72rem;color:var(--fg-faint);letter-spacing:.08em}

/* ledger (operational log) */
.ledgerwrap{border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.ledgerwrap .lh{padding:1rem 1.3rem;border-bottom:1px solid var(--rule);background:var(--ink-2);display:flex;justify-content:space-between;align-items:center}
.ledgerwrap .lh h4{font-family:var(--display);font-weight:400;font-size:1.2rem;margin:0}
.ledgerwrap .lh span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pass)}
.ledger{font-family:var(--mono);font-size:.78rem;padding:.6rem;overflow:auto;flex:1;max-height:540px}
.ledger .row{padding:.7rem .7rem;border-bottom:1px solid var(--rule-2);display:grid;grid-template-columns:62px 1fr;gap:.7rem;animation:logIn .35s ease}
.ledger .row:last-child{border-bottom:0}
.ledger .row time{color:var(--steel)}
.ledger .row .who{color:var(--signal);font-weight:700}
.ledger .row p{margin:.2rem 0 0;color:var(--fg-dim);line-height:1.5;font-family:var(--ui);font-size:.82rem}
@keyframes logIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- what-if sandbox ---------- */
.sandbox{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem}
@media(max-width:1000px){.sandbox{grid-template-columns:1fr}}
.card{border:1px solid var(--rule);border-radius:14px;background:var(--panel);padding:1.4rem 1.5rem}
.card h4{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:0 0 .3rem}
.slider-grid{display:grid;gap:1rem;margin-top:1.1rem}
.slider-grid label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);display:block}
.slider-grid .srow{display:flex;align-items:center;gap:1rem;margin-top:.5rem}
.slider-grid input[type=range]{flex:1;accent-color:var(--signal)}
.slider-grid .out{font-family:var(--mono);font-weight:700;color:var(--signal);min-width:2.4ch;text-align:right}
.recout{margin-top:1.2rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.recout .t{font-family:var(--display);font-size:1.35rem;line-height:1.15;margin:0 0 .4rem}
.recout .b{color:var(--fg-dim);font-size:.92rem;margin:0}

/* ---------- facets (tabs) ---------- */
.facet-tabs{display:flex;flex-wrap:wrap;gap:.4rem;border:1px solid var(--rule);border-radius:12px;padding:.45rem;background:var(--ink-2);position:sticky;top:74px;z-index:30;backdrop-filter:blur(10px);--facet-progress:0%}
.facet-tabs button{position:relative;flex:1;min-width:130px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid transparent;background:transparent;color:var(--fg-dim);padding:.7rem .6rem;border-radius:8px;cursor:pointer;transition:transform .16s ease,color .16s,background .16s,border-color .16s;overflow:hidden}
.facet-tabs button:hover{color:var(--fg);background:rgba(244,239,228,.05);transform:translateY(-1px)}
.facet-tabs button[aria-selected=true]{background:rgba(217,164,65,.1);border-color:var(--signal);color:var(--fg)}
.facet-tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--facet-progress);
  background:linear-gradient(90deg,var(--signal),#e6b455);box-shadow:0 0 8px rgba(217,164,65,.5);transition:width .12s linear}
@media(prefers-reduced-motion:reduce){.facet-tabs button[aria-selected=true]::after{display:none}.facet-tabs button:hover{transform:none}}
.facet{display:none;margin-top:1.3rem}
.facet.active{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.6rem}
.facet.active.fx{animation:facetIn .42s cubic-bezier(.22,.61,.36,1)}
@keyframes facetIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.facet.active.fx{animation:none}}
@media(max-width:980px){.facet.active{grid-template-columns:1fr}}
.facet-copy h3{font-family:var(--display);font-weight:360;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;margin:.3rem 0 .9rem}
.facet-copy p{color:var(--fg-dim)}
.rule-note{margin-top:1.2rem;border:1px solid var(--rule);border-left:2px solid var(--signal);border-radius:8px;background:rgba(217,164,65,.05);padding:.9rem 1.1rem;font-size:.9rem;color:var(--fg)}
.rule-note b{color:var(--signal);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.3rem}

/* intent compiler */
.compiler textarea{width:100%;min-height:120px;resize:vertical;background:var(--ink);border:1px solid var(--rule);border-radius:10px;color:var(--fg);
  font-family:var(--mono);font-size:.85rem;padding:.9rem 1rem;line-height:1.55}
.compiler textarea:focus{outline:none;border-color:var(--signal)}
.compiler .tools{display:flex;gap:.6rem;margin:.8rem 0;flex-wrap:wrap;align-items:center}
.frame{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.6rem}
@media(max-width:560px){.frame{grid-template-columns:1fr}}
.frame .fcell{border:1px solid var(--rule);border-radius:10px;background:var(--ink-2);padding:.95rem 1rem}
.frame .fcell h5{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 .5rem}
.frame .fcell ul{margin:0;padding-left:1.05rem}
.frame .fcell li{color:var(--fg-dim);font-size:.86rem;margin:.3rem 0;line-height:1.45}
.frame .fcell.cant{border-color:var(--block)}
.frame .fcell.cant h5{color:var(--block)}
.frame .fcell.ask{border-color:var(--warn)}
.frame .fcell.ask h5{color:var(--warn)}
.ai-pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:.28rem .55rem;border-radius:999px;border:1px solid var(--rule);color:var(--fg-faint)}
.ai-pill.live{color:var(--pass);border-color:var(--pass)}
.ai-pill.demo{color:var(--steel);border-color:var(--steel)}

/* evidence graph */
.graph{position:relative;min-height:430px;border:1px solid var(--rule);border-radius:14px;background:
  radial-gradient(circle at 50% 50%,rgba(111,147,168,.07),transparent 60%),var(--ink-2);overflow:hidden}
.graph svg.edges{position:absolute;inset:0;width:100%;height:100%}
.graph svg.edges path{fill:none;stroke:rgba(111,147,168,.4);stroke-width:1.5;stroke-dasharray:6 6;animation:flow 14s linear infinite}
@keyframes flow{to{stroke-dashoffset:-200}}
.node{position:absolute;min-width:130px;max-width:170px;padding:.7rem .8rem;border:1px solid var(--rule);border-radius:10px;background:var(--panel);
  text-align:center;font-size:.82rem;font-weight:600;box-shadow:var(--shadow-sm);z-index:2}
.node small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-top:.3rem;font-weight:400}
.node.core{left:50%;top:48%;transform:translate(-50%,-50%);border-color:var(--signal);background:linear-gradient(180deg,rgba(217,164,65,.14),var(--panel))}
.node.warnode{border-color:var(--warn)}
.node.blocknode{border-color:var(--block)}
.n1{left:5%;top:14%}.n2{left:6%;bottom:14%}.n3{right:6%;top:14%}.n4{right:4%;bottom:14%}.n5{left:50%;bottom:5%;transform:translateX(-50%)}

/* law matrix */
.law-matrix{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.law-matrix{grid-template-columns:1fr}}
.law-item{border:1px solid var(--rule);border-radius:10px;background:var(--ink-2);padding:1rem}
.law-item header{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.law-item h5{margin:0;font-size:.98rem}
.status{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .5rem;border-radius:6px;font-weight:700}
.status.pass{background:var(--pass-bg);color:var(--pass)}
.status.warn{background:var(--warn-bg);color:var(--warn)}
.status.block{background:var(--block-bg);color:var(--block)}
.law-item p{margin:.6rem 0 0;color:var(--fg-dim);font-size:.83rem;line-height:1.5}

/* challenge deck */
.challenge-deck{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.challenge-deck{grid-template-columns:1fr}}
.challenge{border:1px solid var(--rule);border-radius:10px;background:var(--ink-2);padding:1rem;min-height:120px}
.challenge h5{margin:0 0 .5rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.challenge p{margin:0;color:var(--fg-dim);font-size:.88rem;line-height:1.5}

/* assessment */
.assess-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media(max-width:680px){.assess-grid{grid-template-columns:1fr 1fr}}
.ring{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--steel) calc(var(--s)*1%),rgba(244,239,228,.08) 0)}
.ring::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--ink-2);border:1px solid var(--rule)}
.ring .num{position:relative;font-family:var(--display);font-size:2rem;font-weight:500}
.ring .lbl{position:absolute;bottom:18%;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
.aar{margin-top:1.2rem;border:1px solid var(--rule);border-radius:12px;background:var(--ink-2);padding:1.2rem 1.4rem}
.aar h5{font-family:var(--display);font-weight:400;font-size:1.2rem;margin:0 0 .7rem}
.aar li{color:var(--fg-dim);margin:.5rem 0;font-size:.9rem}

/* ---------- buyer band ---------- */
.buyer{margin-top:3.5rem;border:1px solid var(--rule);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--ink-2));overflow:hidden}
.buyer .bhead{padding:1.8rem clamp(1.3rem,3vw,2.4rem) 0}
.buyer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);margin-top:1.6rem}
@media(max-width:820px){.buyer-grid{grid-template-columns:1fr}}
.buyer-grid .col{background:var(--ink-2);padding:1.6rem clamp(1.3rem,3vw,2.4rem) 2rem}
.buyer-grid h5{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin:0 0 .9rem}
.buyer-grid ul{margin:0;padding-left:1.1rem}
.buyer-grid li{color:var(--fg-dim);margin:.55rem 0;line-height:1.5;font-size:.94rem}
.buyer-grid li b{color:var(--fg)}

/* ---------- sources ---------- */
.source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(max-width:820px){.source-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.source-grid{grid-template-columns:1fr}}
.source-grid a{border:1px solid var(--rule);border-radius:10px;background:var(--ink-2);padding:1rem 1.1rem;text-decoration:none;
  color:var(--fg-dim);font-size:.86rem;line-height:1.45;display:block;transition:.16s}
.source-grid a:hover{border-color:var(--steel);color:var(--fg)}
.source-grid a b{display:block;color:var(--fg);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;margin-bottom:.35rem}

/* ---------- footer ---------- */
footer{margin-top:3rem;border-top:1px solid var(--rule);padding:1.6rem 0 1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
footer .fl{font-family:var(--display);font-size:1.1rem}
footer .fr{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);max-width:60ch;text-align:right}

@media(max-width:760px){
  .hero{grid-template-columns:1fr;align-items:start}
  .statebar{grid-template-columns:1fr 1fr}
  .topnav a:not(.btn){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   v2 additions — brand assets, US-company cluster, principal,
   footer, PDF, refined hero
   ============================================================ */
.brand{text-decoration:none}
.brand-mark{width:38px;height:42px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.mark{display:none}

.navlink{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fg-dim);padding:.5rem .6rem;border-radius:6px}
.navlink:hover{color:var(--fg);background:rgba(244,239,228,.05)}

/* US flag + tooltip */
.usflag{position:relative;display:inline-flex;align-items:center;cursor:default;outline:none}
.usflag img{width:26px;height:auto;border-radius:3px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.usflag.inline img{width:24px}
.usflag-pop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);
  background:var(--bone);color:#10130f;font-family:var(--ui);font-weight:600;font-size:.74rem;white-space:nowrap;
  padding:.42rem .65rem;border-radius:7px;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:.16s;z-index:60}
.usflag-pop::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--bone)}
.usflag-pop.up{top:auto;bottom:calc(100% + 10px)}
.usflag-pop.up::before{top:100%;bottom:auto;border-bottom-color:transparent;border-top-color:var(--bone)}
.usflag:hover .usflag-pop,.usflag:focus .usflag-pop{opacity:1;transform:translateX(-50%) translateY(0)}

/* LinkedIn / icon button — matches nextgenadvisors.llc */
.iconbtn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:7px;border:0;
  background:#0a66c2;color:#fff;text-decoration:none;font-family:var(--ui);font-weight:700;font-size:.92rem;
  text-transform:lowercase;letter-spacing:-.02em;transition:.16s}
.iconbtn:hover{background:#0e76da;color:#fff}
.iconbtn.sm{width:28px;height:28px;font-size:.8rem}
/* inline US flag + "A U.S. Company." (nav + footer) */
.navflag,.footflag{height:auto;border-radius:3px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.navflag{width:24px}.footflag{width:22px}
.usco{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg-dim);white-space:nowrap}

.btn.lg{padding:.8rem 1.25rem;font-size:.92rem}

/* hero refinements */
.hero{align-items:center;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr)}
.hero-left{min-width:0}
.kicker{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-faint);text-decoration:none;margin-bottom:1rem;transition:.16s}
.kicker b{color:var(--signal);font-weight:600}
.kicker:hover{color:var(--fg-dim)}
.hero-right{display:flex;flex-direction:column;align-items:stretch;gap:1.2rem}
.hero-right .thesis{margin:0}
.scene-stage{margin:0;position:relative;width:100%;border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  background:var(--ink-2);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.scene-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
  box-shadow:inset 0 0 60px rgba(217,164,65,.10);border:1px solid rgba(217,164,65,.14)}
.scene-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(12,15,13,.55));border-radius:16px}
.hero-scene{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.scene-stage figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.7rem .9rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
@media(prefers-reduced-motion:no-preference){
  .scene-stage{transition:transform .5s ease,box-shadow .5s ease}
  .scene-stage:hover{transform:translateY(-3px);box-shadow:0 30px 70px rgba(0,0,0,.6)}
}

/* principal band */
.principal-band{margin-top:1rem;border:1px solid var(--rule);border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));overflow:hidden}
.principal-band .bhead{padding:1.9rem clamp(1.3rem,3vw,2.4rem) 0}
.principal-band .bhead h3{font-family:var(--display);font-weight:360;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.06;margin:.2rem 0 .6rem;max-width:30ch}
.principal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);margin-top:1.6rem}
@media(max-width:820px){.principal-grid{grid-template-columns:1fr}}
.principal-grid .col{background:var(--ink-2);padding:1.6rem clamp(1.3rem,3vw,2.4rem) 1.8rem}
.principal-grid h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin:0 0 .8rem}
.principal-grid p{color:var(--fg-dim);margin:0;line-height:1.6;font-size:.96rem}
.principal-grid p b{color:var(--fg)}
.principal-foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding:1.3rem clamp(1.3rem,3vw,2.4rem);border-top:1px solid var(--rule);background:var(--panel)}
.builtfor{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg-dim)}
.builtfor span{color:var(--fg-faint);text-transform:uppercase;letter-spacing:.14em;margin-right:.4rem}

/* footer rebuild */
footer{margin-top:3rem;border-top:1px solid var(--rule);padding:2rem 0 1rem}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:2rem;align-items:start}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:1.5rem}}
.foot-brand{display:flex;gap:1rem;align-items:flex-start}
.foot-mark{width:42px;height:auto;object-fit:contain;flex:none}
.foot-brand strong{font-family:var(--display);font-size:1.2rem;letter-spacing:.02em}
.foot-brand p{margin:.4rem 0 0;font-size:.82rem;line-height:1.55;max-width:54ch}
.foot-cta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-end;text-align:right}
.foot-cta .btn{white-space:nowrap}
@media(max-width:820px){.foot-cta{align-items:flex-start;text-align:left}.foot-meta{justify-content:flex-start}}
.foot-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.vetcert{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}

.challenge-tools,.ledger-tools{display:flex;gap:.6rem;margin-bottom:.9rem;flex-wrap:wrap;align-items:center}
.card .sub{margin:.3rem 0 0;font-size:.9rem}

@media(max-width:760px){
  .hero{grid-template-columns:1fr;text-align:left}
  .hero-right{order:0;flex-direction:column}
  .scene-stage{max-width:520px}
  .hero-right .thesis{font-size:1.05rem}
  .topnav{gap:.3rem}
  .topnav .navlink{display:none}
  .brand-mark{width:34px;height:38px}
  .brand h1{font-size:1.15rem}
  #exportPacket{font-size:.76rem;padding:.55rem .7rem}
}
@media(max-width:460px){
  .statebar{grid-template-columns:1fr 1fr}
  .principal-foot{flex-direction:column;align-items:flex-start}
}