@import url('/ds/system.css');

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: var(--track-body);
}


.mat {
  min-height: 100%;
  background: radial-gradient(120% 60% at 50% 0%, var(--lift) 0%, var(--ground) 55%);
  padding: var(--s5) var(--s5) var(--s9);
}
.column { max-width: var(--measure); margin: 0 auto; }


.masthead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) 0 var(--s7);
  flex-wrap: wrap;
}
.mark { display: flex; gap: 3px; }
.mark i {
  display: block; width: 6px; height: 26px; border-radius: 2px;
}
.masthead .what {
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2);
}

.masthead nav { margin-left: auto; display: flex; gap: 0; flex-wrap: wrap; }


.masthead nav a, footer nav a[href] {
  display: inline-flex; align-items: center;
  min-height: var(--target); padding: 0 var(--s2);
  border-radius: var(--r-pill);
  font-size: var(--t-fine); text-decoration: none; color: var(--ink-2);
}
.masthead nav a:hover, footer nav a[href]:hover { background: var(--surface); color: var(--ink); }
.masthead nav a[aria-current="page"], footer nav a[href][aria-current="page"] { color: var(--ink); font-weight: var(--w-semibold); }


.masthead > a.navact {
  display: inline-flex; align-items: center;
  min-height: var(--target); padding: 0 var(--s3); margin-left: calc(var(--s1) - var(--s3));
  border-radius: var(--r-pill);
  font-size: var(--t-fine); text-decoration: none; color: var(--ink); font-weight: var(--w-semibold);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--ink) 28%, transparent);
}
.masthead > a.navact:hover { background: var(--surface); }

@media (max-width: 600px) {
  .masthead > a.navact { order: 1; margin-left: auto; }
  .masthead nav { order: 2; gap: 0; margin-left: calc(-1 * var(--s2)); width: calc(100% + 2 * var(--s2));
    justify-content: space-between; }
}


.lead h1 {
  margin: 0;
  font-size: var(--t-head);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-title);
  line-height: 1.2;
}
.lead p { margin: var(--s4) 0 0; font-size: var(--t-lead); line-height: 1.45; color: var(--ink); }
.lead p.under { font-size: var(--t-body); color: var(--ink-2); }


.card {
  margin-top: var(--s6);
  background: var(--ground);
  border-radius: 18px;
  border-top: 4px solid var(--unknown);
  padding: var(--s6) var(--s5) var(--s5);
  box-shadow: 0 1px 2px rgba(36, 30, 26, 0.06), 0 8px 24px rgba(36, 30, 26, 0.05);
}
.card > h2 {
  margin: 0 0 var(--s4);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2);
}
.card > h3 { margin: var(--s5) 0 var(--s2); font-size: var(--t-title); font-weight: var(--w-bold); letter-spacing: var(--track-title); }
.card > h3:first-of-type { margin-top: 0; }
.card p { margin: 0 0 var(--s4); }
.card p:last-child { margin-bottom: 0; }


.figure-card {
  margin-top: var(--s6);
  border-radius: 18px;
  padding: var(--s7) var(--s5);
  background: oklch(0.21 0.032 292);   
  color: var(--ground);
  text-align: center;
}
.figure-card .n {
  display: block; font-size: var(--t-display); font-weight: var(--w-black);
  letter-spacing: var(--track-display); line-height: 1; font-variant-numeric: tabular-nums;
}
.figure-card .of { display: block; margin-top: var(--s4); font-size: var(--t-body); opacity: 0.86; }


.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { padding: var(--s4) 0; border-top: 1px solid var(--edge); }
.rows > li:first-child { border-top: 0; padding-top: 0; }
.rows .name { font-weight: var(--w-semibold); }
.rows .says { display: block; margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-fine); }


.moment { margin-top: var(--s6); }
.moment > .head {
  font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase;
  font-weight: var(--w-semibold); color: var(--unknown);
}
.moment > .gloss { margin: var(--s1) 0 var(--s4); color: var(--ink-2); font-size: var(--t-fine); }


.basis {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--edge);
  font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--ink-3);
}


.slot {
  margin-top: var(--s5);
  border: 1px dashed var(--unknown);
  border-radius: var(--r-lg);
  background: color-mix(in oklch, var(--unknown) 5%, var(--ground));
  padding: var(--s4) var(--s5);
}
.slot .tag {
  display: inline-block;
  font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase;
  font-weight: var(--w-semibold); color: var(--unknown);
}
.slot p { margin: var(--s2) 0 0; font-size: var(--t-fine); color: var(--ink-2); }


a.act {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-primary); padding: 0 var(--s6);
  margin-top: var(--s5);
  border-radius: var(--r-pill); border: 0;
  background: var(--unknown); color: var(--ground);
  font-family: var(--font); font-size: var(--t-body); font-weight: var(--w-semibold);
  text-decoration: none;
  transition: background var(--m-state) var(--ease);
}
a.act:hover { background: color-mix(in oklch, var(--unknown) 88%, var(--ink)); }



a.onward {
  display: inline-flex; align-items: center;
  min-height: var(--target); margin-top: var(--s5);
  font-weight: var(--w-semibold); color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--unknown);
}


footer {
  margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--edge);
  font-size: var(--t-fine); color: var(--ink-3);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
}
footer a { color: var(--ink-2); }
footer .footname { color: var(--ink-2); }
footer .footname b { color: var(--ink); font-weight: var(--w-semibold); margin-right: var(--s2); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s1); margin-left: calc(-1 * var(--s2)); }
footer > p { margin: 0; }



.card a:not(.act):not(.onward), .lead a:not(.act):not(.onward), .what-these-are a {
  color: var(--ink); text-decoration-color: var(--unknown); text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }




.hero { padding: var(--s5) 0 var(--s6); }
.hero .kicker {
  display: block; margin-bottom: var(--s4);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--unknown);
}

.hero h1 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: 1.08;
}
.hero p {
  margin: var(--s5) 0 0; font-size: var(--t-lead); line-height: 1.45; color: var(--ink);
}
.hero p.after { color: var(--ink-2); font-size: var(--t-body); }


.screen { margin: var(--s6) 0 0; }
.screen img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
  box-shadow: 0 1px 2px rgba(36, 30, 26, 0.06), 0 12px 32px rgba(36, 30, 26, 0.09);
  background: var(--surface);
}

.screen figcaption {
  margin: var(--s4) 0 0; max-width: 820px;
  font-size: var(--t-fine); color: var(--ink-2); line-height: 1.5;
}
.screen figcaption b { color: var(--ink); font-weight: var(--w-semibold); }
.bleed { width: min(1180px, calc(100vw - 2 * var(--s5))); margin-left: 50%; transform: translateX(-50%); }


.against { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.against > li {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
  padding: var(--s5) 0; border-top: 1px solid var(--edge);
}
.against > li:first-child { border-top: 0; padding-top: 0; }
.against .them, .against .us { margin: 0; }
.against .lab {
  display: block; margin-bottom: var(--s2);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold);
}
.against .them .lab { color: var(--ink-3); }
.against .us .lab { color: var(--unknown); }
.against q { font-style: normal; }
.against .them { color: var(--ink-2); }
@media (max-width: 700px) {
  .against > li { grid-template-columns: 1fr; gap: var(--s4); }
}


.hides { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.hides > li { padding: var(--s5) 0; border-top: 1px solid var(--edge); }
.hides > li:first-child { border-top: 0; padding-top: 0; }
.hides .span {
  display: block;
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-3);
}
.hides .who {
  display: block; margin-top: var(--s2);
  font-size: var(--t-body); font-weight: var(--w-semibold); color: var(--ink);
}
.hides .words { display: block; margin-top: var(--s2); color: var(--ink-2); }
.hides q { font-style: normal; }


.src {
  display: block; margin-top: var(--s3);
  font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--ink-3);
}


.beat { margin-top: var(--s6); }
.beat > .when {
  font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase;
  font-weight: var(--w-semibold); color: var(--unknown);
}
.beat > h3 { margin: var(--s2) 0 var(--s3); font-size: var(--t-title); font-weight: var(--w-bold); letter-spacing: var(--track-title); }
.beat > p { margin: 0 0 var(--s3); }


.what-these-are {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  background: var(--surface); border-radius: var(--r-lg);
  font-size: var(--t-fine); color: var(--ink-2);
}
.what-these-are b { color: var(--ink); font-weight: var(--w-semibold); }
.what-these-are p { margin: 0 0 var(--s3); }
.what-these-are p:last-child { margin-bottom: 0; }




.apps {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.apps > li {
  position: relative;
  background: var(--ground);
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
  border-left: 5px solid var(--app, var(--unknown));
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
}

.apps .mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--app, var(--unknown)); color: var(--ground);
  font-size: var(--t-micro); font-weight: var(--w-black);
  letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: var(--s3);
}
.apps .app { display: block; font-weight: var(--w-semibold); font-size: var(--t-body); }

.apps .moves { display: block; margin-top: var(--s2); font-size: var(--t-fine); color: var(--ink); }
.apps .runs { display: block; margin-top: var(--s3); font-size: var(--t-micro); color: var(--ink-3); line-height: 1.5; }

.apps .line {
  display: inline-block; margin-top: var(--s3);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold);
  color: var(--app, var(--unknown));
}


.families { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4); }
.families > li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2); }
.families i { display: block; width: 14px; height: 14px; background: var(--app); }

[data-app="01"] { --app: oklch(0.58 0.18 209); }
[data-app="02"] { --app: oklch(0.58 0.18 259); }
[data-app="03"] { --app: oklch(0.58 0.18 340); }
[data-app="04"] { --app: oklch(0.58 0.18 225); }
[data-app="05"] { --app: oklch(0.58 0.18 217); }
[data-app="06"] { --app: oklch(0.58 0.18 45); }
[data-app="07"] { --app: oklch(0.58 0.18 243); }
[data-app="08"] { --app: oklch(0.58 0.18 251); }
[data-app="09"] { --app: oklch(0.58 0.18 61); }
[data-app="10"] { --app: oklch(0.58 0.18 173); }
[data-app="11"] { --app: oklch(0.58 0.18 149); }
[data-app="12"] { --app: oklch(0.58 0.18 53); }
[data-app="13"] { --app: oklch(0.58 0.18 165); }
[data-app="14"] { --app: oklch(0.58 0.18 348); }
[data-app="15"] { --app: oklch(0.58 0.18 181); }
[data-app="16"] { --app: oklch(0.58 0.18 189); }
[data-app="17"] { --app: oklch(0.58 0.18 197); }
[data-app="18"] { --app: oklch(0.58 0.18 69); }
[data-app="19"] { --app: oklch(0.58 0.18 267); }
[data-app="20"] { --app: oklch(0.58 0.18 157); }
[data-app="21"] { --app: oklch(0.58 0.18 233); }
[data-app="22"] { --app: var(--unknown); }


.expect { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.expect > li {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s5); align-items: start;
  padding: var(--s5) 0; border-top: 1px solid var(--edge);
}
.expect > li:first-child { border-top: 0; padding-top: 0; }
.expect .lab {
  display: block; margin-bottom: var(--s2);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold);
}
.expect .cond { margin: 0; color: var(--ink-2); }
.expect .cond .lab { color: var(--ink-3); }
.expect .then { margin: 0; color: var(--ink); }
.expect .then .lab { color: var(--unknown); }
@media (max-width: 720px) { .expect > li { grid-template-columns: 1fr; gap: var(--s3); } }


.form { margin-top: var(--s5); }
.field { margin-top: var(--s5); }
.field:first-child { margin-top: 0; }
.field label {
  display: block; margin-bottom: var(--s2);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2);
}
.field input, .field textarea, .field select {
  display: block; width: 100%; box-sizing: border-box;
  min-height: var(--target); padding: var(--s3) var(--s4);
  font-family: var(--font); font-size: var(--t-body); color: var(--ink);
  background: var(--ground); border: 1px solid var(--edge); border-radius: var(--r-md);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--unknown); outline-offset: 1px; border-color: var(--unknown);
}
.field .hint { display: block; margin-top: var(--s2); font-size: var(--t-fine); color: var(--ink-3); }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.act {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-primary); padding: 0 var(--s6); margin-top: var(--s5);
  border-radius: var(--r-pill); border: 0;
  background: var(--unknown); color: var(--ground);
  font-family: var(--font); font-size: var(--t-body); font-weight: var(--w-semibold);
  cursor: pointer;
  transition: background var(--m-state) var(--ease);
}
button.act:hover { background: color-mix(in oklch, var(--unknown) 88%, var(--ink)); }
.form .terms { margin-top: var(--s5); font-size: var(--t-fine); color: var(--ink-2); }




.marks { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.marks > li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--app); color: var(--ground);
  font-size: var(--t-micro); font-weight: var(--w-black); text-transform: uppercase;
  letter-spacing: 0.02em;
}
.marks.small > li { width: 26px; height: 26px; border-radius: 6px; font-size: 9px; }


.into {
  margin-top: var(--s6); padding: var(--s6) var(--s5);
  background: var(--surface); border-radius: 18px;
}

.into .marks { justify-content: center; gap: 5px; margin: 0; }
.into .marks > li { width: 24px; height: 24px; }
.into .arrow {
  display: block; width: 2px; height: 34px; margin: var(--s4) auto;
  background: linear-gradient(var(--edge), var(--ink-3));
}
.into .record {
  max-width: 460px; margin: 0 auto; padding: var(--s4) var(--s5);
  background: oklch(0.21 0.032 292); color: var(--ground);
  border-radius: var(--r-lg); text-align: center;
}
.into .record b { display: block; font-size: var(--t-title); font-weight: var(--w-bold); letter-spacing: var(--track-title); }
.into .record span { display: block; margin-top: var(--s2); font-size: var(--t-fine); opacity: 0.86; }
.into .cap { margin: var(--s4) 0 0; text-align: center; font-size: var(--t-fine); color: var(--ink-2); }




.band {
  position: relative;
  
  box-sizing: border-box;
  width: 100vw; left: 50%; transform: translateX(-50%);
  margin: var(--s8) 0;
  padding: var(--s8) var(--s5);
  background: oklch(0.21 0.032 292);
  color: var(--ground);
}
.band > .inner { max-width: var(--measure); margin: 0 auto; }
.band.wide > .inner { max-width: 1180px; }
.band h2 {
  margin: 0 0 var(--s4);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold);
  color: color-mix(in oklch, var(--unknown) 45%, white);
}
.band p { margin: 0 0 var(--s4); font-size: var(--t-lead); line-height: 1.45; }
.band p:last-child { margin-bottom: 0; }
.band p.fine { font-size: var(--t-fine); opacity: 0.72; line-height: 1.55; }
.band .big {
  margin: 0 0 var(--s5);
  font-size: clamp(26px, 3.4vw, 40px); font-weight: var(--w-black);
  letter-spacing: var(--track-display); line-height: 1.1;
}
.band a.act { background: var(--ground); color: oklch(0.21 0.032 292); }
.band a.act:hover { background: color-mix(in oklch, var(--ground) 88%, var(--unknown)); }


.plates { list-style: none; margin: 0 0 var(--s6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.plates > li { width: 84px; height: 84px; }
.plates img { display: block; width: 100%; height: 100%; }

@media (min-width: 900px) {
  .plates > li { width: 104px; height: 104px; }
  .plates { max-width: 812px; margin-left: auto; margin-right: auto; }
}


.masthead .mark i { width: 7px; height: 34px; }
.mark-xl { display: flex; gap: 5px; align-items: flex-end; }
.mark-xl i { display: block; width: 14px; height: 64px; border-radius: 3px; }


a.act.ghost {
  background: transparent; color: var(--unknown);
  box-shadow: inset 0 0 0 2px var(--unknown);
}
a.act.ghost:hover { background: color-mix(in oklch, var(--unknown) 8%, transparent); }
.band a.act.ghost { color: var(--ground); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ground) 55%, transparent); background: transparent; }
.acts { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin-bottom: var(--s5); }
.acts:last-child { margin-bottom: 0; }


.gap { margin: var(--s6) 0 var(--s5); }
.gap-bar {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 3.4fr) minmax(90px, 1fr);
  align-items: stretch;
  height: 92px; border-radius: var(--r-md); overflow: hidden;
}
.gap-end { background: var(--ground); }
.gap-mid {
  background: repeating-linear-gradient(135deg,
    color-mix(in oklch, var(--ground) 42%, transparent) 0 3px,
    transparent 3px 6px);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ground) 24%, transparent);
}
.gap-keys {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 3.4fr) minmax(90px, 1fr);
  gap: var(--s3); margin-top: var(--s3);
}
.gap-keys span {
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); line-height: 1.5;
}
.gap-keys .k-end { color: var(--ground); }
.gap-keys .k-mid { color: color-mix(in oklch, var(--ground) 62%, transparent); text-align: center; }
@media (max-width: 640px) {
  .gap-bar, .gap-keys { grid-template-columns: minmax(56px,1fr) minmax(0,2fr) minmax(56px,1fr); }
  .gap-bar { height: 68px; }
  .gap-keys span { font-size: 9px; letter-spacing: 0.08em; }
}


.units { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.units > li { width: 72px; }
.units img { display: block; width: 72px; height: 72px; border-radius: var(--r-md); }
.units .n { display: block; margin-top: var(--s2); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }


.figure-card.theirs {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.figure-card .whose {
  display: block; margin-bottom: var(--s4);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2);
}
.figure-card.theirs .of { color: var(--ink-2); opacity: 1; }


.chart { margin: var(--s5) 0 0; }

.chart .row { display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; margin-top: var(--s4); }
.chart .bar { display: contents; }
.chart .row:first-child { margin-top: 0; }
.chart .who {
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2); line-height: 1.4;
}
.chart .bar i { display: block; height: 34px; border-radius: 4px; background: var(--edge); }
.chart .row.big i { background: oklch(0.21 0.032 292); height: 44px; }
.chart .v { min-width: 6ch; font-weight: var(--w-black); font-size: var(--t-title); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart .note { margin: var(--s4) 0 0; font-size: var(--t-fine); color: var(--ink-2); }
@media (max-width: 640px) { .chart .row { grid-template-columns: 1fr; gap: var(--s2); } }


.thirteen { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.thirteen > li { width: 46px; height: 58px; border-radius: 4px; background: oklch(0.21 0.032 292); }
.thirteen > li.none {
  background: var(--texture-unknown);
  box-shadow: inset 0 0 0 1px var(--edge);
}




.steps { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(3, 1fr); }
.steps > li { min-width: 0; }
.steps .shot { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: var(--r-lg); }
.steps .when {
  display: block; margin-top: var(--s4);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--unknown);
}
.steps h3 { margin: var(--s2) 0 var(--s2); font-size: var(--t-title); font-weight: var(--w-bold); letter-spacing: var(--track-title); line-height: 1.15; }
.steps p { margin: 0; font-size: var(--t-fine); color: var(--ink-2); line-height: 1.55; }
.band .steps .when { color: color-mix(in oklch, var(--unknown) 45%, white); }
.band .steps h3, .band .steps p { color: var(--ground); }
.band .steps p { opacity: 0.78; }


.steps + .fine, .steps + p, .counts + .fine, .counts + p { margin-top: var(--s6); }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }


.band.on { background-size: cover; background-position: center; }
.band.on::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    oklch(0.21 0.032 292 / 0.94) 0%,
    oklch(0.21 0.032 292 / 0.88) 52%,
    oklch(0.21 0.032 292 / 0.72) 100%);
}
.band.on > .inner { position: relative; }


.marked { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.marked > li { display: grid; grid-template-columns: 30px 1fr; gap: var(--s4); align-items: start; padding: var(--s4) 0; border-top: 1px solid var(--edge); }

.marked > li > :not(.mk) { grid-column: 2; }
.marked > li:first-child { border-top: 0; padding-top: 0; }

.marked .mk { display: block; width: 26px; height: 26px; margin-top: 1px; background: var(--unknown); }
.marked b { display: block; font-weight: var(--w-semibold); }
.marked span.t { display: block; margin-top: var(--s1); font-size: var(--t-fine); color: var(--ink-2); }
.band .marked > li { border-color: color-mix(in oklch, var(--ground) 22%, transparent); }
.band .marked span.t { color: color-mix(in oklch, var(--ground) 78%, transparent); }


.tool { margin-top: var(--s6); }
.tool fieldset { border: 0; margin: 0 0 var(--s5); padding: 0; }
.tool legend {
  padding: 0; margin-bottom: var(--s3);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2);
}
.picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.picks label {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--target); padding: 0 var(--s4);
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  font-size: var(--t-fine); cursor: pointer; background: var(--ground);
  transition: background var(--m-state) var(--ease), border-color var(--m-state) var(--ease);
}
.picks label:hover { border-color: var(--unknown); }
.picks input { width: 16px; height: 16px; margin: 0; accent-color: var(--unknown); }
.picks input:checked + span { font-weight: var(--w-semibold); }
.picks label:has(input:checked) { background: color-mix(in oklch, var(--unknown) 9%, var(--ground)); border-color: var(--unknown); }

.out { margin-top: var(--s6); padding: var(--s6) var(--s5); background: oklch(0.21 0.032 292); color: var(--ground); border-radius: 18px; }
.out .headline { margin: 0 0 var(--s5); font-size: clamp(22px, 2.6vw, 32px); font-weight: var(--w-black); letter-spacing: var(--track-display); line-height: 1.15; }
.out .empty { margin: 0; opacity: 0.72; }
.out table { width: 100%; border-collapse: collapse; font-size: var(--t-fine); }

.out th {
  text-align: left; padding: 0 var(--s4) var(--s3) 0; font-size: var(--t-micro);
  letter-spacing: var(--track-micro); text-transform: uppercase;
  color: color-mix(in oklch, var(--unknown) 45%, white); font-weight: var(--w-semibold);
}
.out td { padding: var(--s3) var(--s4) var(--s3) 0; border-top: 1px solid color-mix(in oklch, var(--ground) 20%, transparent); vertical-align: top; }
.out td:last-child { padding-right: 0; }
.out .v { font-weight: var(--w-semibold); white-space: nowrap; }
.out .u { opacity: 0.74; }
.out .no { color: color-mix(in oklch, var(--outstanding) 55%, white); font-weight: var(--w-semibold); }
.out .shapes { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid color-mix(in oklch, var(--ground) 20%, transparent); }
.out .shapes b { font-weight: var(--w-semibold); }
.out .why { margin: var(--s4) 0 0; font-size: var(--t-fine); opacity: 0.74; }
@media (max-width: 640px) {
  .out table, .out thead, .out tbody, .out tr, .out td, .out th { display: block; }
  .out thead { display: none; }
  .out td { border-top: 0; padding: 0 0 var(--s1); }
  .out tr { display: block; padding: var(--s4) 0; border-top: 1px solid color-mix(in oklch, var(--ground) 20%, transparent); }
}


details.fold { border-top: 1px solid var(--edge); }
details.fold:first-of-type { border-top: 0; }
details.fold > summary {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--target); padding: var(--s3) 0;
  cursor: pointer; font-weight: var(--w-semibold); list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--unknown); border-bottom: 2px solid var(--unknown);
  transform: rotate(-45deg); transition: transform var(--m-state) var(--ease);
}
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > .body { padding: 0 0 var(--s5) 22px; font-size: var(--t-fine); color: var(--ink-2); }
details.fold > .body p { margin: 0 0 var(--s3); }
details.fold > .body p:last-child { margin-bottom: 0; }


.split { display: flex; height: 46px; border-radius: var(--r-md); overflow: hidden; margin-top: var(--s5); }
.split > i { display: block; }
.split > i:nth-child(1) { background: var(--ground); }
.split > i:nth-child(2) { background: color-mix(in oklch, var(--ground) 52%, transparent); }
.split > i:nth-child(3) { background: color-mix(in oklch, var(--ground) 26%, transparent); }
.split-keys { display: flex; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s3); }
.split-keys span { font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; font-weight: var(--w-semibold); opacity: 0.82; }
.counts { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.counts > li { min-width: 0; }
.counts .n { display: block; font-size: clamp(34px, 4.4vw, 52px); font-weight: var(--w-black); letter-spacing: var(--track-display); line-height: 1; font-variant-numeric: tabular-nums; }
.counts .k { display: block; margin-top: var(--s2); font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; font-weight: var(--w-semibold); color: color-mix(in oklch, var(--unknown) 45%, white); }
.counts p { margin: var(--s3) 0 0; font-size: var(--t-fine); line-height: 1.55; opacity: 0.8; }
@media (max-width: 700px) { .counts { grid-template-columns: 1fr; gap: var(--s5); } }


.scale { display: flex; flex-wrap: wrap; gap: var(--s6); margin: var(--s5) 0 var(--s6); padding: var(--s5); background: var(--surface); border-radius: var(--r-lg); }
.scale > div { min-width: 0; }
.scale .lab { display: block; margin-bottom: var(--s3); font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-2); }
.steppers { display: flex; gap: var(--s2); flex-wrap: wrap; }
.steppers label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); min-width: 58px; padding: 0 var(--s4);
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  background: var(--ground); cursor: pointer; font-size: var(--t-fine); font-variant-numeric: tabular-nums;
}
.steppers input { position: absolute; opacity: 0; pointer-events: none; }
.steppers label:has(input:checked) { background: var(--unknown); color: var(--ground); border-color: var(--unknown); font-weight: var(--w-semibold); }
.steppers label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.out .total { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin: 0 0 var(--s3); }
.out .total .n { font-size: clamp(38px, 5vw, 60px); font-weight: var(--w-black); letter-spacing: var(--track-display); line-height: 1; font-variant-numeric: tabular-nums; }
.out .total .per { opacity: 0.78; }
.out .scen { margin: 0 0 var(--s5); font-size: var(--t-fine); opacity: 0.78; }
.out .flags { list-style: none; margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid color-mix(in oklch, var(--ground) 20%, transparent); }
.out .flags > li { padding: var(--s2) 0; font-size: var(--t-fine); }
.out .flags b { color: color-mix(in oklch, var(--outstanding) 58%, white); }


.band a:not(.act), .out a {
  color: var(--ground);
  text-decoration-color: color-mix(in oklch, var(--unknown) 60%, white);
  text-underline-offset: 3px;
}


.out .take { margin-top: var(--s6); padding-top: var(--s5); border-top: 2px solid color-mix(in oklch, var(--outstanding) 45%, transparent); }
.out .take h3 { margin: 0 0 var(--s4); font-size: var(--t-title); font-weight: var(--w-bold); letter-spacing: var(--track-title); }
.out .take td:first-child { width: 148px; font-weight: var(--w-semibold); }


.basis-tag {
  display: block; margin-top: var(--s1);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--w-semibold);
  opacity: 0.72;
}
.basis-tag.b-filing, .basis-tag.b-pub { color: color-mix(in oklch, var(--settled) 45%, white); }
.basis-tag.b-elsewhere, .basis-tag.b-rep { color: color-mix(in oklch, var(--ground) 66%, transparent); }
.basis-tag.b-comp { color: color-mix(in oklch, var(--outstanding) 58%, white); opacity: 1; }
.basis-tag.b-none { color: color-mix(in oklch, var(--ground) 48%, transparent); }


.howto { list-style: none; counter-reset: step; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.howto > li { counter-increment: step; position: relative; padding-left: 38px; font-size: var(--t-fine); color: var(--ink-2); line-height: 1.55; }
.howto > li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--unknown); color: var(--ground);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-micro); font-weight: var(--w-black);
}
.howto b { display: block; color: var(--ink); font-weight: var(--w-semibold); margin-bottom: var(--s1); }
@media (max-width: 780px) { .howto { grid-template-columns: 1fr; gap: var(--s4); } }
.scale .hint { display: block; margin-top: var(--s2); font-size: var(--t-fine); color: var(--ink-3); max-width: 30ch; }


.delta { margin-top: var(--s6); padding-top: var(--s5); border-top: 2px solid color-mix(in oklch, var(--ground) 26%, transparent); }
.delta h3 { margin: 0 0 var(--s5); font-size: clamp(22px, 2.8vw, 34px); font-weight: var(--w-black); letter-spacing: var(--track-display); line-height: 1.15; }
.delta ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.delta li { min-width: 0; }
.delta .pair { display: flex; align-items: baseline; gap: var(--s3); }
.delta .them { font-size: clamp(30px, 3.6vw, 44px); font-weight: var(--w-black); letter-spacing: var(--track-display); line-height: 1; font-variant-numeric: tabular-nums; opacity: 0.55; }
.delta .arrow { opacity: 0.5; }
.delta .us { font-size: clamp(30px, 3.6vw, 44px); font-weight: var(--w-black); letter-spacing: var(--track-display); line-height: 1; color: color-mix(in oklch, var(--settled) 50%, white); }
.delta .k { display: block; margin-top: var(--s3); font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; font-weight: var(--w-semibold); opacity: 0.82; }
.delta p.small { margin: var(--s2) 0 0; font-size: var(--t-fine); opacity: 0.74; line-height: 1.55; }
.delta .caveat { margin: var(--s5) 0 0; padding: var(--s4) var(--s5); background: color-mix(in oklch, var(--ground) 10%, transparent); border-radius: var(--r-md); font-size: var(--t-fine); }
@media (max-width: 700px) { .delta ul { grid-template-columns: 1fr; gap: var(--s4); } }


.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: var(--s5) 0 0; }

.voices.one { grid-template-columns: 1fr; max-width: 46rem; }
.voice { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.voice blockquote {
  margin: 0; font-size: var(--t-lead); line-height: 1.34; font-weight: var(--w-bold);
  letter-spacing: var(--track-title); color: var(--ink); text-wrap: balance;
}
.voice cite {
  display: block; margin-top: var(--s3); font-style: normal; font-size: var(--t-fine);
  line-height: 1.42; color: var(--ink-2);
}
.voice cite b { color: var(--ink); font-weight: var(--w-black); }
.voice cite span { display: block; color: var(--ink-3); }

.voice.rival { border-top-color: var(--unknown); }
.voice .who-they-are {
  display: inline-block; margin-bottom: var(--s3); font-size: var(--t-micro);
  font-weight: var(--w-black); letter-spacing: var(--track-micro); text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 720px) { .voices { grid-template-columns: 1fr; } }


.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: var(--s5) 0 0; }
.stat { border-top: 1px solid var(--edge); padding-top: var(--s4); }
.stat .n {
  display: block; font-size: clamp(38px, 5.4vw, 62px); font-weight: var(--w-black);
  letter-spacing: var(--track-display); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat .of { display: block; margin-top: var(--s3); font-size: var(--t-fine); line-height: 1.42; color: var(--ink-2); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }


.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.offers li {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s3) 0; border-top: 1px solid var(--edge);
  font-size: var(--t-body); line-height: 1.36; color: var(--ink);
}
.offers li::before {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: 1px;
  background: var(--unknown);
  
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
}
.offers .where { display: block; margin-top: 2px; font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 700px) { .offers { grid-template-columns: 1fr; } }


.parts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.parts li { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.parts b { display: block; font-size: var(--t-body); letter-spacing: var(--track-title); }
.parts span { display: block; margin-top: var(--s2); font-size: var(--t-fine); line-height: 1.4; color: var(--ink-2); }
.parts li.absent { border-top-color: var(--edge); }
.parts li.absent b { color: var(--ink-3); }
@media (max-width: 860px) { .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .parts { grid-template-columns: 1fr; } }


.hero p.under { margin-top: var(--s4); font-size: var(--t-lead); line-height: 1.34; color: var(--ink-2); max-width: 34em; }
.hero p.price-line {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 2px solid var(--ink);
  font-size: var(--t-lead); line-height: 1.3; color: var(--ink); max-width: 34em;
}
.hero p.price-line b {
  font-size: clamp(34px, 4.4vw, 50px); font-weight: var(--w-black);
  letter-spacing: var(--track-display); line-height: 1;
  font-variant-numeric: tabular-nums; margin-right: 6px;
}


.card > .kicker,
section > .kicker:not(.hero .kicker) {
  display: block; margin-bottom: var(--s3);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: var(--w-black); color: var(--ink-3);
}


.implies { margin: var(--s3) 0 0; font-size: var(--t-fine); line-height: 1.42; color: var(--ink-2); }
.implies b { color: var(--ink); }
.implies .odd { display: block; margin-top: var(--s2); color: var(--unknown); font-weight: var(--w-semibold); }


.fern { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); align-items: center; margin: var(--s5) 0 0; }
.fern-paper {
  background: #fefdfb; border-radius: 14px; padding: var(--s5) var(--s6);
  box-shadow: 0 2px 12px rgba(36, 30, 26, .07), 0 0 0 1px rgba(120, 108, 90, .10);
}

.fern-field {
  background: #f3f1fb; border-radius: 18px; padding: var(--s5);
  display: grid; place-items: center;
}
.fern-stage { position: relative; width: 204px; height: 262px; }
.fern-says p { margin: 0; }
@media (max-width: 720px) {
  .fern { grid-template-columns: 1fr; gap: var(--s5); justify-items: center; }
  .fern-says { order: 2; }
  .fern-says p { text-align: left; }
}


.fern-stage { --ease: cubic-bezier(.4, 0, .2, 1); }
@keyframes fBreathe { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-2.5px) scaleY(1.012); } }
@keyframes fHeroLid { 0%,38% { transform: translateY(0); } 42% { transform: translateY(-8px); } 46% { transform: translateY(0); } 54%,74% { transform: translateY(-30px); } 84%,100% { transform: translateY(0); } }
@keyframes fHeroRing { 0%,39% { opacity: 0; transform: scale(.55); } 43% { opacity: 1; transform: scale(1); } 53%,100% { opacity: 0; transform: scale(1.45); } }
@keyframes fHeroSteam { 0%,50% { opacity: 0; transform: translateY(4px); } 60%,72% { opacity: 1; transform: translateY(-5px); } 82%,100% { opacity: 0; transform: translateY(-9px); } }
@keyframes fHeroCrown { 0%,48% { opacity: 0; } 60%,74% { opacity: 1; } 84%,100% { opacity: 0; } }


@media (prefers-reduced-motion: reduce) {
  
  .fern-stage, .fern-stage * { animation: none !important; }
}


.mastmark { display: flex; align-items: center; gap: var(--s3); }


.bellmark { display: block; flex: none; }
.wordmark { display: flex; flex-direction: column; line-height: 1.15; }

a.wordmark { color: inherit; text-decoration: none; }
.wordmark b {
  font-size: var(--t-body); font-weight: var(--w-black);
  letter-spacing: var(--track-title); color: var(--ink);
}

.masthead .mastmark { gap: 9px; }
.masthead .wordmark b { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 0.9; }
.masthead .tagline { font-size: 12px; }
.masthead { gap: 10px; }

.masthead .wordmark .what {
  margin: 1px 0 0; font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 520px) {
  .fern-mini { transform: scale(.12); }
}


.rates { width: 100%; border-collapse: collapse; margin: var(--s5) 0 0; font-variant-numeric: tabular-nums; }
.rates th {
  text-align: left; padding: 0 var(--s4) var(--s3) 0;
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-black);
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.rates td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--edge); vertical-align: top; }
.rates td:first-child { font-weight: var(--w-semibold); }
.rates .none { color: var(--ink-3); }

.rates tr.ours td { background: var(--surface); font-weight: var(--w-black); }
.rates a {
  display: inline-block; min-width: 14px; text-align: center; margin-left: 3px;
  font-size: 10px; font-weight: var(--w-black); vertical-align: super;
  color: var(--unknown); text-decoration: none;
}
.rates a:hover { text-decoration: underline; }
.unit { margin: var(--s3) 0 0; font-size: var(--t-fine); color: var(--ink-3); }
.against-revenue {
  margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 2px solid var(--ink);
  font-size: var(--t-lead); line-height: 1.34;
}
.notes { margin: var(--s5) 0 0; padding: 0; list-style: none; }
.notes li { margin-top: var(--s3); font-size: var(--t-fine); line-height: 1.45; color: var(--ink-2); }
.notes li b:first-child { color: var(--ink); }
.notes li:target { background: var(--surface); }

.rates { table-layout: fixed; max-width: 100%; }
@media (max-width: 620px) {
  .rates th:nth-child(2), .rates td:nth-child(2) { display: none; }
  .rates td, .rates th { padding-right: var(--s3); }
  .rates th { white-space: normal; }
}


.lanes td:last-child, .lanes th:last-child { text-align: right; white-space: nowrap; }
.lanes tr.sum td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: var(--w-black); padding-top: var(--s4); }
.lanes tr.gap td { color: var(--ink-2); }
.lanes tr.gap td:first-child { font-weight: var(--w-regular, 400); }
.lanes tr.floor td { border-top: 1px solid var(--edge); font-weight: var(--w-black); border-bottom: 0; }

.ours-row { margin-top: var(--s5); }
.ours-row tr.ours td {
  background: var(--ink); color: var(--paper, #fefdfb);
  border: 0; padding: var(--s4); font-weight: var(--w-black);
}
.ours-row tr.ours td:last-child { text-align: right; font-size: var(--t-title); }


.masthead { flex-wrap: wrap; }

.tagline {
  margin-left: auto; text-align: right;
  font-size: var(--t-fine); line-height: 1.38;
  font-style: italic; font-weight: var(--w-light, 300);
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
@media (max-width: 860px) { .tagline { display: none; } }


.card .hh-src { margin: var(--s7) 0 var(--s3); font-size: var(--t-fine); color: var(--ink-3); }


.lanes.bysize td:not(:first-child), .lanes.bysize th:not(:first-child) { text-align: right; }
@media (max-width: 620px) {
  .rates.keepcols th:nth-child(2), .rates.keepcols td:nth-child(2) { display: table-cell; }
  .rates.keepcols th, .rates.keepcols td { padding-right: var(--s2); font-size: var(--t-fine); }
  
  .lanes.keepcols th:last-child, .lanes.keepcols td:last-child { white-space: normal; }
}






.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin: var(--s6) 0 0; }
.sz { padding: var(--s5); border-radius: 14px; display: flex; flex-direction: column; min-width: 0; }
.sz.s1 { background: color-mix(in oklch, var(--unknown) 6%, var(--ground)); }
.sz.s2 { background: color-mix(in oklch, var(--unknown) 13%, var(--ground)); }
.sz.s3 { background: color-mix(in oklch, var(--unknown) 22%, var(--ground)); }
.sz-lab {
  display: block; font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--ink-3); line-height: 1.6;
}
.sz-lab b { color: var(--ink); font-weight: var(--w-black); }
.sz-fig {
  display: block; margin-top: var(--s4); font-size: clamp(30px, 3.6vw, 44px);
  font-weight: var(--w-black); letter-spacing: var(--track-display); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--unknown);
}
.sz-of { display: block; margin-top: var(--s2); font-size: var(--t-fine); line-height: 1.4; color: var(--ink-2); }
.sz-work { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid rgba(117,68,205,.22); }
.sz-work > div { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; }
.sz-work dt { font-size: var(--t-fine); color: var(--ink-2); }
.sz-work dd { margin: 0; font-size: var(--t-fine); font-weight: var(--w-black); font-variant-numeric: tabular-nums; }
.sz-work .of21 { font-weight: var(--w-regular, 400); color: var(--ink-3); }


.lanebars { margin: var(--s6) 0 0; }
.lb { display: grid; grid-template-columns: 190px 1fr 52px; align-items: center; gap: var(--s4); padding: var(--s3) 0; }
.lb-name { font-size: var(--t-fine); font-weight: var(--w-semibold); line-height: 1.25; }
.lb-says {
  display: block; font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-semibold); margin-top: 2px;
}
.lb-track { display: flex; height: 26px; border-radius: 5px; background: var(--surface); overflow: hidden; }
.lb-fill { display: block; height: 100%; background: color-mix(in oklch, var(--unknown) 34%, var(--ground)); }
.lb-n {
  text-align: right; font-size: var(--t-body); font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
}
.lb.ours .lb-name, .lb.ours .lb-n { color: var(--unknown); }
.lb.ours .lb-fill.built { background: var(--unknown); }

.lb.ours .lb-fill.planned {
  background: repeating-linear-gradient(135deg,
    rgba(117,68,205,.20) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 1.5px rgba(117,68,205,.45);
}
.lb-n a { font-size: 0.66em; vertical-align: super; line-height: 0; text-decoration: none; margin-left: 1px; }
.card .lb-key { margin: var(--s4) 0 0; font-size: var(--t-micro); letter-spacing: 0.03em; color: var(--ink-3); }
.lb-key .k {
  display: inline-block; width: 22px; height: 10px; border-radius: 3px;
  vertical-align: -1px; margin: 0 4px 0 14px;
}
.lb-key .k:first-child { margin-left: 0; }
.lb-key .k.solid { background: var(--unknown); }
.lb-key .k.open {
  background: repeating-linear-gradient(135deg, rgba(117,68,205,.20) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 1.5px rgba(117,68,205,.45);
}

@media (max-width: 760px) {
  .sizes { grid-template-columns: 1fr; }
  .lb { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s3) 0 var(--s4); }
  .lb-track { height: 22px; }
  .lb-n { text-align: left; }
}


.band.bill { background: oklch(0.21 0.032 292); }
.band.bill > .inner { max-width: 1180px; }
.band.bill h3 {
  color: var(--ground); margin: 0 0 var(--s3);
  font-size: clamp(24px, 3vw, 34px); letter-spacing: var(--track-title); line-height: 1.15;
}
.band.bill > .inner > p { color: color-mix(in oklch, var(--ground) 76%, transparent); }
.band.bill .rates th { color: color-mix(in oklch, var(--ground) 58%, transparent); border-bottom-color: rgba(254,253,251,.22); }
.band.bill .rates td { color: var(--ground); border-bottom-color: rgba(254,253,251,.13); }
.band.bill .rates a { color: color-mix(in oklch, var(--unknown) 40%, white); }
.band.bill .rates tr.sum td { border-top-color: rgba(254,253,251,.5); }


.band.bill .rates { margin-left: -16px; width: calc(100% + 32px); }
.band.bill .rates th,
.band.bill .rates td { padding-left: 16px; padding-right: 16px; }
.band.bill .rates tr.ours td {
  background: var(--unknown); font-weight: var(--w-black);
  padding-top: var(--s4); padding-bottom: var(--s4);
}
.band.bill .rates tr.ours td:first-child { border-radius: 8px 0 0 8px; }
.band.bill .rates tr.ours td:last-child { border-radius: 0 8px 8px 0; }
.band.bill .rates tr.ours td, .band.bill .rates tr.ours a { color: #fefdfb; }
.band.bill .against-revenue {
  border-top-color: rgba(254,253,251,.5); color: var(--ground);
  font-size: var(--t-lead); line-height: 1.34;
}
.band.bill .hh-src { color: color-mix(in oklch, var(--ground) 58%, transparent); margin-top: var(--s5); }


.card.tint { background: var(--surface); }
.card.tint .rates tr.ours td { background: var(--ground); }
h3.lead-h3 { margin-top: var(--s7); }


.steps.absent { margin-top: var(--s5); }
.steps.absent .shot { height: 148px; }
.steps.absent .when { color: var(--unknown); }
.steps.absent h3 { margin-top: var(--s2); font-size: var(--t-lead); line-height: 1.2; text-wrap: balance; }
.steps.absent p { font-size: var(--t-fine); }


.card.mine { background: color-mix(in oklch, var(--unknown) 8%, var(--ground)); border-top-color: var(--unknown); }
.card.mine h3 { color: var(--unknown); }


.against > li:not(:has(.us)) { grid-template-columns: 1fr; }


.card .entry-note {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 2px solid var(--ink);
  font-size: var(--t-lead); line-height: 1.34;
}
.card .entry-note b { color: var(--unknown); }


.turn {
  margin: var(--s7) auto; max-width: 44rem; padding-top: var(--s5);
  border-top: 2px solid var(--ink);
  font-size: var(--t-lead); line-height: 1.4;
}
.turn b { color: var(--ink); }


.figure-card .of a {
  font-size: 0.68em; vertical-align: super; line-height: 0; margin-left: 1px;
  text-decoration: none; font-weight: var(--w-black);
  color: color-mix(in oklch, var(--ground) 74%, transparent);
}


.card > h3.lead-h3:first-child,
.card > .lead-h3:first-of-type:not(:has(~ * .notes)) { margin-top: 0; }
.card.tint > h3.lead-h3 { margin-top: 0; }


.notes-fold { margin-top: var(--s7); }
.notes-fold > .body .notes { margin-top: var(--s4); }
.notes-fold > .body .notes li:first-child { margin-top: 0; }


a[href^="#f"] {
  font-size: 0.68em; vertical-align: super; line-height: 0;
  text-decoration: none; font-weight: var(--w-black);
  margin-left: 1px; color: var(--unknown);
}
a[href^="#f"]:hover { text-decoration: underline; }
.band.bill a[href^="#f"] { color: color-mix(in oklch, var(--unknown) 42%, white); }
.figure-card a[href^="#f"] { color: color-mix(in oklch, var(--ground) 74%, transparent); }
.band.bill tr.ours a[href^="#f"] { color: #fefdfb; }


.band.bill .against-revenue { margin-top: var(--s6); }



.card .basis, .band .basis,
details.fold > .body .basis { margin-top: var(--s6); padding-top: var(--s4); }


.band.bill .rates td:last-child { position: relative; padding-right: 38px; }
.band.bill .rates td:last-child a[href^="#f"] {
  position: absolute; right: 14px; top: var(--s3); margin-left: 0;
}
.band.bill .rates tr.ours td:last-child a[href^="#f"] { top: var(--s4); }


.bill { display: grid; gap: var(--s3); margin: var(--s5) 0 var(--s4); }
.bill-row { display: grid; grid-template-columns: 8.5rem 1fr 5.5rem; align-items: center; gap: var(--s3); }
.bill-name { font-size: var(--t-fine); font-weight: var(--w-semibold); color: var(--ink); }
.bill-track { display: block; height: 30px; }
.bill-bar { display: block; height: 100%; border-radius: var(--r-pill); }
.bill-bar.theirs { background: color-mix(in oklch, var(--ink) 20%, transparent); }
.bill-bar.ours { background: var(--unknown); }
.bill-n { text-align: right; font-size: var(--t-title); font-weight: var(--w-black); color: var(--ink); }
@media (max-width: 520px) {
  .bill-row { grid-template-columns: 1fr auto; row-gap: var(--s1); }
  .bill-track { grid-column: 1 / -1; grid-row: 2; }
}

.steps.five { margin-top: var(--s5); }

@media (min-width: 781px) {
  .steps.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps.five > li { grid-column: span 2; }
  .steps.five > li:nth-child(n+4) { grid-column: span 3; }
}

.band .steps.vows h3 { font-size: var(--t-lead); font-weight: var(--w-semibold); }
.band .steps.vows + .big { margin-top: var(--s7); }

.voice-photo { display: block; width: 100%; height: 220px; object-fit: cover; border-radius: var(--r-lg); margin: var(--s4) 0 var(--s5); }
@media (max-width: 520px) { .voice-photo { height: 160px; } }


.lb-name a { color: inherit; text-decoration: none; }

.band .steps + .big { margin-top: var(--s6); }
.band.bill .against-revenue.big {
  font-size: clamp(26px, 3.4vw, 40px); font-weight: var(--w-black);
  letter-spacing: var(--track-display); line-height: 1.1;
}
@media (max-width: 600px) {
  .plates { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s2); }
  .plates > li { flex: 0 0 72px; height: 72px; scroll-snap-align: start; }
  .steppers { flex-wrap: nowrap; gap: var(--s1); }
  .steppers label { flex: 1 1 0; min-width: 0; padding: 0; }
  .screen.bleed:not(.phone-crop) { overflow-x: auto; }
  .screen.bleed:not(.phone-crop) > img { width: 760px; max-width: none; }
  .screen.bleed.phone-crop img { width: 100%; }
}