/* ==========================================================================
   DataFab — datafab.ai
   Design system: void / bone / amber. Playfair Display · Space Grotesk · IBM Plex Mono
   ========================================================================== */

:root{
  --void:#09090a;
  --void-2:#0d0d0f;
  --void-3:#121214;
  --bone:#f2ede4;
  --amber:#c49a5a;
  --amber-2:#d4ae72;
  --grey:#8d8a83;

  --line:rgba(242,237,228,.10);
  --line-2:rgba(242,237,228,.055);
  --amber-line:rgba(196,154,90,.30);
  --amber-wash:rgba(196,154,90,.07);

  --disp:'Playfair Display',Georgia,serif;
  --ui:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,5vw,64px);
  --maxw:1280px;
  --narrow:900px;
  --rail:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--ui);
  font-weight:300;
  font-size:16px;
  line-height:1.62;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--amber);color:var(--void)}

a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- type ---------------------------------------------------------- */

h1,h2,h3,h4,h3.h4{font-family:var(--disp);font-weight:400;margin:0;letter-spacing:-.015em;line-height:1.06}
h1{font-size:clamp(2.7rem,7.2vw,6.1rem)}
h2{font-size:clamp(2rem,4.4vw,3.7rem);line-height:1.08}
h3{font-size:clamp(1.35rem,2.2vw,1.95rem);line-height:1.18}
h4,h3.h4{font-size:1.06rem;line-height:1.3}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(1.06rem,1.5vw,1.32rem);line-height:1.58;color:rgba(242,237,228,.80);font-weight:300;max-width:72ch}
.sub{color:rgba(242,237,228,.62);font-size:.965rem;line-height:1.68}
.small{font-size:.86rem;line-height:1.6;color:rgba(242,237,228,.55)}

/* gold italic replaces bold for emphasis — house rule */
em,.em,i{font-style:italic;color:var(--amber-2);font-weight:inherit}
strong,b{font-weight:400;font-style:italic;color:var(--amber-2)}

.eyebrow{
  font-family:var(--mono);font-size:.665rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);font-weight:400;display:flex;align-items:center;gap:.75em;margin:0 0 1.4rem;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--amber);opacity:.55;flex:none}
.eyebrow.plain::before{display:none}

.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
.num{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--amber);opacity:.8}

.serif-quote{font-family:var(--disp);font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.26;font-style:italic;color:var(--bone)}

/* ---------- layout -------------------------------------------------------- */

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.wrap-narrow{max-width:var(--narrow);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

section{position:relative}
.band{padding:clamp(64px,9vw,132px) 0;border-top:1px solid var(--line-2)}
.band.tight{padding:clamp(46px,6vw,84px) 0}
.band.alt{background:linear-gradient(180deg,var(--void-2),var(--void))}
.band.deep{background:var(--void-2)}

.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,80px);align-items:start}
.split.rev{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.head{max-width:78ch;margin-bottom:clamp(34px,4.5vw,58px)}
.head h2 + .lede{margin-top:1.15rem}

@media (max-width:1000px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split.rev{grid-template-columns:1fr}
}
@media (max-width:640px){
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
}

/* ---------- header -------------------------------------------------------- */

.hud{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px var(--gut);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,237,228,.42);
  background:rgba(9,9,10,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
  height:29px;overflow:hidden;white-space:nowrap;
}
.hud-left{overflow:hidden;text-overflow:ellipsis}
.hud .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);display:inline-block;margin-right:.6em;vertical-align:middle;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hud-right{display:flex;gap:1.6em}
@media (max-width:900px){.hud .cert{display:none}}
@media (max-width:620px){
  .hud{font-size:.55rem;letter-spacing:.14em;gap:10px}
  .hud .tag{display:none}
}

header.nav{
  position:fixed;top:29px;left:0;right:0;z-index:80;
  background:rgba(9,9,10,.82);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px}

.logo{display:flex;align-items:center;gap:13px;flex:none}
.logo-mark{width:16px;height:auto;flex:none;display:block}
.logo-txt{font-family:var(--disp);font-size:1.14rem;letter-spacing:.01em;color:var(--bone)}
.logo-txt i{font-style:italic;color:var(--amber)}

.nav-links{display:flex;align-items:center;gap:clamp(10px,1.35vw,20px)}
.nav-links a{
  font-size:.775rem;letter-spacing:0;color:rgba(242,237,228,.66);
  padding:7px 11px;position:relative;transition:color .2s ease,background .2s ease;
  white-space:nowrap;border-radius:4px;
}
.nav-links a:hover{color:var(--void);background:var(--amber-2)}
.nav-links a.on{color:var(--void);background:var(--amber);font-weight:500}
.nav-links a.on:hover{background:var(--amber-2);color:var(--void)}


.btn{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  padding:.85em 1.5em;border:1px solid var(--amber-line);color:var(--amber-2);
  background:transparent;transition:all .25s ease;cursor:pointer;
}
.btn:hover{background:var(--amber);color:var(--void);border-color:var(--amber)}
.btn.solid{background:var(--amber);color:var(--void);border-color:var(--amber)}
.btn.solid:hover{background:var(--amber-2);border-color:var(--amber-2)}
.btn.ghost{border-color:var(--line);color:rgba(242,237,228,.7)}
.btn.ghost:hover{border-color:var(--bone);background:transparent;color:var(--bone)}
.btn.sm{padding:.6em 1.05em;font-size:.62rem}

.burger{display:none;background:none;border:0;color:var(--bone);padding:8px;cursor:pointer}
.burger span{display:block;width:20px;height:1px;background:currentColor;margin:5px 0;transition:.25s}
.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1180px){
  .burger{display:block}
  .nav-links{
    position:fixed;top:95px;left:0;right:0;bottom:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--void);padding:20px var(--gut) 60px;
    overflow-y:auto;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .nav-open .nav-links{transform:translateX(0)}
  .nav-links a{width:100%;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:1rem}
  .nav-links .btn{margin-top:22px;width:100%;justify-content:center;border-bottom:1px solid var(--amber-line)}
}

main{padding-top:95px}

/* ---------- hero ---------------------------------------------------------- */

.hero{position:relative;padding:clamp(52px,8vw,104px) 0 clamp(56px,7vw,96px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.1rem,4.15vw,3.85rem);margin-bottom:1.6rem;letter-spacing:-.022em}
.hero h1 .li{display:block}
.hero h1 i{font-style:italic;color:var(--amber)}

.hero-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
   radial-gradient(900px 480px at 78% 18%,rgba(196,154,90,.13),transparent 62%),
   radial-gradient(620px 420px at 4% 88%,rgba(196,154,90,.06),transparent 60%);
}
.hero-rule{display:flex;flex-wrap:wrap;gap:10px;margin-top:2.3rem}

.chip{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(242,237,228,.62);border:1px solid var(--line);padding:.55em .9em;
}
.chip .tick{color:var(--amber)}
.chip.gold{border-color:var(--amber-line);color:var(--amber-2)}

/* ---------- cards --------------------------------------------------------- */

.card{
  border:1px solid var(--line);padding:clamp(20px,2.3vw,30px);
  background:linear-gradient(180deg,rgba(242,237,228,.022),transparent);
  transition:border-color .3s ease,transform .3s ease,background .3s ease;
  position:relative;height:100%;
}
.card:hover{border-color:var(--amber-line);transform:translateY(-2px)}
.card h4,.card h3.h4{font-family:var(--ui);font-weight:400;font-size:.98rem;letter-spacing:.005em;margin-bottom:.55rem;color:var(--bone)}
.card p{font-size:.895rem;line-height:1.62;color:rgba(242,237,228,.60);margin:0}
.card .kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.9rem}
.card .icn{color:var(--amber);margin-bottom:1rem;display:block;opacity:.9}
.card.flat{background:none}
.card.gold{border-color:var(--amber-line);background:var(--amber-wash)}

.stat{border-left:1px solid var(--amber-line);padding:2px 0 2px 18px}
.stat .v{font-family:var(--disp);font-size:clamp(1.9rem,3.4vw,3rem);line-height:1;color:var(--bone);display:block}
.stat .v i{font-style:italic;color:var(--amber)}
.stat .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-top:.7rem;display:block}

/* numbered sequence rows — only used where order carries meaning */
.seq{border-top:1px solid var(--line)}
.seq-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:4px clamp(14px,2.4vw,28px);
  padding:clamp(16px,2.2vw,24px) 0;border-bottom:1px solid var(--line);align-items:start}
.seq-row>div{grid-column:2}
.seq-row .body{margin-top:.15rem}
.seq-row .n{font-family:var(--mono);font-size:.7rem;color:var(--amber);letter-spacing:.1em;padding-top:.15em}
.seq-row h4,.seq-row h3.h4{font-family:var(--disp);font-size:clamp(1.1rem,1.6vw,1.38rem);font-weight:400;line-height:1.18}
.seq-row .role{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:.35rem}
.seq-row p{font-size:.92rem;color:rgba(242,237,228,.63);margin:0;max-width:84ch}
.seq-row:hover .n{opacity:1;color:var(--amber-2)}
@media (max-width:820px){.seq-row{grid-template-columns:34px 1fr}}

/* two-column comparison */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.versus>div{padding:clamp(22px,2.6vw,34px)}
.versus>div:first-child{border-right:1px solid var(--line);background:rgba(242,237,228,.012)}
.versus>div:last-child{background:var(--amber-wash)}
.versus h4,.versus h3.h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.3rem}
.versus>div:first-child h4,.versus>div:first-child h3.h4{color:var(--grey)}
.versus>div:last-child h4,.versus>div:last-child h3.h4{color:var(--amber)}
.versus .claim{font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.2;margin-bottom:1.4rem;color:var(--bone)}
.versus ul{list-style:none;margin:0;padding:0}
.versus li{font-size:.895rem;line-height:1.55;color:rgba(242,237,228,.62);padding:.62em 0 .62em 1.5em;position:relative;border-top:1px solid var(--line-2)}
.versus li:first-child{border-top:0}
.versus>div:first-child li::before{content:'—';position:absolute;left:0;color:var(--grey);opacity:.6}
.versus>div:last-child li::before{content:'◆';position:absolute;left:0;color:var(--amber);font-size:.6em;top:1.05em}
@media (max-width:760px){.versus{grid-template-columns:1fr}.versus>div:first-child{border-right:0;border-bottom:1px solid var(--line)}}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th,.tbl td{text-align:left;padding:.92em 1em;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border-bottom-color:var(--amber-line);font-weight:400}
.tbl td{color:rgba(242,237,228,.66)}
.tbl td:first-child{color:var(--bone)}
.tbl tbody tr:hover{background:rgba(242,237,228,.02)}
.tbl .yes{color:var(--amber-2)}
.tbl .no{color:var(--grey);opacity:.6}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroller table{min-width:640px}

/* pill list */
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills span{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;
  border:1px solid var(--line);padding:.5em .8em;color:rgba(242,237,228,.6);
  transition:.25s ease;
}
.pills span:hover{border-color:var(--amber-line);color:var(--amber-2)}

/* quote block */
.pull{border-left:2px solid var(--amber);padding:.2em 0 .2em clamp(18px,2.4vw,32px);margin:clamp(28px,4vw,48px) 0}
.pull p{font-family:var(--disp);font-style:italic;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.28;color:var(--bone);margin:0}
.pull cite{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-style:normal;margin-top:1.2rem}

/* callout */
.note{border:1px solid var(--amber-line);background:var(--amber-wash);padding:clamp(18px,2.2vw,26px)}
.note .t{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.7rem}
.note p{font-size:.9rem;color:rgba(242,237,228,.72);margin:0}

.disclaim{font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;color:rgba(242,237,228,.36);line-height:1.7;margin-top:1.6rem}

/* link list */
.jump{display:grid;gap:0;border-top:1px solid var(--line)}
.jump a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:1.15em 0;border-bottom:1px solid var(--line);transition:.25s;flex-wrap:wrap}
.jump a:hover{padding-left:12px;border-bottom-color:var(--amber-line)}
.jump .t{font-family:var(--disp);font-size:clamp(1.15rem,2vw,1.62rem)}
.jump a:hover .t{color:var(--amber-2)}
.jump .d{font-size:.86rem;color:rgba(242,237,228,.52);max-width:52ch;flex:1;min-width:200px}
.jump .arw{font-family:var(--mono);font-size:.72rem;color:var(--amber)}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin-bottom:clamp(26px,3.4vw,42px)}
.tabs button{
  background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,237,228,.45);padding:.95em 1.25em;cursor:pointer;transition:.22s;
}
.tabs button:hover{color:var(--bone)}
.tabs button.on{color:var(--amber);border-bottom-color:var(--amber)}
.tabpane{display:none}
.tabpane.on{display:block;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* accordion */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:1.15em 0;display:flex;align-items:baseline;gap:16px;
  font-family:var(--disp);font-size:clamp(1.05rem,1.7vw,1.35rem);transition:.2s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';margin-left:auto;font-family:var(--mono);color:var(--amber);font-size:1rem;flex:none}
.acc details[open] summary::after{content:'–'}
.acc summary:hover{color:var(--amber-2)}
.acc summary .ix{font-family:var(--mono);font-size:.66rem;color:var(--amber);opacity:.7;flex:none}
.acc .inner{padding:0 0 1.7em 0;max-width:80ch}
.acc .inner p{font-size:.925rem;color:rgba(242,237,228,.66)}
@media (min-width:760px){.acc .inner{padding-left:44px}}

/* layer stack (home) */
.stack{display:grid;gap:12px}
.layer{
  border:1px solid var(--line);padding:clamp(20px,2.6vw,32px);position:relative;overflow:hidden;
  transition:.35s ease;background:linear-gradient(90deg,rgba(196,154,90,.045),transparent 55%);
}
.layer:hover{border-color:var(--amber-line);background:linear-gradient(90deg,rgba(196,154,90,.10),transparent 60%)}
.layer .lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.85rem}
.layer h3{margin-bottom:.7rem}
.layer p{font-size:.93rem;color:rgba(242,237,228,.62);max-width:70ch;margin:0}
.layer .tags{margin-top:1.2rem}
.flowline{text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);padding:2px 0}
.flowline span{color:var(--amber);opacity:.75}

/* footer */
footer{border-top:1px solid var(--line);background:var(--void-2);padding:clamp(48px,6vw,84px) 0 34px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,3vw,44px)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .foot-h{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:0 0 1.2rem;font-weight:400}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:.62em}
.foot-grid li a{font-size:.865rem;color:rgba(242,237,228,.56);transition:.2s}
.foot-grid li a:hover{color:var(--amber-2)}
.foot-base{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;
  margin-top:clamp(36px,4.5vw,60px);padding-top:24px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(242,237,228,.36)}

/* CTA */
.cta{position:relative;padding:clamp(66px,9vw,128px) 0;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(700px 340px at 50% 0%,rgba(196,154,90,.14),transparent 70%);pointer-events:none}
.cta h2{max-width:20ch;margin:0 auto 1.4rem}
.cta .lede{margin:0 auto 2.4rem;text-align:center}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* page masthead */
.masthead{padding:clamp(44px,6vw,86px) 0 clamp(30px,4vw,54px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.masthead::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 330px at 88% 6%,rgba(196,154,90,.10),transparent 66%)}
.masthead h1{font-size:clamp(2.3rem,5.6vw,4.6rem);margin-bottom:1.5rem;max-width:19ch}
.masthead h1 i{font-style:italic;color:var(--amber)}
.masthead .lede{max-width:64ch}
.crumb{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:1.6rem}
.crumb a{color:var(--amber);opacity:.8}
.crumb a:hover{opacity:1}

/* section index rail */
.secnav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0 24px;padding:14px 0;border-bottom:1px solid var(--line);
  scrollbar-width:none;-ms-overflow-style:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  position:sticky;top:95px;background:rgba(9,9,10,.9);backdrop-filter:blur(12px);z-index:60}
.secnav a{color:rgba(242,237,228,.42);padding:5px 0;transition:.2s;white-space:nowrap}
.secnav a:hover{color:var(--amber)}
.secnav::-webkit-scrollbar{display:none}
.secnav .wrap{flex-wrap:nowrap !important}
section[id]{scroll-margin-top:150px}
@media (max-width:900px){.secnav{gap:0 18px}}

/* boundary diagram */
.boundary-wrap{position:relative;border:1px solid var(--line);background:
  linear-gradient(180deg,rgba(242,237,228,.02),transparent);padding:clamp(14px,2vw,22px)}
.boundary-wrap .cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--grey);margin-bottom:10px;gap:12px;flex-wrap:wrap}
.boundary-wrap .cap .live{color:var(--amber)}

.dash{stroke-dasharray:4 6;animation:march 22s linear infinite}
@keyframes march{to{stroke-dashoffset:-200}}
.flow{animation:flow 3.4s linear infinite}
@keyframes flow{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
.spin{transform-origin:center;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.breathe{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.85}}

/* console */
.console{border:1px solid var(--line);background:var(--void-2);font-family:var(--mono);font-size:.78rem;line-height:1.75}
.console .bar{display:flex;justify-content:space-between;gap:12px;padding:.7em 1em;border-bottom:1px solid var(--line);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.console .body{padding:1.15em}
.console .who{color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:.6rem;display:block;margin-bottom:.35em}
.console .msg{color:rgba(242,237,228,.78);margin-bottom:1.35em;font-family:var(--ui);font-size:.9rem;line-height:1.6}
.console .msg:last-child{margin-bottom:0}
.console .cite{display:block;font-family:var(--mono);font-size:.62rem;color:var(--grey);margin-top:.5em;letter-spacing:.06em}

/* matrix legend */
.legend{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:16px}
.legend b{font-style:normal;font-weight:400;color:var(--amber);margin-right:.5em}

/* dial */
.dial{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media (max-width:860px){.dial{grid-template-columns:1fr}}
.dial .step{border:1px solid var(--line);padding:18px 16px;position:relative;transition:.3s}
.dial .step:hover{border-color:var(--amber-line);background:var(--amber-wash)}
.dial .step .lv{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--amber);display:block;margin-bottom:.8rem}
.dial .step h4,.dial .step h3.h4{font-family:var(--ui);font-weight:400;font-size:.92rem;margin-bottom:.5rem}
.dial .step p{font-size:.8rem;color:rgba(242,237,228,.55);margin:0}
.dial-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}

/* form */
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:.6em}
.field input,.field select,.field textarea{
  width:100%;background:var(--void-2);border:1px solid var(--line);color:var(--bone);
  font-family:var(--ui);font-size:.93rem;padding:.85em 1em;transition:.2s;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber)}
.field textarea{min-height:130px;resize:vertical}


/* ---- sovereign foundation figure (imported artwork, palette bound to the house system) ---- */
.fc-figure{
  --fc-void:#09090a; --fc-panel:#141310; --fc-bone:#f2ede4; --fc-muted:#8d8a83; --fc-faint:#565147;
  --fc-gold:#c49a5a; --fc-gold-dim:#9c7c44; --fc-gold-lt:#d4ae72; --fc-gold-deep:#2a2113; --fc-red:#b0603f;
  --fc-disp:'Playfair Display',Georgia,serif; --fc-ui:'Space Grotesk',system-ui,sans-serif;
  --fc-mono:'IBM Plex Mono',monospace;
  border:1px solid var(--line);background:var(--void);padding:0;overflow:hidden;
}
.fc-figure svg{width:100%;height:auto;display:block}
.fc-figure .cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--grey);padding:12px 16px;border-bottom:1px solid var(--line-2)}
.fc-figure .cap .live{color:var(--amber)}
@keyframes fin{from{opacity:0;transform:translateY(6px)}to{opacity:inherit;transform:none}}
@keyframes dash{to{stroke-dashoffset:-140}}
@keyframes scanmove{0%,100%{opacity:.15}50%{opacity:.6}}
@keyframes cardin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes aclin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes chipin{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
.fc-figure .tile{animation:fin .7s ease-out backwards}
.fc-figure .flow{animation:dash 3.4s linear infinite}
.fc-figure .scan{animation:scanmove 3s ease-in-out infinite}
.fc-figure .nd{animation:pulse 3.6s ease-in-out infinite}
.fc-figure .ring{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
.fc-figure .ocard,.fc-figure .ecard{animation:cardin .6s cubic-bezier(.3,.1,.2,1) backwards}
.fc-figure .aclchip{animation:aclin .55s ease-out backwards}
.fc-figure .aclflow{stroke-dasharray:3 4;animation:dash 3s linear infinite}
.fc-figure .aclrise{stroke-dasharray:3 4;animation:dash 2.2s linear infinite reverse}
.fc-figure .agchip{animation:chipin .6s cubic-bezier(.3,.1,.2,1) backwards}
.fc-figure .strut{animation:dash 2.8s linear infinite}

/* ---- figure furniture used across the deep pages ---- */
.fig{border:1px solid var(--line);background:linear-gradient(180deg,rgba(242,237,228,.02),transparent);
  padding:clamp(14px,2vw,22px)}
.fig .cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--grey);margin-bottom:10px}
.fig .cap .live{color:var(--amber)}
.fig svg{width:100%;height:auto;display:block}
.fig + .disclaim{margin-top:.9rem}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.metrics div{background:var(--void);padding:clamp(16px,2vw,24px)}
.metrics .v{font-family:var(--disp);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;color:var(--amber-2);display:block}
.metrics .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:var(--grey);margin-top:.7rem;display:block;line-height:1.6}

.persona{border-left:2px solid var(--amber);padding-left:clamp(16px,2vw,26px)}
.persona .who{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.8rem}
.persona p{font-family:var(--disp);font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.32;font-style:italic;color:rgba(242,237,228,.88);margin:0}


/* ---- API monogram ---- */
.api-mark{display:block;overflow:visible}
.api-nav{display:inline-flex;align-items:center}
.api-nav .api-word{display:none}
.api-nav .api-mark text{transition:fill .2s ease}
.api-nav:hover .api-mark text{fill:var(--amber-2)}
@media (max-width:1180px){
  .api-nav{gap:12px}
  .api-nav .api-word{display:inline}
}

/* ---- card icons ---- */
.card .icn{color:var(--amber);display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--amber-line);margin-bottom:1.1rem;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.card .icn svg{display:block}
.card:hover .icn{background:var(--amber);color:var(--void);border-color:var(--amber)}
.card.gold .icn{border-color:var(--amber);background:rgba(196,154,90,.12)}
.seq-row .n{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.seq-row .seq-icn{color:var(--amber);opacity:.75;display:block}
.seq-row:hover .seq-icn{opacity:1}
.card:hover .icn{opacity:1}
.card.gold .icn{color:var(--amber-2)}

/* ---- interactive deployment ---- */
.dep .dep-tabs{margin-bottom:14px}
.dep .node rect{fill:rgba(242,237,228,.02);stroke:rgba(242,237,228,.15);transition:fill .35s ease,stroke .35s ease}
.dep .node.cust rect{fill:rgba(196,154,90,.09);stroke:rgba(196,154,90,.55)}
.dep .node .own{fill:#565147;transition:fill .35s ease}
.dep .node.cust .own{fill:#c49a5a}
.dep-legend{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
.dep-legend .sw{display:inline-block;width:14px;height:10px;margin-right:.7em;vertical-align:middle;border:1px solid}
.dep-legend .sw.df{border-color:rgba(242,237,228,.25);background:rgba(242,237,228,.03)}
.dep-legend .sw.cu{border-color:rgba(196,154,90,.6);background:rgba(196,154,90,.12)}
.dep-legend .dep-note{margin-left:auto;color:var(--amber);letter-spacing:.1em;text-transform:none;font-size:.62rem}

/* ---- request lifecycle ---- */
.lc-svg .lc-rail{stroke:rgba(242,237,228,.14)}
.lc-svg .lc-step circle{fill:#09090a;stroke:rgba(242,237,228,.22);transition:.3s}
.lc-svg .lc-step .lc-n{font-family:var(--mono);font-size:9px;fill:rgba(242,237,228,.5);transition:.3s}
.lc-svg .lc-step .lc-t{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;fill:#8d8a83;transition:.3s}
.lc-svg .lc-step.done circle{stroke:rgba(196,154,90,.5)}
.lc-svg .lc-step.done .lc-rail{stroke:rgba(196,154,90,.45)}
.lc-svg .lc-step.on circle{fill:#c49a5a;stroke:#c49a5a;r:15}
.lc-svg .lc-step.on .lc-n{fill:#09090a}
.lc-svg .lc-step.on .lc-t{fill:#d4ae72}
.lc-controls{display:flex;gap:8px;margin:14px 0 4px}
.lc-controls button{background:none;border:1px solid var(--line);color:rgba(242,237,228,.65);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.6em 1em;cursor:pointer;transition:.2s}
.lc-controls button:hover{border-color:var(--amber-line);color:var(--amber-2)}
.lc-panel{display:none;border-top:1px solid var(--line-2);padding-top:14px}
.lc-panel.on{display:block;animation:fade .35s ease}
.lc-panel .kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.6rem}
.lc-panel p{font-size:.92rem;color:rgba(242,237,228,.7);margin:0;max-width:82ch}

/* hero emblem sits flush */
.hero .boundary-wrap.emblem{padding:0;border-color:var(--line-2);background:none}
.hero .boundary-wrap.emblem .cap{padding:12px 16px 0}


/* ---- API lockup (hero eyebrow) ---- */
.api-lockup{display:flex;align-items:center;gap:16px;margin-bottom:1.5rem}
.api-lockup .api-mark{flex:none}
.api-lockup span{font-family:var(--mono);font-size:.665rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);
  padding-left:16px;border-left:1px solid var(--amber-line);line-height:1.6;display:block}
.api-lockup span em{display:block;font-family:var(--disp);font-style:italic;font-size:1.32rem;letter-spacing:0;
  text-transform:none;color:var(--bone);margin-top:.45rem;line-height:1.25}
.hero .api-lockup{margin:0 0 1.7rem}
.hero-sub{font-family:var(--disp);font-size:clamp(1.15rem,1.9vw,1.6rem);color:rgba(242,237,228,.72);
  margin:-.4rem 0 1.6rem;letter-spacing:-.01em}
.hero-sub i{font-style:italic;color:var(--amber-2)}
@media (max-width:520px){.api-lockup{gap:12px}.api-lockup span{font-size:.6rem;letter-spacing:.18em}}


/* ---- every figure comes alive on reveal ---- */
.fig svg .fx, .fc-figure svg .fx{opacity:0}
.fig.live svg .fx, .fc-figure.live svg .fx{animation:fxin .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes fxin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.fig .sweep{opacity:0}
.fig.live .sweep{animation:sweepx 1.5s ease-out .15s 1}
@keyframes sweepx{0%{opacity:0;transform:translateX(-30%)}25%{opacity:.5}100%{opacity:0;transform:translateX(130%)}}
.fig.live svg line[stroke-dasharray], .fig.live svg path[stroke-dasharray]{animation:dash 9s linear infinite}
.fig.live svg circle[stroke-opacity="0"]{animation:none}
@media (prefers-reduced-motion:reduce){
  .fig svg .fx,.fc-figure svg .fx{opacity:1;animation:none}
  .fig.live svg line[stroke-dasharray],.fig.live svg path[stroke-dasharray]{animation:none}
}


/* ================= OCR demo ================= */
.ocr-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,2.4vw,32px);align-items:start}
@media (max-width:860px){.ocr-grid{grid-template-columns:1fr}}
.ocr-pane{display:none}
.ocr-pane.on{display:block}
.ocr-page{width:100%;height:auto;display:block}
.ocr-flags{opacity:0;transition:opacity .35s ease}
.ocr.flags-on .ocr-flags{opacity:1}
.ocr-scan{opacity:0}
.ocr.running .ocr-pane.on .ocr-scan{opacity:1;animation:ocrscan 1.9s cubic-bezier(.4,0,.2,1) 1}
@keyframes ocrscan{from{transform:translateY(0)}to{transform:translateY(389px)}}
.ocr-controls{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ocr-controls button,.kg-tabs button{background:none;border:1px solid var(--line);color:rgba(242,237,228,.68);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.65em 1.05em;cursor:pointer;transition:.2s}
.ocr-controls button:hover{border-color:var(--amber-line);color:var(--amber-2)}
.ocr-controls button.on{background:var(--amber);color:var(--void);border-color:var(--amber)}
.ocr-status{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.ocr-status.busy{color:var(--amber)}
.ocr-fields{min-height:180px}
.ocr-field{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:10px;align-items:center;
  padding:.55em 0;border-bottom:1px solid var(--line-2);opacity:0;transform:translateY(4px)}
.ocr-field.in{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.ocr-field .fname{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);display:block}
.ocr-field .fval{font-size:.9rem;color:rgba(242,237,228,.85)}
.ocr-field.low .fval{color:var(--amber-2);font-style:italic}
.ocr-bar{position:relative;height:4px;background:rgba(242,237,228,.09)}
.ocr-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--amber);transition:width .7s cubic-bezier(.22,1,.36,1)}
.ocr-field.low .ocr-bar i{background:#b0603f}
.ocr-bar b{position:absolute;right:0;top:-15px;font-family:var(--mono);font-size:.56rem;color:var(--grey);font-weight:400}
.ocr-meta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
.ocr-meta div{background:var(--void);padding:10px 12px}
.ocr-meta span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.ocr-meta b{display:block;font-family:var(--mono);font-size:.78rem;color:var(--amber-2);font-weight:400;font-style:normal;margin-top:5px}
.ocr-route{margin-top:14px;border:1px solid var(--amber-line);background:var(--amber-wash);padding:.8em 1em;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-2)}
.ocr-route.sensitive{border-color:rgba(176,96,63,.5);background:rgba(176,96,63,.08);color:#d08d6d}

/* ================= graph explorer ================= */
.kg-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:clamp(18px,2.4vw,30px);align-items:start}
@media (max-width:900px){.kg-grid{grid-template-columns:1fr}}
.kg-svg{width:100%;height:auto;display:block;cursor:crosshair}
.kg-node{cursor:pointer}
.kg-node .kg-halo{fill:#c49a5a;fill-opacity:0;transition:fill-opacity .25s ease}
.kg-node .kg-dot{fill:#f2ede4;fill-opacity:.9;stroke:#f2ede4;stroke-opacity:.4;transition:.25s}
.kg-node .kg-type{font-family:var(--mono);font-size:6px;letter-spacing:.16em;fill:#8d8a83;transition:.25s}
.kg-node .kg-name{font-family:'Space Grotesk',sans-serif;font-size:9px;fill:#f2ede4;fill-opacity:.75;transition:.25s}
.kg-node:hover .kg-halo,.kg-node.sel .kg-halo{fill-opacity:.18}
.kg-node:hover .kg-dot,.kg-node.sel .kg-dot{fill:#c49a5a;stroke:#c49a5a;r:9}
.kg-node.sel .kg-type,.kg-node:hover .kg-type{fill:#c49a5a}
.kg-node.dim{opacity:.22}
.kg-node.nbr .kg-dot{stroke:#c49a5a;stroke-opacity:.9}
.kg-edge line{transition:stroke-opacity .25s ease}
.kg-edge .kg-elabel{font-family:var(--mono);font-size:6px;letter-spacing:.12em;fill:#8d8a83;opacity:0;transition:opacity .2s}
.kg-edge .kg-emeta{font-family:var(--mono);font-size:5.5px;letter-spacing:.1em;fill:#565147;opacity:0;transition:opacity .2s}
.kg-edge.hot .kg-elabel,.kg-edge.hot .kg-emeta{opacity:1}
.kg-edge.hot line{stroke-opacity:.85}
.kg-edge.dim{opacity:.12}
.kg-edge.derived .kg-elabel{fill:#c49a5a}
.kg-panel{border:1px solid var(--line);padding:clamp(16px,2vw,22px);background:linear-gradient(180deg,rgba(242,237,228,.02),transparent)}
.kg-panel .kicker{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.5rem}
.kg-panel h4,.kg-panel h3.h4{font-family:var(--disp);font-size:1.25rem;font-weight:400;margin-bottom:.8rem}
.kg-attrs{margin:0 0 14px;padding:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.kg-attrs dt{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.kg-attrs dd{margin:0;font-size:.84rem;color:rgba(242,237,228,.8)}
.kg-edges-list{border-top:1px solid var(--line-2);padding-top:12px}
.kg-erow{display:flex;justify-content:space-between;gap:10px;padding:.42em 0;border-bottom:1px solid var(--line-2);font-size:.78rem}
.kg-erow em{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--amber);font-style:normal}
.kg-erow span{color:rgba(242,237,228,.62)}
.kg-erow b{font-family:var(--mono);font-size:.58rem;color:var(--grey);font-weight:400;font-style:normal}
.kg-erow.derived em{color:var(--amber-2)}

.kg-node:focus{outline:none}
.kg-node:focus-visible{outline:2px solid var(--amber);outline-offset:2px}


/* ---- imported deck artwork ---- */
.deckfig{padding:clamp(12px,1.6vw,18px)}
.deckfig .deck-svg{width:100%;height:auto;display:block}
.deckfig .deck-svg text{paint-order:stroke}


/* ================= interactive automation dial ================= */
.autodial .dl-top{position:relative;margin-bottom:clamp(18px,2.2vw,26px)}
.dl-svg{width:100%;height:auto;display:block}
.dl-svg .dl-rail{stroke:rgba(242,237,228,.14);stroke-width:2}
.dl-svg .dl-fill{stroke:var(--amber);stroke-width:2;transition:x2 .3s cubic-bezier(.22,1,.36,1)}
.dl-svg .dl-tick line{stroke:rgba(242,237,228,.16)}
.dl-svg .dl-tick text{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:#565147;transition:fill .25s}
.dl-svg .dl-tick.done text{fill:#8d8a83}
.dl-svg .dl-tick.on text{fill:var(--amber)}
.dl-svg .dl-knob circle{fill:var(--amber);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.dl-svg .dl-knob{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.dl-svg .dl-ring{fill:none;stroke:var(--amber);stroke-opacity:.35;animation:breathe 3s ease-in-out infinite}
.dl-svg .dl-end{font-family:var(--mono);font-size:9px;letter-spacing:.2em;fill:#8d8a83}
.dl-input{position:absolute;left:7.4%;top:34%;width:84.5%;height:34px;opacity:0;cursor:grab;margin:0}
.dl-input:active{cursor:grabbing}
.dl-input:focus-visible + *{outline:none}
.autodial:focus-within .dl-knob circle:first-child{stroke:var(--bone);stroke-width:2}
.dl-panel{display:none;border:1px solid var(--amber-line);background:var(--amber-wash);padding:clamp(18px,2.2vw,26px)}
.dl-panel.on{display:block;animation:fade .35s ease}
.dl-panel .kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.6rem}
.dl-panel h4,.dl-panel h3.h4{font-family:var(--disp);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:400;margin-bottom:.6rem}
.dl-panel p{font-size:.95rem;color:rgba(242,237,228,.78);margin:0 0 1.1rem;max-width:70ch}
.dl-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.dl-facts dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);padding-top:3px}
.dl-facts dd{margin:0;font-size:.86rem;color:rgba(242,237,228,.7)}
.dl-case{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line);padding-top:clamp(18px,2.2vw,24px)}
.dl-case .mono{margin-bottom:14px}
.dl-row{display:grid;grid-template-columns:minmax(0,190px) 132px minmax(0,1fr);gap:14px;align-items:center;
  padding:.5em 0;border-bottom:1px solid var(--line-2)}
@media (max-width:760px){.dl-row{grid-template-columns:1fr 132px}.dl-note{grid-column:1/-1}}
.dl-name{font-size:.9rem;color:rgba(242,237,228,.85)}
.dl-note{font-size:.8rem;color:rgba(242,237,228,.5)}
.dl-mini{display:flex;gap:4px}
.dl-mini button{width:20px;height:20px;border:1px solid var(--line);background:none;cursor:pointer;padding:0;transition:.2s}
.dl-mini button:hover{border-color:var(--amber-line)}
.dl-mini button.on{background:var(--amber);border-color:var(--amber)}
.dl-summary{margin-top:16px;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber-2);border:1px solid var(--amber-line);background:var(--amber-wash);padding:.85em 1em}

/* deck artwork legibility */
.deckfig .deck-svg text{opacity:1 !important}
.deckfig .deck-svg rect[fill="none"],.deckfig .deck-svg [stroke]{stroke-opacity:inherit}
.deckfig{background:linear-gradient(180deg,rgba(242,237,228,.028),transparent)}

/* ---- class rules the deck illustrations depend on, scoped to imported artwork ---- */
.deckfig .deck-svg text:not([class]){fill:#a29c92}
.deckfig .ring{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
.deckfig .aclflow{stroke-dasharray:3 4;animation:dash 3s linear infinite}
.deckfig .aclrise{stroke-dasharray:3 4;animation:dash 2.2s linear infinite reverse}
.deckfig .bar b{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#a29c92;font-weight:400}
.deckfig .rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.deckfig .rev.in{opacity:1;transform:none}
.deckfig .top .wm{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:600;color:#f2ede4}
.deckfig .rail .rn:hover .rl, .deckfig .rail .rn.on .rl{opacity:1;color:#c49a5a}
.deckfig .hero .lead b{color:#f2ede4;font-weight:600}
.deckfig .cert .ct{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;color:#f2ede4}
.deckfig .cert .cs{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#a29c92}
.deckfig .flowc .fl .ar{color:#c49a5a;font-size:12px}
.deckfig .lcover .role b{color:#f2ede4;font-weight:600}
.deckfig .sec .intro b{color:#f2ede4;font-weight:600}
.deckfig .xlink .ar{font-size:13px}
.deckfig .gpanel .pty{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#c49a5a}
.deckfig .gpanel .prow .k{color:#a29c92;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase}
.deckfig .gpanel .prow .v{color:#f2ede4;font-weight:600}
.deckfig .gedge{stroke:#c49a5a;stroke-opacity:.35;transition:.25s}
.deckfig .gedge.dim{stroke-opacity:.08}
.deckfig .gnode.dim{opacity:.2}
.deckfig .step .n{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#c49a5a;letter-spacing:.1em;text-transform:uppercase}
.deckfig .rip .fab .t{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:600;color:#f2ede4}
.deckfig .rip .fab .s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#c49a5a}
.deckfig .rip .s2 .sn{font-size:12px;font-weight:600;color:#f2ede4}
.deckfig .erc .nm{font-size:14px;font-weight:600;color:#f2ede4}
.deckfig .ermid{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#a29c92}
.deckfig .ergold .gt{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#c49a5a}
.deckfig .ergold .cn{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#c49a5a;font-weight:600}
.deckfig .seqrow.ours .lab{color:#c49a5a;font-weight:600}
.deckfig .lrow .k{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#c49a5a;white-space:nowrap}
.deckfig .merge .mh{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:600;color:#f2ede4}
.deckfig .autoc .ml{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:#a29c92}
.deckfig .st3 .sn{font-family:'Playfair Display',Georgia,serif;font-size:17px;font-weight:600;color:#f2ede4}
.deckfig .kfx 
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.deckfig .kfx .rev.in{opacity:1;transform:none}
.deckfig .kfx .hero .lead b{color:#8d8a83;font-weight:600}
.deckfig .kfx .sec h2 em{font-style:italic;color:#8d8a83}
.deckfig .kfx .sec .intro b{color:#8d8a83;font-weight:600}
.deckfig .kfx .bigstate em{font-style:italic;color:#8d8a83}
.deckfig .kfx .lyr .hint{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8d8a83}
.deckfig .kfx .lyr .ctrl{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#a29c92;letter-spacing:.02em}
.deckfig .kfx .lyr .ctrl b{color:#8d8a83;font-weight:600}
.deckfig .kfx .gnode text{font-family:#8d8a83;pointer-events:none;transition:.25s}
.deckfig .kfx .gedge{stroke:#8d8a83;stroke-opacity:.35;transition:.25s}
.deckfig .kfx .gedge.dim{stroke-opacity:.08}
.deckfig .kfx .gnode.dim{opacity:.22}
.deckfig .kfx .gpanel .pty{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8d8a83;font-weight:600}
.deckfig .kfx .gpanel .prow .k{color:#a29c92;font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
.deckfig .kfx .gpanel .prow .v{color:#8d8a83;font-weight:600;text-align:right}
.deckfig .kfx .erc.in{opacity:1;transform:none}
.deckfig .kfx .erc .nm{font-size:15px;font-weight:600;color:#8d8a83}
.deckfig .kfx .erc.in .score{opacity:1}
.deckfig .kfx .ermid.in{opacity:1}
.deckfig .kfx .ermid .lb{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8d8a83}
.deckfig .kfx .ergold.in{opacity:1;transform:none}
.deckfig .kfx .ergold .gtag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8d8a83;font-weight:600}
.deckfig .kfx .ergold .cn{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8d8a83;font-weight:600}
.deckfig .kfx .pstep .pn{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#8d8a83;letter-spacing:.1em;text-transform:uppercase}
.deckfig .kfx .rip-fabric .t{font-family:#8d8a83;font-size:24px;font-weight:600;color:#8d8a83}
.deckfig .kfx .rip-fabric .s{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8d8a83}
.deckfig .kfx .rip-s .sn{font-size:12px;font-weight:600;color:#8d8a83}
.deckfig .kfx .splitc .li .v{color:#a29c92;font-size:11px;text-align:right}
.deckfig .kfx .tnode .tc h4,.deckfig .kfx .tnode .tc h3.h4{font-family:#8d8a83;font-size:20px;font-weight:600;color:#8d8a83}
.deckfig .kfx .kpi .kn{font-family:#8d8a83;font-size:26px;font-weight:600;fill:#8d8a83}
.deckfig .kfx .secl .st{font-family:#8d8a83;font-size:18px;font-weight:600;color:#8d8a83}
.deckfig .kfx .mt td:first-child{font-weight:600;color:#8d8a83}
.deckfig .kfx .callout b{color:#8d8a83;font-weight:600}
.deckfig .kfx .arcstep .an{font-family:#8d8a83;font-size:21px;font-weight:600;color:#8d8a83}
.deckfig .kfx .arccap b{color:#8d8a83;font-style:normal;font-weight:600}
.deckfig .kfx .valuec h4 em,.deckfig .kfx .valuec h3.h4 em{font-style:italic;color:#8d8a83}
.deckfig .kfx .outc .ov em{font-style:italic;color:#8d8a83}
.deckfig .kfx .seqrow.ours .seqlab{color:#8d8a83;font-weight:600}
.deckfig .kfx .enrich-tie .eh em{font-style:italic;color:#8d8a83}
.deckfig .kfx .enrich-tie .flow2 b{color:#8d8a83;font-weight:600}
.deckfig .kfx .enrich-tie .flow2 .ar{color:#8d8a83;font-size:15px}
.deckfig .stx 
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.deckfig .stx .rev.in{opacity:1;transform:none}
.deckfig .stx .hero .lead b{color:#8d8a83;font-weight:600}
.deckfig .stx .sec h2 em{font-style:italic;color:#8d8a83}
.deckfig .stx .sec .intro b{color:#8d8a83;font-weight:600}
.deckfig .stx .bigstate em{font-style:italic;color:#8d8a83}
.deckfig .stx .lyr .hint{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8d8a83}
.deckfig .stx .lyr .ctrl{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#a29c92;letter-spacing:.02em}
.deckfig .stx .lyr .ctrl b{color:#8d8a83;font-weight:600}
.deckfig .stx .gnode text{font-family:#8d8a83;pointer-events:none;transition:.25s}
.deckfig .stx .gedge{stroke:#8d8a83;stroke-opacity:.35;transition:.25s}
.deckfig .stx .gedge.dim{stroke-opacity:.08}
.deckfig .stx .gnode.dim{opacity:.22}
.deckfig .stx .gpanel .pty{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8d8a83;font-weight:600}
.deckfig .stx .gpanel .prow .k{color:#a29c92;font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
.deckfig .stx .gpanel .prow .v{color:#8d8a83;font-weight:600;text-align:right}
.deckfig .stx .erc.in{opacity:1;transform:none}
.deckfig .stx .erc .nm{font-size:15px;font-weight:600;color:#8d8a83}
.deckfig .stx .erc.in .score{opacity:1}
.deckfig .stx .ermid.in{opacity:1}
.deckfig .stx .ermid .lb{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8d8a83}
.deckfig .stx .ergold.in{opacity:1;transform:none}
.deckfig .stx .ergold .gtag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8d8a83;font-weight:600}
.deckfig .stx .ergold .cn{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8d8a83;font-weight:600}
.deckfig .stx .pstep .pn{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#8d8a83;letter-spacing:.1em;text-transform:uppercase}
.deckfig .stx .rip-fabric .t{font-family:#8d8a83;font-size:24px;font-weight:600;color:#8d8a83}
.deckfig .stx .rip-fabric .s{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8d8a83}
.deckfig .stx .rip-s .sn{font-size:12px;font-weight:600;color:#8d8a83}
.deckfig .stx .splitc .li .v{color:#a29c92;font-size:11px;text-align:right}
.deckfig .stx .tnode .tc h4,.deckfig .stx .tnode .tc h3.h4{font-family:#8d8a83;font-size:20px;font-weight:600;color:#8d8a83}
.deckfig .stx .kpi .kn{font-family:#8d8a83;font-size:26px;font-weight:600;fill:#8d8a83}
.deckfig .stx .secl .st{font-family:#8d8a83;font-size:18px;font-weight:600;color:#8d8a83}
.deckfig .stx .mt td:first-child{font-weight:600;color:#8d8a83}
.deckfig .stx .callout b{color:#8d8a83;font-weight:600}
.deckfig .stx .arcstep .an{font-family:#8d8a83;font-size:21px;font-weight:600;color:#8d8a83}
.deckfig .stx .arccap b{color:#8d8a83;font-style:normal;font-weight:600}
.deckfig .stx .valuec h4 em,.deckfig .stx .valuec h3.h4 em{font-style:italic;color:#8d8a83}
.deckfig .stx .stepn .sl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:#a29c92}
.deckfig .stx .stepn.on .sl{color:#8d8a83;font-weight:600}
.deckfig .stx .steppane h4 em,.deckfig .stx .steppane h3.h4 em{font-style:italic;color:#8d8a83}
.deckfig .stx .steppane li b{color:#8d8a83;font-family:'IBM Plex Mono',monospace;font-size:10.5px}
.deckfig .stx .t2pn.in{opacity:1;transform:none}
.deckfig .stx .t2pn .tt{font-size:13px;font-weight:600;color:#8d8a83}
.deckfig .stx .chaincap b{color:#8d8a83;font-style:normal;font-weight:600}
.deckfig .stx .lane h4 em,.deckfig .stx .lane h3.h4 em{font-style:italic;color:#8d8a83}
.deckfig .stx .lane.biz .lrow .li svg{stroke:#8d8a83}
.deckfig .stx .lane.tech .lrow .li svg{stroke:#8d8a83}
.deckfig .stx .lrow .lt{font-size:14px;font-weight:600;color:#8d8a83}
.deckfig .stx .merge .mh{font-family:#8d8a83;font-size:26px;font-weight:600;color:#8d8a83}
.deckfig .stx .merge .mh em{font-style:italic;color:#8d8a83}
.deckfig .stx .handoff b{color:#8d8a83;font-weight:600}
.deckfig .stx .autoc .ml{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#8d8a83}
.deckfig .stx .bidar.en .lb{color:#8d8a83;font-weight:600}
.deckfig .stx .st3 .sn{font-family:#8d8a83;font-size:18px;font-weight:600;color:#8d8a83}
.deckfig .stx .loopn .lv{font-family:#8d8a83;font-size:18px;font-weight:600;color:#8d8a83}
.deckfig .edtier{font-family:IBM Plex Mono;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.deckfig .apibars .k{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#a29c92}
.deckfig .mchip{transition:fill .45s,stroke .45s,opacity .45s}
.deckfig .rrole{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#c49a5a}
.deckfig .prole{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#c49a5a}
.deckfig .apiviz .vzt{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#c49a5a}
.deckfig .apiviz .cvline{stroke-dasharray:1800;animation:cvdraw 2.4s cubic-bezier(.3,.1,.2,1) backwards}
.deckfig .apiviz .stg:hover polygon{stroke:#c49a5a;fill:rgba(201,162,95,.07)}
.deckfig .wm{font-family:#8d8a83;font-weight:600;letter-spacing:.06em;font-size:17px;color:#f2ede4}
.deckfig .wm b{color:#c9a24e;font-weight:700}
.deckfig .meta{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#c9a24e}
.deckfig .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.6vw;letter-spacing:.3em;text-transform:uppercase;color:#c49a5a;font-weight:500}
.deckfig .h em{font-style:italic;color:#c9a24e;font-weight:500}
.deckfig .lead b{color:#f4efe6;font-weight:500}
.deckfig .chip svg{stroke:#c9a24e}
.deckfig .callout p b{color:#ecca86;font-weight:500}
.deckfig .big small{font-size:17px;color:#948b78;font-family:'Space Grotesk',system-ui,sans-serif}
.deckfig .lens .nl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#948b78}
.deckfig .kick{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8d8a83}
.deckfig .sub b{color:#b8b2a6;font-weight:600}
.deckfig .flowgap .flab{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#a29c92}
.deckfig .card.dim{opacity:.3}
.deckfig .rail .rh{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#8d8a83}
.deckfig .xitem.dim{opacity:.35}
.deckfig .loop .lt{font-size:13px;color:#8d8a83}
.deckfig .loop .lt b{color:#8d8a83;font-weight:600}
.deckfig .dstep{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8d8a83}
.deckfig .modal .mk{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8d8a83}
.deckfig .tcard .conf .v{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600}
.deckfig .root>.tcard h4,.deckfig .root>.tcard h3.h4{color:#151109;font-family:#8d8a83;font-size:18px}
.deckfig .cf-hint{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8d8a83}
.deckfig .hint b{color:#8d8a83;font-weight:400}
.deckfig .ctl .lab{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#726c60}
.deckfig .seg button[aria-pressed="true"]{color:#09090a;font-weight:500}
.deckfig .node.dim{opacity:.3}
.deckfig .lbl{font-family:'Space Grotesk',system-ui,sans-serif;font-size:12.5px;fill:#f2ede4}
.deckfig .lbl-b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:12.5px;fill:#f2ede4;font-weight:400}
.deckfig .lbl-sm{font-family:'Space Grotesk',system-ui,sans-serif;font-size:10.5px;fill:#a29c92}
.deckfig .lbl-g{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.3px;fill:#c49a5a}
.deckfig .lbl-t{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.3px;fill:#8d8a83}
.deckfig .lbl-r{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.6px;fill:#b0603f}
.deckfig .lbl-m{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.6px;fill:#a29c92}
.deckfig .lbl-fill{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:#b0603f}
.deckfig .enfbadge{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;fill:#09090a;pointer-events:none}
.deckfig .lifebar .out{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#a29c92}
.deckfig .lifebar .out b{color:#8d8a83;font-weight:400}
.deckfig .dfwm b{color:#c49a5a;font-weight:600}
.deckfig .ey{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:#8d8a83;opacity:0;animation:rise .7s .05s forwards}
.deckfig .kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#c49a5a}
.deckfig .serif-accent{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:#d4ae72;font-weight:400}
.deckfig .flist .tx b{color:#f2ede4;font-weight:500}
.deckfig .card .ct{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#726c60}
.deckfig .brandrow .wm{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:17px;letter-spacing:.06em;color:#f2ede4}
.deckfig .brandrow .wm b{color:#c49a5a;font-weight:600}
.deckfig .hero-meta span b{color:#c49a5a;font-weight:500}
.deckfig .rail .st b{color:#c49a5a;font-weight:500}
.deckfig .reveal{opacity:1;transform:none;transition:none}
.deckfig .reveal.in{opacity:1;transform:none}
.deckfig .draw{stroke-dasharray:1;stroke-dashoffset:1;}
.deckfig .band-h .ll{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#726c60}
.deckfig .band-h .lt{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;font-size:17px;color:#f2ede4}
.deckfig .kf-tag .lv{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.deckfig .cmp .hint{font-family:'Space Grotesk',system-ui,sans-serif;font-size:14px;color:#a29c92}
.deckfig .cmp .who{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:22px;color:#d4ae72}
.deckfig .cmp .stat{font-family:'Space Grotesk',system-ui,sans-serif;font-size:13.5px;color:#b8b2a6}
.deckfig .cmp .split em{color:#c49a5a;font-style:normal}
.deckfig .cb-ar{font-size:11px;color:#b8b2a6}
.deckfig .cb-s{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.07em;color:#c49a5a;text-transform:uppercase;text-align:center}
.deckfig .reason b{color:#d4ae72;font-weight:500}
.deckfig .dimmed{opacity:.18}
.deckfig .pcarw{font-family:'Playfair Display',Georgia,serif;font-size:40px;color:#9c7c44}
.deckfig .dlg .bub b{color:#d4ae72;font-weight:500}
.deckfig .subhead em{font-style:italic;color:#c49a5a}
.deckfig .cpx-step{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:#c49a5a}
.deckfig .cpx-panel.on{opacity:1;transform:none;pointer-events:auto}
.deckfig .cpx-title{font-size:21px}
.deckfig .cpx-cap{font-size:13px}
.deckfig .sno{font-family:'IBM Plex Mono',monospace;font-size:.6vw;letter-spacing:.18em;color:#8d8a83}
.deckfig .atitle .gold{color:#8d8a83;font-style:italic}
.deckfig .lead em{color:#8d8a83;font-style:italic}
.deckfig .cover .ovr{font-family:'IBM Plex Mono',monospace;font-size:.72vw;letter-spacing:.42em;text-transform:uppercase;color:#c49a5a}
.deckfig .cover h1 em{font-style:italic;color:#8d8a83}
.deckfig .gov p em{font-style:italic;color:#8d8a83}
.deckfig .col .num{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.4vw;color:#c49a5a}
.deckfig .vcol .cc b{color:#8d8a83;font-weight:500}
.deckfig .subline b{color:#8d8a83;font-weight:500}
.deckfig .node.us .nl{color:#8d8a83;font-weight:500;font-size:.64vw}
.deckfig .legend .li b{color:#8d8a83;font-weight:500}
.deckfig .cta h2 em{font-style:italic;color:#8d8a83}
.deckfig .mast h1 em{font-style:italic;color:#8d8a83}
.deckfig .mast .dek b{color:#f2ede4;font-weight:600}
.deckfig .mast .meta b{color:#c49a5a;font-weight:500}
.deckfig .lede em{color:#8d8a83;font-style:italic}
.deckfig .findings li b{color:#8d8a83;font-weight:600}
.deckfig .scope .box p b{color:#b8b2a6;font-weight:600}
.deckfig .dims li b{color:#f2ede4;font-weight:600}
.deckfig .rcard .n{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#c49a5a;letter-spacing:.1em}
.deckfig .prof .ph .idx{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#c49a5a;letter-spacing:.08em}
.deckfig .prof .ph h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:21px;letter-spacing:-.01em}
.deckfig .win li b{color:#8d8a83;font-weight:600}
.deckfig .foot b{color:#8d8a83;font-weight:600}
.deckfig .mast h1{font-size:34px}

.deckfig.small .deck-svg{max-width:560px;margin:0 auto}
.deckgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.deckcell{border:1px solid var(--line-2);padding:12px}
.deckcell .dc-cap{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:8px}

.hud a{color:inherit;border-bottom:1px dotted rgba(242,237,228,.25)}
.hud a:hover{color:var(--amber)}
.hud sup{font-size:.8em;color:var(--amber)}
.foot-base a{color:inherit}
.foot-base a:hover{color:var(--amber-2)}

/* headings that keep the h4 scale while sitting at level 3 in the outline */
h3.h4{font-size:1.06rem;line-height:1.3}
/* visually hidden, still in the accessibility tree */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the secondary nav action folds away before the primary one does */
@media (max-width:1340px){.nav-second{display:none}}
@media (max-width:1180px){.nav-second{display:inline-flex}}


/* ================= forms ================= */
.formcard{border:1px solid var(--line);padding:clamp(22px,2.8vw,34px);
  background:linear-gradient(180deg,rgba(242,237,228,.022),transparent)}
.formcard h3{font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:400;margin-bottom:.5rem}
.form-note{font-size:.86rem;color:rgba(242,237,228,.55);line-height:1.6;margin-bottom:1.5rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.field.req label::after{content:'*';color:var(--amber);margin-left:.35em}
.field .err{display:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:#d08d6d;margin-top:.5em}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:rgba(176,96,63,.7)}
.field.invalid .err{display:block}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px;cursor:pointer}
.check input{appearance:none;width:20px;height:20px;flex:none;margin-top:2px;border:1px solid var(--line);
  background:var(--void-2);cursor:pointer;transition:.2s;border-radius:0}
.check input:checked{background:var(--amber);border-color:var(--amber)}
.check input:checked::after{content:'';display:block;width:6px;height:11px;margin:1px auto 0;
  border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check span{font-size:.86rem;color:rgba(242,237,228,.72);line-height:1.55}
.check.invalid input{border-color:rgba(176,96,63,.7)}
.form-actions{display:flex;flex-direction:column;gap:12px}
.form-actions .btn{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;pointer-events:none}
.form-status{display:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.85em 1em;border:1px solid var(--line);margin-top:14px}
.form-status.on{display:block}
.form-status.err{border-color:rgba(176,96,63,.5);background:rgba(176,96,63,.08);color:#d08d6d}
.form-status.busy{border-color:var(--amber-line);color:var(--amber)}
.form-sent{display:none;text-align:center;padding:clamp(20px,3vw,34px) 0}
.form-sent.on{display:block;animation:fade .4s ease}
.form-sent .tick{width:52px;height:52px;border:1px solid var(--amber);color:var(--amber);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.3rem}
.form-sent h4,.form-sent h3.h4{font-family:var(--disp);font-size:1.4rem;margin-bottom:.7rem}
.form-sent p{font-size:.9rem;color:rgba(242,237,228,.66);max-width:44ch;margin:0 auto}
.form-sent .next{margin-top:1.6rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
.formcard.sent .form-body{display:none}
.form-tabs{display:flex;border:1px solid var(--line);margin-bottom:24px}
.form-tabs button{flex:1;background:none;border:0;border-right:1px solid var(--line);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,237,228,.5);padding:1em .8em;cursor:pointer;transition:.2s}
.form-tabs button:last-child{border-right:0}
.form-tabs button.on{background:var(--amber);color:var(--void)}
.form-tabs button:hover:not(.on){color:var(--bone)}
.formpane{display:none}
.formpane.on{display:block}

.form-draft{display:none;text-align:center;padding:clamp(20px,3vw,34px) 0}
.form-draft.on{display:block;animation:fade .4s ease}
.form-draft .mark{width:52px;height:52px;border:1px solid var(--amber);color:var(--amber);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.3rem;font-family:var(--disp);font-size:1.5rem}
.form-draft h4,.form-draft h3.h4{font-family:var(--disp);font-size:1.35rem;margin-bottom:.7rem}
.form-draft p{font-size:.9rem;color:rgba(242,237,228,.66);max-width:46ch;margin:0 auto 1rem}
.form-draft a{color:var(--amber-2);border-bottom:1px solid var(--amber-line)}
.form-draft .again{display:inline-flex;margin-top:.4rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:.7em 1.1em;border-bottom-color:var(--line)}
.form-draft .again:hover{border-color:var(--amber-line);color:var(--amber-2)}

/* placeholders that must be filled before publishing — deliberately visible */
.todo{color:#d08d6d;border-bottom:1px dotted rgba(208,141,109,.6);font-style:italic}
/* point-of-collection privacy notice */
.privacy-note{border-top:1px solid var(--line-2);margin-top:18px;padding-top:14px;
  font-size:.78rem;line-height:1.6;color:rgba(242,237,228,.5)}
.privacy-note a{color:var(--amber-2);border-bottom:1px solid var(--amber-line)}
.privacy-note strong,.privacy-note i{font-style:italic;color:rgba(242,237,228,.72)}


/* ============================================================================
   LANDING LAYER — additive only. Nothing above this line is modified.
   Used exclusively by the *-landing.html pages.
   ========================================================================= */
.arrive{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:clamp(80px,12vh,140px) 0 clamp(60px,9vh,110px);overflow:hidden}
.arrive::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber-line) 22%,var(--amber-line) 78%,transparent)}
.arrive .wrap{width:100%}
.arrive .crumb{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);margin:0 0 clamp(16px,2.2vw,26px)}
.arrive .crumb a{color:var(--grey)}
.arrive .crumb a:hover{color:var(--amber-2)}
.arrive h1{font-family:var(--disp);font-weight:400;line-height:1.02;letter-spacing:-.032em;
  font-size:clamp(2.4rem,6.2vw,5.5rem);margin:0;max-width:17ch}
.arrive h1 i{font-style:italic;color:var(--amber)}
.arrive h1 em{font-style:italic;color:var(--amber)}
.arrive h1 i.br{display:block}
.arrive .sub{margin-top:clamp(20px,2.8vw,36px);font-size:clamp(1rem,1.45vw,1.3rem);
  font-weight:300;color:rgba(242,237,228,.62);max-width:46ch;line-height:1.55}
.arrive .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3.6vw,46px)}
.arrive .hero-rule{margin-top:clamp(24px,3.2vw,40px)}
.scroll-cue{position:absolute;left:var(--gut);bottom:clamp(20px,4vh,40px);font-family:var(--mono);
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,237,228,.3);
  display:flex;align-items:center;gap:.7em}
.scroll-cue span{display:block;width:1px;height:26px;background:linear-gradient(180deg,var(--amber),transparent);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.15;transform:scaleY(.55);transform-origin:top}50%{opacity:.9;transform:scaleY(1)}}

.stmt{padding:clamp(70px,11vw,160px) 0;border-top:1px solid var(--line-2);position:relative}
.stmt.deep{background:var(--void-2)}
.stmt p.big{font-family:var(--disp);font-weight:400;line-height:1.06;letter-spacing:-.028em;
  font-size:clamp(1.8rem,5vw,4rem);margin:0;max-width:20ch}
.stmt p.big i,.stmt p.big em{font-style:italic;color:var(--amber)}
.stmt .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);margin-bottom:clamp(14px,2.2vw,28px)}
.stmt .after{margin-top:clamp(18px,2.6vw,34px);font-size:.95rem;color:rgba(242,237,228,.55);max-width:56ch;line-height:1.6}

.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.routes.two{grid-template-columns:repeat(2,1fr)}
.routes a{background:var(--void);padding:clamp(28px,3.4vw,48px) clamp(22px,2.4vw,38px);
  display:flex;flex-direction:column;min-height:clamp(190px,20vw,272px);transition:.3s;position:relative;overflow:hidden}
.routes a::before{content:'';position:absolute;inset:0;background:var(--amber-wash);opacity:0;transition:.3s}
.routes a:hover{background:var(--void-2)}
.routes a:hover::before{opacity:1}
.routes .n{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--amber);position:relative;z-index:1}
.routes .t{font-family:var(--disp);font-size:clamp(1.3rem,2.3vw,1.95rem);font-weight:400;
  line-height:1.12;letter-spacing:-.02em;margin-top:1.6rem;position:relative;z-index:1}
.routes .d{margin-top:.65rem;font-size:.87rem;color:rgba(242,237,228,.52);line-height:1.5;
  position:relative;z-index:1;max-width:32ch}
.routes .go{margin-top:auto;padding-top:1.2rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);opacity:0;transform:translateX(-6px);transition:.3s;position:relative;z-index:1}
.routes a:hover .go{opacity:1;transform:none}

.skim{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.skim div{background:var(--void);padding:clamp(24px,2.8vw,38px)}
.skim b{display:block;font-family:var(--disp);font-size:clamp(1.45rem,2.5vw,2rem);font-weight:400;
  color:var(--amber);line-height:1;letter-spacing:-.02em}
.skim span{display:block;margin-top:.7rem;font-size:.88rem;color:rgba(242,237,228,.6);line-height:1.5}

.readon{padding:clamp(46px,6vw,88px) 0;border-top:1px solid var(--line-2);text-align:center}
.readon a{display:inline-flex;flex-direction:column;align-items:center;gap:.9rem;transition:.25s}
.readon .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}
.readon .ttl{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:400;letter-spacing:-.02em}
.readon a:hover .ttl{color:var(--amber-2)}
.readon .meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,237,228,.34)}

@media (max-width:960px){.routes,.skim{grid-template-columns:repeat(2,1fr)}.routes.two{grid-template-columns:1fr}}
@media (max-width:620px){
  .routes,.routes.two,.skim{grid-template-columns:1fr}
  .arrive h1{font-size:clamp(1.95rem,9vw,3rem);max-width:none}
  .arrive{min-height:92svh}
  .stmt p.big{font-size:clamp(1.55rem,7.6vw,2.3rem)}
}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}


/* --- the hero figure: the page's own diagram, running, at scale ---------- */
.arrive{padding-top:clamp(64px,9vh,110px);padding-bottom:clamp(36px,5vh,70px)}
.arrive-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.14fr);
  gap:clamp(26px,3.4vw,56px);align-items:center;width:100%}
.arrive-txt{min-width:0}
.hero-fig{min-width:0;pointer-events:none}
.hero-fig svg{width:100%;height:auto;display:block;overflow:visible}
.hero-fig .cap{display:none}
.arrive-grid h1{font-size:clamp(2.15rem,4.15vw,4rem);max-width:none}
.arrive-grid .sub{max-width:46ch;font-size:clamp(.94rem,1.1vw,1.08rem);line-height:1.5;margin-top:clamp(14px,1.7vw,22px)}
.arrive-grid .acts{margin-top:clamp(20px,2.4vw,32px)}
.arrive-grid .hero-rule{margin-top:clamp(18px,2.2vw,28px)}
.arrive-grid .chip{font-size:.58rem}

@media (max-width:1080px){
  .arrive-grid h1{font-size:clamp(2.1rem,6vw,3.4rem)}
  .arrive-grid{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .arrive{min-height:auto;padding-top:clamp(56px,9vh,96px);padding-bottom:clamp(34px,5vh,60px)}
  .scroll-cue{display:none}
}

/* bespoke hero art: drawn for this slot, so it may fill the column */
.hero-fig .hero-art{width:100%;height:auto}
.arrive-grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.24fr)}
@media(max-width:1080px){.arrive-grid{grid-template-columns:1fr}}


/* the section nav on long-form pages must scroll, not push the page wide */
@media (max-width:820px){
  .secnav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .secnav::-webkit-scrollbar{display:none}
  .secnav .wrap{width:max-content;min-width:100%;padding-right:var(--gut)}
  main{overflow-x:clip}
}


/* --- section nav: current section as a filled block, matching the header --- */
.secnav a{padding:5px 10px;border-radius:4px;transition:.2s}
.secnav a:hover{color:var(--void);background:var(--amber-2)}
.secnav a.on,.secnav a[aria-current="true"]{color:var(--void);background:var(--amber)}
@media (max-width:900px){
  .nav-links a{width:100%;padding:14px 12px;border-radius:5px}
  .nav-links a.on{background:var(--amber);color:var(--void)}
}


/* the open drawer must take the viewport, not collapse to its flex height */
@media (max-width:900px){
  .nav-open .nav-links{height:calc(100dvh - var(--navh,64px));max-height:none;
    overflow-y:auto;-webkit-overflow-scrolling:touch;align-content:flex-start;
    padding:10px var(--gut) 48px}
  .nav-links a{margin:2px 0}
}