/* 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 product introduction, how access works, the
 * 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, or a sign-in
 * link that has died; every other state — a key being checked, a link being
 * exchanged, the access-key box — keeps the modal gate, so a returning reader
 * never sees a sales page flash before the terminal boots.
 *
 * WHERE IT CAME FROM. The sibling wire built this page on 5 Sep 2026 and this
 * wire had only the modal until 17 Sep (AQ-264): a visitor saw an access box
 * and nothing about what was behind it. The anatomy and the type are the
 * sibling's, so the two front pages read as one house; the copy, the plans
 * and the screens are this wire's own.
 *
 * WHY ITS OWN FILE. app.css is the 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: measured, declarative headlines in the wire's own voice; air
 * and scale with nothing cut; siblings share one anatomy; checkmarks and grey
 * dots, never Yes/No.
 */

/* AQ-471: the public landing uses the same visible Menu and utility grid.
   Reader-only jumps stay hidden until the terminal is available. */
html[data-landing] #app > .shell,
html[data-landing] .skip,
html[data-landing] #wireHeader .wire-page-jumps,
html[data-landing] #keysOpen,
html[data-landing] #footOps { display:none !important; }
/* AQ-527: logged out, the menu is this page's (landing.js): the product
   routes lead only to a sign-in, so they step aside for the page's sections,
   SIGN IN and the trial, as on the Entertainment Wire. HELP steps aside too,
   as it does there, which is what lets the row fit at 1141px. */
.land-nav, .land-tools { display:none; }
html[data-landing] #wireHeader #wireNav > .btn,
html[data-landing] #wireHeader .wh-help { display:none; }
html[data-landing] #wireHeader .land-nav,
html[data-landing] #wireHeader .land-tools { display:flex; }
html[data-landing] #wireHeader .land-tools-ask { background:#154f86; }
html[data-landing] #wireHeader .land-tools-ask:hover { background:#103f6c; }
@media (max-width:1140px) {
  html[data-landing] #wireHeader .land-nav,
  html[data-landing] #wireHeader .land-tools { flex-direction:column; }
  html[data-landing] #wireHeader .land-tools { border-top:1px solid #ffffff40; padding-block:6px; }
}
/* AQ-517: one row on desktop, the account links at its right-hand end. */
@media (min-width:1141px) {
  /* AQ-665: the routes column keeps its one row and the tools column (the
     search, down to its 150px floor) gives way instead; with the old
     minmax(0,1fr) the routes wrapped first, sending the account links under
     them on a wire whose name is longer than the forked wire's. */
  html[data-landing] #wireHeader .topbar { display:grid; grid-template-columns:auto minmax(max-content,1fr) minmax(0,auto); }
  html[data-landing] #wireHeader .topbar-tools { margin-left:0; }
  html[data-landing] #wireHeader .wire-nav { flex-wrap:wrap; min-width:0; }
  html[data-landing] #wireHeader .land-tools { margin-left:auto; }
}

/* ---- 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; }
/* :where(), so the reset weighs nothing. As `.land p` it outranked every
   single-class rule below that sets a paragraph's margin: the access rule's
   `margin: 0 auto` lost, and the sentence sat flush left at 613 px on a 1440
   screen, with the captions' margins gone too (measured on the sibling wire,
   17 Sep 2026). */
:where(.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-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; }
/* Expired-link feedback survives the retired account card (AQ-365). */
.land-hero .gate-msg { margin: 0; max-width: 560px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--text); text-align: center; min-height: 0; }
.land-hero .gate-msg:empty { display: none; }
.land-hero .gate-msg--dim { color: var(--text-dim); }
@media (max-width: 560px) {
  .land-hero { padding-top: 56px; }
}

/* ---- 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: an opened deal, the reports behind it, 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. */
.land-screen--close img { aspect-ratio: auto; object-fit: fill; }
.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; }
/* ---- the product tour: "Take a look inside." (AQ-641) -----------------------
   Ported from the sibling wire. Theme tokens, never a fixed navy: the screens
   are dark captures on #081B2B, and a navy box hid their edges. --panel is the
   paper wash in the light theme. scripts/test_landing_tour.cjs holds it. */
.land-stage { background: var(--panel); color: var(--text); border: 1px solid var(--grid); padding: 32px; border-radius: 16px; }
.land-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; text-align: left; }
.land-stage-top h2 { margin: 10px 0 0; font: 500 34px/1.1 var(--serif); }
.land-tour-toggle { color: var(--text); background: var(--bg); border: 1px solid var(--grid); border-radius: 6px; padding: 10px 14px; font: 500 12px/1.3 var(--sans); cursor: pointer; min-height: 44px; white-space: nowrap; }
.land-tour-toggle[hidden] { display: none; }
.land-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 8px; margin-bottom: 24px; } /* AQ-665: one column per tab (nrg has five) */
.land-tab { position: relative; overflow: hidden; padding: 16px 18px; min-height: 78px; background: var(--bg); color: var(--text-dim); border: 1px solid var(--grid); border-radius: 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; font: 600 16px/1.2 var(--sans); text-align: left; cursor: pointer; }
.land-tab i { color: var(--faint); font: 400 12px/1.4 var(--sans); }
.land-tab:hover { background: var(--panel2); color: var(--text); }
.land-tab[aria-selected="true"] { color: #fff; background: #1d6bb4; border-color: #6ca4dd; }
.land-tab[aria-selected="true"] i { color: #e9f1f8; }
.land-tab[aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: #add8ff; transform-origin: left; }
.land-stage.is-playing .land-tab[aria-selected="true"]::after { animation: land-tour-progress 6.5s linear forwards; }
@keyframes land-tour-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.land-panel[hidden] { display: none; }
.land-stage-note { color: var(--text); font: 400 14px/1.6 var(--sans); margin: 12px 0 0; }
.land-stage .land-caption { margin: 8px 0 0; text-align: left; }
.land-stage :is(a,button):focus-visible { outline-color: var(--brand); }
@media (max-width: 560px) {
  .land-hero-screen { padding-inline: 12px; }
  .land-stage { padding: 20px 12px; border-radius: 12px; }
  .land-stage-top { gap: 12px; padding-inline: 4px; margin-bottom: 20px; }
  .land-stage-top h2 { font-size: 28px; }
  .land-tour-toggle { padding-inline: 10px; }
  .land-tabs { gap: 6px; margin-bottom: 16px; }
  .land-tab { padding: 12px 2px; min-height: 48px; align-items: center; text-align: center; font-size: 12px; }
  .land-tab i { display: none; }
}
@media (max-width: 360px) {
  .land-tabs { grid-auto-flow: row; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .land-stage.is-playing .land-tab[aria-selected="true"]::after { animation: none; }
}
/* Hero artwork: the two-monitor reel, edge to edge with the terminal screen
   below; land-wrap gives it the screen's gutter. The video sits over the
   screens only; its box and the gap it must leave between the monitors are
   the 2560x937 still's geometry (build/hero_reel). */
.land-hero-art { margin: 0 auto 16px; }
.land-hero-art button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.land-hero-art button:disabled { cursor: default; }
.land-hero-art img { display: block; width: 100%; height: auto; }
.land-hero-art video { position: absolute; left: .3906%; top: 1.0672%; width: 99.375%; height: auto; opacity: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 48.35%, transparent 48.35%, transparent 51.45%, #000 51.45%);
  mask-image: linear-gradient(90deg, #000 48.35%, transparent 48.35%, transparent 51.45%, #000 51.45%); }
.land-hero-art.is-live video { opacity: 1; }
.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-mute { color: var(--text-dim); }
/* AQ-526: the three ways in, as one ruled box of cells sharing borders */
.land-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--grid); border-radius: 14px 14px 0 0; overflow: hidden; }
.land-step { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; text-align: left; }
.land-step + .land-step { border-left: 1px solid var(--grid); }
.land-step--pick { background: var(--bg2); box-shadow: inset 0 3px 0 var(--brand-d); }
.land-step-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.land-step--pick .land-step-n { color: var(--brand-d); }
.land-step-title { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.12; letter-spacing: -.01em; color: var(--text); }
.land-step-cost { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--text); padding-bottom: 12px; border-bottom: 1px solid var(--grid-soft); }
.land-step-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--text-dim); flex: 1; }
.land-step-list li { display: flex; gap: 8px; align-items: flex-start; }
.land-step .land-link { align-self: flex-start; margin-top: 6px; }
.land-trial-note { display: flex; flex-direction: column; gap: 6px; padding: 20px 26px; border: 1px solid var(--grid); border-top: 0; border-radius: 0 0 14px 14px; text-align: left; }
.land-trial-note h3 { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--text); }
.land-trial-note .land-p { max-width: 100ch; }
/* the cells share rows, so a title that wraps moves its row in all three and
   the costs, the lists and the links stay level across the box */
@media (min-width: 901px) {
  .land-step { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; }
  .land-step .land-link { align-self: end; justify-self: start; }
}
@media (max-width: 900px) {
  .land-path { grid-template-columns: 1fr; }
  .land-step + .land-step { border-left: 0; border-top: 1px solid var(--grid); }
}

/* ---- 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-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-beside { padding-bottom: 64px; gap: 24px; }
  .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 on the
   sibling wire 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%; }
}

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