/* ============================================================================
   ls_pass.css — THE stylesheet for the State Pass screens (/pass/*).

   OWNER DIRECTIVE (2026-08-18): every page under hoaweekly.com/pass/*
   is styled by this file and this file ONLY. It does NOT load
   ls_evergreen.css — the evergreen sheet is an ARTICLE stylesheet
   (TOC rail, footnotes, bill/case cards, viz chrome) and the pass
   screens are transactional forms that happened to borrow its chrome.
   Two families, two sheets, one home per fact.

   Consequence: this file is self-sufficient. It carries the whole DG4
   scaffold the family needs — ticker mirror, header, hero, content
   band, footer — plus the pass-specific components, so nothing else
   has to be linked for a /pass/ page to render correctly.

   PAGES IT SERVES
     /pass/            website/html/adhoc/pass.html       (buy a pass)
     /pass/signin/     website/html/adhoc/pass/signin.html
     /pass/success/    website/html/adhoc/pass/success.html
     /pass/billing/    website/html/adhoc/pass/billing.html
     /pass/help/       website/html/adhoc/pass/help.html
     plus the function-rendered magic-link page in
     website/functions/api/pass/verify.js, which is the same family.

   DESIGN SOURCE: the owner's DG4 account-pages canvas
   (DG4_Pass_Pages_Redesign.zip, 2026-08-18) — its design-system
   tokens/components are the DG4 canon, so every value below is a token
   from that system, not a lookalike. Design authority for anything not
   answered here: .claude/skills/design-director/SKILL.md.

   ⚠️ PX ONLY, NEVER REM: the legacy Ghost theme sheet (/assets/built/
   screen.css) still ships sitewide and sets html{font-size:62.5%} — a
   10px root. Any rem value here would render at 62.5% of what you
   meant. (This bit ls_paywall.css once; same rule, same reason.)

   ⚠️ NO IMAGE URLs IN THIS FILE (owner rule): hero plates are set with
   an inline background-image on the page's .hw-hero-bg div.

   Scope: everything is under #hw-pass, element-scoped
   (.hw-ticker-mirror), or gated by body:has(#hw-pass) — so the file is
   completely inert anywhere it is loaded by accident.
   ========================================================================= */

/* ── ground, tokens, reset ────────────────────────────────────────── */
#hw-pass, #hw-pass * { box-sizing: border-box; margin: 0; padding: 0; }
#hw-pass {
  --bg: #0b0e14;
  --bg-deep: #080a0f;
  --bg-content: #0a0c10;
  --bg-strip: #07090d;
  --bg-panel: rgba(19, 24, 34, 0.94);
  --bg-field: #0d1118;
  --fill-card: rgba(255, 255, 255, 0.03);
  --fill-card-quiet: rgba(255, 255, 255, 0.02);
  --gold: #ac7d46;
  --gold-bright: #e0a04c;
  --gold-dim: rgba(172, 125, 70, 0.55);
  --gold-rule: rgba(172, 125, 70, 0.6);
  --ink: #f4f1e9;
  --ink-strong: #fbf9f4;
  --ink-dim: #aab1bd;
  --ink-faint: #7e8694;
  --ink-copyright: #67707e;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-divider: rgba(255, 255, 255, 0.12);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#hw-pass a { text-decoration: none; color: inherit; }
#hw-pass button, #hw-pass input, #hw-pass select, #hw-pass textarea { font-family: var(--sans); }
/* ls_site.css still styles bare h2/h3/h4 for the retired light theme —
   including a #e5e7eb border under every h2, which lands as a pale grey
   rule across a dark page (a light-mode leak, design-director §3 rule 5).
   Headings here take ALL their type from a component class, so the bare
   element carries nothing. */
#hw-pass h1, #hw-pass h2, #hw-pass h3, #hw-pass h4, #hw-pass h5, #hw-pass h6 {
  border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none;
}
#hw-pass .hw-wrap { max-width: 1480px; margin: 0 auto; padding: 0 44px; }

/* ── Ghost-theme neutralisers ─────────────────────────────────────────
   The retired Source theme's screen.css still ships sitewide, and its
   .gh-canvas measure would squeeze this full-bleed layout into an
   article column. Same gates the evergreen sheet applies, keyed to
   this family's wrapper. */
body:has(#hw-pass) { background: #0b0e14; }
body:has(#hw-pass) .gh-navigation,
body:has(#hw-pass) .gh-footer,
body:has(#hw-pass) .gh-article-header,
body:has(#hw-pass) .gh-article-image,
body:has(#hw-pass) .hw-article-note,
body:has(#hw-pass) .hw-footer-note,
body:has(#hw-pass) .site-copyright-notice,
body:has(#hw-pass) #hw-toc,
body:has(#hw-pass) .last-updated { display: none !important; }
body:has(#hw-pass) .gh-main,
body:has(#hw-pass) .gh-article { padding: 0 !important; margin: 0 !important; }
body:has(#hw-pass) .gh-content.gh-canvas {
  display: block !important;
  max-width: none !important;
  padding: 0 !important; margin: 0 !important;
}
body:has(#hw-pass) .gh-content.gh-canvas > * { margin: 0 !important; max-width: none !important; }
/* The legal disclaimer bar's skin USED TO BE OVERRIDDEN HERE. Deleted
   2026-08-19: it now has exactly ONE home,
   website/assets/css/ls_notice.css, which the build links into every
   served page. That file also owns the FREEZE (position:sticky), which
   this sheet never set. Do not re-add .hw-notice-bar rules here. */

/* ── ticker mirror ────────────────────────────────────────────────────
   Element-scoped, not #hw-pass-scoped: the block is injected by the
   shared snippet OUTSIDE nothing in particular and must survive any
   page reset. Values are byte-identical to the evergreen copy so the
   strip cannot drift between families (design-director §5). */
.hw-ticker-mirror {
  background: #050608;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #f4f1e9;
}
.hw-ticker-mirror .hw-ticker-in {
  display: flex; align-items: center; gap: 0;
  min-height: 40px;
  max-width: 1480px; margin: 0 auto !important; padding: 0 44px !important;
}
.hw-ticker-mirror .hw-ticker-seg { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hw-ticker-mirror .hw-ticker-seg + .hw-ticker-seg {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  margin-left: 22px !important; padding-left: 22px !important;
}
.hw-ticker-mirror .hw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ac7d46; display: inline-block; flex: none;
  box-shadow: 0 0 6px rgba(172, 125, 70, 0.8);
}
.hw-ticker-mirror .hw-gold-caps { color: #ac7d46; text-transform: uppercase; font-weight: 600; }
.hw-ticker-mirror .hw-date { color: rgba(244, 241, 233, 0.85); text-transform: uppercase; }
.hw-ticker-mirror .hw-sep { color: rgba(244, 241, 233, 0.35); }
.hw-ticker-mirror .hw-ticker-news { color: rgba(244, 241, 233, 0.75); letter-spacing: 0.015em; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.hw-ticker-mirror .hw-ticker-spacer { flex: 1; min-width: 20px; }
.hw-ticker-mirror .hw-arrow-link { color: #ac7d46 !important; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.hw-ticker-mirror .hw-arrow-link:hover { color: #e0a04c !important; }
.hw-ticker-mirror .hw-arrow-link svg { flex: none; }
@media (max-width: 980px) {
  .hw-ticker-mirror .hw-ticker-seg.hw-ticker-newswrap,
  .hw-ticker-mirror .hw-ticker-seg.hw-ticker-view { display: none; }
}
@media (max-width: 720px) {
  .hw-ticker-mirror .hw-ticker-in { padding: 0 22px !important; }
}

/* ── header ───────────────────────────────────────────────────────── */
#hw-pass .hw-header {
  display: flex; align-items: center; position: relative;
  padding-top: 22px; padding-bottom: 22px;
}
#hw-pass .hw-logo { display: flex; align-items: baseline; gap: 10px; flex: none; }
#hw-pass .hw-logo .hw-logo-hoa {
  font-family: var(--serif); font-weight: 700;
  font-size: 34px; letter-spacing: 0.01em; color: #fff; line-height: 1; white-space: nowrap;
}
#hw-pass .hw-logo .hw-logo-weekly {
  font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; white-space: nowrap;
}
#hw-pass .hw-nav {
  display: flex; gap: 38px; margin-left: 92px;
  font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500;
}
#hw-pass .hw-nav a { color: rgba(244, 241, 233, 0.92); padding: 6px 0; white-space: nowrap; }
#hw-pass .hw-nav a:hover { color: var(--gold-bright); }
#hw-pass .hw-nav a.hw-nav-here { color: var(--gold); }
#hw-pass .hw-header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; flex: none; }
#hw-pass .hw-search-btn {
  display: inline-flex; color: rgba(244, 241, 233, 0.9);
  cursor: pointer; background: none; border: none; padding: 0;
}
#hw-pass .hw-search-btn:hover { color: var(--gold-bright); }
#hw-pass .hw-signin {
  font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 500; color: rgba(244, 241, 233, 0.92); white-space: nowrap;
}
#hw-pass .hw-signin:hover { color: var(--gold-bright); }
#hw-pass .hw-header-div { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.22); flex: none; }

/* ── the signed-in account control lives ELSEWHERE ────────────────────
 * It moved to website/assets/css/ls_account.css on 2026-08-19 (owner):
 * the account icon now follows a signed-in visitor across the WHOLE
 * site, so it cannot belong to this family's sheet. The edge
 * (website/paywall/account.js) injects both that stylesheet and the
 * markup, here and on every other page. Nothing about .hw-acct belongs
 * in this file any more.
 */

/* ── buttons ──────────────────────────────────────────────────────── */
#hw-pass .hw-btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: #fff;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer;
  font-family: var(--sans); white-space: nowrap; flex: none;
  transition: background 0.15s ease;
}
#hw-pass .hw-btn-gold:hover { background: var(--gold-bright); color: #fff; }
#hw-pass .hw-btn-gold:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }
#hw-pass .hw-btn-lg { padding: 14px 24px; }
#hw-pass .hw-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent; color: var(--gold);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 11px 20px; border-radius: 4px; border: 1px solid var(--gold-dim);
  cursor: pointer; font-family: var(--sans); white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
#hw-pass .hw-btn-outline:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ── hero ─────────────────────────────────────────────────────────── */
#hw-pass .hw-hero { position: relative; background-color: var(--bg); overflow: hidden; }
#hw-pass .hw-hero-bg { position: absolute; inset: 0; background-size: cover; }
/* The national plate carries its brightest passage (the lit dome) high
   in the frame — exactly where the header controls sit. So this family
   grades with a real scrim across the top, on top of the usual
   left-to-right falloff, or "Sign in" lands on floodlit marble. */
#hw-pass .hw-hero-grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 10, 15, 0.93) 0%, rgba(8, 10, 15, 0.6) 15%, rgba(11, 14, 20, 0.1) 40%, rgba(10, 12, 16, 0.5) 84%, #0a0c10 100%),
    linear-gradient(90deg, #0b0e14 0%, rgba(11, 14, 20, 0.88) 30%, rgba(11, 14, 20, 0.22) 58%, rgba(11, 14, 20, 0) 82%);
}
#hw-pass .hw-hero-in { position: relative; z-index: 2; }
#hw-pass .hw-hero-body { padding-top: 96px; padding-bottom: 132px; }
#hw-pass .hw-eyebrow {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
#hw-pass .hw-eyebrow-rule { width: 54px; height: 2px; background: var(--gold); margin-top: 14px; }
#hw-pass .hw-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 47px; line-height: 1.15; letter-spacing: 0.002em;
  color: var(--ink-strong); max-width: 680px; margin-top: 22px;
  text-shadow: 0 2px 24px rgba(8, 10, 15, 0.55);
}

/* ── content band + the prose column ──────────────────────────────── */
#hw-pass .hw-section { background: var(--bg-content); padding: 58px 0 76px; }
/* One column, one measure, one rhythm: children are spaced by the
   column's gap, never by their own margins — so a new block dropped in
   anywhere inherits the spacing instead of inventing some. */
#hw-pass .hw-pass-col {
  max-width: 880px;
  display: flex; flex-direction: column; gap: 26px;
  /* structural margin cap (design-director §3 rule 12): nothing in this
     column can ever render wider than the measure */
  overflow-x: clip;
}
#hw-pass .hw-pass-col > * { max-width: 100%; }
/* the help page walks the reader through numbered steps — they need
   more air between them than paragraphs inside one step do */
#hw-pass .hw-pass-col-steps { gap: 44px; }
/* a group of blocks the edge shows or hides as one (the sign-in
   screen's two states) still needs the column's rhythm inside it */
#hw-pass .hw-pass-stack { display: flex; flex-direction: column; gap: 26px; }
#hw-pass .hw-pass-stack > * { max-width: 100%; }

#hw-pass .hw-pass-lede { font-size: 16.5px; line-height: 1.75; color: var(--ink-dim); text-wrap: pretty; }
#hw-pass .hw-pass-lede-lg { font-size: 17.5px; line-height: 1.65; }
#hw-pass .hw-pass-body { font-size: 16.5px; line-height: 1.75; color: var(--ink-dim); text-wrap: pretty; }
#hw-pass .hw-pass-note { font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
#hw-pass .hw-pass-fine { font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
#hw-pass .hw-pass-h1 {
  font-family: var(--serif); font-weight: 400; font-size: 31px; line-height: 1.2;
  color: var(--ink-strong);
}
/* inline prose anchors: gold AND underlined, sitewide law (§3 rule 3) */
#hw-pass .hw-pass-col a:not(.hw-arrow-link):not(.hw-btn-gold):not(.hw-btn-outline) {
  color: var(--gold); text-decoration: underline; text-underline-offset: 2px;
}
#hw-pass .hw-pass-col a:not(.hw-arrow-link):not(.hw-btn-gold):not(.hw-btn-outline):hover {
  color: var(--gold-bright);
}
#hw-pass .hw-pass-col strong { color: var(--ink); font-weight: 600; }

/* ── the unlocked chip (pill: dot + gold caps) ────────────────────── */
#hw-pass .hw-chip {
  display: inline-flex; align-items: center; gap: 11px; align-self: flex-start;
  padding: 8px 14px; border: 1px solid var(--gold-dim); border-radius: 999px;
  background: var(--fill-card-quiet);
}
#hw-pass .hw-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  display: inline-block; flex: none; box-shadow: 0 0 6px rgba(172, 125, 70, 0.8);
}
#hw-pass .hw-dot-quiet { width: 6px; height: 6px; box-shadow: none; }
#hw-pass .hw-kicker {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}

/* ── cards (every form and echo panel on the family) ──────────────── */
#hw-pass .hw-card {
  background: var(--fill-card); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 28px 30px 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
/* the help-page step cards sit under a heading, so they carry a little
   less padding and cap at a form's natural width */
#hw-pass .hw-card-form { padding: 26px 28px 28px; gap: 16px; max-width: 560px; }
#hw-pass .hw-card > * { max-width: 100%; }
/* the billing screen's single-action card */
#hw-pass .hw-card-cta { gap: 14px; }
#hw-pass .hw-card-rule { width: 100%; border: 0; border-top: 1px solid var(--hairline); }

/* the billing screen's "your pass covers" card. Same serif treatment as
   the success screen's address echo — a subscriber checking WHICH states
   they pay for is doing the same kind of squint as one checking the
   address a link went to, so it gets the same weight. */
#hw-pass .hw-statescard { gap: 0; }
#hw-pass .hw-statescard .hw-echo { margin-top: 10px; word-break: normal; }
#hw-pass .hw-statescard .hw-pass-fine { margin-top: 12px; }

/* the success screen's address-echo card. Its rhythm is per-element
   rather than one gap: the label sits tight to the address it labels,
   and the rule needs more air than a paragraph break. */
#hw-pass .hw-echobox { gap: 0; }
#hw-pass .hw-echobox .hw-echo { margin-top: 10px; }
#hw-pass .hw-echobox .hw-pass-note { margin-top: 12px; max-width: 640px; }
#hw-pass .hw-echobox .hw-card-rule { margin: 24px 0; }
#hw-pass .hw-echobox form { width: 100%; }
#hw-pass .hw-echobox form .hw-btn-gold { margin-top: 18px; }

/* the address echoed back after checkout. Serif and large on purpose: a
   typo is only cheap to fix while the customer is still looking at it. */
#hw-pass .hw-echo {
  font-family: var(--serif); font-size: 21px; line-height: 1.3;
  color: var(--ink-strong); word-break: break-all;
}

/* ── fields ───────────────────────────────────────────────────────── */
#hw-pass .hw-field { display: flex; flex-direction: column; gap: 7px; width: 100%; }
#hw-pass .hw-field-row { display: flex; gap: 18px; width: 100%; flex-wrap: wrap; }
#hw-pass .hw-field-row .hw-field { flex: 1; min-width: 180px; width: auto; }
#hw-pass .hw-field-narrow { max-width: 460px; }
#hw-pass .hw-field-label {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(172, 125, 70, 0.85); font-weight: 600;
}
#hw-pass .hw-input, #hw-pass .hw-select {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--bg-field); color: rgba(244, 241, 233, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px;
  font-family: var(--sans); font-size: 14.5px; padding: 12px 16px;
}
#hw-pass .hw-input::placeholder { color: var(--ink-faint); }
#hw-pass .hw-input:focus, #hw-pass .hw-select:focus { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
#hw-pass .hw-textarea { min-height: 118px; line-height: 1.65; resize: vertical; }
#hw-pass .hw-select {
  appearance: none; -webkit-appearance: none;
  padding: 13px 42px 13px 16px; border-radius: 8px; cursor: pointer;
}
#hw-pass .hw-select-wrap { position: relative; width: 100%; }
#hw-pass .hw-select-wrap::after {
  content: ""; position: absolute; right: 17px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.6px solid rgba(244, 241, 233, 0.7);
  border-bottom: 1.6px solid rgba(244, 241, 233, 0.7);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
#hw-pass .cf-turnstile { width: 100%; min-height: 0; }

/* ── the plan picker (buy screen; radios, zero JS — CRO D11, 2026-08-21)
   Three plans as native radio rows: the input is visually hidden but
   in-flow-anchored, and :checked styles the row, so the picker works
   with no script and keeps native keyboard/reader semantics. */
#hw-pass .hw-plans {
  border: 0; min-width: 0; width: 100%;
  display: flex; flex-direction: column; gap: 9px;
}
#hw-pass .hw-plans legend {
  padding: 0; margin-bottom: 9px;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(172, 125, 70, 0.85); font-weight: 600;
}
#hw-pass .hw-plan { display: block; position: relative; cursor: pointer; }
#hw-pass .hw-plan input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  top: 50%; left: 16px; pointer-events: none;
}
#hw-pass .hw-plan-box {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px; background: var(--bg-field);
  transition: border-color 0.15s ease, background 0.15s ease;
}
#hw-pass .hw-plan:hover .hw-plan-box { border-color: var(--gold-dim); }
#hw-pass .hw-plan input:checked + .hw-plan-box {
  border-color: var(--gold); background: rgba(172, 125, 70, 0.08);
}
#hw-pass .hw-plan input:focus-visible + .hw-plan-box {
  outline: 2px solid var(--gold-dim); outline-offset: 1px;
}
#hw-pass .hw-plan-radio {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.6px solid rgba(244, 241, 233, 0.45); position: relative;
}
#hw-pass .hw-plan input:checked + .hw-plan-box .hw-plan-radio { border-color: var(--gold); }
#hw-pass .hw-plan input:checked + .hw-plan-box .hw-plan-radio::after {
  content: ""; position: absolute;
  top: 3px; left: 3px; right: 3px; bottom: 3px;
  border-radius: 50%; background: var(--gold);
}
#hw-pass .hw-plan-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
#hw-pass .hw-plan-name {
  font-size: 14.5px; font-weight: 600; color: rgba(244, 241, 233, 0.92);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
#hw-pass .hw-plan-tag {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: #fff; background: var(--gold);
  border-radius: 999px; padding: 3px 8px;
}
#hw-pass .hw-plan-cap { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
#hw-pass .hw-plan-price {
  flex: none; font-family: var(--serif); font-size: 18px; line-height: 1.2;
  color: var(--ink-strong);
}
#hw-pass .hw-plan-per { font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); }

/* the Stripe back-out reassurance (data-hw-if="cancelled") — gold-quiet
   per the family's colour semantics: gold = buy this, calmly still open */
#hw-pass .hw-pass-cancelled {
  padding: 15px 18px; border: 1px solid var(--gold-dim);
  background: rgba(172, 125, 70, 0.07); color: var(--ink-dim);
  border-radius: 6px; font-size: 14.5px; line-height: 1.6;
}

/* ── step headers (gold caps + 62x1 rule — the sitewide pattern) ──── */
#hw-pass .hw-updates-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
#hw-pass .hw-updates-title {
  font-size: 13.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
#hw-pass .hw-updates-rule { width: 62px; height: 1px; background: var(--gold-rule); flex: none; }
#hw-pass .hw-step > .hw-card, #hw-pass .hw-step > form { margin-top: 20px; }

/* ── the row of arrow links that closes a screen ──────────────────── */
#hw-pass .hw-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
#hw-pass .hw-linkrow-div { width: 1px; height: 12px; background: var(--hairline-divider); flex: none; }
#hw-pass .hw-arrow-link {
  color: var(--gold); text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: 0.08em;
}
#hw-pass .hw-arrow-link:hover { color: var(--gold-bright); }
#hw-pass .hw-arrow-link svg { flex: none; }

/* ── result banners ───────────────────────────────────────────────────
   Colour semantics, kept from ls_paywall.css: gold = buy this,
   green = you already have it, clay = something needs your attention. */
#hw-pass .hw-pass-ok {
  padding: 15px 18px; border: 1px solid rgba(113, 183, 132, 0.32);
  background: rgba(113, 183, 132, 0.08); color: #a9d4b3;
  border-radius: 6px; font-size: 14.5px; line-height: 1.6;
}
#hw-pass .hw-pass-err {
  padding: 15px 18px; border: 1px solid rgba(198, 110, 86, 0.32);
  background: rgba(198, 110, 86, 0.08); color: #e0a891;
  border-radius: 6px; font-size: 14.5px; line-height: 1.6;
}
#hw-pass .hw-pass-ok strong, #hw-pass .hw-pass-err strong { color: var(--ink-strong); font-weight: 600; }

/* ── benefit list (the buy screen) ────────────────────────────────── */
#hw-pass .hw-pass-list { list-style: none; }
#hw-pass .hw-pass-list li {
  position: relative; padding-left: 22px; margin: 10px 0;
  font-size: 16px; line-height: 1.65; color: var(--ink-dim);
}
#hw-pass .hw-pass-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* ── footer ───────────────────────────────────────────────────────── */
#hw-pass .hw-footer {
  background: var(--bg-strip); border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 42px 0 26px; text-align: center;
}
#hw-pass .hw-footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px;
  font-size: 13.5px; font-weight: 500; color: rgba(244, 241, 233, 0.9);
}
#hw-pass .hw-footer-nav a:hover { color: var(--gold-bright); }
#hw-pass .hw-footer-logo { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 34px; }
#hw-pass .hw-footer-tag { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); max-width: 620px; margin: 14px auto 0; }
#hw-pass .hw-footer-legal { font-size: 13px; line-height: 1.6; color: var(--ink-faint); margin-top: 26px; }
#hw-pass .hw-footer-legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
#hw-pass .hw-footer-legal a:hover { color: var(--gold-bright); }
#hw-pass .hw-footer-copy { font-size: 12.5px; color: var(--ink-copyright); margin-top: 12px; }

/* ── responsive: the family's 1280 / 980 / 720 breakpoints ────────── */
@media (max-width: 1280px) {
  #hw-pass .hw-nav { margin-left: 48px; gap: 26px; }
  #hw-pass .hw-h1 { font-size: 40px; max-width: 600px; }
}
@media (max-width: 980px) {
  #hw-pass .hw-nav { display: none; }
  #hw-pass .hw-hero-body { padding-top: 56px; padding-bottom: 70px; }
  #hw-pass .hw-section { padding: 46px 0 62px; }
}
@media (max-width: 720px) {
  #hw-pass .hw-wrap { padding: 0 22px; }
  #hw-pass .hw-h1 { font-size: 31px; }
  #hw-pass .hw-hero-body { padding-top: 36px; padding-bottom: 46px; }
  #hw-pass .hw-header-div { display: none; }
  #hw-pass .hw-header-right { gap: 14px; }
  #hw-pass .hw-header .hw-btn-gold { padding: 11px 16px; }
  /* the sitewide mobile header drops the Sign In text (it does not fit
     beside the wordmark and Subscribe) — the account icon does fit, so a
     signed-in subscriber keeps their way into billing and support */
  #hw-pass .hw-header-right .hw-signin { display: none; }
  /* a wrapped step title would leave its rule stranded mid-air on the
     first line; let the rule drop underneath instead */
  #hw-pass .hw-updates-head { flex-wrap: wrap; gap: 10px 18px; }
  /* stacked links do not need the vertical dividers, which would
     otherwise trail off the end of each line */
  #hw-pass .hw-linkrow { flex-direction: column; align-items: flex-start; gap: 12px; }
  #hw-pass .hw-linkrow-div { display: none; }
  #hw-pass .hw-card { padding: 24px 20px 26px; }
  #hw-pass .hw-card-form { padding: 22px 18px 24px; }
  #hw-pass .hw-pass-col { gap: 22px; }
  #hw-pass .hw-pass-col-steps { gap: 38px; }
  #hw-pass .hw-field-row { gap: 14px; }
  #hw-pass .hw-field-row .hw-field { min-width: 0; flex-basis: 100%; }
  #hw-pass .hw-plan-box { padding: 12px 13px; gap: 11px; }
  #hw-pass .hw-btn-gold { white-space: normal; }
  #hw-pass .hw-footer-nav { gap: 12px 22px; }
}