/* Shortprint — the public site, in the app's own grammar.

   The design is docs/design/relaunch/ (Claude Design, 2026-09-07): one visual system across
   shortprint.cards and the league app, so the funnel never crosses a break. Everything here is
   one of the six repeated objects — masthead, section head, story row, stat strip, printed
   button, card tile — and nothing else divides anything.

   The tokens are the app's (network.css), not a second palette. The mark's own four values are
   --brand-*; see brand/README.md. The cards on this page are the real chassis: card2.css is
   copied in beside this file and the markup is written by `npm run landing:build`. */
:root {
  --pg: #ffffff; --ink: #151412; --ink2: #4a463c; --ink3: #6b655e; --hair: #e4e2dc; --hair2: #cfcbc2;
  --nav: #1c1c1a; --net: #bf1e2e; --gold: #c9a94e; --tint: #f6f5f1;
  /* a checklist row nobody has pulled: quieter than the ink, still legible. Measured on
     --pg: 5.18:1 and 4.90:1. The old .38 opacity was 2.44:1 and 1.34:1. */
  --fog: #666e75; --fog-gold: #8a6d1f;
  /* the mark's own values; only the Shortprint logo wears them (brand/README.md) */
  --brand-ink: #14151a; --brand-bone: #f2efe8; --brand-gold: #d9b25c;
  --disp: "Big Shoulders Display", "Big Shoulders", Impact, sans-serif;
  --sans: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --serif: Newsreader, Georgia, serif;
  --shadow: 0 1px 0 rgba(21,20,18,.10), 0 18px 34px -22px rgba(21,20,18,.45);
  --gut: 14px;
}
@media (min-width: 900px) { :root { --gut: 40px; } }
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--tint); color: var(--ink); font: 400 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab { font-variant-numeric: tabular-nums; }
.wide { display: none; }
@media (min-width: 900px) { .wide { display: inline; } }

/* bands: paper on the warm tint, never cream on white */
.band { padding: 20px 0 24px; }
.band.paper { background: var(--pg); border-top: 1px solid var(--hair2); border-bottom: 1px solid var(--hair2); }
@media (min-width: 900px) { .band { padding: 40px 0 46px; } }

/* 1 — the masthead */
.masthead { background: var(--nav); color: #fff; }
.masthead .wrap { display: flex; align-items: center; gap: 14px; height: 56px; }
.masthead .mark img { display: block; height: 17px; width: auto; }
.masthead .set { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #cfcbc2; white-space: nowrap; flex: none; }
/* The nav is a desktop object, but the call to action is not: leaving the masthead empty on a
   phone meant a reader on the page the whole site points at had nothing to press. The links
   collapse under 900px; the one red button stays, at a height that fits the 56px bar. */
.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.masthead nav a { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #cfcbc2; display: inline-flex; align-items: center; height: 44px; }
.masthead nav a:hover { color: #fff; }
.masthead nav a:not(.btn) { display: none; }
.masthead nav .btn { height: 36px; padding: 0 13px; font-size: 11.5px; letter-spacing: .12em; color: #fff; }
/* The page label is context, not navigation, so it yields whenever the bar is full: under 520px
   the mark and the button take the room, and between 900 and 1080 the five nav items do. In
   between (a phone with the nav collapsed) and above 1080 it fits, so it shows. Measured: the
   longest label is "for commissioners" at 130px, and 900px leaves 820 for 868px of content. */
@media (max-width: 519px) { .masthead .set { display: none; } }
@media (min-width: 900px) and (max-width: 1079px) { .masthead .set { display: none; } }
@media (min-width: 900px) {
  .masthead .wrap { height: 64px; }
  .masthead .mark img { height: 20px; }
  .masthead nav { gap: 20px; }
  .masthead nav a:not(.btn) { display: inline-flex; }
  .masthead nav .btn { height: 40px; padding: 0 18px; font-size: 13px; letter-spacing: .14em; }
}
@media (min-width: 1080px) { .masthead nav { gap: 26px; } }

/* 2 — the section head */
.sec { border-top: 3px solid var(--ink); padding-top: 7px; margin-bottom: 14px; display: flex; align-items: baseline; gap: 14px; }
.sec h2 { font: 700 22px/1 var(--disp); letter-spacing: .10em; text-transform: uppercase; min-width: 0; }
.sec .meta { margin-left: auto; flex: none; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); text-align: right; }
@media (min-width: 900px) { .sec h2 { font-size: 38px; } .sec .meta { font-size: 12px; } }

/* 3 — the story row */
.rows { border-top: 1px solid var(--hair2); }
.row { display: block; min-height: 44px; padding: 11px 0 12px; border-bottom: 1px solid var(--hair); }
.rows .row:last-child { border-bottom: 0; }
.row .kick { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.row .hl { font: 600 15px/1.3 var(--sans); margin-top: 2px; }

/* 4 — the stat strip */
.strip { border-top: 3px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); }
.strip.two { grid-template-columns: repeat(2, 1fr); }
.strip > div { padding: 10px 14px 4px; border-left: 1px solid var(--hair2); }
.strip > div:first-child { border-left: 0; padding-left: 0; }
.strip .lab { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.strip .num { font: 700 26px/1.1 var(--sans); font-variant-numeric: tabular-nums; margin-top: 3px; }
.strip .num.gold { color: var(--gold); }
.strip .num small { font-size: .58em; font-weight: 600; color: var(--ink3); }
@media (min-width: 900px) { .strip .num { font-size: 34px; } }

/* card2.css owns .foot, .kick, .chips, .head, .body and .hl inside a card. Nothing on this page
   reuses those names: a rule meant for the page would silently restyle the card standing in it. */

/* 5 — the printed button: square, tracked, one red one per screen */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px;
  font: 700 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border: 2px solid var(--ink);
  background: transparent; color: var(--ink); border-radius: 0; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.btn.go { background: var(--net); border-color: var(--net); color: #fff; }
.btn.go:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.tert { height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--hair2); font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: none; color: var(--ink3); }
.btn.tert:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 900px) { .btn { height: 52px; } }
.btnrow { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 700px) { .btnrow { grid-auto-flow: column; justify-content: start; gap: 12px; } }

/* the card tile: the real chassis at its native 514px, scaled into whatever box it is given.
   card2.css scales by a unitless --k, and CSS has no way to divide a width by 514px to get one,
   so site.js measures — the same thing the app's fitTiles2 does. The tile keeps the card's aspect
   ratio either way, so the page never reflows when the script lands, and the build writes a
   phone-sized --k so a reader with no script still sees a card rather than a corner of one. */
.card { width: 100%; filter: drop-shadow(0 18px 30px rgba(21,20,18,.28)); }
/* The card faces are pictures, 5:7 with transparent corners. The AVIF keeps those corners; the
   JPEG fallback gets them back from the radius, which is the chassis's own 20px on 514x706 said
   as a ratio so the corner stays circular at every width the page paints it at. */
.card picture { display: block; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 514 / 706; border-radius: 3.89% / 2.83%; }
/* the two Ceremony objects are a wax wrapper (0.66) and a press face (0.80), not the 0.73
   chassis. They keep the card footprint so the three pillars line up, and crop to reach it --
   inheriting .card img stretched both of them. */
.plate picture { display: block; }
.plate img { display: block; width: 100%; height: auto; aspect-ratio: 514 / 706;
  object-fit: cover; object-position: center; border-radius: 3.89% / 2.83%; }

/* §1 the hero */
.hero { padding: 20px 0 24px; }
.hero .eyebrow { font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.hero h1 { font: 700 44px/.92 var(--disp); letter-spacing: .01em; text-transform: uppercase; margin: 8px 0 0; text-wrap: balance; }
.hero .card { max-width: 300px; margin: 20px auto 0; }
.hero .dek { font: 400 italic 17px/1.35 var(--serif); color: var(--ink2); margin: 16px 0 0; text-align: center; }
.hero .btnrow .btn { width: 100%; }
.hero .under { display: none; }
@media (min-width: 900px) {
  .hero { padding: 40px 0 46px; }
  /* the same six things, arranged as a broadsheet: the column reads, the card sits beside it.
     The last row takes the slack, so the column stays packed under the headline however tall the
     card is, and the card centres against the whole of it. */
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 500px; grid-template-rows: auto auto auto auto 1fr; column-gap: 44px; }
  .hero .eyebrow { grid-area: 1 / 1; }
  .hero h1 { grid-area: 2 / 1; }
  .hero .dek { grid-area: 3 / 1; }
  .hero .btnrow { grid-area: 4 / 1; }
  .hero .under { grid-area: 5 / 1; align-self: start; }
  .hero .card { grid-area: 1 / 2 / 6 / 3; align-self: center; }
  .hero h1 { font-size: 104px; line-height: .88; }
  .hero .dek { text-align: left; font-size: 26px; line-height: 1.34; margin-top: 20px; max-width: 22ch; }
  .hero .card { max-width: 500px; margin: 0; }
  .hero .btnrow .btn { width: auto; }
  .hero .under { display: flex; gap: 34px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--hair2); font: 500 12px/1.3 var(--sans); color: var(--ink3); }
}

/* §2 the objection strip */
.objections { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 3px solid var(--ink); }
.objections > div { padding: 10px 14px 14px; border-left: 1px solid var(--hair2); }
.objections > div:first-child { border-left: 0; padding-left: 0; }
.objections .lab { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.objections p { font: 400 15px/1.45 var(--sans); margin-top: 6px; }
.ten { grid-column: 1 / -1; border-left: 0; padding: 14px 0 0; border-top: 1px solid var(--hair); }
.ten .big { font: 700 68px/.9 var(--disp); text-transform: uppercase; letter-spacing: .01em; margin: 4px 0 8px; }
@media (min-width: 900px) {
  .objections { grid-template-columns: 1fr 1fr 1.5fr; }
  .ten { grid-column: auto; border-left: 1px solid var(--hair2); border-top: 0; padding: 10px 14px 14px; }
  .ten .big { font-size: 92px; }
}
.ten .strip { margin-top: 14px; }

/* §3 the origin */
.origin p.prose { font: 400 17px/1.45 var(--sans); max-width: 62ch; }
.origin .becomes { display: grid; gap: 14px; margin-top: 20px; align-items: center; }
.origin .rule { display: flex; align-items: center; gap: 10px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.origin .rule::before, .origin .rule::after { content: ""; flex: 1; height: 1px; background: var(--hair2); }
.origin .card { max-width: 300px; margin: 0 auto; }
.origin .byline { font: 400 italic 15px/1.4 var(--serif); color: var(--ink2); margin-top: 10px; }
.origin .quotes { display: grid; gap: 14px; margin-top: 18px; border-top: 1px solid var(--hair2); padding-top: 16px; }
.origin .quotes blockquote { margin: 0; font: 400 italic 17px/1.45 var(--serif); color: var(--ink); }
.origin .quotes cite { display: block; font: 600 11px/1.2 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; font-style: normal; color: var(--ink3); margin-top: 7px; }
.origin .closer { font: 700 40px/.94 var(--disp); text-transform: uppercase; letter-spacing: .01em; margin-top: 22px; }
.origin .counts { margin-top: 20px; }
.origin .counts .note { font: 400 italic 16px/1.35 var(--serif); color: var(--ink2); margin-top: 12px; }
@media (min-width: 900px) {
  .origin .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .origin .becomes { grid-template-columns: minmax(0, 1fr) 86px 300px; gap: 0; }
  .origin .rule { flex-direction: column; writing-mode: vertical-rl; }
  .origin .rule::before, .origin .rule::after { width: 1px; height: auto; }
  .origin .card { max-width: 300px; }
  .origin .closer { font-size: 76px; grid-column: 1 / -1; }
  .origin .counts { border-top: 0; display: block; }
  .origin .counts .strip { grid-template-columns: 1fr; border-top: 0; }
  .origin .counts > div { border-left: 0; border-top: 1px solid var(--hair2); padding: 10px 0 12px; }
  .origin .counts > div:first-child { border-top: 3px solid var(--ink); }
  .origin .counts .num { font-size: 64px; }
  .origin .counts .note { font: 400 italic 15px/1.34 var(--serif); color: var(--ink2); margin-top: 10px; }
}

/* the spreadsheet: deliberately the least designed thing on the site */
.sheet { border: 1px solid #e2e2e2; background: #fff; font: 400 12px/1.35 Arial, Helvetica, sans-serif; color: #202124; overflow: hidden; }
.sheet .bar { background: #f1f1f1; border-bottom: 1px solid #e2e2e2; padding: 6px 8px; display: flex; justify-content: space-between; gap: 10px; color: #444; }
.sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sheet th, .sheet td { border: 1px solid #e2e2e2; padding: 4px 6px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet th { background: #eaeaea; font-weight: 400; color: #555; }
.sheet td.n, .sheet th.n { text-align: right; width: 62px; }
.sheet td.rn, .sheet th.rn { width: 30px; text-align: center; color: #999; background: #f8f8f8; }
.sheet tbody tr:nth-child(even) td { background: #f7f7f7; }
.sheet tbody tr:nth-child(even) td.rn { background: #f1f1f1; }
.sheet tr.hit td { background: #fff3b0 !important; }
.sheet td.note { color: #7a5c00; }
.sheet .tabs { display: flex; background: #f1f1f1; border-top: 1px solid #e2e2e2; font-size: 11px; }
.sheet .tabs span { padding: 6px 10px; color: #5f6368; border-right: 1px solid #e2e2e2; }
.sheet .tabs span.on { background: #fff; color: #202124; border-bottom: 2px solid #1a73e8; }

/* §4 the checklist */
.ck { border: 1px solid var(--hair2); background: var(--pg); }
.ck .hd, .ck .r { display: grid; grid-template-columns: 44px minmax(0, 1fr) 42px 30px; align-items: center; gap: 8px; padding: 0 10px; }
.ck .hd { background: var(--tint); border-bottom: 1px solid var(--hair2); height: 32px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.ck .r { min-height: 44px; border-bottom: 1px solid var(--hair); font: 500 14px/1.3 var(--sans); }
.ck .r:last-of-type { border-bottom: 0; }
.ck .r.off { color: var(--fog); }
.ck .r.off .run { color: var(--fog-gold); }
.ck .r.off .run.gold { color: var(--fog-gold); }
.ck .no { font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ck .run { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink3); }
.ck .run.gold { color: var(--gold); }
.ck .bx { width: 17px; height: 17px; border: 1.5px solid var(--ink); display: grid; place-items: center; font: 700 13px/1 var(--sans); color: var(--net); }
.ck .r.off .bx { border-color: var(--ink3); }
.ck .fn { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; padding: 10px; border-top: 1px solid var(--hair2); font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
@media (min-width: 900px) { .ck .cols { display: grid; grid-template-columns: repeat(3, 1fr); } .ck .cols > div { border-left: 1px solid var(--hair2); } .ck .cols > div:first-child { border-left: 0; } }
.ck-strip { margin-bottom: 14px; }
/* four cells wrap to two rows on a phone; the second row needs the divider the first one has */
.ck-strip .strip { grid-template-columns: repeat(2, 1fr); }
.ck-strip .strip > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
.ck-strip .strip > div:nth-child(n+3) { border-top: 1px solid var(--hair2); padding-top: 10px; }
@media (min-width: 900px) {
  .ck-strip .strip { grid-template-columns: repeat(4, 1fr); }
  .ck-strip .strip > div:nth-child(2n+1) { border-left: 1px solid var(--hair2); padding-left: 14px; }
  .ck-strip .strip > div:first-child { border-left: 0; padding-left: 0; }
  .ck-strip .strip > div:nth-child(n+3) { border-top: 0; padding-top: 10px; }
}

/* §5 the pillars */
.pillars { display: grid; gap: 14px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.pillar { background: var(--pg); border: 1px solid var(--hair2); padding: 16px 14px 14px; display: flex; flex-direction: column; }
.pillar h3 { font: 700 26px/1 var(--disp); letter-spacing: .10em; text-transform: uppercase; display: flex; align-items: baseline; }
.pillar h3 span { margin-left: auto; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; color: var(--ink3); }
.pillar p { font: 400 15px/1.45 var(--sans); color: var(--ink2); margin-top: 10px; }
.pillar .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pillar .dek { font: 400 italic 17px/1.35 var(--serif); color: var(--ink2); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.pillar .pfoot { margin-top: auto; padding-top: 12px; font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.shot { aspect-ratio: 3 / 4; border: 1px solid var(--hair2); background: repeating-linear-gradient(135deg, var(--tint) 0 6px, #eceae4 6px 12px); display: flex; align-items: flex-end; padding: 10px; font: 400 11px/1.4 ui-monospace, Menlo, monospace; color: var(--ink3); }

/* §6 for commissioners */
.close { background: var(--nav); color: #fff; padding: 22px 0 34px; }
.close .sec { border-top-color: var(--net); }
.close .sec h2, .close h3 { color: #fff; }
.close .sec .meta { color: #8b877e; }
.close .promise { font: 700 32px/.98 var(--disp); text-transform: uppercase; letter-spacing: .01em; }
.close .ba { background: #252523; border-left: 3px solid var(--gold); padding: 12px 14px; margin-top: 16px; }
.close .ba .lab { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.close .ba p { margin-top: 6px; color: #e8e6e0; }
.close hr { border: 0; border-top: 1px solid #3a3835; margin: 20px 0; }
.close .lab { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8b877e; }
.price { display: flex; align-items: flex-end; gap: 12px; margin-top: 4px; }
/* line-height .8 means the glyph is taller than its own line box and hangs about .09em out
   of the top, over the label above. Measured, not guessed: .12em still overlapped by 8px at
   the 150px size. In em so it holds at both breakpoints. */
.price b { font: 700 82px/.8 var(--disp); letter-spacing: .01em; padding-top: .26em; }
.price span { font: 700 22px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px; }
.close .fine { color: #cfcbc2; margin-top: 12px; }
.close .ladder { font: 500 13px/1.5 var(--sans); font-variant-numeric: tabular-nums; color: #8b877e; margin-top: 8px; }
.bars { margin-top: 8px; }
.bars .b { padding: 10px 0 0; }
.bars .b .t { display: flex; justify-content: space-between; gap: 12px; font: 600 15px/1.3 var(--sans); }
.bars .b .t i { font-style: normal; font-variant-numeric: tabular-nums; }
.bars .b .bar { height: 11px; background: var(--ink); margin-top: 6px; }
.bars .b .bar i { display: block; height: 100%; background: var(--ink2); }
.bars .b.us .bar i { background: var(--net); }
.bars .b .n { font: 400 13px/1.4 var(--sans); color: #8b877e; margin-top: 5px; }
@media (min-width: 900px) {
  .close { padding: 40px 0 46px; }
  .close .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: start; }
  .close .promise { font-size: 46px; }
  .price b { font-size: 150px; }
  .price span { font-size: 30px; }
}

/* the form, in the printed grammar: ruled lines, no rounded boxes, never a placeholder as a label */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > label, .field .lab { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.field input { font: 600 17px/1.3 var(--sans); color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--hair2); border-radius: 0; padding: 8px 0; min-height: 44px; width: 100%; }
.field input:focus { outline: 0; border-bottom: 2px solid var(--net); }
.field input::placeholder { color: var(--ink3); opacity: .7; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset button { min-height: 44px; min-width: 60px; padding: 0 14px; font: 600 15px/1 var(--sans); border: 1px solid var(--hair2); background: transparent; color: inherit; border-radius: 0; cursor: pointer; }
.chipset button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.live { border-top: 3px solid var(--ink); padding-top: 8px; margin-top: 4px; }
.live b { display: block; font: 700 24px/1.1 var(--sans); font-variant-numeric: tabular-nums; margin-top: 3px; }
.live p { font: 400 14px/1.4 var(--sans); color: var(--ink3); margin-top: 6px; }
.form .btn.go { width: 100%; }
.form .note { font: 400 13px/1.45 var(--sans); color: var(--ink3); }
/* on the dark close, the form is ruled in ink3 and the chips carry white type */
.close .form .field > label, .close .form .field .lab, .close .live .lab { color: #8b877e; }
.close .form .field input { color: #fff; border-bottom-color: #6b655e; }
.close .form .chipset button { border-color: #6b655e; color: #fff; }
.close .form .chipset button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.close .live { border-top-color: #fff; }
.close .form .note { color: #8b877e; }
.close .panel h3 { font: 700 26px/1 var(--disp); letter-spacing: .10em; text-transform: uppercase; }
@media (min-width: 900px) {
  .close .panel { background: var(--pg); color: var(--ink); border-top: 3px solid var(--net); padding: 18px 20px 20px; }
  .close .panel .form .field > label, .close .panel .form .field .lab, .close .panel .live .lab { color: var(--ink3); }
  .close .panel .form .field input { color: var(--ink); border-bottom-color: var(--hair2); }
  .close .panel .form .chipset button { border-color: var(--hair2); color: var(--ink); }
  .close .panel .form .chipset button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .close .panel .live { border-top-color: var(--ink); }
  .close .panel .form .note { color: var(--ink3); }
}

/* the footer, which is also the sitemap — and, under 900px, the only navigation there is.
   The masthead nav is a desktop object (it is display:none on a phone), so every page the site
   has is listed here rather than a chosen few, and every link is a 44px target. */
.sitefoot { background: var(--nav); color: #8b877e; padding: 26px 0 0; border-top: 1px solid #3a3835; }
.sitefoot .cols { display: grid; gap: 4px; }
.sitefoot .brandcol { padding-bottom: 16px; }
.sitefoot .brandcol img { display: block; height: 17px; width: auto; }
.sitefoot .brandcol p { font: 400 15px/1.45 var(--sans); color: #cfcbc2; margin-top: 12px; max-width: 34ch; }
.sitefoot .brandcol .pledge { font: 600 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-top: 12px; max-width: none; }
.sitefoot nav { border-top: 1px solid #3a3835; padding: 12px 0 4px; }
.sitefoot .lab { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6b655e; }
.sitefoot nav a { display: flex; align-items: center; min-height: 44px; font: 500 15px/1.3 var(--sans); color: #cfcbc2; }
.sitefoot nav a:hover { color: #fff; }
.sitefoot .base { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 18px;
  padding: 14px 0 30px; border-top: 1px solid #3a3835; font: 600 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.sitefoot .base a { color: #cfcbc2; }
.sitefoot .base a:hover { color: #fff; }
.sitefoot .base .last { margin-left: auto; }
@media (min-width: 700px) {
  .sitefoot .cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
  .sitefoot nav { border-top: 0; padding: 0; }
  .sitefoot .brandcol { padding-bottom: 0; }
  .sitefoot nav a { min-height: 34px; }
  .sitefoot .lab { margin-bottom: 6px; }
}

/* ---------------------------------------------------------------------------------------------
   The rest of the site: /faq/, /pricing/, /about/, /roadmap/, /terms/, /contact/.

   Six objects, all built out of the ones above (the section head, the stat strip, the printed
   button, the ruled row). Nothing here invents a second visual language, and nothing here uses
   .foot, .kick, .head, .hl, .body or .chips — card2.css owns those names.
   --------------------------------------------------------------------------------------------- */

/* A link inside running copy has to look like a link. The reset at the top of this file makes
   every <a> inherit its colour and drop its underline — right for the nav, the footer and the
   buttons, wrong everywhere a sentence contains one, which is why the addresses on /privacy/ were
   indistinguishable from the text around them. Listed by container rather than by a blanket
   `main a`, because the buttons are anchors too and must not turn into underlined red words. */
.prose a, .doc a, .qa a, .fine a, .note a, .lead a, .row a, .sidepanel a, .status a,
.marks a, .closer a, .keep a, .dated a, .pfoot a, .dek a, .live a, .cohort a,
.tail p:not(.btnrow) a {
  color: var(--net); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover, .doc a:hover, .qa a:hover, .fine a:hover, .note a:hover, .lead a:hover,
.row a:hover, .sidepanel a:hover, .status a:hover, .marks a:hover, .closer a:hover,
.keep a:hover, .dated a:hover, .pfoot a:hover, .dek a:hover { color: var(--ink); }
/* on the three dark grounds the red is 3.4:1 on #1c1c1a, so those links go white instead */
.close .fine a, .close .note a, .tail p:not(.btnrow) a, .refuse a { color: #fff; }
.tail p:not(.btnrow) a:hover, .refuse a:hover { color: var(--gold); }

/* the page head: the same opening on all six, so a reader always lands on the same shape */
.pagehead { padding: 22px 0 4px; }
.pagehead .eyebrow { font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.pagehead h1 { font: 700 44px/.92 var(--disp); letter-spacing: .01em; text-transform: uppercase; margin: 8px 0 0; text-wrap: balance; }
.pagehead .lead { font: 400 17px/1.45 var(--sans); color: var(--ink2); margin-top: 14px; max-width: 54ch; }
.pagehead .btnrow { margin-bottom: 4px; }
@media (min-width: 900px) {
  .pagehead { padding: 40px 0 6px; }
  .pagehead h1 { font-size: 92px; line-height: .88; }
  .pagehead .lead { font-size: 21px; line-height: 1.4; max-width: 46ch; }
}

/* long-form copy: /terms/, /about/, and the tail of any page that has to say a lot */
.doc { max-width: 68ch; }
.doc h3 { font: 700 22px/1.05 var(--disp); letter-spacing: .10em; text-transform: uppercase;
  margin: 30px 0 0; padding-top: 12px; border-top: 1px solid var(--hair2); }
.doc h3:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc p { font: 400 15px/1.55 var(--sans); color: var(--ink2); margin-top: 10px; }
.doc p b, .doc li b { color: var(--ink); }
.doc ul { margin: 10px 0 0; padding-left: 17px; }
.doc li { font: 400 15px/1.55 var(--sans); color: var(--ink2); margin-top: 7px; }
.doc .dated { font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-top: 22px; }
@media (min-width: 900px) { .doc h3 { font-size: 28px; } .doc p, .doc li { font-size: 16px; } }

/* the jump list: a contents column that sticks beside the copy on a desktop and sits above it
   on a phone. /faq/ and /terms/ are both long enough that a reader needs to see the shape first. */
.withjump { display: grid; gap: 18px; }
.jump { border-top: 3px solid var(--ink); padding-top: 8px; }
.jump .lab { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.jump a { display: flex; align-items: center; min-height: 40px; font: 500 15px/1.3 var(--sans);
  color: var(--ink2); border-bottom: 1px solid var(--hair); }
.jump a:last-child { border-bottom: 0; }
.jump a:hover { color: var(--net); }
@media (min-width: 900px) {
  .withjump { grid-template-columns: 218px minmax(0, 1fr); gap: 44px; align-items: start; }
  .jump { position: sticky; top: 18px; }
}

/* the questions: a ruled list, one column, because a two-column FAQ is unreadable */
.qa { border-top: 3px solid var(--ink); }
.qa section { margin-top: 26px; }
.qa section:first-child { margin-top: 0; }
.qa h2 { font: 700 26px/1 var(--disp); letter-spacing: .10em; text-transform: uppercase; padding-top: 14px; }
.qa section:first-child h2 { padding-top: 12px; }
.qa .grp { border-top: 1px solid var(--hair2); margin-top: 10px; }
.qa .i { padding: 15px 0 16px; border-bottom: 1px solid var(--hair); }
.qa .grp .i:last-child { border-bottom: 0; }
.qa .q { font: 700 17px/1.3 var(--sans); margin: 0; max-width: 62ch; }
.qa .a { font: 400 15px/1.55 var(--sans); color: var(--ink2); margin-top: 7px; max-width: 68ch; }
@media (min-width: 900px) { .qa h2 { font-size: 32px; } .qa .q { font-size: 19px; } .qa .a { font-size: 16px; } }

/* the price ladder: four sizes, one number each, and the common one marked */
.tiers { border-top: 3px solid var(--ink); }
.tiers .t { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px;
  min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.tiers .t:last-child { border-bottom: 0; }
.tiers .t .who { font: 600 16px/1.3 var(--sans); }
.tiers .t .who span { display: block; font: 400 13px/1.35 var(--sans); color: var(--ink3); }
.tiers .t .amt { font: 700 24px/1 var(--sans); font-variant-numeric: tabular-nums; }
.tiers .t.us .amt { color: var(--net); }
.tiers .t.us .who span { color: var(--net); }

/* the pledge list and the includes list: a tick or a cross, and one line each */
.marks { border-top: 3px solid var(--ink); }
.marks .m { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid var(--hair); }
.marks .m:last-child { border-bottom: 0; }
.marks .m i { font-style: normal; font: 700 15px/1.4 var(--sans); color: var(--net); }
.marks .m.no i { color: var(--ink3); }
.marks .m p { font: 400 15px/1.45 var(--sans); color: var(--ink2); }
.marks .m p b { color: var(--ink); }

/* /roadmap/: three columns that are allowed to say "no" */
.status { display: grid; gap: 14px; }
@media (min-width: 900px) { .status { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } }
.status .col { background: var(--pg); border: 1px solid var(--hair2); border-top: 3px solid var(--ink); padding: 14px; }
.status .col.now { border-top-color: var(--net); }
.status .col.next { border-top-color: var(--gold); }
.status h3 { font: 700 26px/1 var(--disp); letter-spacing: .10em; text-transform: uppercase; display: flex; align-items: baseline; }
.status h3 span { margin-left: auto; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; color: var(--ink3); }
.status .col > p { font: 400 15px/1.45 var(--sans); color: var(--ink2); margin-top: 8px; }
.status ul { list-style: none; margin: 12px 0 0; padding: 0; }
.status li { border-top: 1px solid var(--hair); padding: 9px 0; font: 400 14px/1.4 var(--sans); color: var(--ink2); }
.status li b { display: block; font: 600 15px/1.3 var(--sans); color: var(--ink); }

/* the light-ground version of the comparison bars from the landing close: the dark page draws a
   dark track, which on paper is a solid black bar with an invisible fill inside it */
.paper .bars .b .bar, .band:not(.close) .bars .b .bar { background: var(--hair); }
.paper .bars .b .bar i, .band:not(.close) .bars .b .bar i { background: var(--ink2); }
.paper .bars .b.us .bar i, .band:not(.close) .bars .b.us .bar i { background: var(--net); }
.paper .bars .b .n, .band:not(.close) .bars .b .n { color: var(--ink3); }

/* the one-line call at the bottom of a page that is not the landing page */
.tail { background: var(--nav); color: #fff; padding: 22px 0 26px; }
.tail .wrap { display: grid; gap: 14px; }
.tail h2 { font: 700 32px/.98 var(--disp); text-transform: uppercase; letter-spacing: .01em; }
.tail p { font: 400 16px/1.45 var(--sans); color: #cfcbc2; max-width: 52ch; }
.tail .btnrow { margin-top: 0; }
.tail .btn { border-color: #fff; color: #fff; }
.tail .btn.go { border-color: var(--net); color: #fff; }
.tail .btn.go:hover { background: #fff; border-color: #fff; color: var(--ink); }
.tail .btn.ghost:hover { background: #fff; color: var(--ink); }
@media (min-width: 900px) {
  .tail { padding: 34px 0 38px; }
  .tail .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
  .tail h2 { font-size: 44px; }
  .tail .btnrow { grid-column: 2; }
}

/* the skip link: off screen until it is focused, then a printed button in the top corner */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: 8px; top: 8px; background: var(--net); color: #fff; padding: 10px 14px;
  font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }