/* Sky's Wonderland home: the Gold Dust opening with the river of every vouch, then the receipt page. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-wght.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  /* Discord's own greys, so the wall reads as Discord at a glance */
  --discord: #1e1f22;
  --discord-2: #2b2d31;
  --discord-text: #dbdee1;
  --muted: #949ba4;
  /* the books */
  --desk: #141518;
  --paper: #26282d;
  --rule: #3a3d44;
  --ink: #e9e2cf;
  --check: #5fd38a;
  --stamp: #e0564a;
  --pin: #c4413a;
  /* the analyst desk and the doors */
  --analyst: #101114;
  --cover: #0f1012;
  --line: #2a2c31;
  --lavender: #c2b4ef;
  --gold: #e7c769;
  --gold-hover: #f0d47c;
  --cream: #f2f3f5;
  --quiet: #b5bac1;
  --focus: #ead7a2;
  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "gg sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  /* the plans wear the desk's own palette: near-black and its mint green */
  --plan-canvas: #0b0c10;
  --plan-card: #15171d;
  --plan-raised: #1b1e26;
  --plan-line: #2a2d36;
  --plan-ink: #f4f5f7;
  --plan-quiet: #a7acb8;
  --plan-accent: #12e996;
  --plan-accent-ink: #082b1c;
  --plan-accent-hover: #4ff2b3;
  --plan-gold: #e7c769;
  --plan-sans: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--discord); }
body { margin: 0; background: var(--discord); color: var(--cream); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
p, h1, h2, ol, ul { margin: 0; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 20; padding: .75rem 1rem; background: var(--cream); color: var(--discord); }
.skip-link:focus { top: 1rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- header ---------- */
/* Brand left, sections centred, actions right. It stays on screen once you scroll, and the link for
   the section in view turns gold, so the bar doubles as a "you are here". */
html { scroll-padding-top: 4.5rem; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: .8rem var(--gutter); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(20,21,24,.96); border-bottom-color: var(--line); }
@media (prefers-reduced-motion: no-preference) { .site-header { transition: background-color .2s, border-color .2s; } }
.community-brand { display: flex; align-items: center; gap: .6rem; justify-self: start; }
.wordmark { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; color: #fff; text-decoration: none; }
.community-logo, .community-logo img, .community-logo canvas { display: block; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; }
.site-nav { display: flex; align-items: center; gap: .25rem; justify-self: center; }
.section-link { position: relative; padding: .5rem .85rem; color: var(--quiet); text-decoration: none; font-size: .92rem; letter-spacing: .01em; }
.section-link:hover { color: var(--cream); }
/* The gold rule under the section in view: thin, the same gold as the vouch total. */
.section-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .15rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.section-link[aria-current="location"] { color: var(--gold); }
.section-link[aria-current="location"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .section-link::after { transition: transform .2s ease; } .section-link { transition: color .15s; } }
.header-actions { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.signin { padding: .45rem .9rem; color: var(--cream); text-decoration: none; font-size: .9rem; white-space: nowrap; border-radius: 999px; }
.signin:hover { color: var(--lavender); text-decoration: underline; text-underline-offset: .3em; }
.header-join { padding: .45rem 1.05rem; background: var(--gold); border: 1.5px solid var(--gold); color: var(--discord); text-decoration: none; font-family: var(--serif); font-size: .95rem; white-space: nowrap; }
.header-join:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.site-header a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Too narrow for three columns: the sections go (they are one scroll away), brand and actions stay. */
@media (max-width: 56rem) { .site-nav { display: none; } .site-header { grid-template-columns: 1fr auto; } }

/* ---------- 1. the opening: the words, the quote, the river ---------- */
.wall-section { position: relative; overflow: hidden; background: var(--discord); }
/* the wall recedes into the page tone before the seam */
.wall-section::after { content: ""; position: absolute; inset: auto 0 0; height: 14rem; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(30,31,34,0), var(--discord)); }
.hero-copy { position: absolute; z-index: 2; left: var(--gutter); top: clamp(6.5rem, 17vh, 10rem); max-width: 40rem; }
.hero-copy h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -.02em; max-width: 14ch; }
.hero-copy h1 .big { display: block; margin-bottom: .12em; font-size: 1.3em; white-space: nowrap; color: var(--gold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-copy h1 em { font-style: italic; font-weight: 300; }
.lede { max-width: 40ch; margin-top: 1.4rem; font-family: var(--serif); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.5; }
.who-chip { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.5rem; padding: .5rem 1rem .5rem .5rem; background: rgba(43,45,49,.88); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; }
.who-chip img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.who-chip p { font-size: .8rem; line-height: 1.35; color: var(--quiet); max-width: 32ch; }
.who-chip b { display: block; font-size: 1rem; color: var(--cream); }
.tally { margin-top: 1.8rem; font-family: var(--serif); font-size: clamp(.85rem, 1.1vw, 1rem); line-height: 1.3; color: var(--quiet); }
.tally span { display: block; }
.tally b { display: block; margin-top: .2rem; font-weight: 400; font-size: 2.6em; line-height: 1; letter-spacing: -.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
.hero-cta { display: inline-flex; align-items: center; margin-top: 1.8rem; padding: .9rem 1.4rem; background: var(--gold); border: 1.5px solid var(--gold); color: var(--discord); text-decoration: none; font-family: var(--serif); font-size: 1.05rem; }
.hero-cta:hover { background: var(--gold-hover); }
.msg { direction: ltr; position: relative; padding: .8rem .9rem; background: var(--discord-2); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,.5); font-size: .8rem; line-height: 1.4; color: var(--discord-text); }
.who { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; min-width: 0; }
.av { width: 1.3rem; height: 1.3rem; border-radius: 50%; flex: none; object-fit: cover; }
.av.letter { display: grid; place-items: center; background: #4e5058; color: var(--cream); font-size: .65rem; font-weight: 600; }
.who b { font-weight: 600; color: var(--cream); overflow-wrap: anywhere; }
.who time { flex: none; font-size: .72rem; color: var(--muted); }
.said { display: block; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- the thread: one gold rule from the bottom of the wall to the plans ----------
   It is the only loud thing below the wall. Every step sits to its right and hangs a dot on it. */
.thread { position: relative; --thread-x: calc(var(--gutter) + .5rem); --thread-w: 2px; }
.thread::before { content: ""; position: absolute; z-index: 2; pointer-events: none; top: 0; bottom: 0; left: var(--thread-x); width: var(--thread-w); margin-left: calc(var(--thread-w) / -2);
  background: linear-gradient(180deg, transparent 0, var(--gold) 6rem, var(--gold) calc(100% - 3rem), transparent 100%); }
.thread > section { position: relative; padding-left: calc(var(--thread-x) + 2.6rem); padding-right: var(--gutter); }
.step { position: relative; }
/* the dot: on the thread, level with the step's first line */
.step::before { content: ""; position: absolute; z-index: 3; left: -2.6rem; top: .55em; width: .9rem; height: .9rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--step-bg, var(--desk)); transform: translateX(-50%); }
.step h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.02em; max-width: 14ch; text-wrap: balance; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.step .lead { max-width: 44ch; margin-top: 1.1rem; font-family: var(--serif); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; color: var(--quiet); }
.step .lead b { font-weight: 500; color: inherit; }
.inner { max-width: 68rem; }

/* the seam: the wall's grey eases into the desk over most of a screen, so there is no edge between page one and two */
.seam { height: clamp(10rem, 22vw, 18rem); margin-top: -1px; }
.seam-wall { background: linear-gradient(180deg, var(--discord), var(--desk)); }

/* step 1: the books */
.books { background: var(--desk); color: var(--ink); --step-bg: var(--desk); padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.books::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 48% 34% at 50% 40%, rgba(255,217,138,.07), rgba(255,217,138,0) 100%); }
.books > * { position: relative; }
.books .lead { color: var(--quiet); }
.ledger { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.4rem clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 2.6rem; }
.curve-total { display: grid; gap: .2rem; }
.curve-total b { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.curve-total span { font-family: var(--serif); font-style: italic; color: var(--quiet); font-size: .95rem; line-height: 1.4; }
.chart { margin: 1.6rem 0 0; display: grid; gap: .5rem; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--sans); }
.chart .axis { stroke: var(--rule); }
.chart .bar { fill: var(--check); }
.chart .bar.last { fill: var(--gold); }
.chart .val { fill: var(--ink); font-size: 13px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.chart .mon { fill: var(--quiet); font-size: 13px; text-anchor: middle; }
.chart figcaption { font-family: var(--serif); font-style: italic; font-size: .85rem; color: var(--quiet); }
/* shown only when the live count could not be read: the page keeps the snapshot and says so */
.asof { margin: 1rem 0 0; font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--muted); }
/* the receipt: the latest rows on a strip of paper, torn top and bottom */
.receipt { position: relative; margin-top: .4rem; padding: 1.3rem 1.2rem 1.5rem; background: var(--paper); color: var(--ink); font-family: var(--serif);
  clip-path: polygon(0 .5rem, 3% 0, 6% .5rem, 9% 0, 12% .5rem, 15% 0, 18% .5rem, 21% 0, 24% .5rem, 27% 0, 30% .5rem, 33% 0, 36% .5rem, 39% 0, 42% .5rem, 45% 0, 48% .5rem, 51% 0, 54% .5rem, 57% 0, 60% .5rem, 63% 0, 66% .5rem, 69% 0, 72% .5rem, 75% 0, 78% .5rem, 81% 0, 84% .5rem, 87% 0, 90% .5rem, 93% 0, 96% .5rem, 100% 0,
    100% calc(100% - .5rem), 97% 100%, 94% calc(100% - .5rem), 91% 100%, 88% calc(100% - .5rem), 85% 100%, 82% calc(100% - .5rem), 79% 100%, 76% calc(100% - .5rem), 73% 100%, 70% calc(100% - .5rem), 67% 100%, 64% calc(100% - .5rem), 61% 100%, 58% calc(100% - .5rem), 55% 100%, 52% calc(100% - .5rem), 49% 100%, 46% calc(100% - .5rem), 43% 100%, 40% calc(100% - .5rem), 37% 100%, 34% calc(100% - .5rem), 31% 100%, 28% calc(100% - .5rem), 25% 100%, 22% calc(100% - .5rem), 19% 100%, 16% calc(100% - .5rem), 13% 100%, 10% calc(100% - .5rem), 7% 100%, 4% calc(100% - .5rem), 1% 100%, 0 calc(100% - .5rem)); }
.receipt h3 { font-weight: 400; font-size: 1.15rem; margin: 0 0 .4rem; }
.rows { list-style: none; padding: 0; margin: 0; }
.row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto 1.4rem; gap: .6rem; align-items: center; min-height: 2.25rem; border-bottom: 1px solid var(--rule); font-size: .95rem; font-variant-numeric: tabular-nums; }
.row .d { font-size: .85em; color: var(--muted); white-space: nowrap; }
.row .it { display: flex; align-items: center; gap: .55rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .it img { width: 1.6rem; height: 1.6rem; flex: none; object-fit: contain; image-rendering: pixelated; }
.row .amt { text-align: right; }
.row .ok { text-align: center; font-weight: 700; font-size: 1.1em; color: var(--check); }
/* the one row the next step picks up: a gold edge, nothing else */
.tag { margin-left: .2rem; font-style: italic; font-size: .78em; color: var(--quiet); }
.row.picked { padding-left: calc(.6rem - 3px); border-left: 3px solid var(--gold); background: rgba(231,199,105,.07); }
.receipt .row.picked { margin: 0 -1.2rem; padding: 0 1.2rem 0 calc(1.2rem - 3px); }
.receipt .both { margin: .9rem 0 0; font-style: italic; font-size: .85rem; color: var(--quiet); max-width: 36ch; }

/* step 2: a row becomes a price */
.price { background: var(--desk); color: var(--ink); --step-bg: var(--desk); padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.4rem clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 2.4rem; }
.one-row { font-family: var(--serif); }
.one-row .row { border-top: 1px solid var(--rule); }
.one-row p { margin-top: 1rem; font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
.one-row p em { color: var(--gold); font-style: italic; }
.line { display: grid; gap: .6rem; }
.line svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--sans); }
.line .grid { stroke: var(--rule); stroke-dasharray: 2 4; }
.line .path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.line .pt { fill: var(--desk); stroke: var(--gold); stroke-width: 2; }
.line .pt.picked { fill: var(--gold); }
.line .pt { cursor: pointer; }
.line .pt:hover { stroke-width: 3; }
.line .pt:focus-visible { outline: 0; stroke: var(--focus); stroke-width: 3; }
.line .pt.open { fill: var(--gold); }
.line .tip rect { fill: var(--paper); stroke: var(--rule); }
.line .tip text { fill: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.line .lab.start { text-anchor: start; }
.line .tick { fill: var(--quiet); font-size: 12px; text-anchor: middle; }
.line .yv { fill: var(--quiet); font-size: 12px; text-anchor: end; font-variant-numeric: tabular-nums; }
.line .lab { fill: var(--ink); font-size: 13px; font-weight: 700; text-anchor: end; font-variant-numeric: tabular-nums; }
.line figcaption { font-family: var(--serif); font-style: italic; font-size: .85rem; color: var(--quiet); }
.line .name { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: 1.15rem; }
.line .name img { width: 1.8rem; height: 1.8rem; image-rendering: pixelated; }
.line .name small { font-style: italic; color: var(--quiet); font-size: .85rem; }
.why { margin-top: 2.4rem; max-width: 46ch; font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; }

/* step 3: a price goes to Analysts */
.analyst { background: var(--analyst); color: var(--cream); --step-bg: var(--analyst); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.analyst .lead { color: var(--quiet); }
.screens { margin-top: 2.2rem; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.shot { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0f1113; box-shadow: 0 40px 80px rgba(0,0,0,.6); }
.shot img { display: block; width: 100%; height: auto; }
.six { list-style: none; padding: 0; margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; }
.six li { padding: .7rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; }
.six li small { font-style: italic; color: var(--quiet); font-size: .85rem; white-space: nowrap; }
.six li.only small { color: var(--lavender); }
.try { display: inline-flex; align-items: center; margin-top: 1.4rem; padding: .8rem 1.2rem; border: 1.5px solid var(--lavender); color: var(--lavender); text-decoration: none; font-family: var(--serif); font-size: 1.05rem; }
.try:hover { background: var(--lavender); color: #17191d; }
.try + small { display: block; margin-top: .7rem; font-family: var(--serif); font-style: italic; font-size: .85rem; color: var(--quiet); }

/* step 4: plans, as one table; fixed columns so the plans keep their width when the billing control flips */
.plans { background: var(--plan-canvas); color: var(--plan-ink); --step-bg: var(--plan-canvas); font-family: var(--plan-sans); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.plans .step h2 { max-width: 16ch; }
.plans .lead { color: var(--plan-quiet); font-family: var(--plan-sans); font-weight: 500; }
.tablewrap { margin-top: 2.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.swipe { display: none; margin: .6rem 0 0; font-size: .85rem; color: var(--plan-quiet); }
.compare { width: 100%; min-width: 40rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .95rem; font-weight: 500; }
.compare th, .compare td { padding: .85rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--plan-line); }
.compare thead th { vertical-align: bottom; padding-bottom: 1.1rem; }
.compare th:first-child, .compare td:first-child { padding-left: 0; color: var(--plan-quiet); width: 30%; }
.compare .plan { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.compare .plan small { display: block; margin-top: .2rem; font-size: .85rem; font-weight: 500; color: var(--plan-quiet); }
.compare .money { display: block; margin-top: .7rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.compare .money b { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.compare .money small { font-size: .85rem; font-weight: 500; color: var(--plan-quiet); }
/* Pay monthly | Pay yearly above the table: real buttons in a labelled group, the pressed one raised, gold once it says
   yearly. "Save up to 20%" sits as a second, smaller line inside the yearly half (same grid cell, under the words), so it
   never covers them and needs no room beside the control at phone width: dark ink on the gold pill, gold text when off. */
.home-term { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 2.2rem; }
.home-term-label { font-size: .85rem; font-weight: 700; color: var(--plan-quiet); }
.plan-term { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--plan-line); border-radius: 999px; background: var(--plan-card); }
.plan-term-option { grid-row: 1; min-height: 40px; padding: .45rem 1.1rem; border: 0; border-radius: 999px; background: none; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .9rem; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.plan-term-option[data-term="monthly"] { grid-column: 1; }
.plan-term-option[data-term="yearly"] { grid-column: 2; padding-bottom: 1.55rem; }
.plan-term-option:hover { color: var(--plan-ink); }
.plan-term-option:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 2px; }
.plan-term-option[aria-pressed="true"] { background: var(--plan-raised); color: var(--plan-ink); box-shadow: inset 0 0 0 1px var(--plan-line); cursor: default; }
.plan-term-option[aria-pressed="true"]:nth-child(2) { background: var(--plan-gold); color: #1f2024; box-shadow: none; }
.plan-save { grid-row: 1; grid-column: 2; align-self: end; justify-self: center; position: relative; margin: 0 .8rem .5rem; color: var(--plan-gold); font-size: .72rem; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.plan-term-option[data-term="yearly"]:hover ~ .plan-save { color: var(--plan-ink); }
.plan-term-option[data-term="yearly"][aria-pressed="true"] ~ .plan-save { color: #4a3b0e; }
.home-term + .tablewrap { margin-top: 1.4rem; }
/* "a month $5.99" wraps as one unit under the big figure; the line under it says what the year costs. */
.compare .money .nw { white-space: nowrap; }
.compare .money .was-price { margin-left: .15rem; font-size: 1.05rem; font-weight: 600; color: #7c8190; }
.compare .money .bill { display: block; margin-top: .15rem; font-size: .9rem; font-weight: 600; color: var(--plan-gold); text-wrap: balance; }
.compare .money .bill.quiet { color: var(--plan-quiet); font-weight: 500; }
.compare .money .bill.quiet a { color: var(--plan-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.compare .money .bill.quiet a:hover { color: var(--plan-gold); }
.compare thead th.ins { position: relative; }
.compare thead th .best { position: absolute; top: .75rem; right: .75rem; padding: .12rem .55rem; border-radius: 999px; background: var(--plan-gold); color: #1f2024; font-size: .68rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.compare thead th .best[hidden] { display: none; }
.compare td.no { color: var(--plan-quiet); }
.compare td.yes::before { content: ""; display: inline-block; width: .35rem; height: .65rem; margin: 0 .7rem .1rem .2rem; border-right: 2px solid var(--plan-accent); border-bottom: 2px solid var(--plan-accent); transform: rotate(45deg); }
/* the Insider column: one green hairline, left and right, from the header to the buttons */
.compare .ins { border-left: 1px solid rgba(18,233,150,.45); border-right: 1px solid rgba(18,233,150,.45); background: rgba(18,233,150,.035); }
.compare thead .ins { border-top: 1px solid rgba(18,233,150,.45); border-radius: 10px 10px 0 0; }
.compare tfoot .ins { border-bottom: 1px solid rgba(18,233,150,.45); border-radius: 0 0 10px 10px; }
.compare tfoot td { border-bottom: 0; padding-top: 1.2rem; }
.go { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: .6rem .9rem; border: 1px solid transparent; border-radius: 10px; font-size: .95rem; font-weight: 700; text-align: center; text-decoration: none; color: var(--plan-ink); }
.go.ghost { border-color: #353842; color: var(--plan-quiet); }
.go.ghost:hover { border-color: #4a4e5a; background: #1a1d24; color: var(--plan-ink); }
.go.outline { border-color: transparent; background: linear-gradient(#0f1116, #0f1116) padding-box, linear-gradient(90deg, #965f7f, #ffaadc) border-box; }
.go.outline > span { color: transparent; background-image: linear-gradient(90deg, #c78ab0, #ffaadc); background-clip: text; -webkit-background-clip: text; }
.go.fill { border-color: var(--plan-accent); background: var(--plan-accent); color: var(--plan-accent-ink); font-weight: 800; }
.go.fill:hover { background: var(--plan-accent-hover); }
.tier-assure { margin: 1.6rem 0 0; font-size: .85rem; line-height: 1.6; color: var(--plan-quiet); }
.plan-steps { list-style: none; padding: 2rem 0 0; margin: 2.6rem 0 0; border-top: 1px solid var(--plan-line); counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; font-size: .95rem; font-weight: 500; line-height: 1.45; color: var(--plan-quiet); }
.plan-steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; }
.plan-steps li::before { content: counter(step); font-weight: 800; color: var(--plan-accent); font-variant-numeric: tabular-nums; }
.plans .fine { display: block; margin: 1.6rem 0 0; font-size: .8rem; font-weight: 500; line-height: 1.55; color: var(--plan-quiet); max-width: 72ch; }

/* ---------- the doors, off the thread ---------- */
.cover { background: var(--cover); color: var(--ink); padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.cover-inner { max-width: 60rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.cover h2 { margin-bottom: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -.02em; max-width: 12ch; }
.rules { list-style: none; padding: 0; counter-reset: rule; font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 2.4rem 1fr; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.rules li::before { content: counter(rule); font-weight: 700; color: var(--check); font-variant-numeric: tabular-nums; }
.doors { margin-top: 3.4rem; }
/* One card for the one Sky: set like the profile popout members already know, with the join button inside it.
   The handle, the ID and the invite each appear once. */
.card-sky { border: 1.5px solid var(--ink); background: var(--paper); font-family: var(--serif); max-width: 26rem; }
.card-sky .band { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; background: var(--discord); color: var(--cream); font-size: .95rem; font-style: italic; }
.card-sky .band img { width: 28px; height: 28px; border-radius: 8px; background: #000; }
.card-sky .body { padding: 1.2rem 1.2rem 1.3rem; }
.card-sky .who { display: flex; align-items: center; gap: 1rem; }
.card-sky .face { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.card-sky h3 { margin: 0; font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.card-sky .handle { margin: .3rem 0 0; font-size: 1.15rem; color: var(--ink); }
.card-sky .id { margin: .2rem 0 0; font-size: .9rem; font-style: italic; color: var(--quiet); }
.card-sky .id b { font-weight: 400; font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; user-select: all; white-space: nowrap; }
.card-sky .go { display: block; margin-top: 1.3rem; padding: 1rem 1.2rem; background: var(--gold); color: var(--discord); text-align: center; text-decoration: none; font-size: 1.15rem; line-height: 1.25; }
.card-sky .go:hover, .card-sky .go:focus-visible { background: var(--gold-hover); }
.card-sky .then { margin: .9rem 0 0; font-size: .95rem; font-style: italic; color: var(--quiet); line-height: 1.4; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2rem var(--gutter); background: var(--cover); border-top: 1px solid #1c1d21; font-family: var(--serif); font-style: italic; font-size: .85rem; color: var(--quiet); }
.footer-links { display: flex; gap: 1.2rem; }
.footer-links a { color: var(--quiet); text-underline-offset: .2em; }

/* ---------- narrower: iPad portrait and phones ---------- */
@media (max-width: 64rem) {
  .ledger, .price-grid, .screens { grid-template-columns: 1fr; }
  .plan-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .thread { --thread-x: 1rem; }
  .thread > section { padding-left: 2.6rem; padding-right: 1rem; }
  .step::before { left: -1.6rem; width: .75rem; height: .75rem; }
  .step h2 { font-size: 1.9rem; }
  .cover-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .doors { margin-top: 0; }
  .plan-steps { grid-template-columns: 1fr; gap: .5rem; }
  .row { grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.2rem; gap: .4rem; }
  .why { font-size: 1.1rem; }
  .swipe { display: block; }
}
    
/* phones: the comparison stacks, one feature at a time, each plan on its own line; rows stop clipping */
@media (max-width: 760px) {
  .tablewrap { overflow: visible; }
  .swipe { display: none !important; }
  .compare { min-width: 0; display: block; }
  .compare thead, .compare tbody, .compare tfoot, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .compare thead th:first-child { display: none; }
  .compare thead th { padding: .9rem .7rem; border: 1px solid var(--plan-line); border-radius: 10px; }
  .compare thead .ins { border-color: rgba(18,233,150,.45); border-radius: 10px; }
  .compare .plan { font-size: 1.05rem; }
  .compare .plan small { display: none; }
  .compare .money b { font-size: 1.4rem; }
  .compare .money > small { display: block; }
  .compare .money .nw, .compare .money .bill.quiet a { white-space: normal; }
  .compare .money .was-price { margin-left: 0; font-size: .9rem; }
  .compare .money .bill { font-size: .8rem; }
  .compare thead th .best { top: 0; right: .5rem; transform: translateY(-55%); }
  .compare tbody tr { padding: .9rem 0; border-bottom: 1px solid var(--plan-line); }
  .compare tbody th, .compare tbody th:first-child { padding: 0 0 .45rem; width: auto; border: 0; color: var(--plan-ink); font-weight: 700; }
  .compare tbody td { display: grid; grid-template-columns: 4.6rem 1fr; gap: .5rem; padding: .18rem 0; border: 0; }
  .compare tbody td::before { content: attr(data-plan); color: var(--plan-quiet); font-size: .85rem; }
  .compare tbody td.yes::before { content: attr(data-plan); width: auto; height: auto; margin: 0; border: 0; transform: none; display: block; }
  .compare tbody td.ins, .compare tfoot td.ins { background: none; border-left: 0; border-right: 0; border-radius: 0; }
  .compare tbody td.ins::before { color: var(--plan-accent); }
  .compare tfoot tr { display: grid; gap: .6rem; padding-top: 1.2rem; }
  .compare tfoot td { padding: 0; border: 0; }
  .compare tfoot td:first-child { display: none; }
  .go { min-height: 48px; }
  .row { grid-template-columns: 3rem minmax(0, 1fr) auto 1.1rem; gap: .45rem; font-size: .9rem; }
  .row .it { white-space: normal; overflow: visible; text-overflow: clip; flex-wrap: wrap; row-gap: 0; line-height: 1.25; }
  .row .it img { width: 1.4rem; height: 1.4rem; }
  .line .name { flex-wrap: wrap; row-gap: .1rem; }
  .line .name small { flex-basis: 100%; padding-left: 2.4rem; }
  /* fingers, not cursors: the dots grow so a tap lands */
  .line .pt { r: 9; stroke-width: 2.5; }
  .line .pt.picked { r: 11; }
  .card-sky { max-width: none; }
}

/* ---------- hero variant: Spotlight. One member's words at scale, then every vouch sliding by in rows, biggest trades first. ---------- */
.spot::before { display: none; }
.spot-grid { position: relative; z-index: 2; max-width: 80rem; margin: 0 auto; padding: clamp(6rem, 11vh, 7.5rem) var(--gutter) 1.5rem; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.spot .hero-copy { position: static; max-width: 40rem; }
.spotlight { position: relative; margin: 0; padding: 0 0 0 clamp(1.2rem, 3vw, 2.2rem); border-left: 2px solid var(--gold); cursor: pointer; min-width: 0; }
.spot-body { display: grid; gap: 1.4rem; }
@media (prefers-reduced-motion: no-preference) { .spot-body { transition: opacity .35s ease; } }
.spotlight.fading .spot-body { opacity: 0; }
.spot-quote { margin: 0; }
.spot-quote p { margin: 0; font-family: var(--serif); font-weight: 300; line-height: 1.12; letter-spacing: -.015em; color: var(--cream); white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }
.spot-quote p::before { content: "\201C"; color: var(--gold); margin-right: .05em; }
.spot-quote p::after { content: "\201D"; color: var(--gold); margin-left: .05em; }
/* the type steps down with the length of the words; nothing is ever cut */
.spot-quote p[data-len="xs"] { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.spot-quote p[data-len="s"]  { font-size: clamp(1.8rem, 3.4vw, 3.1rem); }
.spot-quote p[data-len="m"]  { font-size: clamp(1.4rem, 2.5vw, 2.3rem); }
.spot-quote p[data-len="l"]  { font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.3; }
.spot-quote p[data-len="xl"] { font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.45; font-weight: 400; }
.spot-who { display: flex; align-items: center; gap: .7rem; font-family: var(--sans); font-size: .95rem; color: var(--quiet); }
.spot-who b { color: var(--cream); font-weight: 600; }
.spot-who time { font-size: .95rem; font-style: italic; }
.spot-ctl { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; font-family: var(--sans); font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the river: every vouch there is, in six rows that all slide right together, biggest trades in the top row.
   Each row holds its cards twice so the loop never shows a seam; the speed is one number, set in JS from the row's width. */
.river { position: relative; overflow: hidden; padding: 1rem 0 3.5rem; display: grid; gap: .7rem; }
.river::before, .river::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem); z-index: 2; pointer-events: none; }
.river::before { left: 0; background: linear-gradient(90deg, var(--discord), rgba(30,31,34,0)); }
.river::after { right: 0; background: linear-gradient(270deg, var(--discord), rgba(30,31,34,0)); }
.river .row { display: flex; width: max-content; }
.river .set { list-style: none; margin: 0; padding: 0 .35rem; display: flex; gap: .7rem; align-items: stretch; }
@keyframes river-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .river .row { animation: river-right var(--dur, 120s) linear infinite; }
  .river:hover .row, .river:focus-within .row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .river { overflow-x: auto; }
  .river .set[aria-hidden] { display: none; }
}
.river .msg { flex: none; width: 15rem; padding: .6rem .7rem; font-size: .74rem; line-height: 1.38; box-shadow: none; border-radius: 6px; opacity: 1; filter: none; }
.river .msg[data-len="m"] { width: 19rem; }
.river .msg[data-len="l"] { width: 24rem; }
.river .msg[data-len="xl"] { width: 30rem; }
/* one essay-length vouch would double its row; it folds to seven lines here and is whole in the spotlight */
.river .msg[data-len="xl"] .said { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.river .msg .av { width: 1.15rem; height: 1.15rem; }
.river .msg .who { gap: .4rem; margin-bottom: .25rem; }
.river .msg .who time { font-size: .66rem; }
.river .msg[data-usd] { border: 1px solid rgba(240,199,94,.28); }
@media (max-width: 60rem) {
  .spot-grid { grid-template-columns: 1fr; min-height: 0; gap: 2.2rem; align-items: start; }
  .spotlight { padding-left: 1rem; }
}
@media (max-width: 760px) {
  .spot-grid { padding: 4.9rem 1rem 1.4rem; }
  .spot .hero-copy { padding: 0; }
  .river { padding-bottom: 2rem; gap: .5rem; }
  .river .set { gap: .5rem; }
  .river .msg { width: 12.5rem; font-size: .7rem; }
  .river .msg[data-len="m"] { width: 15rem; }
  .river .msg[data-len="l"] { width: 18rem; }
  .river .msg[data-len="xl"] { width: 22rem; }
  .spot-quote p[data-len="xs"] { font-size: 2rem; }
  .spot-quote p[data-len="s"] { font-size: 1.6rem; }
  .spot-quote p[data-len="m"] { font-size: 1.3rem; }
}

/* ---------- background: Gold Dust. The million made visible: a warm near-black, lit from below, with gold dust drifting up. ---------- */
.site-header, .site-header.is-scrolled { background: rgba(18,16,16,.72); border-bottom-color: rgba(231,199,105,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.spot { background: linear-gradient(180deg, #121010 0%, #171311 55%, #1a1512 100%); }
/* the hero recedes into the desk colour at its foot */
.spot.wall-section::after { height: 18rem; background: linear-gradient(180deg, rgba(20,21,24,0) 0%, rgba(20,21,24,.3) 22%, rgba(20,21,24,.62) 44%, rgba(20,21,24,.85) 62%, rgba(20,21,24,.96) 76%, rgba(20,21,24,.995) 88%, var(--desk) 100%); }
/* warm black runs straight into the desk: the grey seam the other openings need is not needed here */
.seam-wall { height: 2rem; background: var(--desk); }
.spot-grid, .river { position: relative; z-index: 2; }
/* light from below: the cards look lit by what they describe */
.glow { position: absolute; inset: auto 0 8rem; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 62% at 50% 100%, rgba(231,199,105,.26) 0%, rgba(231,199,105,.1) 38%, rgba(231,199,105,.03) 60%, rgba(231,199,105,0) 76%); }
/* gold dust: three tiled layers of soft dots, no element per dot; each drifts up by one tile so the loop has no seam */
.dust { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dust i { position: absolute; left: 0; right: 0; top: 0; bottom: calc(-1 * var(--tile)); display: block; opacity: var(--o);
  background-repeat: repeat; background-size: var(--tile) var(--tile); will-change: transform; }
.dust .d1 { --tile: 260px; --o: .9;
  background-image: radial-gradient(circle at 30px 60px, rgba(240,210,120,.55) 0, rgba(240,210,120,.18) 1.5px, rgba(240,210,120,0) 4px),
                    radial-gradient(circle at 180px 140px, rgba(240,210,120,.45) 0, rgba(240,210,120,.14) 1.2px, rgba(240,210,120,0) 3.5px),
                    radial-gradient(circle at 110px 230px, rgba(240,210,120,.5) 0, rgba(240,210,120,.16) 1px, rgba(240,210,120,0) 3px); }
.dust .d2 { --tile: 420px; --o: .7;
  background-image: radial-gradient(circle at 70px 300px, rgba(240,210,120,.4) 0, rgba(240,210,120,.12) 2.5px, rgba(240,210,120,0) 7px),
                    radial-gradient(circle at 330px 90px, rgba(240,210,120,.38) 0, rgba(240,210,120,.1) 2px, rgba(240,210,120,0) 6px),
                    radial-gradient(circle at 220px 380px, rgba(240,210,120,.3) 0, rgba(240,210,120,.08) 3px, rgba(240,210,120,0) 9px); }
.dust .d3 { --tile: 640px; --o: .5;
  background-image: radial-gradient(circle at 500px 200px, rgba(240,210,120,.3) 0, rgba(240,210,120,.07) 5px, rgba(240,210,120,0) 16px),
                    radial-gradient(circle at 140px 520px, rgba(240,210,120,.26) 0, rgba(240,210,120,.06) 6px, rgba(240,210,120,0) 20px); }
@keyframes dust-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-1 * var(--tile)), 0); } }
@media (prefers-reduced-motion: no-preference) {
  .dust .d1 { animation: dust-rise 48s linear infinite; }
  .dust .d2 { animation: dust-rise 80s linear infinite; }
  .dust .d3 { animation: dust-rise 130s linear infinite; }
}
/* the river on the warm base: translucent cards, edges that fade into the same tone */
.river::before { background: linear-gradient(90deg, #171311, rgba(23,19,17,0)); }
.river::after { background: linear-gradient(270deg, #171311, rgba(23,19,17,0)); }
.river .msg { background: rgba(28,24,20,.85); border: 1px solid rgba(231,199,105,.14); }
.river .msg[data-usd] { border-color: rgba(231,199,105,.34); }

/* ---------- legal pages: long-form text in the site's serif ---------- */
.legal { max-width: 70ch; margin: 0 auto; padding: 7rem var(--gutter) 4rem; font-family: var(--serif); font-size: 1.05rem; line-height: 1.65; color: var(--discord-text); }
.legal h1 { font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; color: var(--cream); }
.legal h2 { margin: 2.4rem 0 .6rem; font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--cream); }
.legal p, .legal ul { margin: 0 0 1rem; }
.legal ul { padding-left: 1.3rem; }
.legal li + li { margin-top: .35rem; }
.legal strong { color: var(--cream); font-weight: 600; }
.legal a { color: var(--lavender); text-underline-offset: .2em; }
.legal-effective { font-style: italic; font-size: .9rem; color: var(--quiet); }
.legal-summary { margin: 2rem 0 1rem; padding: 1.1rem 1.3rem .2rem; border: 1px solid var(--rule); border-left: 3px solid var(--gold); background: var(--paper); }
.legal-summary h2 { margin-top: 0; }

/* ---------- phones: the opening stacks, the cards shrink, the legal text tightens ---------- */
@media (max-width: 760px) {
  .hero-copy { position: relative; top: auto; left: auto; max-width: none; padding: 4.9rem 1rem .5rem; }
  .hero-copy h1 { font-size: 1.85rem; max-width: 16ch; }
  .lede { margin-top: .7rem; font-size: .9rem; line-height: 1.45; }
  .who-chip { margin-top: .8rem; padding: .35rem .8rem .35rem .35rem; gap: .6rem; }
  .who-chip img { width: 36px; height: 36px; }
  .who-chip p { font-size: .72rem; }
  .who-chip b { font-size: .9rem; }
  .hero-act { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-top: .9rem; }
  .tally { margin-top: 0; font-size: .75rem; }
  .tally b { font-size: 2.4em; }
  .hero-cta { flex: none; margin-top: 0; padding: .7rem 1rem; font-size: .95rem; }
  .msg { padding: .6rem .65rem; font-size: .72rem; }
  .who { flex-wrap: wrap; row-gap: 0; margin-bottom: .2rem; }
  .who b { overflow-wrap: break-word; }
  .who time { font-size: .65rem; }
  .legal { padding-top: 5.5rem; font-size: 1rem; }
}
@media (max-width: 420px) {
  .wordmark > span:last-child { display: none; }
  .door { font-size: 1.05rem; padding: .9rem 1rem; }
}
@media (max-width: 340px) {
  .hero-copy h1 { font-size: 1.8rem; }
  .who-chip { border-radius: 14px; }
}

/* ---------- the first screen is the hero alone; the river is the second page ---------- */
/* Clear air under the bar, the two columns centred in the screen's height, and the river starting at the fold
   so it arrives on the first scroll. */
.spot-grid { min-height: 100svh; padding: clamp(8rem, 16vh, 11rem) var(--gutter) clamp(3rem, 8vh, 6rem); align-content: center; row-gap: 0; }
.spot .hero-copy { padding: 0; }
.spot-quote p[data-len="xs"] { font-size: clamp(2.4rem, 4.8vw, 4.6rem); }
.spot-quote p[data-len="s"]  { font-size: clamp(1.9rem, 3.6vw, 3.5rem); }
.spot-quote p[data-len="m"]  { font-size: clamp(1.5rem, 2.7vw, 2.6rem); }
.river { padding-top: 1.6rem; }
@media (max-width: 60rem) {
  .spot-grid { align-content: start; padding-top: clamp(6rem, 12vh, 8rem); gap: 2.2rem; }
}
@media (max-width: 760px) {
  .spot-grid { min-height: 0; padding: 5.6rem 1rem 2.2rem; }
  .spot-quote p[data-len="xs"] { font-size: 2rem; }
  .spot-quote p[data-len="s"] { font-size: 1.6rem; }
  .spot-quote p[data-len="m"] { font-size: 1.3rem; }
}
/* wide screens: the type grows into the room it has */
@media (min-width: 100rem) {
  .hero-copy h1 { font-size: 4.8rem; }
  .tally { font-size: 1.1rem; }
  .hero-cta { font-size: 1.2rem; padding: 1.1rem 1.8rem; }
  .who-chip p { font-size: .9rem; }
}

/* ---------- hero placement on wide screens: two rows, no idle corners ---------- */
/* Row one takes the height that is left and centres the headline (left) and the quote (right) in it. Row two is the
   foot of the first screen: one hairline, then the Sky* chip, the number and the button in a band across the width.
   The headline column is the wider one so "Over $1,000,000" never runs into the quote. */
@media (min-width: 60.01rem) {
  .spot-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; row-gap: clamp(2.5rem, 6vh, 4rem);
    align-content: stretch; align-items: center; padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
  .spot .hero-copy { display: contents; }
  .spot .hero-copy h1 { grid-column: 1; grid-row: 1; align-self: center; }
  .spot .spotlight { grid-column: 2; grid-row: 1; align-self: center; }
  .spot-grid::after { content: ""; grid-column: 1 / -1; grid-row: 2; align-self: start; height: 0; border-top: 1px solid rgba(231,199,105,.16); }
  .spot .who-chip { grid-column: 1; grid-row: 2; margin: 1.8rem 0 0; align-self: center; justify-self: start; }
  .spot .who-chip p { font-size: .9rem; }
  .spot .hero-act { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.8rem; padding-left: clamp(1.2rem, 3vw, 2.2rem); }
  .spot .tally { margin: 0; }
  .spot .hero-cta { margin: 0; flex: none; }
}
/* portrait tablets: the hero takes only the height it needs and the river follows, instead of a half-empty screen */
@media (min-width: 60.01rem) and (orientation: portrait) {
  .spot-grid { min-height: 0; grid-template-rows: auto auto; padding-top: clamp(7rem, 10vh, 9rem); padding-bottom: 3.5rem; }
}
@media (max-width: 60rem) and (min-width: 761px) {
  .spot-grid { min-height: 0; padding-bottom: 3rem; }
}
/* wide screens: the grid grows with the room, so the bigger headline still has a column of its own */
@media (min-width: 100rem) {
  .spot-grid { max-width: 100rem; }
  .hero-copy h1 { font-size: 4.6rem; }
}

/* ---------- the pages below the fold, on a desk ---------- */
/* Each step's heading and its lede share one row, heading left and lede right, so the corner beside the heading is
   never empty; the content under them spans the whole width. The content column runs as far right as the thread's
   gutter is wide on the left, and the two halves of each spread are centred on each other. The Join page is a wider
   spread with the card level with the six steps. Phones and tablets keep their own layout. */
@media (min-width: 64.01rem) {
  .thread > section { padding-right: calc(var(--thread-x) + 2.6rem); }
  .inner { max-width: 84rem; }
  .step { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: end; }
  .step > h2 { grid-column: 1; }
  .step > .lead { grid-column: 2; margin-top: 0; padding-bottom: .35em; max-width: 48ch; }
  .step > :not(h2):not(.lead) { grid-column: 1 / -1; }
  .ledger, .price-grid, .screens { align-items: center; column-gap: clamp(3rem, 6vw, 6rem); }
  .why { max-width: 60ch; }
  .plans .fine { max-width: none; }
  .cover-inner { max-width: 76rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; }
  .doors { margin-top: 0; }
  .card-sky { width: 100%; max-width: 30rem; justify-self: end; }
}