/* SeminaryU landing page.
   This layer CONSUMES the shared design-token system (static/tokens.css with
   data-depth="marketing"). The `--lp-*` names below are ALIASES of the shared
   tokens, not definitions — no hardcoded brand hex lives here, so the marketing
   surface stays in lockstep with the tokens every later page (dashboard,
   catalog, lesson) reuses. Page-only decorative values (course-thumb gradients)
   are the sole local exception and are flagged inline. */

.lp {
  --lp-ink: var(--ink);
  --lp-bg: var(--bg);
  --lp-surface: var(--surface);
  --lp-surface-low: var(--surface-2);
  --lp-surface-high: var(--n-200);
  --lp-muted: var(--muted);
  --lp-outline: var(--outline);
  --lp-outline-strong: var(--outline-strong);
  /* ---- LEAD family: follows the depth. Azure is action. ----
     Renamed on 2026-08-10 (ruling §Q1.5) from a warm-sounding family. Those
     aliased --lead, so Lane A's azure-led depth retune silently repainted
     every "bronze" accent on this page and took one label to 1.48:1. An alias
     named for a hue it does not paint is a rename waiting to be wrong. */
  --lp-lead: var(--lead);
  --lp-lead-2: var(--lead-2);
  --lp-lead-soft: var(--lead-soft);

  /* ---- WARM family: PINNED to bronze. Never follows --lead. ----
     This is the invariant the old naming destroyed: a future depth retune
     moves the lead family and leaves these untouched. Bronze is not the
     marketing depth's lead — it is warmth-with-weight. */
  --lp-warm: var(--su-bronze);        /* 5.42 on cream */
  --lp-warm-2: var(--su-bronze-2);    /* 3.74 on cream — DISPLAY/GRAPHIC ONLY */
  --lp-warm-deep: var(--su-bronze-deep);
  --lp-warm-soft: var(--su-bronze-soft);
  --lp-on-dark-warm: var(--ap-gold);  /* 8.15 on navy — warm emphasis on dark */
  --lp-sage: var(--ok);
  --lp-serif: var(--serif);
  --lp-sans: var(--sans);
  --lp-mono: var(--mono);
  --lp-r-md: var(--r-md);
  --lp-r-lg: var(--r-lg);
  --lp-r-xl: var(--r-xl);
  --lp-shadow-1: var(--shadow-1);
  --lp-shadow-2: var(--shadow-2);
  --lp-lead-grad: linear-gradient(135deg, var(--lead), var(--lead-2));
  --lp-warm-grad: linear-gradient(135deg, var(--su-bronze), var(--su-bronze-2));
  background: var(--lp-bg);
}
.lp * { box-sizing: border-box; }
.lp body, body.lp { margin: 0; }
.lp { color: var(--lp-ink); font-family: var(--lp-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 92px; }
.lp ::selection { background: rgba(139,84,33,.26); }
.lp a { color: inherit; text-decoration: none; }
.lp h1, .lp h2, .lp h3, .lp h4 { font-family: var(--lp-serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 0; }
.lp p { margin: 0; }
.lp ul, .lp ol { margin: 0; padding: 0; list-style: none; }

.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.lp :focus-visible { outline: 2px solid var(--lp-lead); outline-offset: 3px; border-radius: 4px; }
/* QA 2026-08-10 (ISSUE-001): the same specificity trap Audit #1 documents for
   the CTA. `.lp a { color: inherit }` is (0,1,1) and beat `.lp-skip` at (0,1,0),
   so the skip link inherited ink onto its ink ground — 1.00:1, invisible to the
   keyboard user who tabs onto it first. `.lp a.lp-skip` is (0,2,1) and wins
   without another !important. Cream on ink is 15.67. */
.lp a.lp-skip { position: absolute; left: -9999px; top: 0; background: var(--lp-ink); color: var(--lp-bg); padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; }
.lp-skip:focus { left: 0; }

/* ── Buttons (sm = 44px min for touch, per DESIGN.md) ── */
.lp-btn { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 28px; border-radius: 9999px; font-weight: 600; font-size: 15.5px; border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.lp-btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.lp-btn:active { transform: translateY(1px); }
/* Audit #1: bronze CTA is white on EVERY background. !important beats the
   `.lp a { color: inherit }` rule (higher specificity) that was making the
   text inherit dark ink in light sections — dark-on-bronze fails AA. Locked. */
.lp-btn-primary { background: var(--lp-lead-grad); color: #fff !important; box-shadow: 0 6px 20px rgba(5,104,162,.34); }
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(5,104,162,.42); }
.lp-btn-ghost { border-color: var(--lp-outline-strong); color: var(--lp-ink); }
.lp-btn-ghost:hover { border-color: var(--lp-lead); color: var(--lp-lead); }
.lp-btn-ghost-d { border-color: rgba(255,255,255,.5); color: #fff; }
.lp-btn-ghost-d:hover { border-color: #fff; color: #fff; }

/* ── Coin mark + text wordmark — BRAND_MARK_V2-OFF ONLY (M3 deferred) ──
   RULING-2026-08-14 M3 orders these deleted as dead, but they are dead only
   with BRAND_MARK_V2 on: welcome.html's flag-off brand rows still render
   .lp-coin/.lp-wordmark/.lp-u/.lp-wordmark-rev/.lp-u2/.lp-byline/.lp-fbyline.
   They go when BRAND_MARK_V2 retires — same sequencing as tokens.css .coin. */
.lp-coin { display: inline-grid; place-items: center; width: var(--coin,38px); height: var(--coin,38px); border-radius: 50%; color: var(--lp-bg); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.34), transparent 58%), var(--lp-warm-grad); box-shadow: 0 6px 20px color-mix(in srgb, var(--lp-warm) 30%, transparent); flex: none; }
.lp-coin.ink { background: linear-gradient(135deg, color-mix(in srgb, var(--lp-warm) 8%, var(--ink)), var(--ink)); }
.lp-coin svg { width: 64%; height: 64%; }
.lp-wordmark { font-family: var(--lp-serif); font-weight: 600; font-size: 21px; letter-spacing: -.025em; }
.lp-u { color: var(--lp-warm); }
.lp-wordmark-rev { color: var(--lp-surface); }
.lp-u2 { color: var(--lp-on-dark-warm); }
.lp-byline { font-size: 10.5px; color: var(--lp-muted); border-left: 1px solid var(--lp-outline); padding-left: 11px; white-space: nowrap; }
.lp-fbyline { font-size: 12px; white-space: nowrap; }

/* ── Feather line icons (ported from handoff) + APIIS co-brand lock ── */
.lp-ic { width: 1em; height: 1em; display: block; }
.lp-glb { height: 72px; width: auto; object-fit: contain; flex: none; }

.lp-accent { color: var(--lp-warm); }
.lp-accent2 { color: var(--lp-warm-2); }
.lp-eyebrow { font-family: var(--lp-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lp-muted); display: inline-flex; align-items: center; gap: 9px; }
.lp-eyebrow-c { justify-content: center; }
.lp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-warm); }

/* ── Top bar ── */
.lp-topbar { position: sticky; top: 0; z-index: 50; height: 72px; display: flex; align-items: center; background: color-mix(in srgb, var(--lp-bg) 86%, transparent); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--lp-outline); transition: box-shadow .2s; }
.lp-scrolled { box-shadow: 0 6px 26px rgba(27,26,23,.09); }
.lp-topbar-inner { display: flex; align-items: center; gap: 22px; width: 100%; }
.lp-brand { display: inline-flex; align-items: center; gap: 11px; }
.lp-nav { display: flex; gap: 4px; }
.lp-nav a { font-size: 14px; color: var(--lp-muted); padding: 7px 12px; border-radius: 9999px; }
.lp-nav a:hover { background: color-mix(in srgb, var(--lp-ink) 6%, transparent); color: var(--lp-ink); }
.lp-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lp-signin { font-size: 14px; font-weight: 600; color: var(--lp-ink); }
.lp-signin:hover { color: var(--lp-lead); }

/* ── Hero (centered + cream) ── */
/* §5: the atmosphere wash paints from the two families, not from literal
   rgba() copies of them. The old values were hardcoded --su-bronze and
   --ap-blue-deep; a depth retune moved the tokens and left these stale,
   which is the same drift that produced the --lp-bronze collapse. ~5% per
   spec (was 7/6%) — imperceptible on a decorative wash, correct at the
   token layer. Unflagged for the same reason the Lane C alias fix was. */
.lp-hero { background:
  radial-gradient(600px 320px at 80% -10%, color-mix(in srgb, var(--lp-warm) 5%, transparent), transparent 60%),
  radial-gradient(560px 320px at 12% 0%, color-mix(in srgb, var(--lp-lead) 5%, transparent), transparent 60%); }
/* Audit #4: centered hero variant — trimmed vertical padding so the cream
   space below the reassure line doesn't read thin/empty (no hero-media card). */
.lp-hero-inner { padding: 72px 0 64px; text-align: center; max-width: 720px; }
.lp-hero .lp-wrap { display: flex; flex-direction: column; align-items: center; }
.lp-h1 { font-size: clamp(42px, 5.6vw, 76px); font-weight: 600; letter-spacing: -.035em; line-height: .98; margin: 18px 0 0; }
.lp-hero-sub { font-size: 20px; color: var(--lp-muted); line-height: 1.5; max-width: 46ch; margin: 20px 0 0; }
.lp-hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.lp-hero-actions.lp-center { justify-content: center; }
.lp-reassure { font-size: 13.5px; color: var(--lp-muted); margin-top: 20px; }
.lp-check { color: var(--lp-sage); display: inline-flex; }
.lp-check .lp-ic { width: 16px; height: 16px; }

/* ── Credibility strip (dark) ──
   Ruling §Q1.2: this band takes BOTH changes — navy ground and gold accent.
   Gold on ink measures 12.07 and would pass, so contrast alone does not force
   the ground change; the brand does. `#1B1A17` is the body ink, not a surface,
   and a near-black band on warm paper reads as a panel borrowed from another
   system. Navy is the structural ground the rest of the product already uses
   for rails, footers and credential heads.

   Split deliberately: the TEXT colours below are unconditional, because
   `.lp-accent2` was shipping at 1.48:1 and a live accessibility defect must not
   wait behind a flag. Only the GROUND is gated by WELCOME_BRAND_V2 — it is the
   one genuinely new structural decision on a public page. Both readings pass:
   gold on ink 12.07, gold on navy 8.15. */
.lp-cred { background: var(--lp-ink); color: var(--color-on-dark, #fff); }
.lp-brand-v2 .lp-cred { background: var(--ap-navy); }
/* No palette colour survives on this band — not bronze (1.90:1, forbidden),
   not azure-deep (2.91:1, the failure this lane repairs). */
.lp-cred .lp-accent,
.lp-cred .lp-accent2 { color: var(--lp-on-dark-warm); }
.lp-cred-row { display: flex; align-items: center; gap: 16px 30px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.lp-cred-lead { font-family: var(--lp-serif); font-size: 17px; }
.lp-cred-items { margin-left: auto; display: flex; gap: 28px; flex-wrap: wrap; }
.lp-cred-items li { font-size: 13.5px; color: var(--color-on-dark-muted, rgba(255,255,255,.78)); display: inline-flex; align-items: center; gap: 9px; }
.lp-cred-ic { color: var(--lp-on-dark-warm); display: inline-flex; }
.lp-cred-ic .lp-ic { width: 16px; height: 16px; }

/* ── Bands ── */
.lp-band { padding: 84px 0; }
.lp-band-low { background: var(--lp-surface-low); }
.lp-sec-kicker { text-align: center; max-width: 640px; margin: 0 auto 44px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lp-h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -.025em; }
.lp-h3 { font-size: 23px; }
.lp-sec-sub { color: var(--lp-muted); font-size: 16px; }
.lp-sec-sub-left { margin-top: 8px; }

/* ── Steps (horizontal cards — NOT icon-circle grid) ── */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-step { position: relative; display: flex; gap: 14px; padding: 22px 22px; background: var(--lp-surface); border: 1px solid var(--lp-outline); border-radius: var(--lp-r-lg); }
.lp-step-tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--lp-warm-soft); color: var(--lp-warm); flex: none; }
.lp-step-tile .lp-ic { width: 22px; height: 22px; }
.lp-step-arrow { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--lp-outline-strong); z-index: 2; }
.lp-step-arrow .lp-ic { width: 20px; height: 20px; }
.lp-step-num { font-family: var(--lp-mono); font-size: 12px; color: var(--lp-warm); letter-spacing: .1em; }
.lp-step-h { font-size: 19px; margin: 4px 0 6px; }
.lp-step p { font-size: 14px; color: var(--lp-muted); }

/* ── Course catalog ── */
.lp-cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; }
.lp-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp-course { display: block; background: var(--lp-surface); border: 1px solid var(--lp-outline); border-radius: var(--lp-r-lg); overflow: hidden; transition: transform .14s, box-shadow .2s, border-color .2s; height: 100%; }
.lp-course:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow-2); border-color: var(--lp-lead); }
.lp-course:hover .lp-course-title { color: var(--lp-lead); }
.lp-thumb { display: block; height: 132px; position: relative; }
.lp-thumb.t-bronze { background: var(--lp-warm-grad); }
/* Course-thumb gradients: page-only decorative illustration colors (sample
   catalog art), intentionally NOT part of the shared brand-token system. */
.lp-thumb.t-blue { background: linear-gradient(135deg,#0568A2,#043B5C); }
.lp-thumb.t-sage { background: linear-gradient(135deg,var(--ok),#5a8a54); }
.lp-thumb.t-ink { background: linear-gradient(135deg,#272420,var(--ink)); }
.lp-thumb.t-clay { background: linear-gradient(135deg,#9A4B2E,#B86A45); }
.lp-thumb.t-plum { background: linear-gradient(135deg,#5B3A52,#7C5270); }
.lp-wmk { position: absolute; right: 12px; bottom: 10px; color: rgba(255,255,255,.32); }
.lp-wmk .lp-ic { width: 46px; height: 46px; stroke-width: 1.4; }
.lp-course-body { display: block; padding: 16px 18px 20px; }
.lp-ccat { font-family: var(--lp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-warm); display: block; }
.lp-course-title { font-family: var(--lp-serif); font-size: 19px; font-weight: 600; display: block; margin: 6px 0; transition: color .2s; }
.lp-meta { font-size: 13px; color: var(--lp-muted); }

/* Empty / "more coming" state */
.lp-courses-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 56px 24px; background: var(--lp-surface); border: 1px solid var(--lp-outline); border-radius: var(--lp-r-xl); }
.lp-empty-lead { font-family: var(--lp-serif); font-size: 24px; }
.lp-empty-sub { color: var(--lp-muted); max-width: 44ch; }
.lp-courses-empty .lp-btn { margin-top: 6px; }

/* ── Built on APIIS ── */
.lp-builton { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 56px; background: var(--lp-surface); border: 1px solid var(--lp-outline); border-radius: var(--lp-r-xl); padding: 48px 52px; }
.lp-bt-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-bt-body { font-size: 15.5px; color: var(--lp-muted); line-height: 1.6; border-left: 1px solid var(--lp-outline); padding-left: 48px; }

/* ── Who it's for ── */
.lp-who-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 54px; align-items: start; }
.lp-who-art { background: var(--lp-warm-soft); border: 1px solid color-mix(in srgb, var(--lp-warm) 22%, transparent); border-radius: var(--lp-r-lg); padding: 44px 40px; text-align: center; }
.lp-who .lp-who-quote { font-family: var(--lp-serif); font-size: 26px; line-height: 1.25; margin: 50px 0 26px; }
/* QA ISSUE-001: that 50px top margin is clearance for the coin above it. Under
   BRAND_MARK_V2 the coin is gone (no mark fits under 132px) and the margin
   became 50px of dead space at the top of the card. Keyed on :first-child
   rather than a flag class so it stays right in both states on its own — the
   sibling empty-state and final-CTA blocks use flex `gap` and already
   collapsed cleanly, which is why only this one broke. */
.lp-who .lp-who-quote:first-child { margin-top: 0; }
.lp-wchips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lp-wchip { display: inline-flex; align-items: center; gap: 7px; background: var(--lp-surface); color: var(--lp-warm-deep); font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 9999px; }
.lp-wchip .lp-ic { width: 14px; height: 14px; }
.lp-who-copy .lp-h2 { margin: 8px 0 0; }
.lp-wlist { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.lp-wlist li { display: flex; gap: 14px; }
.lp-wtile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--lp-warm-soft); color: var(--lp-warm); flex: none; }
.lp-wtile .lp-ic { width: 16px; height: 16px; }
.lp-wlist b { font-family: var(--lp-serif); font-size: 17px; }
.lp-wlist p { font-size: 14px; color: var(--lp-muted); margin-top: 2px; }

/* ── Mission / outcome conviction statement (D4) ── */

/* ── Final CTA (dark) ── */
.lp-finalcta { background:
  radial-gradient(900px 460px at 50% -30%, color-mix(in srgb, var(--lp-warm) 30%, transparent), transparent 60%),
  linear-gradient(160deg, color-mix(in srgb, var(--lp-warm) 12%, var(--ink)), var(--ink)); color: var(--lp-surface); padding: 96px 0 84px; }
.lp-finalcta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* Explicit light color: tokens.css sets a global h1-h4 { color: var(--ink) },
   which overrides the dark band's inherited cream — without this the headline
   renders near-black on the dark final-CTA band (invisible). Matches handoff
   .finalcta h2 { color: var(--surface) }. The "you" span keeps bronze-2. */
.lp-finalcta-h { font-size: clamp(36px, 5vw, 60px); color: var(--lp-surface); }
/* Warm emphasis on any dark ground is gold, never bronze (2.81 on ink). */
.lp-finalcta .lp-accent, .lp-finalcta .lp-accent2 { color: var(--lp-on-dark-warm); }
.lp-finalcta p { color: rgba(255,255,255,.74); font-size: 18px; }

/* ── Footer ── */
.lp-foot { background: var(--lp-ink); color: var(--lp-surface); padding: 60px 0 40px; }
/* A3 (RULING-2026-08-14, R39): logo-integration §5 always specified navy here;
   it shipped as ink. Gated like .lp-cred — same flag, same one-line shape. */
.lp-brand-v2 .lp-foot { background: var(--ap-navy); }
.lp-foot-top { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
.lp-fbrand { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lp-fbrand p { font-size: 13px; color: rgba(255,255,255,.7); }
.lp-fcols { display: contents; }
.lp-fcols div { display: flex; flex-direction: column; gap: 8px; }
.lp-fcols h4 { font-family: var(--lp-sans); font-size: 13px; font-weight: 600; color: var(--lp-surface); }
.lp-fcols a { font-size: 13.5px; color: rgba(255,255,255,.62); }
.lp-fcols a:hover { color: var(--lp-surface); }
.lp-foot-bot { display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: 12.5px; color: rgba(255,255,255,.6); flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .lp-nav, .lp-byline { display: none; }
  .lp-steps, .lp-courses { grid-template-columns: 1fr; }
  .lp-who-grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-builton { grid-template-columns: 1fr; gap: 22px; text-align: center; padding: 32px; }
  .lp-bt-head { align-items: center; }
  .lp-bt-body { border-left: 0; padding-left: 0; }
  .lp-step-arrow { display: none; }
  .lp-cred-items { margin-left: 0; }
  .lp-foot-top { grid-template-columns: 1fr; gap: 28px; }
  .lp-fcols { display: grid; grid-template-columns: repeat(3,1fr); }
  .lp-band, .lp-finalcta { padding: 56px 0; }
}
@media (max-width: 560px) {
  .lp-wrap { padding: 0 20px; }
  .lp-fcols { grid-template-columns: 1fr 1fr; }
  .lp-foot-bot { flex-direction: column; gap: 6px; }
  .lp-hero-inner { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp, .lp * { scroll-behavior: auto !important; transition: none !important; }
}

/* ── Lane B §5 — the wordmark into /welcome, behind BRAND_MARK_V2 ──
   Sticky nav takes the full-colour mark on cream; the navy footer band
   takes the knockout. Both are above the 132px floor, so PNG @2x is
   within the spec's own format rule.

   BRAND_MARK_V2 gates this, not WELCOME_BRAND_V2: this is the same
   atomic mark swap as §1/§2/§4, and a /welcome still wearing the coin
   while every app chrome wears the wordmark is the half-swapped state
   the flag exists to prevent. WELCOME_BRAND_V2 keeps its narrow job —
   the credibility band's ground. */
.lp-brand-mark { display: block; width: 168px; height: auto; }
.lp-foot-mark  { display: block; width: 190px; height: auto; margin-bottom: 2px; }
@media (max-width: 560px) {
  /* 132px floor, not smaller — below it the APIIS line stops resolving
     and this is a wordmark-only system with no small mark to fall back to. */
  .lp-brand-mark { width: 132px; }
}

/* ═══════════ Touch-target pass — coarse pointers only ═══════════
   /welcome was never covered by PR #301's pass (that one reached admin and the
   learner floors; landing.css and the auth templates had no coarse block at
   all). Measured at 390px with a coarse pointer: `.lp-brand` 34px and nine
   nav/footer links at 22px.

   Coarse-only, following the house pattern in admin-companion.css: the desktop
   footer's tight column rhythm is deliberate and a mouse does not need 44px.

   NOT swept: links inline in a sentence. WCAG 2.5.8 exempts a target "in a
   sentence or [whose] size is otherwise constrained by the line-height of
   non-target text", and forcing 44px there pushes the line box apart and
   collides with the copy around it. Everything below is a standalone control.
   ═══════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse){
  .lp-nav a,
  .lp-fcols a,
  .lp-signin{
    min-height:var(--touch-min, 44px); display:inline-flex; align-items:center;
  }
  .lp-brand{ min-height:var(--touch-min, 44px); }
  /* the footer columns get their own gap back so 44px rows do not collide */
  .lp-fcols div{ display:flex; flex-direction:column; gap:var(--space-1, 4px); }
}