/* =========================================================
   Deadwax
   Design language: record sleeve and liner notes. Full bleed
   bottle green sleeve panels alternate with newsprint paper
   panels. Every section carries a catalogue position, A1 to B5,
   because the page is a record and it has two sides.
   Motion: springy. 320ms with overshoot.
   ========================================================= */

:root{
  --paper:  #F0EAD8;
  --paper-2:#E6DEC8;
  --ink:    #141210;
  --ink-70: rgba(20,18,16,.7);
  --ink-48: rgba(20,18,16,.48);
  --ink-24: rgba(20,18,16,.24);
  --green:  #0E3B2C;
  --green-2:#0A2C21;
  --green-lift: #17513D;
  --acid:   #D9E021;
  --bone:   #F0EAD8;
  --bone-72:rgba(240,234,216,.72);
  --bone-44:rgba(240,234,216,.44);
  --bone-20:rgba(240,234,216,.2);

  --display:"Syne", "Helvetica Neue", Arial, sans-serif;
  --body:"Chivo", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:"Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --e: cubic-bezier(.34,1.56,.64,1);
  --e-out: cubic-bezier(.22,.9,.3,1);
  --t: 320ms;

  --gut: 20px;
  --maxw: 1300px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:70px;
  background:var(--paper);
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  font-weight:400; overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:8px; top:-64px; z-index:300;
  background:var(--acid); color:var(--ink); padding:10px 16px;
  font-family:var(--mono); font-size:12px; text-decoration:none;
}
.skip:focus{ top:8px; }

:focus-visible{ outline:3px solid var(--acid); outline-offset:2px; }
.sleeve :focus-visible{ outline-color:var(--acid); }

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

/* ---------------- masthead ---------------- */

.masthead{
  position:sticky; top:0; z-index:200;
  background:var(--green); color:var(--bone);
  border-bottom:2px solid var(--ink);
}
.masthead-in{ display:flex; align-items:center; gap:14px; min-height:58px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; }
.brand-mark{ width:24px; height:24px; color:var(--acid); flex:none; }
.brand-word{
  font-family:var(--display); font-weight:800; font-size:19px;
  letter-spacing:-.02em; text-transform:lowercase;
}
.nav{ display:none; }
.masthead .masthead-cta{ display:none; }

.nav-toggle{
  appearance:none; background:none; border:2px solid var(--bone-20);
  width:44px; height:44px; display:grid; place-items:center;
  cursor:pointer; padding:0; border-radius:0;
}
.nav-toggle-bars{ display:block; width:17px; }
.nav-toggle-bars i{ display:block; height:2px; background:var(--bone); transition:transform var(--t) var(--e); }
.nav-toggle-bars i+i{ margin-top:5px; }
.nav-toggle[aria-expanded="true"] i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.drawer{ padding:6px var(--gut) 16px; display:grid; gap:1px; background:var(--green); }
.drawer[hidden]{ display:none; }
.drawer a{
  font-family:var(--display); font-weight:700; font-size:18px;
  text-decoration:none; padding:11px 0; color:var(--bone);
  border-bottom:1px solid var(--bone-20);
}

/* ---------------- buttons ---------------- */

.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px;
  font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:-.005em; text-decoration:none; cursor:pointer;
  border:2px solid var(--ink); border-radius:0;
  transition:transform var(--t) var(--e);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity var(--t) var(--e-out); }
.btn:hover{ transform:translate(-2px,-2px); }
.btn:active{ transform:translate(0,0); }

.btn-acid{ background:var(--acid); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.btn-acid::before{ background:var(--bone); }
.btn-acid:hover::before{ opacity:1; }
.btn-acid:hover{ box-shadow:6px 6px 0 var(--ink); }

.btn-outline{ background:transparent; color:var(--bone); border-color:var(--bone); }
.btn-outline::before{ background:rgba(240,234,216,.14); }
.btn-outline:hover::before{ opacity:1; }
.btn-outline:hover{ transform:translate(-2px,-2px); }

.btn-lg{ min-height:58px; padding:0 30px; font-size:17px; }

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

h1{
  font-family:var(--display); font-weight:800;
  /* Syne 800 is wide: 10.2vw is the largest that keeps "Matching is"
     inside the sleeve frame at 375px */
  font-size:clamp(2.3rem, 10.2vw, 7rem);
  line-height:.92; letter-spacing:-.042em;
  margin:0 0 26px; color:var(--bone);
  overflow-wrap:break-word;
}
h1 em{ font-style:normal; color:var(--acid); }

.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.75rem, 6vw, 2.9rem);
  line-height:1.02; letter-spacing:-.032em;
  margin:0 0 24px; text-wrap:balance; max-width:20ch;
}
.h2-light{ color:var(--bone); }
.h2-cta{ color:var(--ink); max-width:18ch; }

.lede{
  font-size:17.5px; line-height:1.58; color:var(--bone-72);
  margin:0 0 32px; max-width:56ch; font-weight:300;
}
.sleeve-sub{ font-size:17px; color:var(--bone-72); max-width:64ch; margin:0 0 40px; font-weight:300; }
.sleeve-sub-tight{ margin-bottom:0; margin-top:36px; }
.prose p{ margin:0 0 18px; color:var(--ink-70); font-size:16.5px; font-weight:300; }
.prose p:last-child{ margin-bottom:0; }

.mini-h{
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 20px; color:var(--ink-48);
}
.sleeve .mini-h{ color:var(--bone-44); }

/* catalogue row: the structural device */
.cat-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin-bottom:32px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-44);
}
.cat{
  display:inline-grid; place-items:center;
  min-width:44px; height:24px; padding:0 8px;
  border:2px solid var(--acid); color:var(--acid);
  font-weight:500; letter-spacing:.1em;
}
.cat-side{ color:var(--bone); }
.cat-rpm{ margin-left:auto; }
.cat-row i{ font-style:normal; opacity:.5; padding:0 3px; }
.cat-row-dark{ color:var(--ink-48); }
.cat-row-dark .cat{ border-color:var(--green); color:var(--green); }
.cat-row-dark .cat-side{ color:var(--ink); }

/* ---------------- panels ---------------- */

.sleeve{
  background:var(--green); color:var(--bone);
  background-image:radial-gradient(rgba(240,234,216,.055) 1px, transparent 1.2px);
  background-size:5px 5px;
  padding:64px 0; border-block:2px solid var(--ink);
}
.liner{ background:var(--paper); color:var(--ink); padding:64px 0; }

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

.hero{ padding:30px 0 56px; }
.sleeve-frame{ border:2px solid var(--bone-20); padding:26px 20px 30px; }
.hero-body{ display:grid; gap:38px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.tracks-h{
  margin:0 0 14px; padding-bottom:12px;
  border-bottom:1px solid var(--bone-20);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-44);
}
.tracklist{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  font-family:var(--mono); font-size:12.5px; font-weight:300;
  color:var(--bone-72);
}
.tracklist li{
  display:flex; gap:14px; padding:7px 0;
  border-bottom:1px solid rgba(240,234,216,.09);
}
.tracklist span{ color:var(--acid); min-width:26px; font-weight:500; }

/* ---------------- ticker ---------------- */

.ticker{
  background:var(--acid); color:var(--ink);
  border-bottom:2px solid var(--ink);
  overflow:hidden; padding:9px 0;
}
.ticker-track{
  display:flex; width:max-content;
  animation:tick 64s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.tick{
  font-family:var(--mono); font-size:11.5px; font-weight:400;
  letter-spacing:.03em; white-space:nowrap; padding:0 26px;
  border-right:1px solid rgba(20,18,16,.25);
}
.tick i{ font-style:normal; opacity:.45; padding:0 5px; }
.tick b{ font-weight:500; text-transform:uppercase; letter-spacing:.1em; }
.tick b.warn{ background:var(--ink); color:var(--acid); padding:1px 5px; }
@keyframes tick{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ---------------- shared blocks ---------------- */

.two{ display:grid; gap:24px; margin-bottom:44px; }

/* Paper panels get the same poster treatment as the sleeve: an acid
   marker rule above every heading, and acid struck through the numbers. */
.liner .h2{ position:relative; padding-top:22px; }
.liner .h2::before{
  content:""; position:absolute; left:0; top:0;
  width:72px; height:8px; background:var(--acid);
}

.big-quote{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(1.35rem,4.4vw,1.85rem); line-height:1.18;
  letter-spacing:-.028em; color:var(--green); max-width:26ch;
}

.stats{
  list-style:none; margin:0 0 48px; padding:0;
  display:grid; gap:2px; background:var(--ink); border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--acid);
}
.stats li{ background:var(--paper); padding:20px 16px 22px; display:grid; gap:8px; }
.stats b{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,7vw,2.35rem); line-height:1.14;
  letter-spacing:-.04em; color:var(--green);
  /* marker stroke, drawn per line box so it survives a wrap */
  text-decoration:underline;
  text-decoration-color:var(--acid);
  text-decoration-thickness:.2em;
  text-underline-offset:-.05em;
  text-decoration-skip-ink:none;
}
.stats span{ font-family:var(--mono); font-size:11px; color:var(--ink-48); line-height:1.5; }

.idents{ border-top:2px solid var(--ink); padding-top:26px; }
.ident-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.ident-list li{ display:grid; gap:4px; }
.ident-list b{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green);
}
.ident-list code{
  font-family:var(--mono); font-size:13.5px; color:var(--ink);
  background:var(--paper-2); padding:3px 7px; justify-self:start;
  word-break:break-all;
}
.ident-list span{ font-size:14.5px; color:var(--ink-48); font-weight:300; }

/* ---------------- waterfall ---------------- */

.wfall{ border:2px solid var(--bone-20); padding:22px 18px 24px; }
.wf-controls{ display:grid; gap:20px; margin-bottom:32px; }
.chips{ border:0; margin:0; padding:0; min-width:0; }
.chips legend{
  padding:0; margin-bottom:10px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.17em; text-transform:uppercase; color:var(--bone-44);
}
.chips label{ display:inline-block; margin:0 6px 6px 0; }
.chips input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.chips span{
  display:inline-block; cursor:pointer;
  padding:8px 12px; min-height:38px; line-height:22px;
  font-family:var(--mono); font-size:11.5px;
  border:1.5px solid var(--bone-20); color:var(--bone-72);
  transition:transform var(--t) var(--e);
}
.chips label:hover span{ transform:translateY(-2px); border-color:var(--bone-44); }
.chips input:checked + span{ background:var(--acid); border-color:var(--acid); color:var(--ink); font-weight:500; }
.chips input:focus-visible + span{ outline:3px solid var(--acid); outline-offset:2px; }

.wf-rows{ list-style:none; margin:0 0 30px; padding:0; }
.wf-rows li{
  display:grid; grid-template-columns:1fr auto; gap:6px 14px;
  padding:11px 0; border-bottom:1px solid rgba(240,234,216,.1);
}
.wf-name{ font-family:var(--mono); font-size:11.5px; color:var(--bone-72); letter-spacing:.02em; }
.wf-amt{
  font-family:var(--display); font-weight:700; font-size:17px;
  letter-spacing:-.03em; color:var(--bone); text-align:right;
  font-variant-numeric:tabular-nums;
}
.wf-bar{ grid-column:1/-1; height:5px; background:rgba(240,234,216,.1); overflow:hidden; }
.wf-bar i{
  display:block; height:100%; background:var(--bone-44);
  transform:scaleX(0); transform-origin:left;
  transition:transform 380ms var(--e-out);
}
.wf-keep .wf-bar i{ background:var(--bone); }
.wf-split .wf-bar i{ background:var(--acid); }
.wf-split .wf-amt{ color:var(--acid); }
.wf-cut .wf-name{ color:var(--bone-44); }

.wf-out{ display:grid; gap:22px; margin-bottom:22px; }
.wf-hero{
  background:var(--acid); color:var(--ink);
  padding:20px 18px 22px; display:grid; gap:4px;
}
.wf-out-lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; }
.wf-out-val{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,12vw,4rem); line-height:.94;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.wf-out-pc{ font-family:var(--mono); font-size:12px; color:rgba(20,18,16,.62); }
.wf-mini{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.wf-mini li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid rgba(240,234,216,.1);
  font-family:var(--mono); font-size:12px; color:var(--bone-44);
}
.wf-mini b{ color:var(--bone); font-weight:500; font-variant-numeric:tabular-nums; }
.wf-note{ margin:0; font-family:var(--mono); font-size:10.5px; line-height:1.75; color:var(--bone-44); }

/* ---------------- clauses ---------------- */

.clauses{ display:grid; gap:2px; background:var(--ink); border:2px solid var(--ink); margin-bottom:40px; }
.clause{ background:var(--paper); padding:22px 18px 26px; }
.clause h3{
  margin:0 0 16px; font-family:var(--display); font-weight:700;
  font-size:18px; letter-spacing:-.022em; color:var(--green);
}
.clause ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.clause li{
  position:relative; padding-left:20px; font-size:15px;
  color:var(--ink-70); line-height:1.5; font-weight:300;
}
.clause li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:3px; background:var(--acid);
}

.callout{ background:var(--green); color:var(--bone); padding:24px 20px 26px; border:2px solid var(--ink); }
.callout p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--bone-72); max-width:74ch; font-weight:300; }
.callout b{ color:var(--acid); font-weight:700; font-family:var(--display); }

/* ---------------- flip divider ---------------- */

.flip{
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px var(--gut);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
}
.flip-mark{ color:var(--acid); }

/* ---------------- sources ---------------- */

.src-grid{ display:grid; gap:2px; background:var(--bone-20); border:2px solid var(--bone-20); margin-bottom:26px; }
.src{ background:var(--green); padding:22px 18px 26px; }
.src h3{
  margin:0 0 16px; font-family:var(--mono); font-size:10.5px;
  font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--acid);
}
.chip-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.chip-list li{
  font-family:var(--mono); font-size:11px; font-weight:300;
  border:1px solid var(--bone-20); padding:5px 8px; color:var(--bone-72);
}
.src-note{ margin:0; font-size:15.5px; color:var(--bone-72); max-width:72ch; font-weight:300; }

/* ---------------- api ---------------- */

.api-grid{ display:grid; gap:34px; }
.ep{ list-style:none; margin:0 0 32px; padding:0; }
.ep li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 10px;
  align-items:baseline; padding:10px 0; border-bottom:1px solid var(--ink-24);
}
.verb{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.1em; padding:3px 6px;
  border:1.5px solid var(--ink-24); color:var(--ink-48); grid-row:1;
}
.verb-w{ background:var(--acid); border-color:var(--ink); color:var(--ink); }
.ep code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); word-break:break-all; }
.ep em{ grid-column:2; font-style:normal; font-size:14px; color:var(--ink-48); font-weight:300; }
.hooks{ list-style:none; margin:0 0 32px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.hooks code{
  font-family:var(--mono); font-size:11px; border:1px solid var(--ink-24);
  padding:5px 8px; color:var(--ink-70);
}
.api-facts{ margin:0; display:grid; gap:2px; background:var(--ink); border:2px solid var(--ink); }
.api-facts > div{ background:var(--paper); padding:13px 14px; }
.api-facts dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-48); margin-bottom:5px;
}
.api-facts dd{ margin:0; font-size:14.5px; font-weight:300; }
.api-facts code{ font-family:var(--mono); font-size:12px; }

.code-stack{ display:grid; gap:18px; }
.codeblock{ border:2px solid var(--ink); background:var(--green); overflow:hidden; }
.code-head{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 13px; border-bottom:1px solid var(--bone-20);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-44);
}
.codeblock pre{ margin:0; padding:15px 13px 17px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.codeblock code{
  font-family:var(--mono); font-size:11.5px; line-height:1.7;
  color:rgba(240,234,216,.82); white-space:pre;
}

/* ---------------- money ---------------- */

.money-grid{ display:grid; gap:2px; background:var(--bone-20); border:2px solid var(--bone-20); }
.mcard{ background:var(--green-2); padding:24px 18px 28px; }
.mcard h3{
  margin:0 0 16px; font-family:var(--display); font-weight:700;
  font-size:19px; letter-spacing:-.022em; color:var(--acid);
}
.tlist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.tlist li{
  position:relative; padding-left:20px; font-size:15px;
  color:var(--bone-72); line-height:1.52; font-weight:300;
}
.tlist li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:3px; background:var(--acid);
}

/* ---------------- pricing ---------------- */

.price-hero{
  display:grid; gap:24px; margin-bottom:38px;
  border:2px solid var(--ink); padding:26px 20px 28px; background:var(--paper-2);
}
.price-hero{ box-shadow:10px 10px 0 var(--acid); }
.price-main b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(4rem,20vw,7rem); line-height:.86;
  letter-spacing:-.06em; color:var(--green);
}
.price-main span{
  display:block; margin-top:10px; font-family:var(--mono);
  font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-48);
}
.price-bounds{ list-style:none; margin:0; padding:0; align-self:center; }
.price-bounds li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--ink-24);
  font-family:var(--mono); font-size:12px; color:var(--ink-48);
}
.price-bounds b{ font-weight:500; color:var(--ink); font-size:15px; }

.price-table{ margin-bottom:46px; }
.ptab{ width:100%; border-collapse:collapse; }
.ptab th,.ptab td{
  text-align:right; padding:13px 0 13px 14px;
  border-bottom:1px solid var(--ink-24);
  font-family:var(--mono); font-size:12.5px; font-weight:400; color:var(--ink-70);
}
.ptab th:first-child,.ptab td:first-child{ text-align:left; padding-left:0; }
.ptab th:last-child,.ptab td:last-child{ text-align:left; }
.ptab thead th{
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-48); border-bottom:2px solid var(--ink);
}
.ptab tbody th{ color:var(--green); font-weight:500; }
.ptab-note{ margin:18px 0 0; font-family:var(--mono); font-size:10.5px; line-height:1.75; color:var(--ink-48); max-width:82ch; }

/* changelog */
.changelog{ border-top:2px solid var(--ink); padding-top:28px; }
.log{ list-style:none; margin:0; padding:0; }
.log li{
  display:grid; gap:6px; padding:18px 0;
  border-bottom:1px solid var(--ink-24);
}
.log > li > b{
  font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink);
  background:var(--acid); padding:2px 7px; justify-self:start;
}
.log time{ font-family:var(--mono); font-size:11px; color:var(--ink-48); }
.log h4{
  margin:6px 0 6px; font-family:var(--display); font-weight:700;
  font-size:17px; letter-spacing:-.022em;
}
.log p{ margin:0; font-size:15px; color:var(--ink-70); line-height:1.55; max-width:74ch; font-weight:300; }

/* ---------------- people ---------------- */

.people{ list-style:none; margin:0; padding:0; display:grid; gap:2px; background:var(--bone-20); border:2px solid var(--bone-20); }
.people li{ background:var(--green-2); padding:22px 18px 26px; display:grid; gap:5px; }
.people b{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.024em; color:var(--bone); }
.people .role{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--acid); }
.people p{ margin:8px 0 0; font-size:14.5px; color:var(--bone-72); line-height:1.55; font-weight:300; }

/* ---------------- cta ---------------- */

.cta{ background:var(--acid); color:var(--ink); padding:64px 0; border-top:2px solid var(--ink); }
.cta-eyebrow{
  margin:0 0 22px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(20,18,16,.55);
}
.cta-sub{ margin:0 0 34px; font-size:17px; color:rgba(20,18,16,.72); max-width:58ch; font-weight:300; }
.cta-actions{ display:grid; gap:18px; justify-items:start; }
.cta .btn-acid{ background:var(--ink); color:var(--acid); box-shadow:5px 5px 0 rgba(20,18,16,.28); }
.cta .btn-acid::before{ background:var(--green); }
.cta .btn-acid:hover::before{ opacity:1; }
.cta-fine{ margin:0; font-family:var(--mono); font-size:11px; color:rgba(20,18,16,.6); letter-spacing:.04em; }

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

.foot{ background:var(--ink); color:var(--bone-72); padding:0 0 28px; }
.runout{
  border-bottom:1px solid rgba(240,234,216,.16);
  padding:16px 0 15px; margin-bottom:34px;
  display:flex; justify-content:center;
}
.runout-etch{
  font-family:var(--mono); font-size:10.5px; font-weight:300;
  letter-spacing:.34em; color:rgba(240,234,216,.34);
  text-align:center;
}
.foot-in{ display:grid; gap:34px; margin-bottom:32px; }
.foot-brand .brand-word{ display:block; font-size:26px; color:var(--bone); margin-bottom:14px; }
.foot-def{ margin:0; font-size:14.5px; line-height:1.6; color:rgba(240,234,216,.5); max-width:48ch; font-weight:300; }
.foot-nav{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
.foot-nav h3{
  margin:0 0 12px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.17em; text-transform:uppercase; color:var(--acid); font-weight:400;
}
.foot-nav a{
  display:block; text-decoration:none; font-size:14.5px; padding:5px 0;
  color:var(--bone-72); font-weight:300;
  transition:transform var(--t) var(--e);
}
.foot-nav a:hover{ color:var(--bone); transform:translateX(4px); }
.foot-base{ border-top:1px solid rgba(240,234,216,.16); padding-top:20px; display:grid; gap:12px; }
.foot-base p{ margin:0; font-family:var(--mono); font-size:10.5px; line-height:1.75; color:rgba(240,234,216,.4); }
.credit a{ color:var(--bone); text-decoration:none; border-bottom:2px solid var(--acid); }
.credit a:hover{ color:var(--acid); }

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

.rv{ opacity:0; transform:translate3d(0,18px,0); }
.rv-in{
  opacity:1; transform:translate3d(0,0,0);
  transition:opacity 420ms var(--e-out), transform 420ms var(--e);
}

/* ---------------- breakpoints ---------------- */

@media (min-width:620px){
  :root{ --gut:30px; }
  .sleeve-frame{ padding:32px 28px 36px; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .ident-list{ grid-template-columns:1fr 1fr; gap:20px 28px; }
  .clauses{ grid-template-columns:repeat(3,1fr); }
  .src-grid{ grid-template-columns:1fr 1fr; }
  .money-grid{ grid-template-columns:repeat(3,1fr); }
  .people{ grid-template-columns:1fr 1fr; }
  .foot-nav{ grid-template-columns:repeat(3,1fr); }
  .foot-base{ grid-template-columns:1fr auto; align-items:baseline; }
  .credit{ text-align:right; }
  .price-hero{ grid-template-columns:auto 1fr; gap:44px; align-items:center; }
  .wf-controls{ grid-template-columns:1fr 1fr; gap:22px 30px; }
  .wf-out{ grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
  .cta-actions{ grid-template-columns:auto 1fr; align-items:center; gap:24px; }
}

@media (min-width:900px){
  :root{ --gut:42px; }
  html{ scroll-padding-top:78px; }
  .masthead-in{ min-height:64px; }
  .nav{ display:flex; gap:24px; margin-right:22px; }
  .nav a{
    font-family:var(--mono); font-size:11px; letter-spacing:.13em;
    text-transform:uppercase; text-decoration:none; color:var(--bone-44);
    padding:6px 0; position:relative;
  }
  .nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--acid); transform:scaleX(0); transform-origin:left;
    transition:transform var(--t) var(--e);
  }
  .nav a:hover{ color:var(--bone); }
  .nav a:hover::after{ transform:scaleX(1); }
  .masthead .masthead-cta{ display:inline-flex; min-height:38px; font-size:12.5px; box-shadow:3px 3px 0 var(--ink); }
  .nav-toggle{ display:none; }
  .masthead .drawer{ display:none; }

  .sleeve,.liner{ padding:104px 0; }
  .hero{ padding:44px 0 84px; }
  .sleeve-frame{ padding:44px 44px 48px; }
  .two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
  .stats{ grid-template-columns:repeat(6,1fr); }
  .src-grid{ grid-template-columns:repeat(4,1fr); }
  .people{ grid-template-columns:repeat(4,1fr); }
  .api-grid{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:52px; }
  .wf-controls{ grid-template-columns:repeat(4,1fr); gap:28px; }
  .wfall{ padding:34px 32px 36px; }
  .cta{ padding:104px 0; }
  .foot-in{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:60px; }
  .h2{ font-size:clamp(2.2rem,3.4vw,3.2rem); }
  h1{ font-size:clamp(4.2rem,7.8vw,6.8rem); margin-bottom:44px; }
  .hero-body{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:start; }
  .lede{ margin-bottom:36px; }
}

@media (min-width:1180px){
  /* the waterfall stays one column on purpose: it is a descent, and
     a two column version reads as a zigzag */
  .ident-list{ grid-template-columns:repeat(3,1fr); }
  .wf-out{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:34px; }
  .wf-hero{ padding:26px 26px 28px; }
}

/* ---------------- reduced motion ---------------- */

@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; }
  .ticker-track{ animation:none; transform:none; }
  .ticker{ overflow-x:auto; }
  .btn:hover{ transform:none; }
  .chips label:hover span{ transform:none; }
}