/* ==========================================================================
   TourneyHQ — coming soon (tourneyhq.club)

   PALETTE — "Patina", taken verbatim from the product's own landing page so
   the pre-launch site and the app are visibly the same object: a warm aged
   lacquer ground with a cool verdigris accent.

   One colour rule, and it is the app's rule, not a new one:
     TEAL  (--brass) is IDENTITY — rules, marks, buttons, the accented word.
     GREEN (--flag)  is MEANING  — live, under par, money coming your way.
   Never the reverse. Two words for one idea and neither stays legible. The
   hues sit ~174deg apart on purpose: hue contrast survives a phone screen in
   sunlight, where lightness alone does not.

   AMBER + GREEN (--brand-*) belong to the LOGO and move with nothing. The
   page palette is a variable; the mark is a constant.

   GEOMETRY — a scorecard, not a SaaS page. Everything is ruled rather than
   boxed: 1px hairlines, square corners, a hard left gutter carrying a mono
   index the way a card carries hole numbers. Nothing floats on a soft
   shadow, because a leaderboard is printed and hung, not layered.
   ========================================================================== */

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

:root {
  --ground:#171210; --ground-2:#1E1714; --ground-3:#251C18; --panel:rgba(30,23,20,0.72);
  --paper:#EDE4CE; --paper-2:#E4DABF; --paper-ink:#1C1712; --paper-soft:#5C5343;
  --ink:#F1EAE0; --ink-soft:#ADA294; --ink-faint:#8E8474;
  --line:rgba(241,234,224,0.13); --line-2:rgba(241,234,224,0.26); --line-3:rgba(241,234,224,0.45);
  --flag:#6FB894; --flag-hi:#8ACCAB;
  --brass:#76E1E5; --brass-ui:#45D6DC; --brass-hi:#A6EEF1; --on-accent:#08201F;
  --incised:#2F6F72;
  --brand-amber:#E8A33D; --brand-green:#4FA97C; --brand-green-soft:#63BE90;

  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Fraunces","Hoefler Text","Iowan Old Style",Georgia,"Times New Roman",serif;

  --wrap:1200px;
  /* The gutter that carries the mono index down the page. One number, so a
     section is addressable the way a hole is. */
  --gutter:64px;
  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground:#F4EFE2; --ground-2:#EDE6D6; --ground-3:#E3DAC6; --panel:rgba(255,253,247,0.8);
    --ink:#1A130D; --ink-soft:#59503F; --ink-faint:#6B6250;
    --line:rgba(26,19,13,0.14); --line-2:rgba(26,19,13,0.26); --line-3:rgba(26,19,13,0.44);
    --flag:#1F7A50; --flag-hi:#186541;
    --brass:#0E6E72; --brass-ui:#0E6E72; --brass-hi:#0A5457;
    --on-accent:#F2FEFF; --incised:#7FC5C8;
    --brand-amber:#A8701A; --brand-green:#1F7A50; --brand-green-soft:#186541;
    --paper:#241A16; --paper-2:#1A120F; --paper-ink:#EFE7D8; --paper-soft:#B3A791;
  }
}

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0;
  font-family:var(--sans);
  background:var(--ground);
  color:var(--ink);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Lacquer, lit from one side. Kept faint — the page is ruled, not glowing. */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 620px at 88% -12%, color-mix(in srgb, var(--brass) 11%, transparent), transparent 68%),
    radial-gradient(820px 500px at -8% 30%, color-mix(in srgb, var(--flag) 8%, transparent), transparent 70%);
}

a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--flag); outline-offset:2px; }

.wrap { width:min(var(--wrap), 92vw); margin:0 auto; position:relative; z-index:1; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

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

h1, h2, h3, h4 { font-family:var(--display); font-weight:600; margin:0; letter-spacing:-0.028em; line-height:1.02; }
h1 { font-size:clamp(40px, 5.6vw, 76px); font-variation-settings:"SOFT" 0, "WONK" 0; }
h2 { font-size:clamp(32px, 5vw, 60px); }
h3 { font-size:20px; line-height:1.2; letter-spacing:-0.018em; }
p { margin:0; }

/* The one accented word. Italic Fraunces against roman is the sharpest
   available contrast without a second colour doing the shouting. */
.accent { color:var(--brass); font-style:italic; }
.lede { font-size:clamp(16.5px, 1.75vw, 19px); color:var(--ink-soft); max-width:54ch; line-height:1.55; }

.eyebrow {
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:0.26em; text-transform:uppercase; color:var(--brass);
}

/* ---------- ruled sections ------------------------------------------------ */

/* Every section is a ruled band with a hole number in the gutter. The rule is
   the page's structure, so it is drawn once here rather than per section. */
section { position:relative; z-index:1; padding:clamp(76px, 9vw, 132px) 0; }
section + section { border-top:1px solid var(--line); }

.band { display:grid; grid-template-columns:var(--gutter) minmax(0,1fr); }
@media (max-width:820px) { .band { grid-template-columns:1fr; } }
.band-no {
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--incised);
  padding-top:6px;
}
@media (max-width:820px) { .band-no { padding-top:0; margin-bottom:18px; color:var(--brass); } }

.section-head { max-width:58ch; margin-bottom:clamp(38px, 4.6vw, 62px); }
.section-head .eyebrow { display:block; margin-bottom:16px; }
.section-head h2 + p { margin-top:18px; }

/* ---------- brand lockup -------------------------------------------------- */

.lockup { display:inline-flex; align-items:center; gap:10px; }
.wordmark {
  font-family:var(--sans); font-weight:700; letter-spacing:-0.03em; line-height:1;
  font-size:22px; white-space:nowrap;
}
/* THE LOCKUP IS THE APP'S, RULE FOR RULE.
   Copied from `.brand-mark` / `.brand-hq` in the app's globals.css, with the
   accent tokens resolved the way the app's own landing page resolves them
   (BRAND_TOKENS in src/app/page.tsx): accent and accent-200/300 are the
   brand amber, accent-600 is the soft green, and the chip's text is the page
   ground.

   It was drawn from memory the first time and came out wrong in three ways —
   a two-stop gradient instead of four, and a GREEN chip where the app's is
   AMBER, at roughly twice the size. The "HQ" is a small raised badge, not a
   second word. Do not restyle it here; change it in the app and copy. */
.wordmark .t {
  background:linear-gradient(115deg,
    var(--brand-amber) 0%,
    var(--brand-amber) 45%,
    var(--brand-green-soft) 75%,
    var(--brand-amber) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark .hq {
  display:inline-block;
  font-family:var(--sans);
  font-size:0.42em; font-weight:700; letter-spacing:0.04em; line-height:1;
  color:var(--ground); background:var(--brand-amber);
  padding:0.22em 0.4em; border-radius:0.35em;
  vertical-align:0.62em; margin-left:0.2em;
}

/* ---------- buttons: struck plates, not pills ----------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 22px; border-radius:2px; border:1px solid transparent;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.13em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; position:relative;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-primary { background:var(--brass-ui); color:var(--on-accent); }
.btn-primary:hover { background:var(--brass-hi); }
.btn-ghost { border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover { border-color:var(--brass); color:var(--brass); }
.btn-sm { height:36px; padding:0 14px; font-size:11px; }

/* ---------- status chip --------------------------------------------------- */

.chip {
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 12px 6px 10px; border:1px solid var(--line-2); border-radius:2px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--panel); backdrop-filter:blur(8px);
}
.dot { width:6px; height:6px; border-radius:50%; background:var(--flag); position:relative; flex:none; }
.dot::after {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--flag); opacity:0; animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse { 0% { transform:scale(.55); opacity:.85; } 100% { transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .dot::after { animation:none; } }

/* ---------- nav ----------------------------------------------------------- */

.nav {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.nav.scrolled { border-bottom-color:var(--line-2); background:color-mix(in srgb, var(--ground) 96%, transparent); }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:18px; height:68px; }
.nav-links {
  display:flex; align-items:center; gap:30px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--ink-faint);
}
.nav-links a { transition:color .16s ease; }
.nav-links a:hover { color:var(--brass); }
@media (max-width:940px) { .nav-links { display:none; } }

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

.hero { padding-top:clamp(52px, 7vw, 88px); padding-bottom:clamp(60px, 7vw, 96px); border-top:0; }
.hero-grid {
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
  gap:clamp(40px, 5vw, 76px); align-items:center;
}
@media (max-width:1000px) { .hero-grid { grid-template-columns:minmax(0,1fr); } }

/* Hanging the headline off the gutter is the page's signature: the first
   letter aligns to the rule, not to the text column. */
/* The announcement rule. Sized between the lede and the headline: big enough
   that it is read first, tracked wide enough to read as a notice rather than
   a label, and never competing with the h1 above the fold. */
.announce {
  display:flex; align-items:center; gap:14px;
  padding:15px 0 16px;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.announce-t {
  font-family:var(--mono); font-weight:500; line-height:1;
  font-size:clamp(18px, 2.7vw, 30px); letter-spacing:0.26em;
  text-transform:uppercase; color:var(--brass);
  /* Tracking adds a trailing gap after the last letter; pulling it back keeps
     the optical left/right rhythm of the rule even. */
  margin-right:-0.26em;
}
.announce-y {
  margin-left:auto; flex:none;
  font-family:var(--mono); font-size:clamp(13px, 1.5vw, 17px);
  letter-spacing:0.2em; color:var(--ink-faint);
}
.announce .dot { width:9px; height:9px; }

.hero h1 { margin:28px 0 0; margin-left:-0.055em; }
.hero .lede { margin-top:24px; }

.verbs {
  display:flex; flex-wrap:wrap; margin-top:30px;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.verbs span {
  flex:1 1 auto; padding:12px 16px 12px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-faint); border-right:1px solid var(--line);
}
.verbs span:last-child { color:var(--brass); border-right:0; }
.verbs span i { font-style:normal; color:var(--incised); margin-right:9px; }

/* signup */
.signup { margin-top:32px; max-width:530px; }
.field { display:flex; border:1px solid var(--line-2); border-radius:2px; background:color-mix(in srgb, var(--ground-2) 88%, transparent); transition:border-color .16s ease; }
.field:focus-within { border-color:var(--brass); }
.field input {
  flex:1; min-width:0; height:52px; padding:0 16px; border:0; background:transparent;
  color:var(--ink); font-family:var(--sans); font-size:15.5px; letter-spacing:-0.01em;
}
.field input::placeholder { color:var(--ink-faint); }
.field input:focus { outline:none; }
.field .btn { height:52px; border-radius:0; flex:none; }
@media (max-width:540px) {
  .field { flex-direction:column; }
  .field input { height:50px; border-bottom:1px solid var(--line); }
  .field .btn { width:100%; }
}
.signup .note { margin-top:12px; font-size:13px; color:var(--ink-faint); }
.signup .msg { margin-top:12px; font-size:13.5px; color:var(--flag); display:none; }
.signup .msg.show { display:block; }
.signup .msg.err { color:var(--brand-amber); }

.trust {
  display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:28px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--ink-faint);
}
.trust span { display:inline-flex; align-items:center; gap:8px; }
.trust svg { color:var(--flag); flex:none; }

/* ---------- the board (hero art) ------------------------------------------ */

.board-stack { position:relative; }
.board {
  border:1px solid var(--line-2); border-radius:2px;
  background:color-mix(in srgb, var(--ground-2) 96%, transparent);
  overflow:hidden;
}
.board-top {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb, var(--ground-3) 60%, transparent);
}
.board-title { font-family:var(--display); font-size:17px; letter-spacing:-0.02em; }
.board-sub { font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
.board-live { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--flag); }

/* The scoring-view tabs. Deliberately mono and small: they are a control on
   a board, not navigation, and the board is what the eye should land on. */
.board-tabs { display:flex; border-bottom:1px solid var(--line-2); }
.board-tabs button {
  flex:1; appearance:none; background:none; border:0; cursor:pointer;
  padding:10px 4px; color:var(--ink-faint);
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  border-right:1px solid var(--line);
  transition:color .16s ease, background .16s ease;
}
.board-tabs button:last-child { border-right:0; }
.board-tabs button:hover { color:var(--ink-soft); }
.board-tabs button[aria-selected="true"] {
  color:var(--brass); background:color-mix(in srgb, var(--brass) 8%, transparent);
  box-shadow:inset 0 -2px 0 var(--brass);
}

/* Six columns: position, who, the previous round, the hole they are thru,
   what they have done today, and the running total. A leaderboard that shows
   only a total is a widget. */
.board-head, .row {
  display:grid; grid-template-columns:26px minmax(0,1fr) 34px 34px 42px 48px; gap:8px;
  align-items:center; padding:11px 16px;
}
.row .num {
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  text-align:right; font-variant-numeric:tabular-nums;
}
.row .num.under { color:var(--flag); }
.row .num.level { color:var(--ink-faint); }
/* On a narrow card the previous round is the first thing a real board drops. */
@media (max-width:1000px) {
  .board-head span:nth-child(3), .row > *:nth-child(3) { display:none; }
  .board-head, .row { grid-template-columns:26px minmax(0,1fr) 34px 42px 48px; }
}
.board-head {
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--line); padding-top:10px; padding-bottom:10px;
}
.row { border-bottom:1px solid var(--line); transition:background .6s ease; }
.row:last-child { border-bottom:0; }
.row.moved { background:color-mix(in srgb, var(--flag) 13%, transparent); }
.row .pos { font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); }
.row .who { font-size:14.5px; letter-spacing:-0.015em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .who small { display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:0.04em; margin-top:2px; }
.row .thru { font-family:var(--mono); font-size:12px; color:var(--ink-faint); text-align:right; }
.row .score { font-family:var(--mono); font-size:15.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.row .score.under { color:var(--flag); }
.row .score.level { color:var(--ink-soft); }

.board-foot {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--ink-faint);
  background:color-mix(in srgb, var(--ground-3) 45%, transparent);
  white-space:nowrap;
}
/* The note is the flexible half — the slip is pinned over the right-hand end
   of this bar, so a note that wraps pushes the footer taller behind it. */
.board-foot span:first-child { overflow:hidden; text-overflow:ellipsis; flex:1 1 0; width:0; }
.board-foot span:last-child { flex:none; }

/* The settle-up slip, on card stock, pinned at an angle to the board. */
.card-float {
  position:absolute; right:-24px; bottom:-92px; width:min(238px, 60%);
  border:1px solid rgba(0,0,0,0.25); border-radius:2px; padding:15px 16px 16px;
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, color-mix(in srgb, var(--paper-ink) 6%, transparent) 21px 22px),
    var(--paper);
  color:var(--paper-ink);
  box-shadow:0 26px 50px -34px rgba(0,0,0,0.9);
  transform:rotate(-2.2deg);
}
@media (max-width:1000px) { .card-float { right:0; bottom:-64px; width:min(214px,56%); } }
@media (max-width:560px) { .card-float { display:none; } }
.card-float .k { font-family:var(--mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--paper-soft); }
.card-float .big { font-family:var(--mono); font-size:32px; font-weight:600; line-height:1.05; margin-top:6px; font-variant-numeric:tabular-nums; }
.card-float .split { display:flex; justify-content:space-between; gap:10px; margin-top:14px; padding-top:11px; border-top:1px solid color-mix(in srgb, var(--paper-ink) 22%, transparent); font-size:12px; }
.card-float .split b { font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- format ticker: a hard slab ------------------------------------ */

.ticker { border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); overflow:hidden; background:color-mix(in srgb, var(--ground-2) 70%, transparent); }
.ticker-track { display:flex; width:max-content; animation:slide 52s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation:none; } }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-item {
  display:inline-flex; align-items:center; padding:15px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint);
  white-space:nowrap;
}
.ticker-item::after { content:"/"; color:var(--incised); margin:0 24px; }
@keyframes slide { to { transform:translateX(-50%); } }

/* ---------- feature grid: ruled cells, no boxes --------------------------- */

.grid-3 {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--line-2);
}
@media (max-width:940px) { .grid-3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px) { .grid-3 { grid-template-columns:1fr; } }
.cell {
  padding:26px 26px 30px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  position:relative; transition:background .25s ease;
}
.cell:hover { background:color-mix(in srgb, var(--ground-2) 70%, transparent); }
.cell:hover .cell-no { color:var(--brass); }
@media (min-width:941px) { .cell:nth-child(3n) { border-right:0; padding-right:0; } }
@media (max-width:940px) and (min-width:621px) { .cell:nth-child(2n) { border-right:0; padding-right:0; } }
@media (max-width:620px) { .cell { border-right:0; padding-right:0; } }
.cell-no { font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:var(--incised); transition:color .25s ease; }
.cell h3 { margin:16px 0 9px; }
.cell p { font-size:14.5px; color:var(--ink-soft); max-width:38ch; }

/* ---------- steps --------------------------------------------------------- */

.steps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--line-2); }
@media (max-width:1000px) { .steps { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:580px) { .steps { grid-template-columns:1fr; } }
.step { padding:26px 26px 8px 0; border-right:1px solid var(--line); position:relative; }
.step::before { content:""; position:absolute; top:-1px; left:0; width:42%; height:1px; background:var(--brass); }
@media (min-width:1001px) { .step:last-child { border-right:0; padding-right:0; } }
@media (max-width:1000px) { .step:nth-child(2n) { border-right:0; } }
@media (max-width:580px) { .step { border-right:0; padding-right:0; } }
.step .n { font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; color:var(--brass); }
.step h3 { margin:14px 0 10px; font-size:26px; }
.step p { font-size:14.5px; color:var(--ink-soft); max-width:34ch; }

/* ---------- split sections ------------------------------------------------ */

.split-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px, 5vw, 76px); align-items:center; }
@media (max-width:940px) { .split-grid { grid-template-columns:1fr; } }
.split-grid.flip .col-art { order:-1; }
@media (max-width:940px) { .split-grid.flip .col-art { order:0; } }

.list { display:grid; margin:30px 0 0; padding:0; }
.list li { list-style:none; display:flex; gap:18px; padding:15px 0; border-top:1px solid var(--line); }
.list li:last-child { border-bottom:1px solid var(--line); }
.list .lk { font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); flex:none; width:104px; padding-top:4px; }
.list .lv { font-size:14.5px; color:var(--ink-soft); }
.list .lv b { color:var(--ink); font-weight:600; }
@media (max-width:540px) { .list li { flex-direction:column; gap:6px; } .list .lk { width:auto; } }

/* phone mock — a device outline, drawn not shaded */
.phone { width:min(302px, 86%); margin:0 auto; border:1px solid var(--line-2); border-radius:26px; padding:10px; background:color-mix(in srgb, var(--ground-2) 90%, transparent); }
.phone-in { border-radius:18px; overflow:hidden; background:var(--ground); border:1px solid var(--line); }
.phone-top { padding:14px 16px 13px; border-bottom:1px solid var(--line-2); }
.phone-top .k { font-family:var(--mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint); }
.phone-top .h { font-family:var(--display); font-size:20px; margin-top:5px; letter-spacing:-0.02em; }
.hole { padding:22px 16px 18px; text-align:center; }
.hole .num { font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint); }
.hole .par { font-family:var(--display); font-size:58px; line-height:1; margin:10px 0 2px; letter-spacing:-0.04em; }
.hole .shots { display:flex; justify-content:center; gap:7px; margin-top:18px; }
.hole .shots b {
  width:34px; height:34px; border-radius:2px; display:grid; place-items:center;
  border:1px solid var(--line-2); font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--ink-soft);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.hole .shots b.on { background:var(--flag); border-color:var(--flag); color:var(--on-accent); }
.hole .meta { display:flex; justify-content:space-between; margin-top:20px; padding-top:15px; border-top:1px solid var(--line-2); font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); text-align:left; }
.hole .meta b { display:block; font-size:15px; letter-spacing:0; color:var(--ink); margin-top:4px; text-transform:none; font-variant-numeric:tabular-nums; }
.tabbar { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-2); }
.tabbar span { padding:11px 0; text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.tabbar span.on { color:var(--brass); box-shadow:inset 0 1px 0 var(--brass); }

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

.ledger { border:1px solid var(--line-2); border-radius:2px; overflow:hidden; }
/* A DASHBOARD ROW, NOT AN APP SCREEN.
   Three tiers and no more: what it was and what it cost you, then who paid it
   and how it divided, then the field it divided over. The detail — every
   weight, every note, the receipt — lives in the app; this has to be readable
   at a glance and stop there. */
.ledger-row { padding:13px 18px; border-bottom:1px solid var(--line); font-size:14.5px; }
.lr-top { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.lr-top b { font-family:var(--mono); font-weight:500; color:var(--ink-soft); flex:none; font-variant-numeric:tabular-nums; }
.ledger-row.credit .lr-top b { color:var(--flag); }
.lr-meta {
  margin-top:4px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  color:var(--ink-faint); line-height:1.5;
}
.lr-meta b { color:var(--ink-soft); font-weight:500; }

/* The field, as initials. All eight appear on every line in the same order,
   because the point is the DIFFERENCE between lines — a chip that is missing
   here and present above is the whole argument for weighted splitting. */
.lr-who { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.wc {
  display:inline-grid; place-items:center;
  width:26px; height:20px; border-radius:2px;
  border:1px solid var(--line-2); color:var(--ink-soft);
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.04em;
}
/* Not on this line at all. */
.wc.off { border-color:var(--line); color:var(--incised); opacity:0.5; }
/* On the line at a weight of zero — present, owing nothing. The app keeps
   these rows rather than deleting them, so the dashboard shows them. */
.wc.zero { border-style:dashed; color:var(--ink-faint); }
/* Whoever laid the money out. */
.wc.payer { border-color:var(--brand-amber); color:var(--brand-amber); }
/* The notes inside a chip are for a screen reader; the dashboard stays
   initials only, and the line above already says how it divided. */
.wc i { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.wc-key {
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-faint);
}
.wc-key span { display:inline-flex; align-items:center; gap:7px; }
.wc-key i.wc { width:16px; height:12px; }
.ledger-total { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px; background:color-mix(in srgb, var(--flag) 13%, transparent); }
.ledger-total span { font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }
.ledger-total b { font-family:var(--mono); font-size:27px; font-weight:600; color:var(--flag); font-variant-numeric:tabular-nums; }
/* MONEY GOING THE OTHER WAY IS NOT GREEN.
   Green means live, under par, and money coming YOUR way — the page's one
   colour rule. A balance you owe is a fact, not a loss, so it is set in ink
   on a neutral band rather than being coloured red: nothing has gone wrong,
   somebody just fronted the flights. */
.ledger-total.owe { background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ledger-total.owe b { color:var(--ink); }
.hardrule {
  margin-top:28px; padding:16px 0 16px 20px; border-left:1px solid var(--brass);
  font-size:14.5px; color:var(--ink-soft);
}
.hardrule b { color:var(--ink); font-weight:600; }

/* ---------- build status -------------------------------------------------- */

.status-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(30px,4vw,64px); }
@media (max-width:800px) { .status-grid { grid-template-columns:1fr; } }
.status-row { display:flex; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.status-row .nm { flex:1; font-size:14.5px; }
.status-row .nm small { display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.tag {
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
  padding:4px 8px; border-radius:2px; border:1px solid var(--line-2); color:var(--ink-faint); white-space:nowrap;
}
.tag.built { color:var(--flag); border-color:color-mix(in srgb, var(--flag) 45%, transparent); }
.tag.testing { color:var(--brass); border-color:color-mix(in srgb, var(--brass) 45%, transparent); }
.tag.next { color:var(--brand-amber); border-color:color-mix(in srgb, var(--brand-amber) 45%, transparent); }

/* ---------- plans --------------------------------------------------------- */

.plans { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); max-width:820px; border-top:1px solid var(--line-2); }
@media (max-width:720px) { .plans { grid-template-columns:1fr; } }
.plan { padding:28px 28px 30px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (min-width:721px) { .plan:last-child { border-right:0; padding-right:0; } }
@media (max-width:720px) { .plan { border-right:0; padding-right:0; } }
.plan .pn { font-family:var(--mono); font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--brass); }
.plan .pp { font-family:var(--display); font-size:46px; margin:14px 0 6px; line-height:1; letter-spacing:-0.04em; }
.plan .pp small { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.plan .pb { font-size:14px; color:var(--ink-soft); margin-bottom:20px; max-width:32ch; }
.plan ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.plan li { display:flex; gap:11px; font-size:14px; color:var(--ink-soft); }
.plan li svg { color:var(--flag); flex:none; margin-top:4px; }

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

.cta { border:1px solid var(--line-2); border-radius:2px; padding:clamp(36px, 5vw, 68px) clamp(24px, 4vw, 56px); text-align:center;
  background:radial-gradient(700px 340px at 50% 0%, color-mix(in srgb, var(--brass) 11%, transparent), transparent 70%); }
.cta h2 { margin-bottom:16px; }
.cta .signup { margin:30px auto 0; }
.cta .lede { margin:0 auto; }
.cta .trust { justify-content:center; }

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

.faq { max-width:780px; border-top:1px solid var(--line-2); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  cursor:pointer; list-style:none; padding:19px 0; display:flex; gap:18px;
  align-items:center; justify-content:space-between; font-size:17px; letter-spacing:-0.015em;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); color:var(--brass); font-size:18px; flex:none; transition:transform .18s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .a { padding:0 0 22px; font-size:14.5px; color:var(--ink-soft); max-width:64ch; }
.faq .a b { color:var(--ink); font-weight:600; }
.faq .a .calc { margin-top:14px; border:1px solid var(--line); border-radius:2px; }
.faq .calc div { display:flex; justify-content:space-between; gap:14px; padding:9px 14px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; }
.faq .calc div:last-child { border-bottom:0; color:var(--flag); }
.faq .calc b { font-variant-numeric:tabular-nums; }

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

/* Three parts, because the old one had none: a brand block that says what
   this is and what state it is in, link columns beside it, and a ruled bar
   under both for the credit. Flush-left paragraphs of equal weight read as
   the page running out of content rather than closing. */
footer { padding:clamp(56px,6vw,76px) 0 44px; border-top:1px solid var(--line-2); position:relative; z-index:1; }

.foot-top {
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,60px); padding-bottom:clamp(36px,4vw,52px);
}
@media (max-width:860px) { .foot-top { grid-template-columns:1fr 1fr; } .foot-brand { grid-column:1 / -1; } }
@media (max-width:520px) { .foot-top { grid-template-columns:1fr; gap:30px; } }

.foot-brand { max-width:44ch; }
/* The tagline, in the page's own display face — the one place in the footer
   that is allowed to be typography rather than a label. */
.foot-line {
  margin:16px 0 18px; font-family:var(--display); font-size:20px;
  letter-spacing:-0.02em; line-height:1.15; color:var(--ink-soft);
}
.foot-line em { color:var(--brass); font-style:italic; }
.foot-note { margin-top:16px; font-size:13px; line-height:1.5; color:var(--ink-faint); text-wrap:balance; }

.foot-nav { display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.foot-h {
  font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--incised); margin-bottom:5px;
}
.foot-nav a { font-size:14px; color:var(--ink-faint); transition:color .16s ease; }
.foot-nav a:hover { color:var(--brass); }
/* An address is not a label, so it keeps its own casing — see the same rule
   applied to the mailto link before this footer was rebuilt. */
.foot-mail { color:var(--ink-soft) !important; word-break:break-all; }

.foot-bar {
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.foot-bar a { color:var(--ink-soft); }
.foot-bar a:hover { color:var(--brass); }

/* ---------- the AjAi Labs credit ------------------------------------------ */

/* THE STUDIO'S OWN COLOURS, LIFTED FOR THIS GROUND.
   AjAi Labs is amber #a8701a and green #1b6b47 — values chosen for its own
   bone-coloured page. The amber is the same value TourneyHQ uses on a light
   ground, so on cream the two brands agree exactly; on the dark lacquer here
   both have to lift or the mark goes to mud, in the same way TourneyHQ's own
   amber lifts from #A8701A to #E8A33D between themes. The HUES do not move —
   only the lightness — so it stays the studio's mark rather than a recolour
   of it. */
.foot-by { --ajai-amber:#E8A33D; --ajai-green:#3FA274; text-transform:none; letter-spacing:0.02em; }
@media (prefers-color-scheme: light) {
  .foot-by { --ajai-amber:#a8701a; --ajai-green:#1b6b47; }
}
.ajai { display:inline-flex; align-items:center; gap:7px; vertical-align:-3px; margin-left:4px; }
.ajai-mark { width:15px; height:15px; flex:none; }
/* Archivo, because the tittles below are measured off it. */
.ajai-word { font-family:"Archivo",var(--sans); font-weight:700; font-size:14px; white-space:nowrap; letter-spacing:-0.005em; }
.ajai-word .cap { color:var(--ajai-amber); }
.ajai-word .stem { position:relative; color:var(--ajai-green); }
/* The tittle: a sharp-cornered 0.1375 x 0.12em square, 0.155em from the top
   of the em box and 0.065em from the glyph origin. Measured off Archivo 700
   on the studio's own site — re-measure if the face ever changes. */
.ajai-word .stem::after {
  content:""; position:absolute; top:0.155em; left:0.065em;
  width:0.1375em; height:0.12em; background:var(--ajai-amber);
}
.ajai-word .labs { color:var(--ajai-green); font-weight:600; }
.ajai:hover .ajai-word .labs, .ajai:hover .ajai-word .stem { color:var(--ajai-green); }

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

.js .rv { opacity:0; transform:translateY(14px); }
.js .rv.in { opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.in { opacity:1; transform:none; transition:none; }
}

/* The four verbs read as a 2x2 block on a phone. Left to flex freely they
   broke 3 + 1, which puts a lone "Crown it" on its own line with a rule
   under three siblings — the rhythm of the four-verb line is the point. */
@media (max-width:560px) {
  .verbs span { flex:1 1 44%; border-right:1px solid var(--line); }
  .verbs span:nth-child(2n) { border-right:0; }
  .verbs span:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}

/* Names the event the ledger belongs to. It is not decoration: a settle-up
   with cart and dinner lines is a SOCIETY artifact, and shown without saying
   so it reads as something a club would do — which the product deliberately
   does not. */
.ledger-cap {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:12px;
}
/* Two rules in a row need air between them; the second is a separate claim. */
.hardrule + .hardrule { margin-top:16px; }

/* ---------- setup options ------------------------------------------------- */

/* Each card is one decision with its real options listed. Written as lists
   rather than prose because the point being made is COUNT: an organiser
   skimming should see how much of the event is theirs to set. */
.opts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line-2); }
@media (max-width:940px) { .opts { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px) { .opts { grid-template-columns:1fr; } }
.opt { padding:22px 24px 24px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
@media (min-width:941px) { .opt:nth-child(3n) { border-right:0; padding-right:0; } }
@media (max-width:940px) and (min-width:621px) { .opt:nth-child(2n) { border-right:0; padding-right:0; } }
@media (max-width:620px) { .opt { border-right:0; padding-right:0; } }
.opt .ok {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:14px;
}
.opt ul { margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.opt li { font-size:14px; color:var(--ink-soft); padding-left:16px; position:relative; }
.opt li::before {
  content:""; position:absolute; left:0; top:0.62em;
  width:6px; height:1px; background:var(--line-3);
}
.opts-note { margin-top:28px; font-size:14px; color:var(--ink-faint); max-width:74ch; }
.opts-note b { color:var(--ink-soft); font-weight:600; }

/* ---------- themes -------------------------------------------------------- */

.themes { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; }
@media (max-width:900px) { .themes { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:560px) { .themes { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.swatch {
  appearance:none; cursor:pointer; text-align:left;
  border:1px solid var(--line); border-radius:2px; background:transparent;
  padding:10px 10px 11px; transition:border-color .16s ease, background .16s ease;
}
.swatch:hover { border-color:var(--line-2); background:color-mix(in srgb, var(--ground-2) 60%, transparent); }
.swatch[aria-checked="true"] { border-color:var(--sw); background:color-mix(in srgb, var(--ground-2) 80%, transparent); }
.swatch .chipbar { display:flex; height:26px; border-radius:2px; overflow:hidden; }
.swatch .chipbar i { flex:1; }
.swatch .nm {
  display:block; margin-top:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-faint);
}
.swatch[aria-checked="true"] .nm { color:var(--sw); }

/* The preview. It is a real slice of the app's chrome — a board line, a
   progress bar, two buttons — because a palette shown as bare squares says
   nothing about whether it works on a leaderboard. */
.theme-demo { margin-top:26px; border:1px solid var(--line-2); border-radius:2px; overflow:hidden; max-width:520px; }
.theme-demo-head { padding:14px 18px; border-bottom:1px solid var(--line-2); background:color-mix(in srgb, var(--ground-2) 70%, transparent); }
.theme-demo-head span:first-child {
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--sw, var(--brass));
}
.theme-demo-head span:last-child { display:block; margin-top:6px; font-size:13.5px; color:var(--ink-soft); }
.theme-demo-body { padding:16px 18px 18px; }
.tdrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.tdrow b { font-family:var(--mono); font-weight:600; color:var(--flag); font-variant-numeric:tabular-nums; }
.tdrow b.tdlive { color:var(--sw, var(--brass)); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; }
.tdbar { margin-top:16px; height:5px; border-radius:2px; background:color-mix(in srgb, var(--ink) 10%, transparent); overflow:hidden; }
.tdbar i { display:block; height:100%; background:var(--sw, var(--brass)); transition:background .25s ease; }
.tdbtns { display:flex; gap:10px; margin-top:16px; }
.tdbtn {
  padding:8px 16px; border-radius:2px; background:var(--sw, var(--brass)); color:var(--ground);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500;
  transition:background .25s ease;
}
.tdbtn.ghost { background:transparent; border:1px solid var(--sw, var(--brass)); color:var(--sw, var(--brass)); }

/* ---------- everything else ----------------------------------------------- */

.more-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-top:1px solid var(--line-2); }
@media (max-width:900px) { .more-grid { grid-template-columns:1fr; } }
.more-col { padding:24px 26px 26px 0; border-right:1px solid var(--line); }
@media (min-width:901px) { .more-col:last-child { border-right:0; padding-right:0; } }
@media (max-width:900px) { .more-col { border-right:0; padding-right:0; border-bottom:1px solid var(--line); } }
.more-h {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--brass); margin-bottom:16px;
}
.more-col ul { margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.more-col li { font-size:14px; color:var(--ink-faint); line-height:1.45; }
.more-col li b { color:var(--ink); font-weight:600; }

/* ---------- comparison table ---------------------------------------------- */

/* Wide content scrolls inside its own box rather than pushing the page
   sideways — the one rule a comparison table breaks on a phone. */
.cmp-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp {
  width:100%; min-width:620px; border-collapse:collapse;
  border-top:1px solid var(--line-2);
}
.cmp th, .cmp td { text-align:left; vertical-align:top; padding:15px 16px 15px 0; border-bottom:1px solid var(--line); }
.cmp thead th {
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint);
  padding-top:13px; padding-bottom:13px; line-height:1.5; white-space:nowrap;
}
.cmp thead th span { color:var(--incised); }
.cmp thead th.us { color:var(--brass); }
/* The row label carries the claim; the columns only answer it. */
.cmp tbody th {
  font-weight:600; font-size:14.5px; color:var(--ink); width:42%;
  letter-spacing:-0.005em; line-height:1.35;
}
.cmp tbody th small {
  display:block; margin-top:4px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  font-weight:400; color:var(--ink-faint); line-height:1.45;
}
.cmp td { font-size:13.5px; color:var(--ink-faint); width:19.33%; }
.cmp td.no { color:var(--incised); }
/* Our column is tinted end to end rather than per cell, so it reads as one
   column instead of ten highlighted boxes. */
.cmp td.us, .cmp thead th.us {
  background:color-mix(in srgb, var(--brass) 7%, transparent);
  padding-left:16px;
}
.cmp .yes { color:var(--flag); font-weight:600; font-size:14px; }
@media (max-width:620px) {
  .cmp tbody th { font-size:14px; }
  .cmp td { font-size:13px; }
}

/* ---------- the group balance -------------------------------------------- */

/* Quieter than the personal ledger on purpose: that one is the reader's own
   money, this is the proof behind it. Same rules, less weight. */
.balance { border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.bal-row {
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 16px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.bal-row em {
  font-style:normal; font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.06em; color:var(--ink-faint); margin-left:7px;
}
.bal-row b { font-family:var(--mono); font-weight:500; color:var(--ink-soft); flex:none; font-variant-numeric:tabular-nums; }
.bal-row b.up { color:var(--flag); }
/* The zero is the point of the block, so it gets the weight — and it is INK,
   not green: nothing is coming anyone's way, the books simply close. */
.bal-sum {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.bal-sum span { font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }
.bal-sum b { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); letter-spacing:0.1em; text-transform:uppercase; }
/* An arrow to a name is a direction, not an aside — it reads at full weight. */
.bal-row em { color:var(--ink-soft); }
/* The one row in the personal ledger that is a payment rather than a share. */
.ledger-row .paid { font-weight:600; color:var(--ink); }

/* ---------- trip stat strip ----------------------------------------------- */

/* Four numbers that give the ledger below a size. Mono, because they are
   quantities rather than words. */
.trip-stats {
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.trip-stats b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* A feature that exists but is switched off until the paid tier carries its
   per-use cost. Marked rather than hidden: promising it and locking it are the
   same string in the app, so they should be the same string here. */
.more-col li em {
  font-style:normal; font-family:var(--mono); font-size:9.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--brand-amber);
  white-space:nowrap;
}