/* ============================================================
   RATIO — calibration sheet
   Dark-committed identity. Every color painted explicitly.
   ============================================================ */

:root{
  /* ground */
  --void:      #05070A;
  --void-2:    #070A0F;
  --surface:   #0B1016;
  --surface-2: #0E141C;
  --line:      #18212C;
  --line-soft: #111823;

  /* ink */
  --text:      #E6EDF3;
  --text-2:    #9DAEBF;
  --dim:       #68798B;
  --faint:     #3D4A57;

  /* brand */
  --azure:     #2E9BFF;
  --azure-hi:  #7CC2FF;
  --azure-lo:  #0B5FC7;
  --azure-08:  rgba(46,155,255,.08);
  --azure-16:  rgba(46,155,255,.16);
  --azure-32:  rgba(46,155,255,.32);

  /* semantic — debt is sand, never azure */
  --sand:      #D8A24A;
  --sand-16:   rgba(216,162,74,.16);
  --warn:      #E8823C;
  --crit:      #FF5B49;

  /* metrics */
  --rail: 68px;
  --gut: clamp(20px, 4vw, 56px);
  --maxw: 1360px;

  --step--1: clamp(11px, .72rem, 12px);
  --step-0:  clamp(14px, .95rem, 15.5px);
  --step-1:  clamp(17px, 1.15rem, 19px);
  --step-2:  clamp(22px, 1.8vw, 27px);
  --step-3:  clamp(30px, 3.2vw, 46px);
  --step-4:  clamp(40px, 6.6vw, 96px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--azure); color:#02040A; }

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:1px solid var(--azure);
  outline-offset:3px;
}

/* ---------- shared primitives ---------- */

.mono{
  font-family:"Azeret Mono","SFMono-Regular",Menlo,monospace;
  font-size:var(--step--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:400;
}

.num{
  font-family:"Azeret Mono","SFMono-Regular",Menlo,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.wide{
  font-variation-settings:"wdth" 116,"wght" 600;
  letter-spacing:-.02em;
  line-height:1.02;
  text-wrap:balance;
}

.eyebrow{
  display:flex; align-items:center; gap:12px;
  color:var(--azure);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--azure); flex:none;
}
.eyebrow--dim{ color:var(--dim); }
.eyebrow--dim::before{ background:var(--faint); }

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- fixed grid overlay ---------- */

.grid-overlay{
  position:fixed; inset:0;
  z-index:1; pointer-events:none;
  display:flex; justify-content:center;
}
.grid-overlay .cols{
  width:100%; max-width:var(--maxw);
  padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(12,1fr);
  height:100%;
}
.grid-overlay .cols span{ border-left:1px solid rgba(140,170,200,.045); }
.grid-overlay .cols span:last-child{ border-right:1px solid rgba(140,170,200,.045); }
@media (max-width:820px){ .grid-overlay{ display:none; } }

/* ---------- measurement rail ---------- */

.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail);
  z-index:40; pointer-events:none;
  border-right:1px solid var(--line-soft);
  background:linear-gradient(90deg, rgba(5,7,10,.9), rgba(5,7,10,0));
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:18px;
}
.rail__ticks{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg,
    rgba(140,170,200,.18) 0 1px, transparent 1px 28px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  width:9px; left:0;
}
.rail__label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:var(--dim); font-family:"Azeret Mono",monospace;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  transition:color .4s var(--ease);
}
.rail__pct{
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:var(--azure); font-family:"Azeret Mono",monospace;
  font-size:10px; letter-spacing:.24em; font-variant-numeric:tabular-nums;
}
@media (max-width:980px){ .rail{ display:none; } }

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

.hdr{
  position:fixed; top:0; left:0; right:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
}
.hdr.is-stuck{
  background:rgba(5,7,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  height:66px;
}
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand svg{ display:block; width:22px; height:22px; }
.brand__word{
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:17px; letter-spacing:.20em; text-transform:uppercase;
}
.chain{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 9px 4px 8px; border:1px solid var(--line);
  color:var(--text-2); background:var(--surface);
  font-size:10px; letter-spacing:.12em;
}
.chain .dot{ width:5px; height:5px; background:var(--azure); flex:none; }

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
  color:var(--text-2); font-size:13px; letter-spacing:.01em;
  position:relative; padding:4px 0; transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--azure); transition:right .35s var(--ease);
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ right:0; }
@media (max-width:900px){ .nav,.chain{ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; border:1px solid var(--line);
  background:transparent; color:var(--text);
  font-family:"Azeret Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--azure);
  transform:translateY(101%); transition:transform .42s var(--ease); z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ border-color:var(--azure); color:#02040A; }
.btn:hover::before{ transform:translateY(0); }
.btn--primary{ border-color:var(--azure-32); color:var(--azure); }
.btn--ghost{ color:var(--text-2); }
.btn[disabled]{ cursor:not-allowed; opacity:.55; }
.btn[disabled]:hover{ color:var(--text-2); border-color:var(--line); }
.btn[disabled]:hover::before{ transform:translateY(101%); }
.btn__tag{
  font-size:9px; letter-spacing:.14em; color:var(--dim);
  border-left:1px solid currentColor; padding-left:9px; opacity:.7;
}

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

.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:120px; padding-bottom:0;
  isolation:isolate;
}
#lattice{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2; display:block;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(105% 72% at 74% 46%, rgba(5,7,10,0) 0%, rgba(5,7,10,.42) 40%, rgba(5,7,10,.90) 74%),
    linear-gradient(96deg, rgba(5,7,10,.92) 0%, rgba(5,7,10,.62) 24%, rgba(5,7,10,.12) 46%, rgba(5,7,10,0) 62%),
    linear-gradient(180deg, rgba(5,7,10,.94) 0%, rgba(5,7,10,.30) 26%, rgba(5,7,10,.10) 52%, rgba(5,7,10,.88) 92%, var(--void) 100%);
}
.hero__body{ padding-bottom:clamp(28px,5vh,60px); position:relative; }
@media (max-width:820px){
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(5,7,10,.97) 0%, rgba(5,7,10,.95) 38%, rgba(5,7,10,.93) 56%,
      rgba(5,7,10,.72) 66%, rgba(5,7,10,.58) 82%, rgba(5,7,10,.92) 96%, var(--void) 100%);
  }
}
.hero h1{
  margin:20px 0 0;
  font-size:var(--step-4);
  max-width:15ch;
}
.hero h1 .lo{
  display:block; color:var(--dim);
  font-variation-settings:"wdth" 116,"wght" 400;
}
.hero__sub{
  margin:24px 0 0; max-width:52ch;
  color:var(--text-2); font-size:var(--step-1); line-height:1.55;
}
.hero__sub b{ color:var(--text); font-weight:500; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero__acts .btn{ background:rgba(5,7,10,.42); backdrop-filter:blur(6px); }

.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(7,10,15,.72);
  backdrop-filter:blur(8px);
}
.ticker__in{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.ticker__cell{
  padding:18px 0 20px; border-left:1px solid var(--line-soft);
  padding-left:20px;
}
.ticker__cell:first-child{ border-left:0; padding-left:0; }
.ticker__k{ color:var(--dim); font-size:10px; letter-spacing:.18em; }
.ticker__v{
  display:block; margin-top:8px; font-size:clamp(19px,2vw,28px);
  font-weight:500; letter-spacing:-.02em;
}
.ticker__v .u{ color:var(--dim); font-size:.55em; margin-left:4px; }
.ticker__d{ font-size:11px; letter-spacing:.02em; color:var(--azure); }
@media (max-width:760px){
  .ticker__in{ grid-template-columns:repeat(2,1fr); gap:0; }
  .ticker__cell:nth-child(3){ border-left:0; padding-left:0; }
  .ticker__cell:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
}

.scrollcue{
  position:absolute; right:0; bottom:6px;
  display:flex; align-items:center; gap:10px;
  color:var(--dim); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; font-family:"Azeret Mono",monospace;
}
.scrollcue i{
  display:block; width:1px; height:34px;
  background:linear-gradient(180deg,transparent,var(--azure));
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.35); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
@media (max-width:900px){ .scrollcue{ display:none; } }

/* ---------- section frame ---------- */

.band{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding-block:clamp(64px,9vh,124px);
  background:var(--void);
}
.band--sunken{ background:var(--void-2); }
.band__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,4vw,64px); align-items:end;
  margin-bottom:clamp(38px,6vh,72px);
}
.band__head h2{
  margin:16px 0 0; font-size:var(--step-3); max-width:16ch;
}
.band__note{
  color:var(--text-2); max-width:46ch; margin:0;
  padding-bottom:6px;
}
@media (max-width:900px){ .band__head{ grid-template-columns:1fr; align-items:start; } }

/* ---------- flow (deposit / borrow / hold) ---------- */

.flow{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  margin-top:clamp(38px,5vw,68px);
}
.flow__step{
  position:relative; padding:32px 28px 34px 0;
  border-left:1px solid var(--line);
  padding-left:28px;
}
.flow__step:first-child{ border-left:0; padding-left:0; }
.flow__step::before{
  content:""; position:absolute; top:-1px; left:0; height:1px;
  width:0; background:var(--azure); transition:width .9s var(--ease);
}
.flow__step.is-on::before{ width:100%; }
.flow__i{ color:var(--azure); font-size:10px; letter-spacing:.2em; }
.flow__step h3{
  margin:14px 0 10px; font-size:var(--step-2);
  font-variation-settings:"wdth" 112,"wght" 600; letter-spacing:-.02em;
}
.flow__step p{ margin:0; color:var(--text-2); max-width:34ch; }
.flow__gfx{ margin-top:26px; display:block; width:100%; height:64px; }
@media (max-width:860px){
  .flow{ grid-template-columns:1fr; }
  .flow__step{ border-left:0; padding-left:0; border-top:1px solid var(--line); }
  .flow__step:first-child{ border-top:0; }
}

/* ---------- engine ---------- */

.engine{
  display:grid; grid-template-columns:minmax(280px,352px) minmax(0,1fr);
  border:1px solid var(--line); background:var(--surface);
}
@media (max-width:960px){ .engine{ grid-template-columns:1fr; } }

.panel{ border-right:1px solid var(--line); padding:26px 24px 28px; }
@media (max-width:960px){ .panel{ border-right:0; border-bottom:1px solid var(--line); } }
.panel__t{
  color:var(--dim); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  font-family:"Azeret Mono",monospace;
  display:flex; justify-content:space-between; align-items:center;
}
.panel__t b{ color:var(--azure); font-weight:400; }

.field{ margin-top:24px; }
.field__l{
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--dim); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-family:"Azeret Mono",monospace; margin-bottom:10px;
}
.field__l b{ color:var(--text); font-weight:400; font-size:12px; letter-spacing:.02em; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  padding:7px 11px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text-2); cursor:pointer;
  font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.06em;
  transition:all .25s var(--ease);
}
.chip:hover{ border-color:var(--faint); color:var(--text); }
.chip.is-on{ border-color:var(--azure); color:var(--azure); background:var(--azure-08); }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:20px; background:transparent; cursor:ew-resize; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;
  background:linear-gradient(90deg, var(--azure) 0 var(--fill,50%), var(--line) var(--fill,50%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:2px; height:20px; background:var(--azure); margin-top:-9px;
  box-shadow:0 0 0 1px rgba(5,7,10,1), 0 0 16px var(--azure);
}
input[type=range]::-moz-range-track{ height:2px; background:var(--line); }
input[type=range]::-moz-range-progress{ height:2px; background:var(--azure); }
input[type=range]::-moz-range-thumb{
  width:2px; height:20px; border:0; border-radius:0; background:var(--azure);
}
.scale{
  display:flex; justify-content:space-between; margin-top:6px;
  color:var(--faint); font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.1em;
}

.stack{ display:flex; flex-direction:column; }
.viz{ padding:24px 24px 10px; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.viz__hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.viz__hd h4{
  margin:0; font-size:var(--step-1);
  font-variation-settings:"wdth" 110,"wght" 500; letter-spacing:-.01em;
}
.viz__hd p{ margin:5px 0 0; color:var(--dim); font-size:12px; max-width:44ch; }
.legend{ display:flex; gap:16px; flex-wrap:wrap; }
.legend span{
  display:flex; align-items:center; gap:7px;
  color:var(--dim); font-family:"Azeret Mono",monospace; font-size:10px; letter-spacing:.1em;
}
.legend i{ width:14px; height:2px; display:block; }

#chart{ display:block; width:100%; flex:1 1 auto; height:270px; min-height:250px; margin-top:18px; }

.readout{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.readout__c{
  padding:18px 20px 20px; border-left:1px solid var(--line-soft);
}
.readout__c:first-child{ border-left:0; }
.readout__k{
  color:var(--dim); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  font-family:"Azeret Mono",monospace;
}
.readout__v{
  display:block; margin-top:9px; font-size:clamp(17px,1.7vw,22px);
  font-weight:500; letter-spacing:-.02em;
}
.readout__s{ color:var(--dim); font-size:11px; letter-spacing:.01em; }
@media (max-width:760px){
  .readout{ grid-template-columns:repeat(2,1fr); }
  .readout__c:nth-child(3){ border-left:0; }
  .readout__c:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
}

.action{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding:16px 20px;
  background:var(--surface-2);
}
.action__log{
  color:var(--text-2); font-size:12.5px; margin:0; flex:1 1 280px; min-width:0;
}
.action__log b{ color:var(--azure); font-weight:400; font-family:"Azeret Mono",monospace; font-size:11.5px; }
.action__log b.sand{ color:var(--sand); }

.health{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.health__bar{ flex:1; height:3px; background:var(--line); position:relative; overflow:hidden; }
.health__fill{ position:absolute; inset:0 auto 0 0; width:50%; background:var(--azure); transition:width .5s var(--ease), background .5s var(--ease); }
.health__v{ font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--azure); transition:color .5s var(--ease); }

dl.kv{
  margin:30px 0 0; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:1px;
}
dl.kv div{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--line-soft);
}
dl.kv div:last-child{ border-bottom:0; }
dl.kv dt{
  color:var(--dim); font-family:"Azeret Mono",monospace;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
}
dl.kv dd{ margin:0; font-size:13px; color:var(--text); letter-spacing:-.01em; }

.scrollhint{
  display:none; margin:12px 0 0; color:var(--faint);
  font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
}
@media (max-width:820px){ .scrollhint{ display:block; } }

/* ---------- markets ---------- */

.tablewrap{ overflow-x:auto; border:1px solid var(--line); background:var(--surface); }
table{ width:100%; border-collapse:collapse; min-width:840px; }
thead th{
  text-align:right; padding:14px 18px; border-bottom:1px solid var(--line);
  color:var(--dim); font-family:"Azeret Mono",monospace; font-weight:400;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
thead th:first-child{ text-align:left; }
tbody td{
  padding:15px 18px; border-bottom:1px solid var(--line-soft);
  text-align:right; white-space:nowrap;
  font-family:"Azeret Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--text-2);
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background .25s var(--ease); }
tbody tr:hover{ background:var(--azure-08); }
tbody td:first-child{ text-align:left; }
.sym{ display:flex; align-items:center; gap:12px; }
.sym__t{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108,"wght" 600;
  color:var(--text); font-size:14px; letter-spacing:.01em;
}
.sym__n{ color:var(--dim); font-size:11px; font-family:"Archivo",sans-serif; letter-spacing:.01em; }
.sym__b{
  width:2px; height:26px; background:var(--azure); flex:none; opacity:.55;
}
.spark{ display:block; width:88px; height:26px; }
.pos{ color:var(--azure); }
.neg{ color:var(--crit); }
.tag{
  display:inline-block; padding:3px 7px; border:1px solid var(--line);
  font-size:9.5px; letter-spacing:.12em; color:var(--dim);
}
.tag--live{ color:var(--azure); border-color:var(--azure-32); }

/* ---------- architecture ---------- */

.arch{ border:1px solid var(--line); background:var(--surface); padding:clamp(20px,3vw,38px); }
.arch__frame{ overflow-x:auto; }
#archsvg{ width:100%; min-width:760px; height:auto; display:block; }
.arch__legend{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
}
.arch__legend div h5{
  margin:0 0 6px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-family:"Azeret Mono",monospace; font-weight:400; color:var(--azure);
}
.arch__legend div p{ margin:0; color:var(--text-2); font-size:13px; max-width:32ch; }

/* ---------- closing columns ---------- */

.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cols3 article{ background:var(--void); padding:28px 26px 32px; }
.cols3 h3{
  margin:16px 0 10px; font-size:var(--step-1);
  font-variation-settings:"wdth" 110,"wght" 600; letter-spacing:-.01em;
}
.cols3 p{ margin:0; color:var(--text-2); font-size:13.5px; }
@media (max-width:860px){ .cols3{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */

.ftr{ border-top:1px solid var(--line); background:var(--void-2); padding-top:clamp(48px,7vh,84px); }
.ftr__word{
  font-variation-settings:"wdth" 122,"wght" 700;
  font-size:clamp(56px,17vw,240px); line-height:.82; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px var(--line);
  margin:0; user-select:none;
}
.ftr__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:30px; margin-top:44px; padding-block:32px;
  border-top:1px solid var(--line);
}
.ftr__grid h6{
  margin:0 0 14px; color:var(--dim); font-family:"Azeret Mono",monospace;
  font-weight:400; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
}
.ftr__grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ftr__grid a{ color:var(--text-2); font-size:13px; transition:color .25s var(--ease); }
.ftr__grid a:hover{ color:var(--azure); }
.ftr__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:22px 30px; border-top:1px solid var(--line-soft);
  color:var(--faint); font-family:"Azeret Mono",monospace; font-size:10px; letter-spacing:.1em;
}

/* ---------- header: X link + nav breathing room ---------- */

.iconlink{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.iconlink svg{ width:13px; height:13px; display:block; }
.iconlink:hover{ color:var(--text); border-color:var(--faint); }

@media (max-width:1180px){
  .nav{ gap:18px; }
  .nav a{ font-size:12px; }
}
@media (max-width:900px){
  .iconlink{ display:none; }
  .hdr__in > .btn{ margin-left:auto; }
}

/* ---------- the two ratios ---------- */

.duo{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-top:clamp(34px,4vw,56px);
}
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }

.duo__c{
  background:var(--surface); padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.duo__k{ margin:0; color:var(--dim); }
.duo__f{
  margin:16px 0 0; font-size:clamp(34px,4.4vw,58px); line-height:1;
  letter-spacing:-.04em; font-weight:500; color:var(--text);
}
.duo__f span{ color:var(--azure); padding-inline:.1em; }
.duo__c h3{
  margin:18px 0 0; font-size:var(--step-1); max-width:26ch;
  font-variation-settings:"wdth" 108,"wght" 500; letter-spacing:-.01em;
}
.duo__c p{ margin:10px 0 0; color:var(--text-2); max-width:46ch; }
.duo__go{
  margin-top:auto; padding-top:24px;
  color:var(--azure); font-family:"Azeret Mono",monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  transition:color .25s var(--ease);
}
.duo__go::after{ content:" \2192"; }
.duo__go:hover{ color:var(--azure-hi); }

/* ---------- allocation composer ---------- */

.legend i.free-sw{
  background:repeating-linear-gradient(90deg,#8296A8 0 3px,transparent 3px 6px);
}
.legend i.band-sw{
  height:9px; background:var(--azure-16);
  border-top:1px solid var(--azure-32); border-bottom:1px solid var(--azure-32);
}

.alloc{ margin:34px 0 4px; }
.alloc__bar{
  position:relative; display:flex; height:58px;
  border:1px solid var(--line); background:var(--void-2);
}
.alloc__seg{
  position:relative; display:flex; align-items:center;
  min-width:0; overflow:hidden; transition:width .16s linear;
}
.alloc__seg--a{ background:linear-gradient(180deg,var(--azure-16),var(--azure-08)); }
.alloc__seg--b{ background:var(--surface-2); }
.alloc__lab{
  padding-inline:13px; font-size:11px; letter-spacing:.05em;
  white-space:nowrap; color:var(--text);
}
.alloc__seg--b{ justify-content:flex-end; }
.alloc__seg--b .alloc__lab{ color:var(--text-2); }

.alloc__mark{
  position:absolute; top:-8px; bottom:-8px; width:1px;
  background:var(--text); transform:translateX(-.5px);
}
.alloc__mark::after{
  content:"TARGET"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font:400 8px/1 "Azeret Mono",monospace; letter-spacing:.2em;
  color:var(--text-2); white-space:nowrap;
}
.alloc__ghost{
  position:absolute; top:0; bottom:0; width:1px;
  background:repeating-linear-gradient(180deg,var(--dim) 0 3px,transparent 3px 6px);
  transition:left .16s linear;
}
.alloc__ghost::after{
  content:"LEFT ALONE"; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  font:400 8px/1 "Azeret Mono",monospace; letter-spacing:.2em;
  color:var(--dim); white-space:nowrap;
}

#ribbon{ display:block; width:100%; flex:1 1 auto; height:200px; min-height:180px; margin-top:30px; }
@media (max-width:620px){
  #ribbon{ height:150px; min-height:150px; }
  .alloc__lab{ font-size:10px; padding-inline:9px; }
}

/* ---------- faq ---------- */

.faq{ border-top:1px solid var(--line); margin-top:clamp(30px,3.4vw,46px); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 2px; color:var(--text-2);
  font-size:var(--step-1); font-variation-settings:"wdth" 106,"wght" 500;
  letter-spacing:-.01em; transition:color .25s var(--ease);
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary:hover,
.faq__i[open] summary{ color:var(--text); }
.faq__i summary i{ position:relative; width:11px; height:11px; flex:none; }
.faq__i summary i::before,
.faq__i summary i::after{
  content:""; position:absolute; background:var(--azure);
  transition:transform .3s var(--ease);
}
.faq__i summary i::before{ left:0; right:0; top:5px; height:1px; }
.faq__i summary i::after{ top:0; bottom:0; left:5px; width:1px; }
.faq__i[open] summary i::after{ transform:scaleY(0); }
.faq__a{ padding:0 2px 26px; max-width:74ch; }
.faq__a p{ margin:0; color:var(--text-2); }
.faq__a b{
  color:var(--text); font-weight:400;
  font-family:"Azeret Mono",monospace; font-size:.9em;
}

/* ---------- footer: things that do not exist yet ---------- */

.soon{ display:inline-flex; align-items:baseline; gap:8px; color:var(--faint); font-size:13px; }
.soon i{
  font-style:normal; font-family:"Azeret Mono",monospace;
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line); padding:2px 5px;
}

/* ---------- reveal ---------- */

.rv{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-2{ transition-delay:.09s; }
.rv-3{ transition-delay:.18s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
}