:root{
  --ground:#F2F1EC;
  --surface:#FBFAF6;
  --surface2:#E8E7E0;
  --ink:#0E0E0C;
  --ink2:#43423B;
  --muted:#68675F;
  --line:#D5D4CE;
  --line-soft:#E2E1DB;
  --yellow:#F2DE1D;
  --amber:#796500;
  --slate:#3A4A57;
  --ok:#3E7A52;
  --onink:#F2F1EC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E0E0C;
    --surface:#171714;
    --surface2:#201F1B;
    --ink:#F2F1EC;
    --ink2:#C3C2BA;
    --muted:#8E8E86;
    --line:#32312B;
    --line-soft:#26251F;
    --yellow:#F2DE1D;
    --amber:#E3CE2A;
    --slate:#8FA6B5;
    --ok:#6FBF95;
    --onink:#0E0E0C;
  }
}
:root[data-theme="dark"]{
  --ground:#0E0E0C; --surface:#171714; --surface2:#201F1B; --ink:#F2F1EC; --ink2:#C3C2BA;
  --muted:#8E8E86; --line:#32312B; --line-soft:#26251F; --yellow:#F2DE1D; --amber:#E3CE2A;
  --slate:#8FA6B5; --ok:#6FBF95; --onink:#0E0E0C;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;margin:0;line-height:1.06;letter-spacing:-0.018em;text-wrap:balance}
p{margin:0}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.ar{font-family:"IBM Plex Sans Arabic","Segoe UI",sans-serif;direction:rtl}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}

/* mast */
.mast{border-bottom:1px solid var(--line);background:var(--surface)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px}
.brand .wm{font-family:"Archivo",sans-serif;font-weight:800;font-size:21px;letter-spacing:.03em;font-stretch:110%}
.mast nav{display:flex;gap:19px;flex-wrap:wrap}
.mast nav a{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent;padding:3px 0}
.mast nav a:hover,.mast nav a:focus-visible{border-bottom-color:var(--amber);color:var(--ink)}

/* hero */
.hero{padding:70px 0 58px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:52px;align-items:center}
.hero h1{font-size:clamp(36px,6vw,66px);font-weight:800;font-stretch:108%;max-width:13ch}
.hero .ar-line{margin-top:14px;font-size:21px;font-weight:600;color:var(--amber)}
.hero .lede{margin-top:22px;font-size:19px;line-height:1.55;color:var(--ink2);max-width:47ch;font-weight:300}
.cta{display:inline-block;margin-top:26px;background:var(--yellow);color:#0E0E0C;text-decoration:none;
  font-family:"Archivo",sans-serif;font-weight:600;font-size:16.5px;padding:14px 26px;border:2px solid var(--yellow)}
.cta:hover,.cta:focus-visible{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--line);margin-left:10px}
.cta.ghost:hover{border-color:var(--ink)}
.heromark{display:flex;justify-content:center}

section{padding:60px 0;border-bottom:1px solid var(--line)}
.sh{display:flex;gap:17px;align-items:baseline;margin-bottom:30px;flex-wrap:wrap}
.sh h2{font-size:clamp(25px,3.4vw,36px);font-weight:600;font-stretch:104%}
.prose{max-width:65ch;color:var(--ink2);font-size:17px;font-weight:300}
.prose + .prose{margin-top:15px}
.prose b{color:var(--ink);font-weight:500}

/* ladder */
.ladder{display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:44px minmax(0,1.5fr) 150px minmax(0,1.6fr);gap:22px;
  padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);letter-spacing:.08em}
.step .nm{font-family:"Archivo",sans-serif;font-weight:600;font-size:20px}
.step .pr{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:500;color:var(--amber);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.step .ds{color:var(--ink2);font-size:15.5px;font-weight:300}
.step.feature{background:var(--surface);margin:0 -18px;padding-left:18px;padding-right:18px}

/* pull */
.pull{border-left:3px solid var(--yellow);padding:3px 0 3px 20px;font-size:20px;line-height:1.45;color:var(--ink);font-weight:300}
.pull cite{display:block;margin-top:11px;font-style:normal;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-family:"IBM Plex Mono",monospace}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px}

/* records */
.records{display:grid;border-top:1px solid var(--line)}
.rec{display:grid;grid-template-columns:190px minmax(0,1fr);gap:34px;padding:28px 0;border-bottom:1px solid var(--line)}
.rec-meta{display:flex;flex-direction:column;gap:6px}
.rec-meta .name{font-family:"Archivo",sans-serif;font-weight:600;font-size:20px}
.rec-meta .tag{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.rec-body p{color:var(--ink2);max-width:62ch;font-weight:300}
.figs{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
.fig{display:flex;flex-direction:column;gap:1px}
.fig b{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:500;color:var(--amber);font-variant-numeric:tabular-nums}
.fig span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.scope{margin-top:15px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;border:1px solid var(--line);padding:3px 8px;color:var(--ink2);background:var(--surface)}

/* dark band */
.band{background:var(--ink);color:var(--onink);border-bottom:0}
.band h2,.band .prose b{color:var(--onink)}
.band .prose{color:rgba(242,241,236,.78)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band .prose{color:rgba(14,14,12,.78)}
}
:root[data-theme="dark"] .band .prose{color:rgba(14,14,12,.78)}
.band .eyebrow{color:rgba(242,241,236,.55)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band .eyebrow{color:rgba(14,14,12,.55)}
}
:root[data-theme="dark"] .band .eyebrow{color:rgba(14,14,12,.55)}
.band ol{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.band ol li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:baseline;font-size:16px;font-weight:300}
.band ol li::before{content:counter(s,decimal-leading-zero);font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--yellow)}
.pricebox{border:1px solid rgba(242,241,236,.24);padding:24px;background:rgba(242,222,29,.06)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pricebox{border-color:rgba(14,14,12,.24);background:rgba(14,14,12,.06)}
}
:root[data-theme="dark"] .pricebox{border-color:rgba(14,14,12,.24);background:rgba(14,14,12,.06)}
.pricebox .amt{font-family:"Archivo",sans-serif;font-size:42px;font-weight:800;line-height:1;letter-spacing:-0.03em;color:var(--yellow)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pricebox .amt{color:var(--onink)}
}
:root[data-theme="dark"] .pricebox .amt{color:var(--onink)}
.pricebox .cur{font-family:"IBM Plex Mono",monospace;font-size:13px;opacity:.65;margin-left:6px}
.pricebox ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px;font-weight:300}
.pricebox li{display:grid;grid-template-columns:15px 1fr;gap:8px}
.pricebox li::before{content:"—";font-family:"IBM Plex Mono",monospace;opacity:.5}

/* table */
.tw{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:600px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400;background:var(--surface2);border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
td.tier{font-family:"Archivo",sans-serif;font-weight:600;font-size:17px;white-space:nowrap}
td.fee{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--amber);font-weight:500}
td.desc{color:var(--ink2);font-size:15.5px;font-weight:300}
.note{margin-top:14px;font-size:14px;color:var(--muted);max-width:68ch}

/* stages */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.stg{padding:22px 20px 24px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.stg:last-child{border-right:0}
.stg .n{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;color:var(--amber);display:block;margin-bottom:11px}
.stg h3{font-size:19px;font-weight:600;margin-bottom:7px}
.stg p{font-size:15px;color:var(--ink2);font-weight:300}

/* contact */
.contact{padding:66px 0 78px;border-bottom:0}
.cg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:48px;align-items:start}
.contact h2{font-size:clamp(27px,4.2vw,42px);font-weight:600;max-width:17ch}
.details{border-top:1px solid var(--line);padding-top:17px;display:grid;gap:11px}
.details div{display:flex;justify-content:space-between;gap:16px;font-family:"IBM Plex Mono",monospace;font-size:13.5px}
.details span.k{color:var(--muted)}
.details a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.details a:hover{border-bottom-color:var(--amber)}

footer{padding:24px 0 42px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
a:focus-visible,.cta:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:880px){
  .hero-grid,.cg{grid-template-columns:1fr;gap:32px}
  .heromark{display:none}
  .step{grid-template-columns:1fr;gap:8px}
  .step .n{display:none}
  .rec{grid-template-columns:1fr;gap:14px}
  .stages{grid-template-columns:1fr 1fr}
  .stg:nth-child(2n){border-right:0}
}
@media (max-width:520px){.stages{grid-template-columns:1fr}.stg{border-right:0}.wrap{padding:0 20px}}

/* forms */
.frm{display:grid;gap:18px;max-width:52ch}
.frm label{display:grid;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.frm input,.frm textarea{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;font-weight:300;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:12px 14px;
  border-radius:0;width:100%;line-height:1.5}
.frm textarea{resize:vertical;min-height:120px}
.frm input:focus,.frm textarea:focus{outline:none;border-color:var(--amber);background:var(--surface2)}
.frm button{justify-self:start;cursor:pointer;font-family:"Archivo",sans-serif}
.frm .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{border-left:3px solid var(--yellow);padding:12px 0 12px 18px;font-size:15.5px;color:var(--ink2);margin-bottom:22px}
.msg.bad{border-left-color:#B4443A}
.frm .cta{border:2px solid var(--yellow)}

/* band: everything inside must use the inverted ink */
.band .pull{color:var(--onink);border-left-color:var(--yellow)}
.band .pull cite{color:rgba(242,241,236,.55)}
.band .note{color:rgba(242,241,236,.55)}
.band ol li{color:rgba(242,241,236,.78)}
.band ol li b{color:var(--onink)}
.band a{color:var(--yellow)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band .pull{color:var(--onink)}
  :root:not([data-theme="light"]) .band .pull cite,
  :root:not([data-theme="light"]) .band .note{color:rgba(14,14,12,.55)}
  :root:not([data-theme="light"]) .band ol li{color:rgba(14,14,12,.78)}
  :root:not([data-theme="light"]) .band ol li b{color:var(--onink)}
  :root:not([data-theme="light"]) .band a{color:var(--onink)}
}
/* the dark band carries its own table skin */
.band .tw{border-color:rgba(242,241,236,.20);background:rgba(242,241,236,.04)}
.band thead th{background:rgba(242,241,236,.07);color:rgba(242,241,236,.6);border-bottom-color:rgba(242,241,236,.20)}
.band th,.band td{border-bottom-color:rgba(242,241,236,.12)}
.band td.tier{color:var(--onink)}
.band td.desc{color:rgba(242,241,236,.75)}
.band td.fee{color:var(--yellow)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band .tw{border-color:rgba(14,14,12,.20);background:rgba(14,14,12,.04)}
  :root:not([data-theme="light"]) .band thead th{background:rgba(14,14,12,.07);color:rgba(14,14,12,.6);border-bottom-color:rgba(14,14,12,.20)}
  :root:not([data-theme="light"]) .band th,
  :root:not([data-theme="light"]) .band td{border-bottom-color:rgba(14,14,12,.12)}
  :root:not([data-theme="light"]) .band td.tier{color:var(--onink)}
  :root:not([data-theme="light"]) .band td.desc{color:rgba(14,14,12,.75)}
  :root:not([data-theme="light"]) .band td.fee{color:var(--onink)}
}
/* the band's stage cards need inverted rules too */
.band .stages,.band .stg{border-color:rgba(242,241,236,.20)}
.band .stg h3{color:var(--onink)}
.band .stg p{color:rgba(242,241,236,.72)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band .stages,
  :root:not([data-theme="light"]) .band .stg{border-color:rgba(14,14,12,.20)}
  :root:not([data-theme="light"]) .band .stg h3{color:var(--onink)}
  :root:not([data-theme="light"]) .band .stg p{color:rgba(14,14,12,.72)}
}
/* BUG: long price labels collided with the description column */
.step{grid-template-columns:44px minmax(0,1.4fr) 172px minmax(0,1.6fr)}
.step .pr{white-space:normal;padding-right:14px}


/* --- accessibility pass -------------------------------------------------
   Amber numerals sit on the dark band in light mode (fine) but on the PAPER
   band in dark mode, where yellow-on-cream measured 1.41:1. Band-scoped. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band .stg .n{color:#6D6314}
  :root:not([data-theme="light"]) .band td.fee{color:#6D6314}
  :root:not([data-theme="light"]) .band ol li::before{color:#6D6314}
  :root:not([data-theme="light"]) .band .eyebrow,
  :root:not([data-theme="light"]) .band .note,
  :root:not([data-theme="light"]) .band .pull cite{color:rgba(14,14,12,.72)}
  :root:not([data-theme="light"]) .band .tw{border-color:rgba(14,14,12,.28)}
}
:root[data-theme="dark"] .band .stg .n,
:root[data-theme="dark"] .band td.fee,
:root[data-theme="dark"] .band ol li::before{color:#6D6314}
:root[data-theme="dark"] .band .eyebrow,
:root[data-theme="dark"] .band .note,
:root[data-theme="dark"] .band .pull cite{color:rgba(14,14,12,.72)}

/* the band's own muted text in LIGHT mode was 4.13:1 — lift it */
.band .eyebrow,.band .note,.band .pull cite{color:rgba(242,241,236,.72)}
/* stage numerals sit on the black band in light mode — amber measured 3.38:1 */
.band .stg .n{color:var(--yellow)}