/* Self-hosted so no visitor's IP reaches a third party when the page loads; the site's
   privacy policy says this is how it works, which makes it a promise rather than a nicety.
   Barlow Semi Condensed is SIL Open Font Licence 1.1, which permits redistribution.
   Only weight 600 is here because that is the only weight any rule below asks for --
   checked, not assumed: all 11 rules using var(--display) set font-weight:600. */
@font-face{
  font-family:'Barlow Semi Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/barlow-semi-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Semi Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/barlow-semi-condensed-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens lifted from valineups/ui/theme.py so the site and the app are one thing.
   Red is identity and is never filled; a filled slab is always a warning. */
:root{
  --ink:#08080a; --panel:#131317; --panel-hi:#1c1c21;
  --line:#26262b; --line-top:#34343c; --line-soft:#1e1e22;
  --text:#e8e8ea; --dim:#9a9aa2; --quiet:#8b8b95; --faint:#5f5f68;
  --brand:#cf3340; --brand-dim:#7e2028;
  --warn:#e8a33d; --ok:#7fc98b;
  --display:Bahnschrift,'Barlow Semi Condensed','Archivo Narrow',system-ui,sans-serif;
  --body:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'Cascadia Mono','Cascadia Code',ui-monospace,'Consolas',monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px; margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--display); font-weight:600; text-wrap:balance; margin:0}
a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--brand-dim)}
a:hover{border-bottom-color:var(--brand)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

/* --- micro label: the instrument voice ------------------------------------------------- */
.lbl{
  font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}

/* --- top bar ---------------------------------------------------------------------------- */
.top{border-bottom:1px solid var(--line); background:var(--ink)}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; padding-block:16px}
.mark{display:flex; align-items:center; gap:12px; border:0}
/* the divider from lockup 12 — a grey hairline separating the mark from the name */
.mark .div{width:1px; height:26px; background:var(--line-top); flex:0 0 auto}
.mark svg{display:block}
.mark b{font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:.02em;
  line-height:1; display:block; padding-top:1px}
.mark .hl{color:var(--brand)}
.eyebrow{font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin:0 0 18px}
.top .state{display:flex; align-items:center; gap:8px}
.nav{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-left:auto}
.nav a{font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--quiet); border-bottom:1px solid transparent;
  padding-bottom:2px}
.nav a:hover{color:var(--text); border-bottom-color:var(--brand)}
.nav a[aria-current="page"]{color:var(--text); border-bottom-color:var(--brand-dim)}
.dot{width:6px; height:6px; background:var(--warn)}

/* --- hero ------------------------------------------------------------------------------- */
.hero{padding-block:72px 64px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(34px,6vw,58px); line-height:1.04; letter-spacing:-.01em; max-width:15ch}
.hero .rule{width:56px; height:2px; background:var(--brand); margin-block:26px 22px}
.hero p{font-size:clamp(16px,2.2vw,19px); color:var(--dim); max-width:56ch; margin:0}
.keys{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.key{
  font-family:var(--mono); font-size:12px; color:var(--quiet);
  border:1px solid var(--line); border-top-color:var(--line-top);
  background:var(--panel); padding:7px 11px; border-radius:3px;
}
.key b{color:var(--brand); font-weight:600}
.keynote{font-size:13px; color:var(--faint); margin:14px 0 0}

/* --- generic section -------------------------------------------------------------------- */
section{padding-block:56px; border-bottom:1px solid var(--line)}
section h2{font-size:clamp(22px,3vw,28px); letter-spacing:-.005em}
.intro{color:var(--dim); max-width:62ch; margin:14px 0 0}
.intro.tight{margin-top:22px}

/* --- steps: a real sequence, so it is numbered ------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; margin-top:34px; background:var(--line)}
.step{background:var(--ink); padding:24px 22px 26px}
.step .n{font-family:var(--display); font-size:13px; font-weight:600; color:var(--brand); letter-spacing:.1em}
.step h3{font-size:17px; margin-top:12px}
.step p{color:var(--dim); font-size:14px; margin:8px 0 0}

/* --- the two lists: what it reads / what it never touches -------------------------------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:28px; margin-top:34px}
.col{
  background:var(--panel); border:1px solid var(--line); border-top-color:var(--line-top);
  border-radius:3px; padding:22px 22px 24px;
}
.col.neg{border-left:2px solid var(--brand-dim)}
.col h3{font-size:15px; letter-spacing:.06em; text-transform:uppercase}
.col ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px}
.col li{font-size:14px; color:var(--dim); padding-left:20px; position:relative; line-height:1.5}
.col li::before{position:absolute; left:0; top:0; font-family:var(--mono); font-size:13px}
.col.pos li::before{content:"+"; color:var(--ok)}
.col.neg li::before{content:"\00d7"; color:var(--brand)}
.col li b{color:var(--text); font-weight:600}

/* --- coverage table --------------------------------------------------------------------- */
.scroll{overflow-x:auto; margin-top:30px}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:420px}
caption{text-align:left; padding-bottom:12px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft)}
thead th{font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line)}
td.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:13px}
tbody tr:hover{background:var(--panel)}
tfoot td{border-bottom:0; border-top:1px solid var(--line); color:var(--text); font-weight:600}
tfoot td.num{color:var(--brand)}
.tick{color:var(--ok); font-family:var(--mono); font-size:13px}

/* --- specs ------------------------------------------------------------------------------ */
.specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; margin-top:32px}
.spec dt{font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.spec dd{margin:7px 0 0; color:var(--dim); font-size:14px}
.spec dd b{color:var(--text); font-weight:600}

/* --- status: the one filled slab on the page, because it is a caveat --------------------- */
.status{
  background:var(--warn); color:#17130a; border-radius:3px;
  padding:16px 20px; margin-top:30px; display:flex; gap:14px; align-items:flex-start;
  font-size:14px; line-height:1.5; max-width:64ch;
}
.status .lbl{color:#17130a; opacity:.72; flex:0 0 auto; padding-top:2px}
.contact{margin-top:26px; font-size:15px; color:var(--dim)}

/* --- price: one product, one number, and the number is not filled ----------------------- */
.price{display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin-top:32px}
.price .amt{font-family:var(--display); font-size:clamp(40px,7vw,58px); font-weight:600;
  line-height:1; letter-spacing:-.02em}
.price .per{color:var(--dim); font-size:16px}
.price .trial{
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
  border:1px solid var(--brand-dim); border-radius:3px; padding:6px 10px; align-self:center;
}
.incl{list-style:none; margin:30px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px 30px; max-width:78ch}
.incl li{font-size:14px; color:var(--dim); padding-left:20px; position:relative; line-height:1.5}
.incl li::before{content:"+"; position:absolute; left:0; top:0; color:var(--ok);
  font-family:var(--mono); font-size:13px}
.incl li b{color:var(--text); font-weight:600}
.fineprint{color:var(--quiet); font-size:13px; max-width:66ch; margin:28px 0 0}
.fineprint b{color:var(--text); font-weight:600}

/* --- footer ----------------------------------------------------------------------------- */
footer{padding-block:34px 46px}
footer p{margin:0; color:var(--faint); font-size:13px; max-width:66ch}
footer p + p{margin-top:10px}

@media (max-width:520px){
  .hero{padding-block:52px 46px}
  section{padding-block:44px}
  .status{flex-direction:column; gap:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
/* --- legal documents: one column, generous measure, headings that are findable ----------- */
.doc{padding-block:50px 70px; max-width:76ch}
.doc h1{font-size:clamp(28px,4.6vw,40px); line-height:1.1}
.doc .updated{margin:16px 0 0; font-family:var(--mono); font-size:12px; color:var(--faint)}
.doc .lead{margin:22px 0 0; font-size:16px; color:var(--text); max-width:66ch}
.doc h2{font-size:18px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line-soft);
  letter-spacing:.01em}
.doc h2 .n{color:var(--brand); font-size:13px; margin-right:10px; letter-spacing:.1em}
.doc h3{font-size:15px; margin-top:26px}
.doc p{margin:14px 0 0; color:var(--dim)}
.doc ul{margin:14px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.doc li{color:var(--dim)}
.doc b{color:var(--text); font-weight:600}
.doc .status{margin-top:26px}
.doc .back{margin-top:48px; font-size:14px}

/* --- footer legal row -------------------------------------------------------------------- */
.flinks{display:flex; flex-wrap:wrap; gap:16px; margin:0 0 18px}
.flinks a{font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--quiet); border-bottom:0}
.flinks a:hover{color:var(--text)}