/* AQ-391: DFC landing shell visibility and responsive doors. */
/* AQ-400: #wireHeader .ticker-wrap is deliberately not in this list: the
   LATEST tape is part of the header, so a visitor sees it here too. */
html[data-landing] #workspace,
html[data-landing] #controls-home,
html[data-landing] .status-strip,
html[data-landing] .skip-link,
html[data-landing] #wireHeader #srcBtn,
html[data-landing] #keysOpen,
html[data-landing] .fttools,
html[data-landing] #footOps { display: none !important; }
/* AQ-471: the public preview uses the same reachable Menu and search.
   Sign-in occupies Help's utility cell; plans/account creation remain in Menu. */
html[data-landing] #wireHeader .wh-help { display:none; }
html[data-landing] #wireHeader .wh-signin { display:inline-flex; }
html[data-landing] #wireHeader .wire-page-jumps { 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; }
/* :where(), so this reset weighs nothing and every single-class margin below
   still wins — app.css sets `p{margin-bottom:16px}` globally. */
: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); }
/* 12px, not the siblings' 11.5: this repo's browser acceptance holds every
   reader-visible string to 12px or more, and the front page is not exempt. */
.land-fine { font-family: var(--mono); font-size: 12px; 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 this 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-dark); color: var(--brand); text-decoration: none; }
.land-cta--primary { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.land-cta--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; filter: brightness(1.1); }
.land-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- 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; }
@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 own navy behind it, a
   hairline and a shadow that lifts it off the page. The frame fixes the shape
   — 3:2, the shape tools/landing_shots.py shoots to — so a pair of screens is
   a pair of equal boxes whatever a re-shoot returns, and the crop, when there
   is one, keeps the top, which is where the masthead is. */
.land-screen {
  border-radius: 14px; overflow: hidden; background: #0A2032;
  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 organization's card, a project's dated evidence. Shot at a
   narrow viewport and twice the density, then shown wide, so a date or a
   figure reads at least as large here as it does in the terminal — 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; }
.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 it reads: three commitments, 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-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 limits ------------------------------------------------------------
   The siblings carry plan cards here. This wire has nothing to sell, and the
   honest thing to put in a stranger's eyeline instead is what the wire does
   not yet cover — the same list README.md and the reader's own Sources view
   carry, in the same words. Two columns of bands, same anatomy as a plan card
   minus the price. */
.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(--panel); }
.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: 640px) {
  .land-bands { grid-template-columns: 1fr; padding-bottom: 48px; }
}

/* ---- 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; }
}

/* ---- THE SIGN-IN STRIP IN THE HERO (AQ-326) ---------------------------
   A subscriber arriving at the bare address holds nothing: their 90-day
   session lapsed and the mailed link is long gone. Without this the front page
   would be a sales pitch aimed squarely at the people who have already bought.
   gate.js binds it, and the same function answers the gate box's own form, so
   the two cannot promise different things. */
.land-signin{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--grid-soft);max-width:520px}
.land-signin-l{display:block;margin:0 0 9px;font-size:14px;color:var(--text-dim)}
.land-signin-row{display:flex;gap:8px;flex-wrap:wrap}
.land-signin-row input{flex:1 1 220px;min-width:0;min-height:44px;padding:10px 12px;
  border:1px solid var(--control-border);border-radius:7px;background:var(--panel);
  color:var(--text);font-size:15px}
.land-signin-row input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.land-signin-row .land-cta{min-height:44px;white-space:nowrap}
.land-signin-msg{margin:9px 0 0;min-height:18px;font-size:13px;line-height:1.45;color:var(--brand)}
.land-signin-alt{margin:8px 0 0;font-size:13px;color:var(--text-dim)}
@media(max-width:600px){.land-signin-row .land-cta{width:100%}}