/* landing.css — the wire's front page for a reader who is not signed in.
 *
 * WHAT THIS IS. index.html carries the terminal AND, hidden until gate.js
 * decides, the landing: the sign-in as the hero, how access works, the four
 * instruments shown large, the plans folded in from subscribe.html and the
 * table of what each plan opens. gate.js reveals it (html[data-landing]) in
 * the one state where a visitor has nothing to sign in with; every other
 * state — a key being checked, a link being exchanged, the operator key —
 * keeps the modal gate, so a returning subscriber never sees a sales page
 * flash before the terminal boots.
 *
 * WHY ITS OWN FILE. app.css is 236 KB of terminal; the landing is a page a
 * stranger reads once. Everything here is scoped to .land or to
 * html[data-landing], reads app.css's tokens (so the dark theme comes for
 * free) and never restyles the terminal.
 *
 * THE REGISTER (Tobias, 5 Sep 2026): measured, declarative headlines in the
 * wire's own voice; "lofty" means air and scale with nothing cut; siblings
 * share one anatomy; checkmarks and grey dots, never Yes/No.
 */

/* ---- the chrome in landing mode ------------------------------------------
   The masthead is the terminal's own band. The search field, the section
   keys, SOURCES, the jump menu and the LATEST ticker are for a reader who is
   in; a visitor gets the wordmark, the two doors and the theme control. The
   market rail stays: the index tape and the clocks are public figures, and
   they say "terminal" before a word is read. */
html[data-landing] body { overflow: auto; }
html[data-landing] #app > .shell,
html[data-landing] .ticker-wrap,
html[data-landing] .topbar .searchbox,
html[data-landing] .topbar .shell-nav,
html[data-landing] .topbar #srcBtn,
html[data-landing] .topbar #navBtn,
html[data-landing] .navsheet,
html[data-landing] .shell-tabs,
html[data-landing] .ftkeys,
html[data-landing] #footOps { display: none !important; }
html[data-landing] body.has-tabs { padding-bottom: 0; }
html[data-landing] .topbar .topbar-tools { margin-left: auto; }
.land-tools { display: none; align-items: center; gap: 8px; }
html[data-landing] .land-tools { display: flex; }
.land-tools .btn { white-space: nowrap; }
@media (max-width: 620px) {
  .land-tools .land-tools-ask { display: none; }
}
/* the tape hides itself when there are no figures; the rail must not keep a
   hairline box open for it */
html[data-landing] .market-rail .gei-strip:empty { display: none; }

/* ---- the page ------------------------------------------------------------- */
.land { display: block; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.land[hidden] { display: none; }
.land * { box-sizing: border-box; }
.land-wrap { max-width: 1360px; margin: 0 auto; padding: 0 20px; }
.land-narrow { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.land p { margin: 0; }

.land-eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.land-sec .land-eyebrow { font-size: 13px; }
.land-h1, .land-h2, .land-h3, .land-h4 {
  margin: 0; font-family: var(--serif); font-weight: 600; color: var(--text);
  text-wrap: balance;
}
.land-h1 { font-size: clamp(44px, 5.3vw, 76px); line-height: 1.0; letter-spacing: -.03em; max-width: 16ch; }
.land-h2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -.02em; max-width: 22ch; }
.land-h3 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.08; letter-spacing: -.015em; }
.land-h3--pair { font-size: clamp(26px, 2.4vw, 34px); }
.land-h4 { font-size: clamp(24px, 2vw, 28px); line-height: 1.12; letter-spacing: -.01em; }
.land-lede { font-size: 20px; line-height: 1.55; color: var(--text-dim); max-width: 54ch; }
.land-lede--s { font-size: 18px; max-width: 58ch; }
.land-lede--m { font-size: 17px; max-width: 60ch; }
.land-p { font-size: 15.5px; line-height: 1.55; color: var(--text-dim); }
.land-fine { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; line-height: 1.6; color: var(--faint); }
.land-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.land-fine a:hover { color: var(--brand); }

/* the two button weights the page uses, in Inter — a reader's action, not a
   terminal control, so they do not borrow .btn's mono uppercase */
.land-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 26px; border-radius: 12px;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--grid); color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.land-cta:hover { border-color: var(--brand-d); color: var(--brand-d); text-decoration: none; }
.land-cta--primary { background: var(--brand-d); border-color: var(--brand-d); color: #fff; }
.land-cta--primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.land-cta[disabled] { opacity: .6; cursor: progress; }
.land-cta:focus-visible, .land-signin input:focus-visible, .land-signin .btn:focus-visible, .land-link:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.land-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--brand); text-decoration: none; }
.land-link:hover { text-decoration: underline; }

/* ---- a section: eyebrow, statement, lede — centred, at scale -------------- */
.land-sec { padding: 0 20px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.land-air { height: 128px; }
.land-air--s { height: 24px; }
@media (max-width: 780px) {
  .land-air { height: 72px; }
  .land-sec { padding-bottom: 36px; }
  .land-lede { font-size: 16px; }
  .land-lede--s, .land-lede--m { font-size: 16px; }
}

/* ---- hero ----------------------------------------------------------------- */
.land-hero { padding: 96px 20px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.land-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; margin-top: 6px; }
.land-signin {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 10px; padding: 18px 22px; border-radius: 16px; background: var(--bg2);
  width: 100%; max-width: 560px;
}
.land-signin-lead { font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--text); }
.land-signin .gate-f { display: flex; gap: 8px; width: 100%; }
.land-signin input {
  flex: 1; min-width: 0; padding: 10px 14px; min-height: 46px;
  font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .04em;
  background: var(--field); border: 1px solid var(--grid); border-radius: 10px; color: var(--text);
}
.land-signin input::placeholder { color: var(--faint); }
.land-signin input:focus { border-color: var(--brand-d); outline: none; }
.land-signin .btn { min-height: 46px; padding: 8px 16px; border-radius: 10px; white-space: nowrap; }
/* gate.js writes its answers here — the same #gateM it fills in the modal */
.land-signin .gate-msg { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--text); text-align: center; }
.land-signin .gate-msg:empty { display: none; }
.land-signin .gate-msg--dim { color: var(--text-dim); }
@media (max-width: 560px) {
  .land-hero { padding-top: 56px; }
  .land-signin .gate-f { flex-direction: column; }
  .land-signin input { font-size: 16px; }   /* 16px or iOS zooms the page on focus */
}

/* ---- a screen: the instrument itself, large --------------------------------
   Every capture sits in the same frame: the terminal's navy behind it, a
   hairline, and a shadow that lifts it off the page. The frame fixes the
   shape — 3:2, the shape the captures are shot to — so a pair of screens is
   a pair of equal boxes whatever a re-shoot returns; the crop, when there is
   one, keeps the top of the screen, which is where the masthead is. */
.land-screen {
  border-radius: 14px; overflow: hidden; background: #081B2B;
  box-shadow: 0 40px 100px -50px rgba(10,32,50,.55), 0 0 0 1px rgba(10,32,50,.08);
}
.land-screen img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; }
/* the close-ups: a clause, a regulator rail, a month of the diary. Shot at a
   narrow viewport and twice the density, then shown wide, so a figure or a
   date reads at least as large as it does on the page itself — and at their
   own height, because a crop would cut the sentence the picture exists to
   show. The strip variant is the welcome page's, on the terminal's paper. */
.land-screen--close img { aspect-ratio: auto; object-fit: fill; }
.land-screen--strip { background: var(--bg2); padding: 14px; }
.land-screen--strip img { aspect-ratio: auto; object-fit: fill; border-radius: 6px; }
.land-shot-cap { margin: -18px 0 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.land-hero-screen { padding: 24px 20px 0; }
.land-caption { margin: 14px 20px 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); line-height: 1.6; }
.land-caption time { color: inherit; }

/* ---- how access works: three states, one anatomy ---------------------------- */
.land-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 32px; }
.land-state { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--grid); }
.land-state-title { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.01em; color: var(--text); min-height: 68px; }
.land-rule { margin: 0 auto; padding: 0 20px; text-align: center; font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--text); max-width: 46ch; }
@media (max-width: 900px) {
  .land-states { grid-template-columns: 1fr; gap: 24px; }
  .land-state-title { min-height: 0; }
  .land-rule { font-size: 20px; }
}

/* ---- what is inside: the instruments, weighted by what they are ------------- */
.land-show { display: flex; flex-direction: column; gap: 32px; padding-bottom: 120px; }
.land-show-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.land-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 8px 20px 0; }
.land-mark { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--grid); }
.land-mark b { font-weight: 600; font-size: 16px; color: var(--text); }
.land-mark span { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.land-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding-bottom: 120px; }
.land-pair-item { display: flex; flex-direction: column; gap: 14px; }
.land-beside { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding-bottom: 120px; }
.land-beside--flip { grid-template-columns: 5fr 7fr; }
.land-beside--flip > .land-screen { order: 2; }
.land-beside .land-pair-item .land-p { max-width: 52ch; }
.land-show--tight { padding-bottom: 64px; }
@media (max-width: 1000px) {
  .land-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .land-show, .land-pair, .land-beside { padding-bottom: 64px; gap: 24px; }
  .land-pair, .land-beside, .land-beside--flip { grid-template-columns: 1fr; }
  .land-beside--flip > .land-screen { order: 0; }
  .land-marks { grid-template-columns: 1fr; gap: 18px; padding: 0; }
}

/* ---- the plans: four cards, one anatomy ---------------------------------------
   The same slots in the same order on every card — name, line, price, action,
   note, what it opens — so a reader compares by reading across. The
   recommended plan is lifted by a border and a shadow, not by a different
   shape. */
.land-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-bottom: 28px; }
.land-plan {
  display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 26px;
  border-radius: 18px; background: var(--bg2); border: 1px solid transparent;
}
.land-plan--pick { background: var(--bg); border-color: var(--brand-d); box-shadow: 0 30px 80px -50px rgba(29,107,180,.45); }
.land-plan-tag { min-height: 20px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-d); }
.land-plan-name { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -.01em; color: var(--text); }
.land-plan-line { font-size: 14.5px; line-height: 1.5; color: var(--text-dim); min-height: 44px; }
.land-plan-price { display: flex; align-items: baseline; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.land-plan-price b { font-family: var(--mono); font-weight: 600; font-size: 38px; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.land-plan-price span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.land-plan .land-cta { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 15px; }
.land-plan-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--faint); text-align: center; min-height: 18px; }
.land-plan-list {
  margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--grid-soft); list-style: none;
  display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--text-dim);
}
.land-plan-list li { display: flex; gap: 8px; align-items: flex-start; }
.land-plan-list b { color: var(--text); font-weight: 600; }
.land-check { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.land-check path { fill: none; stroke: var(--up-l); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.land-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 72px; }
.land-band { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border-radius: 18px; background: var(--bg2); }
.land-band-name { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--text); }
.land-band .land-p { font-size: 14.5px; }
@media (max-width: 1100px) {
  .land-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .land-plans { grid-template-columns: 1fr; }
  .land-plan { padding: 22px 20px 20px; }
  .land-plan-line, .land-plan-price { min-height: 0; }
  .land-bands { grid-template-columns: 1fr; padding-bottom: 48px; }
}

/* ---- what each plan opens: a table read down a column ------------------------
   A real table, for the reader who cannot see it: the row header names the
   feature, the column header names the plan, a checkmark or a grey dot says
   the rest — and says it in words to a screen reader. */
.land-cmp-head { padding-bottom: 20px; }
/* position: relative, or the visually-hidden words in the cells (absolutely
   positioned) escape the scroller and widen the page — measured at 390px:
   the document scrolled to 672 while nothing visible passed 370 */
.land-cmp-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.land-cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.land-cmp caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.land-cmp thead th {
  padding: 12px; text-align: center; font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.land-cmp thead th:first-child { text-align: left; }
.land-cmp thead th.pick { background: var(--bg2); color: var(--brand-d); border-radius: 10px 10px 0 0; }
.land-cmp tbody th {
  padding: 13px 16px 13px 0; text-align: left; font-weight: 600; font-size: 14.5px; color: var(--text);
  border-top: 1px solid var(--grid-soft); width: 32%;
}
.land-cmp tbody th small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.land-cmp tbody td { padding: 13px 12px; text-align: center; border-top: 1px solid var(--grid-soft); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--text); }
.land-cmp tbody td.pick { background: var(--bg2); }
.land-cmp tbody tr:last-child td.pick { border-radius: 0 0 10px 10px; }
.land-cmp td .land-check { display: inline-block; margin: 0; vertical-align: middle; }
.land-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grid); vertical-align: middle; }
.land-cmp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.land-vat { padding: 0 20px 120px; }
@media (max-width: 780px) {
  .land-vat { padding-bottom: 64px; }
}

/* ---- the close ------------------------------------------------------------- */
.land-close { padding: 0 20px 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.land-close .land-h2 { font-size: clamp(32px, 3.4vw, 48px); }
.land-close-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
@media (max-width: 780px) {
  .land-close { padding-bottom: 64px; }
  .land-close-ctas { width: 100%; flex-direction: column; }
  .land-close-ctas .land-cta, .land-hero-ctas .land-cta { width: 100%; }
}

/* ---- the welcome page borrows this file ---------------------------------------
   welcome.html is the page a new subscriber lands on from Stripe. It shares
   the masthead band and the type above; what follows is only its own shape. */
.wel { padding: 64px 20px 44px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: start; max-width: 1360px; margin: 0 auto; }
.wel-l { grid-column: span 6; display: flex; flex-direction: column; gap: 24px; }
.wel-r { grid-column: span 6; display: flex; flex-direction: column; gap: 16px; }
.wel .land-h1 { font-size: clamp(40px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.02em; max-width: none; }
.wel .land-lede { font-size: 17px; max-width: 46ch; }
.wel-link { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: 1px solid var(--grid); border-radius: 14px; background: var(--bg2); }
.wel-link .land-eyebrow { color: var(--brand); letter-spacing: .14em; }
.wel-link p { font-size: 15px; line-height: 1.55; color: var(--text); }
.wel-link .addr { font-family: var(--mono); font-weight: 600; }
.wel-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.wel-acts .land-cta { min-height: 46px; padding: 12px 18px; font-size: 14.5px; }
.wel-moves { display: flex; flex-direction: column; gap: 14px; }
.wel-move { display: flex; gap: 14px; align-items: flex-start; }
.wel-move i {
  font-style: normal; font-family: var(--mono); font-weight: 600; font-size: 12px; color: #fff; background: var(--brand-d);
  border-radius: 6px; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.wel-move div { display: flex; flex-direction: column; gap: 3px; }
.wel-move b { font-weight: 600; font-size: 15px; color: var(--text); }
.wel-move span { font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.wel-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--grid); border-radius: 9px; overflow: hidden; background: var(--bg); }
.wel-terms > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.wel-terms > div + div { border-left: 1px solid var(--grid); }
.wel-terms > div:last-child { background: var(--bg2); }
.wel-terms .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.wel-terms .v { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.wel-terms[hidden] { display: none; }
.wel-fine { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); max-width: 62ch; }
.wel-fine kbd { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); border: 1px solid var(--grid); border-radius: 6px; padding: 2px 7px; }
.wel-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wel-screens .land-screen { border-radius: 10px; }
.wel-note { padding: 22px 24px; border-left: 3px solid var(--brand-d); background: var(--bg2); border-radius: 0 12px 12px 0; display: flex; flex-direction: column; gap: 10px; }
.wel-note p { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--text); }
.wel-note span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.wel-msg { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--text); }
.wel-msg:empty { display: none; }
/* on the masthead's navy, which both themes share */
.wel-status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.92); white-space: nowrap; }
.wel-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--up-l); box-shadow: 0 0 0 2px rgba(255,255,255,.16); }
.wel-status[hidden] { display: none; }
.wel-foot { margin-top: 24px; padding: 16px 20px 18px; border-top: 1px solid var(--grid-soft); background: var(--bg2); }
.wel-foot .land-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
/* The fourteen-link legal row (.ftlegal), byte for byte the row every footer
   carries. footer.css styles it for the dark band and is not loaded here, so it
   takes this footer's fine print from .land-fine, on a line of its own above
   the copyright. */
.wel-foot .wel-legal { flex-basis: 100%; }
.wel-foot .wel-legal .ftlegal { margin: 0; }
@media (max-width: 900px) {
  .wel { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .wel-l, .wel-r { grid-column: auto; }
  .wel-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wel-terms > div:nth-child(3) { border-left: 0; }
  .wel-terms > div:nth-child(n+3) { border-top: 1px solid var(--grid); }
}
@media (max-width: 480px) {
  .wel-screens { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .land-cta { transition: none; }
}