/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  --paper:#F4F6FA;
  --surface:#FFFFFF;
  --surface-sunk:#E8ECF6;
  --ink:#0B1026;
  --ink-soft:#29304F;
  --slate:#565E7C;
  --slate-dim:#868DA6;
  --rule:#DCE1EE;
  --rule-soft:#E9EDF6;
  --signal:#B0700F;
  --signal-bright:#DD9A24;
  --signal-wash:#FAEEDA;
  --deep:#131A46;
  --deep-2:#1A2258;
  --on-deep:#E9ECF7;
  --on-deep-dim:#9AA2C4;
  --deep-rule:#2C3670;

  --rail:11rem;
  --maxw:76rem;
  --radius:3px;

  --fs-xs:.6875rem;
  --fs-sm:.8125rem;
  --fs-base:1.0625rem;
  --fs-md:1.1875rem;
  --fs-lg:1.375rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.375rem;
  --fs-3xl:clamp(2rem,4.2vw,3.25rem);
  --fs-hero:clamp(2.6rem,6.4vw,5.25rem);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-prose:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#080B1A;
    --surface:#0F1430;
    --surface-sunk:#0C1027;
    --ink:#E7EAF6;
    --ink-soft:#C2C8E0;
    --slate:#939BBA;
    --slate-dim:#6E7699;
    --rule:#232A4E;
    --rule-soft:#1A2040;
    --signal:#E3AB4E;
    --signal-bright:#EFC076;
    --signal-wash:#241C0C;
    --deep:#060917;
    --deep-2:#0C1130;
    --on-deep:#E7EAF6;
    --on-deep-dim:#8B93B5;
    --deep-rule:#1F2650;
  }
}
:root[data-theme="dark"]{
  --paper:#080B1A;
  --surface:#0F1430;
  --surface-sunk:#0C1027;
  --ink:#E7EAF6;
  --ink-soft:#C2C8E0;
  --slate:#939BBA;
  --slate-dim:#6E7699;
  --rule:#232A4E;
  --rule-soft:#1A2040;
  --signal:#E3AB4E;
  --signal-bright:#EFC076;
  --signal-wash:#241C0C;
  --deep:#060917;
  --deep-2:#0C1130;
  --on-deep:#E7EAF6;
  --on-deep-dim:#8B93B5;
  --deep-rule:#1F2650;
}

/* ── base ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);text-wrap:balance;font-weight:700;letter-spacing:-.022em;line-height:1.05}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
img,svg,canvas{max-width:100%;display:block}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem}

/* eyebrow / mono utility */
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--fs-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate-dim);
  font-weight:500;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.eyebrow .idx{color:var(--signal);font-weight:600}

.prose{font-family:var(--f-prose);font-size:var(--fs-md);line-height:1.62;color:var(--ink-soft);max-width:62ch}
.prose-sm{font-family:var(--f-prose);font-size:var(--fs-base);line-height:1.6;color:var(--slate);max-width:60ch}

/* ── section frame: spec-sheet rail ─────────────────────────────────── */
.sec{border-top:1px solid var(--rule);padding-block:5.5rem}
.sec-grid{display:grid;grid-template-columns:var(--rail) 1fr;gap:3rem}
.rail{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-dim);
  display:flex;flex-direction:column;gap:.5rem;
  border-top:2px solid var(--signal);padding-top:.85rem;height:max-content;
  position:sticky;top:5.5rem;
}
.rail b{color:var(--ink);font-weight:600;letter-spacing:.12em}
@media (max-width:860px){
  .sec-grid{grid-template-columns:1fr;gap:1.75rem}
  .rail{position:static;flex-direction:row;gap:1rem;align-items:baseline;flex-wrap:wrap}
  .sec{padding-block:4rem}
}

/* ── nav ────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;gap:2rem;height:4.25rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.logo-img{width:34px;height:auto;flex:none}
.wordmark{display:flex;flex-direction:column;line-height:1.05}
.logo .mark{
  font-family:var(--f-display);font-weight:800;font-size:1.0625rem;
  font-stretch:118%;letter-spacing:-.03em;color:var(--ink);
}
.logo .sub{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--slate-dim);letter-spacing:.13em;text-transform:uppercase}
.foot-mark{display:flex;align-items:center;gap:.7rem}
.foot-mark img{width:30px;height:auto;flex:none}
.nav-links{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-links a{
  text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--slate);
  padding-block:.25rem;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--signal)}
@media (max-width:1000px){.nav-links{display:none}}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  padding:.7rem 1.15rem;border-radius:var(--radius);border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
  cursor:pointer;
}
.btn .arw{transition:transform .22s}
.btn:hover .arw{transform:translateX(3px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--signal);color:#12100B}
.btn-line{border-color:var(--rule);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.btn-signal{background:var(--signal-bright);color:#1A1206;border-color:var(--signal-bright)}
.btn-signal:hover{filter:brightness(1.07)}
.btn-ondeep{border-color:var(--deep-rule);color:var(--on-deep)}
.btn-ondeep:hover{border-color:var(--signal-bright);color:var(--signal-bright)}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{padding-block:5.5rem 4.5rem;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:end}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:3rem;align-items:start}}
.hero h1{
  font-size:var(--fs-hero);font-weight:800;font-stretch:112%;
  letter-spacing:-.035em;line-height:.96;margin-bottom:1.75rem;
}
.hero h1 em{font-style:normal;color:var(--signal);font-stretch:112%}
.hero-lede{font-family:var(--f-prose);font-size:var(--fs-md);line-height:1.6;color:var(--ink-soft);max-width:48ch}
.hero-lede + .hero-lede{margin-top:1rem;color:var(--slate)}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2.25rem}
.tagline{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate-dim);margin-bottom:1.5rem;display:flex;align-items:center;gap:.7rem;
}
.tagline .dot{width:6px;height:6px;background:var(--signal);border-radius:50%;flex:none}

/* instrument panel */
.panel{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(11,16,38,.05),0 12px 32px -18px rgba(11,16,38,.20);
}
.panel-hd{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--rule-soft);
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--slate-dim);
}
.panel-hd .live{display:flex;align-items:center;gap:.45rem;color:var(--signal)}
.panel-hd .live i{width:5px;height:5px;border-radius:50%;background:var(--signal-bright);display:block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.panel-body{padding:1rem}
#curve{width:100%;height:190px}
.readout{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-soft)}
.readout div{padding:.85rem 1rem}
.readout div + div{border-left:1px solid var(--rule-soft)}
.readout .k{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-dim);display:block;margin-bottom:.3rem}
.readout .v{font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.readout .v.up{color:var(--signal)}
.panel-ft{
  padding:.6rem 1rem;border-top:1px solid var(--rule-soft);
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--slate-dim);letter-spacing:.04em;
}

/* ── problem ────────────────────────────────────────────────────────── */
.friction{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.5rem;border-top:1px solid var(--rule)}
.friction li{
  list-style:none;padding:1.5rem 1.5rem 1.5rem 0;border-bottom:1px solid var(--rule-soft);
}
.friction li:nth-child(3n+2),.friction li:nth-child(3n){padding-left:1.5rem;border-left:1px solid var(--rule-soft)}
.friction .n{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--signal);letter-spacing:.1em;display:block;margin-bottom:.55rem}
.friction h4{font-size:var(--fs-base);font-weight:600;margin-bottom:.4rem}
.friction p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--slate);line-height:1.55}
@media (max-width:780px){
  .friction{grid-template-columns:1fr}
  .friction li,.friction li:nth-child(3n+2),.friction li:nth-child(3n){padding-left:0;border-left:0}
}

/* ── approach: true sequence, so it is numbered ─────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
.step{background:var(--paper);padding:1.75rem 1.35rem;position:relative;transition:background .2s}
.step:hover{background:var(--surface)}
.step .num{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:600;color:var(--signal);
  letter-spacing:.12em;display:block;margin-bottom:1.5rem;
}
.step h3{font-size:var(--fs-lg);margin-bottom:.6rem}
.step p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--slate);line-height:1.55}
.step .bar{position:absolute;left:0;top:-1px;height:2px;background:var(--signal);width:100%}
.js .step .bar{width:0;transition:width .7s cubic-bezier(.22,1,.36,1)}
.js .step.in .bar{width:100%}
.loop{
  margin-top:1rem;font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate-dim);display:flex;align-items:center;gap:.6rem;
}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ── solutions ──────────────────────────────────────────────────────── */
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
.sol{background:var(--paper);padding:1.75rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;transition:background .2s}
.sol:hover{background:var(--surface)}
.sol .tag{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--slate-dim)}
.sol h3{font-size:var(--fs-lg);letter-spacing:-.02em}
.sol p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--slate);line-height:1.55}
@media (max-width:900px){.sols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sols{grid-template-columns:1fr}}

/* ── department table ───────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin-top:2.5rem;border:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;min-width:38rem}
thead th{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-dim);font-weight:500;text-align:left;padding:.85rem 1.25rem;
  border-bottom:1px solid var(--rule);background:var(--surface-sunk);
}
tbody td{padding:.95rem 1.25rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .16s}
tbody tr:hover{background:var(--surface)}
td.dept{font-weight:600;font-size:var(--fs-base);white-space:nowrap;width:14rem}
td.sol-list{font-family:var(--f-prose);color:var(--slate);font-size:var(--fs-sm);line-height:1.5}

/* ── AI band ────────────────────────────────────────────────────────── */
.deepsec{background:var(--deep);color:var(--on-deep);border-top:1px solid var(--deep-rule)}
.deepsec .eyebrow{color:var(--on-deep-dim)}
.deepsec .eyebrow::after{background:var(--deep-rule)}
.deepsec .rail{color:var(--on-deep-dim);border-top-color:var(--signal-bright)}
.deepsec .rail b{color:var(--on-deep)}
.deepsec h2,.deepsec h3{color:var(--on-deep)}
.deepsec .prose{color:var(--on-deep-dim)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.chip{
  font-family:var(--f-mono);font-size:var(--fs-sm);padding:.45rem .8rem;
  border:1px solid var(--deep-rule);border-radius:var(--radius);color:var(--on-deep-dim);
  background:var(--deep-2);transition:border-color .18s,color .18s;
}
.chip:hover{border-color:var(--signal-bright);color:var(--signal-bright)}

/* ── estari pro ─────────────────────────────────────────────────────── */
.pro-hd{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.pro-hd h2{font-size:var(--fs-3xl);font-stretch:110%}
.badge{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .6rem;border:1px solid var(--signal);color:var(--signal-bright);border-radius:var(--radius);
}
.pro-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--deep-rule);border:1px solid var(--deep-rule);margin-top:2.5rem}
.pro-cell{background:var(--deep);padding:1.6rem 1.4rem}
.pro-cell h4{font-size:var(--fs-base);font-weight:600;margin-bottom:.45rem;color:var(--on-deep)}
.pro-cell p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--on-deep-dim);line-height:1.55}
@media (max-width:760px){.pro-split{grid-template-columns:1fr}}
.pro-split-3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:880px){.pro-split-3{grid-template-columns:1fr}}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--deep-rule);border:1px solid var(--deep-rule);margin-top:1.5rem}
.metric{background:var(--deep-2);padding:1.1rem 1rem}
.metric .k{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-dim);display:block;margin-bottom:.35rem}
.metric .v{font-size:1.35rem;font-weight:700;color:var(--signal-bright);letter-spacing:-.02em;
  display:block;text-wrap:balance;overflow-wrap:break-word;line-height:1.15}
@media (max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}}
.note{
  margin-top:1.5rem;border-left:2px solid var(--signal);padding:.9rem 0 .9rem 1.15rem;
  font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--on-deep-dim);line-height:1.6;max-width:64ch;
}
.note b{color:var(--on-deep);font-family:var(--f-display);font-weight:600}

/* ── industries ─────────────────────────────────────────────────────── */
.inds{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
.ind{background:var(--paper);padding:1.6rem 1.4rem;transition:background .2s}
.ind:hover{background:var(--surface)}
.ind.lead{background:var(--surface);grid-row:span 2;display:flex;flex-direction:column}
.ind .st{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:.7rem;display:block}
.ind .st.future{color:var(--slate-dim)}
.ind h3{font-size:var(--fs-lg);margin-bottom:.5rem}
.ind p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--slate);line-height:1.55}
.ind.lead ul{margin:1.25rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--rule-soft);padding-top:1.25rem}
.ind.lead li{font-family:var(--f-mono);font-size:var(--fs-sm);color:var(--ink-soft);display:flex;gap:.6rem;align-items:baseline}
.ind.lead li::before{content:"—";color:var(--signal);flex:none}
@media (max-width:880px){.inds{grid-template-columns:1fr 1fr}.ind.lead{grid-row:span 1;grid-column:span 2}}
@media (max-width:560px){.inds{grid-template-columns:1fr}.ind.lead{grid-column:span 1}}

/* ── results ────────────────────────────────────────────────────────── */
.meas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
.meas div{background:var(--paper);padding:1.15rem 1.3rem;display:flex;align-items:baseline;gap:.85rem}
.meas .id{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--signal);letter-spacing:.08em;flex:none}
.meas .lbl{font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft)}
@media (max-width:860px){.meas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.meas{grid-template-columns:1fr}}

/* ── case model ─────────────────────────────────────────────────────── */
.caseflow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
.cf{background:var(--paper);padding:1.5rem 1.3rem}
.cf .k{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dim);display:block;margin-bottom:.7rem}
.cf p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55}
.cf.result{background:var(--signal-wash)}
.cf.result .k{color:var(--signal)}
.cf.result p{color:var(--ink)}
@media (max-width:880px){.caseflow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.caseflow{grid-template-columns:1fr}}

/* ── principles ─────────────────────────────────────────────────────── */
.princ{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
.pr{background:var(--paper);padding:1.5rem 1.2rem}
.pr h4{font-size:var(--fs-base);font-weight:600;margin-bottom:.45rem}
.pr p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--slate);line-height:1.5}
@media (max-width:980px){.princ{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.princ{grid-template-columns:1fr}}

/* ── final CTA ──────────────────────────────────────────────────────── */
.final{background:var(--deep);color:var(--on-deep);padding-block:6rem;border-top:1px solid var(--deep-rule)}
.final h2{font-size:var(--fs-3xl);font-stretch:110%;max-width:20ch;margin-bottom:1.25rem;color:var(--on-deep)}
.final .prose{color:var(--on-deep-dim);max-width:54ch}
.final-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2.25rem}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--deep-rule);border:1px solid var(--deep-rule);margin-top:3.5rem}
.path{background:var(--deep-2);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.path .k{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-bright)}
.path h4{font-size:var(--fs-lg);color:var(--on-deep)}
.path p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--on-deep-dim);line-height:1.55}
.path a{
  margin-top:.4rem;font-family:var(--f-mono);font-size:var(--fs-sm);text-decoration:none;
  color:var(--on-deep);border-bottom:1px solid var(--deep-rule);padding-bottom:.2rem;width:max-content;
  transition:border-color .18s,color .18s;
}
.path a:hover{color:var(--signal-bright);border-color:var(--signal-bright)}
@media (max-width:700px){.paths{grid-template-columns:1fr}}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{background:var(--deep);color:var(--on-deep-dim);border-top:1px solid var(--deep-rule);padding-block:2.5rem}
.foot-in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:baseline;font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.06em}
.foot b{color:var(--on-deep);font-family:var(--f-display);font-weight:700;font-stretch:115%;letter-spacing:-.02em;font-size:var(--fs-sm)}
.foot-products{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:flex-end}
.foot-products a{
  color:var(--on-deep);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:.15rem;transition:color .18s,border-color .18s;
}
.foot-products a:hover{color:var(--signal-bright);border-bottom-color:var(--signal-bright)}
@media (max-width:640px){.foot-products{justify-content:flex-start;gap:.9rem}}
/* sticky nav would otherwise cover an anchored heading */
.block[id]{scroll-margin-top:5.5rem}
.foot-legal{display:flex;flex-direction:column;gap:.35rem;text-align:right}
@media (max-width:640px){.foot-products{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:flex-end}
.foot-products a{
  color:var(--on-deep);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:.15rem;transition:color .18s,border-color .18s;
}
.foot-products a:hover{color:var(--signal-bright);border-bottom-color:var(--signal-bright)}
@media (max-width:640px){.foot-products{justify-content:flex-start;gap:.9rem}}
/* sticky nav would otherwise cover an anchored heading */
.block[id]{scroll-margin-top:5.5rem}
.foot-legal{text-align:left}}

/* ── reveal ─────────────────────────────────────────────────────────── */
/* Content is visible by default and only hidden once JS confirms it can reveal it
   again (the .js class is set by an inline script in <head>). Without this, a
   failed or blocked script leaves the whole page blank to readers and crawlers. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .step .bar{transition:none;width:100%}
  .panel-hd .live i{animation:none}
  *{scroll-behavior:auto!important}
}
html{scroll-behavior:smooth}

/* ═══ multi-page additions ═══════════════════════════════════════════ */

/* active nav state */
.nav-links a.active{color:var(--ink);border-bottom-color:var(--signal)}

/* mobile menu — pure CSS, no JS dependency */
.menu{display:none;margin-left:auto;position:relative}
.menu summary{
  list-style:none;cursor:pointer;padding:.55rem .75rem;border:1px solid var(--rule);
  border-radius:var(--radius);font-family:var(--f-mono);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--ink)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + .6rem);min-width:14rem;z-index:60;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 18px 40px -20px rgba(11,16,38,.35);padding:.5rem;
  display:flex;flex-direction:column;
}
.menu-panel a{
  text-decoration:none;color:var(--ink-soft);font-size:var(--fs-sm);font-weight:500;
  padding:.6rem .7rem;border-radius:2px;
}
.menu-panel a:hover,.menu-panel a.active{background:var(--surface-sunk);color:var(--ink)}
@media (max-width:1000px){
  .menu{display:block}
  .nav-in > .btn{display:none}
}

/* interior page header */
.pagehead{padding-block:4.5rem 3rem;border-bottom:1px solid var(--rule)}
.pagehead .crumb{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-dim);margin-bottom:1.5rem;display:flex;gap:.6rem;align-items:center;
}
.pagehead .crumb a{text-decoration:none;color:var(--slate-dim);transition:color .18s}
.pagehead .crumb a:hover{color:var(--signal)}
.pagehead .crumb span{color:var(--rule)}
.pagehead h1{
  font-size:clamp(2.25rem,5.2vw,3.9rem);font-weight:800;font-stretch:110%;
  letter-spacing:-.032em;line-height:1;max-width:20ch;
}
.pagehead .lede{
  font-family:var(--f-prose);font-size:var(--fs-md);line-height:1.6;
  color:var(--ink-soft);max-width:58ch;margin-top:1.5rem;
}

/* long-form block used on interior pages */
.block{border-top:1px solid var(--rule);padding-block:3.5rem}
.block:first-of-type{border-top:0}
.block-grid{display:grid;grid-template-columns:var(--rail) 1fr;gap:3rem}
.block-num{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-dim);border-top:2px solid var(--signal);padding-top:.85rem;height:max-content;
}
.block h2{font-size:var(--fs-2xl);letter-spacing:-.028em;max-width:22ch}
.block h3{font-size:var(--fs-lg);margin-top:2rem;margin-bottom:.5rem}
.block .prose{margin-top:1.15rem}
@media (max-width:860px){.block-grid{grid-template-columns:1fr;gap:1.5rem}}

/* bullet list, mono-marked */
.blist{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
/* The marker is absolutely positioned rather than a grid column: list items
   contain inline markup (<b>label</b> — description), and CSS grid would promote
   each element and each text run to its own grid item, dropping the description
   into the narrow marker column. */
.blist li{
  position:relative;padding-left:1.6rem;
  font-family:var(--f-prose);font-size:var(--fs-base);color:var(--ink-soft);line-height:1.55;
}
.blist li::before{
  content:"—";position:absolute;left:0;top:0;line-height:inherit;
  color:var(--signal);font-family:var(--f-mono);
}
/* Product status pill. `.st` is scoped to the industries grid, so anything
   using it elsewhere silently inherits surrounding text -- this is the one
   that works on both the light pages and the deep product band. */
.status{
  display:inline-block;font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;vertical-align:middle;
  color:var(--slate-dim);border:1px solid var(--rule);padding:.1rem .45rem;border-radius:var(--radius);
}
.status.live{color:var(--signal);border-color:var(--signal)}
.deepsec .status{color:var(--on-deep-dim);border-color:var(--deep-rule)}
.deepsec .status.live{color:var(--signal-bright);border-color:var(--signal)}
.status-line{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1.1rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--slate-dim);
}
.status-line a{color:var(--signal);text-decoration:none;border-bottom:1px solid transparent}
.status-line a:hover{border-bottom-color:var(--signal)}
.pro-cell h4 .status{margin-left:.5rem}

.note-light{
  margin-top:1.75rem;border-left:2px solid var(--signal);padding:.35rem 0 .35rem 1.15rem;
  font-family:var(--f-prose);font-size:var(--fs-base);line-height:1.58;color:var(--ink-soft);max-width:64ch;
}
.blist li b{font-family:var(--f-display);font-weight:600;color:var(--ink);letter-spacing:-.012em}
.blist.two{grid-template-columns:1fr 1fr;column-gap:2.5rem}
@media (max-width:700px){.blist.two{grid-template-columns:1fr}}

/* two-up content split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2rem}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:1.75rem}}

/* CTA band */
.band{border-top:1px solid var(--rule);background:var(--surface-sunk);padding-block:3.5rem}
.band-in{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.band h3{font-size:var(--fs-xl);max-width:24ch}
.band p{font-family:var(--f-prose);font-size:var(--fs-base);color:var(--slate);max-width:46ch;margin-top:.5rem}

/* ─── contact form ─── */
.formwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start}
@media (max-width:900px){.formwrap{grid-template-columns:1fr;gap:2.5rem}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:.5rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1 / -1}
.field label{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);display:flex;gap:.4rem;align-items:baseline;
}
.field label .req{color:var(--signal)}
.field input,.field select,.field textarea{
  font-family:var(--f-display);font-size:var(--fs-base);color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.7rem .8rem;width:100%;transition:border-color .18s,box-shadow .18s;
}
.field textarea{resize:vertical;min-height:7rem;font-family:var(--f-prose);line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-wash);
}
.field .hint{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--slate-dim)}
.field.err input,.field.err select,.field.err textarea{border-color:#C0392B}
.field .err-msg{font-family:var(--f-mono);font-size:var(--fs-xs);color:#C0392B;display:none}
.field.err .err-msg{display:block}
@media (max-width:600px){.form{grid-template-columns:1fr}}
/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. Real users never reach it -- it is
   aria-hidden and tabindex="-1". */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-actions{grid-column:1 / -1;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.form-note{
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--slate-dim);line-height:1.6;
  border-left:2px solid var(--rule);padding-left:.9rem;
}
.aside-card{
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);padding:1.5rem;
  display:flex;flex-direction:column;gap:1rem;
}
.aside-card h3{font-size:var(--fs-lg)}
.aside-card p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--slate);line-height:1.55}
.aside-card + .aside-card{margin-top:1.25rem}
.form-status{
  grid-column:1 / -1;font-family:var(--f-mono);font-size:var(--fs-sm);
  padding:.85rem 1rem;border-radius:var(--radius);display:none;
}
.form-status.ok{display:block;background:var(--signal-wash);color:var(--ink);border:1px solid var(--signal)}
.form-status.bad{display:block;background:#FBE9E7;color:#8E2A1E;border:1px solid #C0392B}

/* estari pro capability table */
.cap{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2rem}
.cap-row{background:var(--paper);padding:1.35rem 1.4rem;display:grid;grid-template-columns:15rem 1fr;gap:2rem}
.cap-row h4{font-size:var(--fs-base);font-weight:600}
.cap-row p{font-family:var(--f-prose);font-size:var(--fs-sm);color:var(--slate);line-height:1.55}
@media (max-width:760px){.cap-row{grid-template-columns:1fr;gap:.4rem}}