/* ==========================================================================
   Praesto landing — Design System v2 ("We draw your infrastructure")
   Praesto brand: navy canvas + orange accent, two "blueprint paper" light islands.
   Personality lives in TYPE + STRUCTURE. Static render is canonical.
   ========================================================================== */

/* ----------------------------- Fonts (self-hosted, variable, OFL) --------- */
@font-face { font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Martian Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../fonts/martian-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Martian Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../fonts/martian-mono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ----------------------------- Tokens ------------------------------------- */
:root {
  /* Dark canvas */
  --ink-900:#0A1F35; --ink-800:#0F2A46; --ink-700:#15365A; --ink-line:#24466B;
  --paper-100:#F2F6FB; --paper-300:#A9BDD3; --paper-400:#8CA5BE; --paper-500:#6A87A3;
  /* The one accent */
  --orange-500:#F6A21E; --orange-300:#FFC46A; --orange-700:#D9860D;
  /* The "smile" gradient (use at most once per surface) */
  --grad-blue:#2F6BFF; --grad-coral:#EF5A3C; --grad-orange:#F6A21E;
  /* Risk (quarantined) */
  --amber-500:#FF8A75; --alert-500:#E5484D;
  /* Vellum (light islands) */
  --vellum-100:#F1F5FA; --vellum-50:#FAFCFE; --vellum-ink:#0F2440; --vellum-green:#25598F;
  --vellum-line:rgba(15,36,64,.10);

  /* Type */
  --f-display:"Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-display:clamp(2.6rem, 4.4vw + .9rem, 4.9rem);
  --t-h1:clamp(2rem, 3.5vw + 1rem, 3.25rem);
  --t-h2:clamp(1.5rem, 2vw + .5rem, 2rem);
  --t-h3:1.25rem;
  --t-lead:clamp(1.125rem, .5vw + 1rem, 1.375rem);
  --t-body:1.0625rem;

  /* Space + radius */
  --sp:clamp(4.5rem, 8vw, 8rem);         /* section rhythm */
  --container:1240px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;

  /* Motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --dur-micro:140ms; --dur-reveal:520ms; --dur-draw:1000ms;
}

@property --scan { syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ----------------------------- Reset -------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--f-body); font-size:var(--t-body); line-height:1.65;
  color:var(--paper-100); background:var(--ink-900);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible { outline:2px solid var(--orange-500); outline-offset:3px; border-radius:2px; }
::selection { background:var(--orange-500); color:var(--ink-900); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skiplink { position:absolute; left:-9999px; top:0; z-index:100; background:var(--orange-500); color:var(--ink-900); padding:.6em 1.1em; border-radius:0 0 10px 0; font-weight:600; }
.skiplink:focus { left:0; }

/* ----------------------------- Type utilities ----------------------------- */
h1,h2,h3 { font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; line-height:1.05; }
.h-display { font-size:var(--t-display); line-height:.98; letter-spacing:-.03em; font-weight:600; }
.h1 { font-size:var(--t-h1); } .h2 { font-size:var(--t-h2); font-weight:500; } .h3 { font-size:var(--t-h3); }
.balance { text-wrap:balance; }
.lead { font-size:var(--t-lead); line-height:1.55; color:var(--paper-100); }
.muted { color:var(--paper-300); }
.mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums slashed-zero; }
.eyebrow {
  font-family:var(--f-mono); font-size:.8125rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--orange-500); display:inline-flex; align-items:center; gap:.6em;
  font-variant-numeric:tabular-nums slashed-zero;
}
.eyebrow::before { content:""; width:1.6em; height:1px; background:var(--orange-500); opacity:.7; }
.eyebrow--plain::before { display:none; }

/* ----------------------------- Layout ------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.section { position:relative; padding-block:var(--sp); }
.section--tight { padding-block:clamp(2rem,4vw,3rem); }
.section__head { max-width:62ch; }
.center { text-align:center; margin-inline:auto; }
.center .eyebrow { justify-content:center; }
.mt-s{margin-top:1rem}.mt-m{margin-top:1.5rem}.mt-l{margin-top:2.5rem}.mt-xl{margin-top:4rem}
.grid{display:grid;gap:1.5rem}
@media(min-width:760px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.g-4{grid-template-columns:repeat(4,1fr)}}
.dim{color:var(--paper-400)}

/* ----------------------------- Textures (ART 8/9) ------------------------- */
.blueprint,.dots,.grain{position:absolute;inset:0;pointer-events:none;z-index:0}
.blueprint{
  background-image:
    linear-gradient(to right, rgba(95,150,235,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95,150,235,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 35%,#000 45%,transparent 100%);
          mask-image:radial-gradient(ellipse 65% 60% at 50% 35%,#000 45%,transparent 100%);
}
.dots{
  background-image:radial-gradient(rgba(242,246,251,.09) 1px,transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 50%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 55% 55% at 50% 50%,#000 55%,transparent 100%);
}
.section > .container{position:relative;z-index:1}

/* ----------------------------- Vellum islands ----------------------------- */
.section--vellum{
  background:var(--vellum-100); color:var(--vellum-ink);
  border-block:1px solid var(--vellum-line);
}
.section--vellum .eyebrow{color:var(--vellum-green)}
.section--vellum .eyebrow::before{background:var(--vellum-green)}
.section--vellum .muted{color:#3E5A78}
.section--vellum .blueprint{
  background-image:
    linear-gradient(to right, var(--vellum-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--vellum-line) 1px, transparent 1px);
}

/* ----------------------------- Buttons ------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;line-height:1;
  padding:.85em 1.4em;border-radius:var(--r-pill);border:1px solid transparent;
  transition:transform var(--dur-micro) var(--ease-out),background var(--dur-micro),border-color var(--dur-micro),box-shadow var(--dur-micro);
  will-change:transform;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--orange-500);color:var(--ink-900);box-shadow:0 0 0 0 rgba(246,162,30,.35)}
.btn--primary:hover{box-shadow:0 8px 30px -8px rgba(246,162,30,.5)}
.btn--primary:active{background:var(--orange-700)}
.btn--ghost{background:transparent;color:var(--paper-100);border-color:var(--ink-line)}
.btn--ghost:hover{border-color:var(--paper-400);background:rgba(242,246,251,.04)}
.section--vellum .btn--ghost{color:var(--vellum-ink);border-color:rgba(15,36,64,.2)}
.section--vellum .btn--ghost:hover{background:rgba(15,36,64,.05);border-color:rgba(15,36,64,.4)}
.btn--lg{padding:1.05em 1.7em;font-size:1rem}
.btn--block{width:100%}
.linkarrow{color:var(--orange-500);font-weight:600;display:inline-flex;align-items:center;gap:.4em}
.linkarrow::after{content:"→";transition:transform var(--dur-micro) var(--ease-out)}
.linkarrow:hover::after{transform:translateX(3px)}
.section--vellum .linkarrow{color:var(--vellum-green)}

/* ----------------------------- Nav ---------------------------------------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,31,53,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--dur-micro),background var(--dur-micro)}
.nav.is-scrolled{border-bottom-color:var(--ink-line);background:rgba(10,31,53,.9)}
.nav__inner{display:flex;align-items:center;gap:1.5rem;height:64px}
.brand{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;font-size:1.15rem;white-space:nowrap}
.brand__mark{width:28px;height:28px}
.brand__o{position:relative;display:inline-block;line-height:1}
.brand__o::after{content:"";position:absolute;left:12%;right:-14%;top:-.02em;height:.10em;border-radius:.05em;background:var(--orange-500)}
.nav__links{display:none;gap:1.5rem;margin-left:1rem;font-size:.95rem}
.nav__links a{color:var(--paper-300);transition:color var(--dur-micro)}
.nav__links a:hover{color:var(--paper-100)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.lang{display:inline-flex;border:1px solid var(--ink-line);border-radius:var(--r-pill);overflow:hidden;font-family:var(--f-mono);font-size:.72rem}
.lang a{padding:.4em .7em;color:var(--paper-400)}
.lang a[aria-current="true"]{background:var(--orange-500);color:var(--ink-900)}
.nav__toggle{display:inline-flex;padding:.4em;color:var(--paper-100)}
.nav__toggle svg{width:24px;height:24px}
.mobile-menu{display:none;flex-direction:column;gap:.25rem;padding:1rem 0 1.5rem;border-top:1px solid var(--ink-line)}
.mobile-menu.is-open{display:flex}
.mobile-menu a{padding:.7em 0;color:var(--paper-100);border-bottom:1px solid var(--ink-line)}
.mobile-menu a:last-child{border-bottom:none;margin-top:.5rem}
@media(min-width:960px){.nav__links{display:flex}.nav__toggle{display:none}.mobile-menu{display:none!important}}
@media(max-width:559px){.nav__right .btn--primary{display:none}}

/* ----------------------------- Map rail (ART 0) --------------------------- */
.rail{position:fixed;left:max(12px,calc(50vw - var(--container)/2 - 4px));top:50%;transform:translateY(-50%);
  z-index:40;width:34px;height:340px;display:none;pointer-events:none}
.rail svg{width:100%;height:100%;overflow:visible}
.rail__node{fill:var(--paper-500);transition:fill .5s var(--ease-out),transform .6s var(--ease-out)}
.rail__node.is-reached{fill:var(--orange-500)}
.rail__marker{fill:var(--orange-500);filter:drop-shadow(0 0 4px rgba(246,162,30,.6))}
.rail__guide{stroke:var(--ink-line);stroke-width:1}
.rail__edge{stroke:var(--ink-line);stroke-width:1.5;fill:none;transition:stroke .5s var(--ease-out),opacity .6s var(--ease-out)}
.rail__label{font-family:var(--f-mono);font-size:7px;fill:var(--paper-500);letter-spacing:.05em}
/* progress: stage advances add the class .is-s1.. on <html> */
.rail__stagechip{font-family:var(--f-mono);font-size:8px;fill:var(--paper-400)}
@media(min-width:1360px){.rail{display:block}}

/* thin top progress strip (mobile/tablet) */
.railtop{position:fixed;top:64px;left:0;right:0;height:2px;z-index:55;background:transparent}
.railtop__fill{height:100%;width:0;background:linear-gradient(90deg,var(--grad-blue),var(--grad-coral),var(--grad-orange));transition:width .2s linear}
@media(min-width:1360px){.railtop{display:none}}

/* ----------------------------- Hero -------------------------------------- */
.hero{padding-top:clamp(2.5rem,6vw,4.5rem);overflow:clip}
.hero__grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1000px){.hero__grid{grid-template-columns:1.14fr .86fr;gap:3rem}}
.hero__title{margin-top:1.1rem;max-width:20ch}
.hero__lead{margin-top:1.4rem;max-width:52ch;color:var(--paper-300)}
.hero__lead b{color:var(--paper-100);font-weight:600}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__trust{margin-top:1.6rem;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;color:var(--paper-400);display:flex;flex-wrap:wrap;gap:.5em .9em;align-items:center}
.hero__trust b{color:var(--paper-100);font-weight:500}
.hero__trust .sep{color:var(--ink-line)}
.hero__trust a{color:var(--paper-300);border-bottom:1px dashed var(--paper-500)}
.hero__trust a:hover{color:var(--orange-500);border-color:var(--orange-500)}

/* Topology art frame */
.topo{position:relative;border:1px solid var(--ink-line);border-radius:var(--r-lg);background:
  radial-gradient(120% 90% at 80% 0,rgba(47,107,255,.08),transparent 55%),var(--ink-800);
  padding:14px;overflow:hidden}
.topo__caption{margin-top:.6rem;font-family:var(--f-mono);font-size:.68rem;color:var(--paper-400);letter-spacing:.02em}
.topo svg{width:100%;height:auto}
.topo__scanbtn{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;border:1px solid var(--ink-line);border-radius:6px;
  display:grid;place-items:center;color:var(--paper-300);background:rgba(10,31,53,.5)}
.topo__scanbtn:hover{color:var(--paper-100);border-color:var(--paper-400)}
.topo__scanbtn svg{width:12px;height:12px}

/* topology node/edge styling (shared) */
.n{fill:var(--paper-500)} .n--live{fill:var(--orange-500)} .n--risk{fill:var(--amber-500)}
.n-ring{fill:none;stroke:var(--orange-500);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.e{stroke:var(--ink-line);stroke-width:1.4;fill:none} .e--key{stroke:var(--orange-500);opacity:.85}
.lane-label{font-family:var(--f-mono);font-size:9px;fill:var(--paper-400);letter-spacing:.08em;text-transform:uppercase}
.node-label{font-family:var(--f-mono);font-size:8.5px;fill:var(--paper-300)}
.chip7r{font-family:var(--f-mono);font-size:8px;fill:var(--orange-500)}

/* ----------------------------- Trust bar --------------------------------- */
.trustbar{border-block:1px solid var(--ink-line);background:linear-gradient(var(--ink-800),var(--ink-900))}
.trustbar__row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:center;text-align:center}
.trustbar__fact{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.03em;color:var(--paper-300);display:inline-flex;align-items:center;gap:.55em}
.trustbar__fact b{color:var(--paper-100);font-weight:500}
.trustbar__fact svg{width:15px;height:15px;color:var(--orange-500)}
.trustbar__note{margin-top:1rem;text-align:center;font-size:.9rem;color:var(--paper-400)}
.trustbar__note a{color:var(--paper-300);border-bottom:1px dashed var(--paper-500)}
.trustbar__note a:hover{color:var(--orange-500);border-color:var(--orange-500)}

/* ----------------------------- Big stat ---------------------------------- */
.stat{font-family:var(--f-display);font-weight:600;font-size:clamp(3.5rem,9vw,6.5rem);line-height:.9;letter-spacing:-.03em;color:var(--orange-500)}
.stat__unit{font-family:var(--f-mono);font-size:1rem;color:var(--paper-300);letter-spacing:.04em}
.stat__note{color:var(--paper-400);font-size:.9rem;margin-top:.4rem}

/* ----------------------------- Steps (host:port) -------------------------- */
.steps2{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--ink-line)}
.step2{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.6rem 0;border-bottom:1px solid var(--ink-line);align-items:start}
.step2__idx{font-family:var(--f-mono);font-size:.8rem;color:var(--orange-500);padding-top:.2rem;letter-spacing:.05em}
.step2 h3{font-size:1.15rem}
.step2 p{color:var(--paper-300);margin-top:.35rem;max-width:60ch}
.conn{font-family:var(--f-mono);font-size:.78rem;color:var(--paper-400);margin-top:.55rem;letter-spacing:.02em}
.conn b{color:var(--orange-500);font-weight:500}
@media(min-width:760px){.step2{grid-template-columns:auto 1fr auto}}

/* ----------------------------- Cards / deliverables ----------------------- */
.dcard{border:1px solid var(--vellum-line);border-radius:var(--r-md);background:var(--vellum-50);padding:1.4rem;position:relative;transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro)}
.dcard__tag{font-family:var(--f-mono);font-size:.72rem;color:var(--vellum-green);letter-spacing:.05em}
.dcard h3{margin-top:.5rem;font-size:1.15rem;color:var(--vellum-ink)}
.dcard p{margin-top:.5rem;color:#3E5A78;font-size:.96rem}

/* Blueprint art panel (vellum) */
.sheet{border:1px solid var(--vellum-line);border-radius:var(--r-md);background:
  repeating-linear-gradient(to right,transparent 0 25px,var(--vellum-line) 25px 26px),
  repeating-linear-gradient(to bottom,transparent 0 25px,var(--vellum-line) 25px 26px),var(--vellum-50);
  padding:18px;position:relative;overflow:hidden}
.sheet__title{font-family:var(--f-mono);font-size:.7rem;color:var(--vellum-green);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;border-bottom:1px solid var(--vellum-line);padding-bottom:.5rem;margin-bottom:.5rem}
.sheet svg{width:100%;height:auto}
.bp-node{fill:var(--vellum-50);stroke:var(--vellum-ink);stroke-width:1.4}
.bp-node--rec{fill:var(--orange-500);stroke:var(--vellum-ink);stroke-width:1.6}
.bp-line{stroke:var(--vellum-green);stroke-width:1.2;fill:none}
.bp-label{font-family:var(--f-mono);font-size:8.5px;fill:var(--vellum-ink)}
.bp-anno{font-family:var(--f-mono);font-size:8px;fill:var(--vellum-green)}

/* ----------------------------- 7R matrix (real table) --------------------- */
.rmatrix{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:1.2rem}
.rmatrix caption{text-align:left;font-family:var(--f-mono);font-size:.72rem;color:var(--vellum-green);letter-spacing:.05em;padding-bottom:.6rem}
.rmatrix th{text-align:left;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#3E5A78;padding:.6rem .8rem;border-bottom:1.5px solid var(--vellum-ink)}
.rmatrix td{padding:.7rem .8rem;border-bottom:1px solid var(--vellum-line);vertical-align:top;color:var(--vellum-ink)}
.rmatrix .wl{font-family:var(--f-mono);font-weight:500}
.disp{font-family:var(--f-mono);font-size:.78rem;padding:.15em .55em;border-radius:5px;border:1px solid rgba(15,36,64,.35);white-space:nowrap}
.disp--rec{background:var(--orange-500);border-color:var(--vellum-ink);color:var(--vellum-ink);font-weight:600}
.disp--risk{color:#B3261E;border-color:#B3261E}
.cbar{display:inline-block;height:6px;width:60px;background:rgba(15,36,64,.12);border-radius:3px;overflow:hidden;vertical-align:middle}
.cbar>i{display:block;height:100%;background:var(--vellum-green)}
.rmatrix details summary{cursor:pointer;color:var(--vellum-green);font-size:.85rem;font-family:var(--f-mono);list-style:none}
.rmatrix details summary::-webkit-details-marker{display:none}
.rmatrix details summary::before{content:"+ ";}
.rmatrix details[open] summary::before{content:"− "}
.rmatrix details p{margin-top:.4rem;color:#3E5A78;font-size:.9rem;font-family:var(--f-body)}

/* ----------------------------- Terminal (ART 7) --------------------------- */
.term{border:1px solid var(--ink-line);border-radius:var(--r-md);background:var(--ink-800);overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.term__bar{display:flex;align-items:center;gap:.5em;padding:.7rem 1rem;border-bottom:1px solid var(--ink-line)}
.term__dot{width:10px;height:10px;border-radius:50%;background:var(--ink-line)}
.term__title{margin-left:.6em;font-family:var(--f-mono);font-size:.72rem;color:var(--paper-400)}
.term__body{padding:1.1rem 1.2rem;font-family:var(--f-mono);font-size:.86rem;line-height:1.75}
.term__cmd{color:var(--paper-100);white-space:nowrap;overflow:hidden}
.term__cmd .p{color:var(--orange-500)} .term__cmd .flag{color:var(--paper-400)}
.term__caret{display:inline-block;width:8px;height:1.05em;background:var(--orange-500);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.term__out{color:var(--paper-300)} .term__out .ok{color:var(--orange-500)} .term__out .cmt{color:var(--paper-400)}
@keyframes blink{50%{opacity:0}}
/* typing effect only when JS enables it (no-JS shows everything) */
.term--anim .term__cmd{clip-path:inset(0 100% 0 0)}
.term--anim.is-typed .term__cmd{clip-path:inset(0 0 0 0);transition:clip-path 1.5s linear}
.term--anim .term__caret{opacity:0}
.term--anim.is-typed .term__caret{opacity:1;transition:opacity .1s 1.5s}
.term--anim .term__out>div{opacity:0}
.term--anim.is-typed .term__out>div{animation:fadein .4s var(--ease-out) forwards}
.term--anim.is-typed .term__out>div:nth-child(1){animation-delay:1.55s}
.term--anim.is-typed .term__out>div:nth-child(2){animation-delay:1.75s}
.term--anim.is-typed .term__out>div:nth-child(3){animation-delay:1.95s}
.term--anim.is-typed .term__out>div:nth-child(4){animation-delay:2.15s}
.term--anim.is-typed .term__out>div:nth-child(5){animation-delay:2.35s}
.term--anim.is-typed .term__out>div:nth-child(6){animation-delay:2.55s}
@keyframes fadein{to{opacity:1}}

/* ----------------------------- Data-flow (ART 4) -------------------------- */
.flow{display:grid;gap:1px;background:var(--ink-line);border:1px solid var(--ink-line);border-radius:var(--r-md);overflow:hidden}
@media(min-width:820px){.flow{grid-template-columns:repeat(5,1fr)}}
.flow__cell{background:var(--ink-800);padding:1.2rem;position:relative}
.flow__k{font-family:var(--f-mono);font-size:.7rem;color:var(--orange-500);letter-spacing:.05em}
.flow__t{margin-top:.5rem;font-weight:600;font-size:1rem}
.flow__d{margin-top:.4rem;color:var(--paper-300);font-size:.88rem}
.flow__cell::after{content:"→";position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:var(--paper-500);z-index:2;font-family:var(--f-mono);display:none}
@media(min-width:820px){.flow__cell:not(:last-child)::after{display:block}}
.flow__badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-mono);font-size:.75rem;color:var(--paper-300);border:1px solid var(--ink-line);border-radius:var(--r-pill);padding:.3em .8em;margin-top:.3rem}
.flow__badge b{color:var(--orange-500);font-weight:500}
.notleaves{margin-top:1.2rem;border:1px dashed var(--ink-line);border-radius:var(--r-md);padding:1rem 1.2rem;font-family:var(--f-mono);font-size:.82rem;color:var(--paper-300)}
.notleaves b{color:var(--paper-100)}

/* ----------------------------- Gauge (ART 6) ------------------------------ */
.gauge{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.gauge__ring{position:relative;width:150px;height:150px;flex:none}
.gauge__ring svg{transform:rotate(-90deg)}
.gauge__track{fill:none;stroke:var(--ink-line);stroke-width:10}
.gauge__fill{fill:none;stroke:var(--orange-500);stroke-width:10;stroke-linecap:round}
.gauge__num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:2.3rem}
.gauge__num i{font-family:var(--f-mono);font-size:1rem;color:var(--paper-400);font-style:normal}

/* ----------------------------- Proof / quote ----------------------------- */
.quote{border-left:2px solid var(--orange-500);padding-left:1.2rem;font-size:1.15rem;line-height:1.5;max-width:56ch}
.quote cite{display:block;margin-top:.8rem;font-style:normal;font-family:var(--f-mono);font-size:.8rem;color:var(--paper-400)}

/* ----------------------------- Partners ---------------------------------- */
.plogos{display:flex;flex-wrap:wrap;gap:1rem}
.plogo{border:1px solid var(--ink-line);border-radius:var(--r-md);padding:.9rem 1.3rem;font-family:var(--f-mono);font-size:.82rem;color:var(--paper-300);letter-spacing:.03em}

/* ----------------------------- FAQ --------------------------------------- */
.faq{max-width:800px;margin-top:1.5rem;border-top:1px solid var(--ink-line)}
.faq details{border-bottom:1px solid var(--ink-line)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;font-weight:600;font-size:1.05rem;font-family:var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:1rem;font-family:var(--f-mono);color:var(--orange-500);font-size:1.3rem;transition:transform var(--dur-micro)}
.faq details[open] summary::after{content:"−"}
.faq p{padding-bottom:1.2rem;color:var(--paper-300);max-width:70ch}
.faq .callout{color:var(--paper-100)}

/* ----------------------------- CTA + form -------------------------------- */
.cta__card{border:1px solid var(--ink-line);border-radius:var(--r-lg);background:
  radial-gradient(90% 120% at 100% 0,rgba(246,162,30,.10),transparent 55%),var(--ink-800);
  padding:clamp(1.5rem,4vw,3rem)}
.cta__grid{display:grid;gap:2.5rem}
@media(min-width:900px){.cta__grid{grid-template-columns:1fr 1fr;gap:3rem;align-items:center}}
.form{display:grid;gap:.9rem}
.frow{display:grid;gap:.9rem}
@media(min-width:520px){.frow{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-family:var(--f-mono);font-size:.72rem;color:var(--paper-400);letter-spacing:.03em}
.field input,.field select,.field textarea{
  background:var(--ink-900);border:1px solid var(--ink-line);border-radius:var(--r-sm);
  padding:.75rem .85rem;color:var(--paper-100);font-family:var(--f-body);font-size:.95rem;width:100%;
  transition:border-color var(--dur-micro)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange-500)}
.field textarea{min-height:80px;resize:vertical}
.form__note{font-size:.78rem;color:var(--paper-400)}
.form__status{font-size:.9rem;min-height:1.2em}
.form__status.is-ok{color:var(--orange-500)} .form__status.is-err{color:var(--amber-500)}
.form.is-sent .form__fields{opacity:.5;pointer-events:none}

/* ----------------------------- Footer ------------------------------------ */
.footer{border-top:1px solid var(--ink-line);padding-block:3rem 2.5rem;background:var(--ink-900)}
.footer__grid{display:grid;gap:2rem}
@media(min-width:760px){.footer__grid{grid-template-columns:2fr 1fr 1fr}}
.footer h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-400);margin-bottom:.8rem}
.footer a{display:block;color:var(--paper-300);padding:.25rem 0;font-size:.95rem}
.footer a:hover{color:var(--paper-100)}
.footer .brand__mark{color:var(--paper-100)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--ink-line);font-size:.82rem;color:var(--paper-400);font-family:var(--f-mono)}

/* ----------------------------- Consent ----------------------------------- */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;max-width:520px;margin-inline:auto;
  background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--r-md);padding:1.1rem 1.2rem;
  display:none;gap:1rem;align-items:center;flex-wrap:wrap;box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.consent.is-visible{display:flex}
.consent p{font-size:.85rem;color:var(--paper-300);flex:1 1 260px}
.consent .btn{padding:.6em 1.1em;font-size:.85rem}

/* ----------------------------- Reveal / motion --------------------------- */
[data-reveal]{opacity:0;transform:translateY(24px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}

/* conic scan glow (angle only, over a pre-blurred static layer) */
.scan{position:absolute;inset:-40%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.5;
  background:conic-gradient(from var(--scan),transparent 0 78%,rgba(246,162,30,.5) 88%,transparent 92%);
  animation:scan 7s linear infinite}
@keyframes scan{to{--scan:360deg}}
.is-scan-paused .scan{animation-play-state:paused}

/* self-drawing edges (enhancement only, capped set) */
@media (prefers-reduced-motion: no-preference){
  .draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);animation:draw var(--dur-draw) var(--ease-out) forwards}
  .n-ring{animation:nring 2.8s var(--ease-out) infinite}
  .dcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px -18px rgba(15,36,64,.45)}
  .draw.d2{animation-delay:.15s}.draw.d3{animation-delay:.3s}.draw.d4{animation-delay:.45s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes nring{0%{transform:scale(.5);opacity:.8}70%{transform:scale(2);opacity:0}100%{opacity:0}}

/* ----------------------------- Reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .scan{animation:none;opacity:.35}
  .term__caret{animation:none}
  .term__out>div{opacity:1}
}

/* ==========================================================================
   LIGHT THEME (feature flag). Dark stays the DEFAULT; nothing is lost.
   Activated by <html data-theme="light">, set from ?theme=light|dark or the
   nav toggle (persisted in localStorage; see initTheme in main.js).
   All text pairs computed AA against the light canvas #F3F6FA.
   ========================================================================== */
:root { color-scheme: dark; }
[data-theme="light"] {
  color-scheme: light;
  --ink-900:#F3F6FA; --ink-800:#FFFFFF; --ink-700:#E7EDF4; --ink-line:#C9D6E3;
  --paper-100:#122A45; --paper-300:#3A5876; --paper-400:#54708D; --paper-500:#7E97AF;
  /* orange must darken to stay AA as text on light; the bright macron orange
     moves to --orange-300 (fills/glows with dark keyline text) */
  --orange-500:#C2410C; --orange-300:#F6A21E; --orange-700:#9A3412;
  --amber-500:#B3382B;
  --vellum-100:#E2EBF4; --vellum-50:#FBFDFF; --vellum-line:rgba(15,36,64,.16);
}
[data-theme="light"] .nav{background:rgba(243,246,250,.78)}
[data-theme="light"] .nav.is-scrolled{background:rgba(243,246,250,.92)}
[data-theme="light"] .topo__scanbtn{background:rgba(255,255,255,.65)}
[data-theme="light"] .scan{opacity:.3;background:conic-gradient(from var(--scan),transparent 0 78%,rgba(194,65,12,.4) 88%,transparent 92%)}
[data-theme="light"] .dots{background-image:radial-gradient(rgba(15,36,64,.10) 1px,transparent 1px)}
[data-theme="light"] .blueprint{background-image:linear-gradient(to right, rgba(37,91,143,.10) 1px, transparent 1px),linear-gradient(to bottom, rgba(37,91,143,.10) 1px, transparent 1px)}
[data-theme="light"] .term{box-shadow:0 30px 80px -40px rgba(15,36,64,.3)}
[data-theme="light"] .btn--primary{box-shadow:0 0 0 0 rgba(194,65,12,.3)}
[data-theme="light"] .btn--primary:hover{box-shadow:0 8px 30px -8px rgba(194,65,12,.45)}
/* the recommended-7R chip keeps the bright brand orange as a keylined mark */
[data-theme="light"] .disp--rec{background:var(--orange-300)}
[data-theme="light"] .bp-node--rec{fill:var(--orange-300)}
[data-theme="light"] .consent{box-shadow:0 20px 60px -20px rgba(15,36,64,.35)}
/* WCAG 1.4.11: field boundaries need 3:1 on the white cta__card; scoped to .field only */
[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .field textarea{border-color:var(--paper-400)}
[data-theme="light"] .field input:focus,[data-theme="light"] .field select:focus,[data-theme="light"] .field textarea:focus{border-color:var(--orange-500)}
[data-theme="light"] .railtop__fill{background:linear-gradient(90deg,var(--grad-blue),var(--grad-coral),var(--orange-500))}

/* ---------------- theme toggle (the flag UI) ---------------- */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:1px solid var(--ink-line);border-radius:var(--r-pill);color:var(--paper-300);background:transparent;transition:color var(--dur-micro),border-color var(--dur-micro)}
.themebtn:hover{color:var(--paper-100);border-color:var(--paper-400)}
.themebtn svg{width:16px;height:16px}
.themebtn .i-sun{display:block}
.themebtn .i-moon{display:none}
[data-theme="light"] .themebtn .i-sun{display:none}
[data-theme="light"] .themebtn .i-moon{display:block}