/* ============================================================
   MUPAS™ Worldwide — landing page styles (MupasPortalHome.py)
   Loaded ONLY by the landing app; the portal (app.py) excludes this
   file via assets_ignore, since the overflow/link resets below would
   break its fixed-viewport layout.  Design tokens (colours, fonts,
   radii) come from mupas.css.
   ============================================================ */

html, body { overflow: auto !important; height: auto !important; scroll-behavior: smooth; }
#_dash-app-content, ._dash-loading { overflow: visible !important; height: auto !important; }
body { background: var(--bg-base); }
.home { width: 100%; min-height: 100vh; background:
  radial-gradient(1100px 520px at 50% -220px, rgba(0,229,195,0.10), transparent 70%),
  var(--bg-base); }
.home section { scroll-margin-top: 84px; }
a { color: inherit; text-decoration: none; }
.eyebrow { display:inline-block; font-size:12px; letter-spacing:.22em; font-weight:600;
  color: var(--accent-text); text-transform: uppercase; margin-bottom: 14px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-sans);
  font-weight:600; border-radius: var(--radius-sm); cursor:pointer; border:1px solid transparent;
  transition: all var(--transition); text-decoration:none; white-space:nowrap; }
.btn--sm { padding:8px 16px; font-size:13.5px; }
.btn--lg { padding:14px 26px; font-size:15.5px; }
.btn--primary { background: var(--accent); color:#04211d; box-shadow: var(--shadow-accent); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,229,195,.28); }
.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-accent); }
.btn--ghost:hover { background: var(--accent-dim); border-color: var(--accent); }
.btn--soft { background: var(--bg-elevated); color: var(--text-secondary);
  border-color: var(--border); padding:10px 18px; font-size:14px; }
.btn--soft[disabled] { cursor: default; opacity:.85; }
.inline-link { color: var(--accent-text); font-weight:600; border-bottom:1px solid var(--border-accent); }
.inline-link:hover { border-color: var(--accent); }

/* Nav */
.home-nav { position: sticky; top:0; z-index: 50; backdrop-filter: blur(12px);
  background: rgba(11,13,16,0.72); border-bottom: 1px solid var(--border); }
.home-nav-inner { max-width: 1160px; margin:0 auto; padding: 12px 24px;
  display:flex; align-items:center; gap: 20px; }
.home-logo { display:flex; align-items:center; gap:11px; }
.home-logo-mark { height: 38px; width:auto; }
.home-logo-text { display:flex; flex-direction:column; line-height:1.05; }
.home-wordmark { font-family: var(--font-serif); font-weight:700; font-size:18px;
  color: var(--text-primary); letter-spacing:.02em; }
.home-wordmark sup { font-size:.5em; color: var(--accent-text); }
.home-tagline { font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color: var(--text-secondary); }
.home-nav-links { display:flex; gap: 26px; margin-left:auto; }
.home-nav-links a { color: var(--text-secondary); font-size:14.5px; font-weight:500;
  transition: color var(--transition); }
.home-nav-links a:hover { color: var(--accent-text); }
.home-theme-btn { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; cursor:pointer; border:1px solid var(--border);
  background: var(--bg-surface); transition: all var(--transition); flex-shrink:0; }
.home-theme-btn:hover { border-color: var(--border-accent); background: var(--accent-dim); }
/* nav bar uses a hardcoded translucent dark by default — lighten it in light mode */
[data-mantine-color-scheme="light"] .home-nav { background: rgba(255,255,255,0.80); }

/* Hero — kept tight so the portal screenshot sits within the first screen (no
   scrolling needed to see it). */
.hero { position:relative; overflow:hidden; padding: 56px 24px 64px; text-align:center; }
.hero-glow { position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(680px 360px at 50% 20%, rgba(0,229,195,0.14), transparent 70%); }
.hero-inner { position:relative; max-width: 960px; margin: 0 auto; }
.hero-title { font-family: var(--font-serif); font-weight:700; font-size: clamp(34px, 5.2vw, 58px);
  line-height:1.05; margin: 0 0 16px; color: var(--text-primary); letter-spacing:-.01em; }
.hero-sub { font-size: clamp(15.5px, 2vw, 19px); color: var(--text-secondary);
  max-width: 640px; margin: 0 auto 26px; line-height:1.55; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* A <button> does not inherit line-height and an <a> does, so the story ask and the
   "Create a free account" link came out 5px apart on a phone (2026-10-08). */
.hero-cta .btn, .cta-actions .btn { line-height:1.6; }
.hero-note { display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top: 18px; font-size:13.5px; color: var(--text-muted); }
/*  ⚠ LIGHT ONLY, and it took a screenshot to find: the hero sits on a gradient,
    so axe returned INCOMPLETE rather than a failure and the node never appeared
    in a violation list. Measured off the real rendered pixels (worst of 32
    samples, 2026-09-16): light 2.32:1 FAIL, dark 9.43:1 pass. Dark keeps the
    muted token deliberately - it passes there, and this is the promise line
    under the one ask, so it should stay quieter than the sub-heading.
    The general trap: a token over a GRADIENT cannot be judged by arithmetic on
    the token alone, and axe will not tell you it failed - it will tell you
    nothing. */
[data-mantine-color-scheme="light"] .hero-note { color: var(--text-secondary); }
.hero-visual { max-width: 960px; margin: 30px auto 0; }
/*  The interim hero carries no visual; the div stays only so the
    video-overlay callback's Input still resolves (see HERO_VISUAL). */
.hero-visual-off { display: none; }
.hero-visual-img { width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  animation: heroFloat 6.5s ease-in-out infinite; }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero-visual-img { animation: none; } }
/* Short viewports (e.g. 1366×768 laptops): compress the hero so the whole portal
   screenshot still fits on the first screen without scrolling. */
@media (max-height: 860px) {
  .hero { padding: 40px 24px 44px; }
  .hero-title { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 12px; }
  .hero-sub { margin-bottom: 18px; }
  .hero-note { margin-top: 12px; }
  .hero-visual { margin-top: 20px; max-width: 760px; }
}

/* Sections */
.section { padding: 88px 24px; }
.section--alt { background: var(--bg-surface); border-block: 1px solid var(--border); }
.section-inner { max-width: 1160px; margin: 0 auto; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align:center; }
.section-title { font-family: var(--font-serif); font-weight:700; font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 16px; color: var(--text-primary); line-height:1.12; }
.section-lead { font-size: 16.5px; color: var(--text-secondary); line-height:1.7; margin:0; }

/* A second heading inside one section — "Or buy a device outright" under the
   packages. .section-head has no top margin because it normally opens a
   section; this one follows a card grid and needs the space. The smaller title
   keeps the packages as the section's headline rather than competing with it. */
.section-head--sub { margin-top: 68px; }
.section-head--sub .section-title { font-size: clamp(21px, 2.6vw, 28px); }

/* ---- Package comparison matrix ------------------------------------------
   One feature per ROW so the tiers can be read sideways. The earlier version
   gave each tier its own bullet list, which cannot answer "what does the extra
   $5 buy me" without holding three lists in your head.

   Grid rather than <table> so the featured column can be tinted per-cell and
   the group headers can span the full width, both of which fight colspan. */
.pkg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border:1px solid var(--border); border-radius: var(--radius-lg); }
.pkg-matrix { display:grid;
  grid-template-columns: minmax(210px, 1.5fr)
                        repeat(var(--pkg-cols, 4), minmax(132px, 1fr));
  min-width: 720px; align-items: stretch; }

/* Header ------------------------------------------------------------------ */
.pkg-corner { background: var(--bg-base); }
.pkg-head { background: var(--bg-base); padding: 24px 16px 20px; text-align:center;
  border-bottom:1px solid var(--border); display:flex; flex-direction:column; }
.pkg-badge { min-height: 21px; margin-bottom: 10px; }
.pkg-badge span { display:inline-block; background: var(--accent); color:#04211d;
  font-size: 10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding: 3px 9px; border-radius: 999px; }
.pkg-name { font-family: var(--font-serif); font-size: 19px; font-weight:700;
  color: var(--text-primary); margin:0 0 7px; line-height:1.2; }
.pkg-audience { font-size: 12.2px; color: var(--text-secondary); line-height:1.45;
  margin:0 0 14px; min-height: 52px; }
.pkg-price { display:flex; align-items:baseline; justify-content:center; gap:5px;
  margin-bottom:14px; }
.pkg-price-num { font-size: 30px; font-weight:700; color: var(--text-primary);
  letter-spacing:-0.02em; font-variant-numeric: tabular-nums; }
.pkg-period { font-size: 12.5px; color: var(--text-secondary); }
.pkg-cta { width:100%; justify-content:center; margin-top:auto; }

/* Group + feature rows ---------------------------------------------------- */
.pkg-group { grid-column: 1 / -1; background: var(--bg-elevated);
  padding: 11px 18px; font-size: 11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color: var(--text-secondary);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pkg-feature { display:flex; align-items:center; gap:7px; padding: 13px 18px;
  font-size: 13.4px; color: var(--text-primary); line-height:1.4;
  border-bottom:1px solid var(--border); background: var(--bg-base); }

/* The flyout trigger. tabIndex=0 in the markup makes it keyboard reachable,
   and dmc.Tooltip is configured to open on focus as well as hover — a CSS-only
   tooltip would be invisible to both keyboards and touch screens. */
.pkg-info { display:inline-flex; color: var(--text-secondary); cursor:help;
  opacity:.65; transition: opacity var(--transition); flex-shrink:0; }
.pkg-info:hover, .pkg-info:focus { opacity:1; color: var(--accent-text); outline:none; }
.pkg-info:focus-visible { outline:2px solid var(--accent); outline-offset:2px;
  border-radius:50%; }

.pkg-cell { display:flex; align-items:center; justify-content:center;
  padding: 13px 12px; font-size: 13px; text-align:center; line-height:1.35;
  border-bottom:1px solid var(--border); background: var(--bg-base); }
.pkg-cell--yes { color: var(--accent-text); }
/* An absence is information, not a warning — a red cross would make the free
   column read as broken rather than as limited. */
.pkg-cell--no { color: var(--text-secondary); opacity:.4; font-size:15px; }
.pkg-cell--val { color: var(--text-secondary); font-weight:600;
  flex-direction: column; gap: 2px; }
/* A figure over its plain-English equivalent, for AI Credits: "1,000 / month"
   over "about 100 questions".  A credit is our unit, not the buyer's, and a
   comparison table whose headline number has to be converted before it can be
   compared has failed at its one job.  Column flex is harmless on the
   single-line cells - one child centres identically either way. */
.pkg-cell-text { display:block; }
.pkg-cell-note { display:block; font-weight:400; font-size:11px;
  opacity:1; letter-spacing:.01em;
  color: var(--text-secondary); }   /* Block 2 contrast: inherited muted at .75 opacity was 3.9:1 both schemes;
                                       the secondary token at full opacity is the subordination now */

/* Paragraphs inside a help flyout.  The AI Credits copy carries a price list
   under its definition, and without this the two run together. */
.pkg-help-p + .pkg-help-p { margin-top: 7px; }

/* The recommended tier, tinted down the whole column. */
.pkg-cell--featured { background: var(--accent-dim); }
/* Block 2.2 (axe color-contrast, 22 nodes): secondary text on the tinted featured column
   fell under 4.5:1. Primary text there; the tint still marks the column. */
.pkg-cell--featured .pkg-audience, .pkg-cell--featured .pkg-cell-note, .pkg-cell--featured .pkg-period,
.pkg-cell--val.pkg-cell--featured {
  color: var(--text-primary); opacity: 1; }   /* opacity: .pkg-cell-note is .75 elsewhere, which no colour can beat */
/* Block 2.2b: the last five sub-44px targets on a phone. */
@media (max-width: 900px) {
  .home .footer-social-link { width:44px; height:44px; }
  .home .home-logo { min-height:44px; align-items:center; }
  .home-burger { min-width:44px; flex:0 0 44px; }
}

.pkg-foot { background: var(--bg-base); padding: 18px 16px 22px;
  display:flex; align-items:flex-end; }

@media (max-width: 720px) {
  .pkg-audience { min-height:0; }
  .pkg-matrix { min-width: 640px; }
}

/* Features */
.feature-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { background: var(--bg-surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 26px; transition: all var(--transition); }
.section--alt .feature-card { background: var(--bg-elevated); }
.feature-card:hover { transform: translateY(-4px); border-color: var(--border-accent);
  box-shadow: var(--shadow-card); }
.feature-icon { width:48px; height:48px; border-radius: var(--radius-md); display:flex;
  align-items:center; justify-content:center; background: var(--accent-dim);
  border:1px solid var(--border-accent); margin-bottom:18px; }
.feature-title { font-family: var(--font-serif); font-size: 20px; font-weight:600;
  margin: 0 0 8px; color: var(--text-primary); }
.feature-body { font-size: 14.5px; color: var(--text-secondary); line-height:1.65; margin:0; }

/* Devices */
/* auto-fit rather than a fixed 3, so adding a product doesn't strand one card on
   a row of its own. At the 1160px container this lays 4 cards out in one row. */
.device-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px; }
.device-card { position:relative; background: var(--bg-base); border:1px solid var(--border);
  border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  transition: all var(--transition); }
.device-card:hover { transform: translateY(-4px); border-color: var(--border-accent);
  box-shadow: var(--shadow-card); }
/* min-height:0 + overflow:hidden are what make aspect-ratio actually hold. Without
   them the box grows to fit the image, because `max-height:80%` on the image is a
   percentage of a height that is itself derived from the ratio, so it resolves to
   `none`. The product shots run from 0.58 (Mini, tall) to 1.60 (study, wide), so
   the media boxes came out 203-345px tall and the card titles never lined up. */
.device-media { aspect-ratio: 4/3; min-height: 0; overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(420px 240px at 50% 30%, rgba(0,229,195,0.10), transparent 70%),
  var(--bg-surface); border-bottom:1px solid var(--border); }
/* The three featured devices are PHOTOGRAPHS now (the 2026-09 shoot, framed 4:3 by
   make_device_photos.py to match this box), so the photo fills the media box edge
   to edge.  The old rule shrank a transparent product render to 74% x 80% with a
   drop shadow; applied to a photo with its own backdrop it left the picture in
   the box's top-left corner beside an empty gap.  <picture> must fill the box
   too, or the img's 100% is a percentage of an inline element. */
.device-media > picture { display:block; width:100%; height:100%; }
.device-img { display:block; width:100%; height:100%; object-fit: cover; }
.device-body { padding: 22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.device-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.device-name { font-family: var(--font-serif); font-size: 21px; font-weight:600; margin:0;
  color: var(--text-primary); }
.device-price { font-size: 18px; font-weight:700; color: var(--accent-text); }
.device-tag { font-size: 14px; color: var(--text-secondary); margin: 6px 0 16px; }
.device-specs { list-style:none; padding:0; margin: 0 0 22px; display:flex;
  flex-direction:column; gap:9px; }
.device-specs li { display:flex; align-items:flex-start; gap:9px; font-size:13.6px;
  color: var(--text-secondary); line-height:1.45; }   /* Block 2 contrast: muted on white was ~2.8:1 */
.device-specs li svg { flex-shrink:0; color: var(--accent-text); margin-top:1px; }
.device-cta { margin-top:auto; align-self:flex-start; }
.soon-pill { position:absolute; top:14px; right:14px; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:20px;
  color: var(--accent-text); background: var(--accent-dim); border:1px solid var(--border-accent); }
.store-note { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin-top: 40px; padding: 16px 22px; border:1px dashed var(--border-accent);
  border-radius: var(--radius-md); background: var(--accent-dim);
  font-size: 14.5px; color: var(--text-primary); text-align:center; }   /* Block 2 contrast: secondary on the accent tint failed in dark */

/* Testimonials */
.testi-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.testi-card { background: var(--bg-surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 28px; margin:0; }
.testi-card:hover { border-color: var(--border-accent); }
.testi-quote { font-family: var(--font-serif); font-size: 18.5px; line-height:1.55;
  color: var(--text-primary); margin: 10px 0 22px; font-style: italic; }
.testi-person { display:flex; align-items:center; gap:13px; }
.testi-avatar { width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--border-accent); }
.testi-name { display:block; font-weight:600; color: var(--text-primary); font-size:14.5px; }
.testi-loc { display:block; font-size:13px; color: var(--text-secondary); }

/* CTA band */
.cta-band { padding: 92px 24px; text-align:center; background:
  radial-gradient(700px 320px at 50% 120%, rgba(0,229,195,0.14), transparent 70%),
  var(--bg-surface); border-top:1px solid var(--border); }
.cta-title { font-family: var(--font-serif); font-weight:700; font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 16px; color: var(--text-primary); }
.cta-sub { font-size: 17px; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; }

/* Footer */
.home-footer { border-top:1px solid var(--border); background: var(--bg-base); padding: 46px 24px; }
.home-footer-inner { max-width: 1160px; margin:0 auto; display:grid;
  grid-template-columns: 1.4fr 1fr 1.2fr; gap: 32px; align-items:start; }
.footer-brand { display:flex; gap:13px; align-items:flex-start; }
.footer-blurb { font-size:14px; color: var(--text-secondary); margin: 6px 0 0; }
.footer-social { display:flex; gap:10px; margin-top:16px; }
.footer-social-link { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; color: var(--text-secondary);
  background: var(--bg-surface); border:1px solid var(--border);
  transition: all var(--transition); }
.footer-social-link:hover { color: var(--accent-text); border-color: var(--border-accent);
  background: var(--accent-dim); transform: translateY(-2px); }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-col-title { font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--text-secondary); margin-bottom:4px; }   /* Block 2 contrast: muted was 2.5:1 on white */
.footer-links a { color: var(--text-secondary); font-size:14px; transition: color var(--transition); }
.footer-links a:hover { color: var(--accent-text); }
.footer-links .footer-portal { color: var(--accent-text); font-weight:600; }
.footer-legal { font-size:13px; color: var(--text-secondary); }   /* Block 2 contrast: muted on the page was 2.4:1 in light */
.footer-legal p { margin: 0 0 4px; }
.footer-fine { color: var(--text-secondary); }

/* Responsive */
/* Between tablet and desktop auto-fit would give 3 columns and orphan the 4th
   card; 2x2 reads better than 3+1. */
@media (max-width: 1100px) and (min-width: 901px) {
  .device-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .feature-grid, .device-grid, .testi-grid { grid-template-columns: 1fr; }
  .home-nav-links { display:none; }
  .home-footer-inner { grid-template-columns: 1fr; gap: 26px; }
}

/* ── Overview video: hero play trigger + lightbox ─────────────────────────── */
.hero-video-trigger { position: relative; cursor: pointer; }
/*  ⚠ A PILL AT THE BOTTOM-RIGHT, NOT A DISC IN THE CENTRE.  The 78px centred
    disc sat on top of the question list - the content the hero exists to show -
    so the image read as a video thumbnail rather than as the form.  Cornered and
    labelled, it says what it does and covers only dead space.  The whole visual
    is still the click target (.hero-video-trigger); this is pointer-events:none. */
.hero-play { position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px 9px 11px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 10px 26px rgba(0,0,0,.38), var(--shadow-accent);
  transition: transform var(--transition), box-shadow var(--transition);
  pointer-events: none; }
.hero-play-label { font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: #04211d; white-space: nowrap; }
.hero-video-trigger:hover .hero-play { transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45), var(--shadow-accent); }
@media (max-width: 560px) {
  /*  the label is the first thing to go when there is no room for it */
  .hero-play { right: 10px; bottom: 10px; padding: 8px; gap: 0; }
  .hero-play-label { display: none; }
}
.hero-video-trigger:hover .hero-visual-img { box-shadow: 0 34px 80px rgba(0,0,0,.55),
  0 0 0 1px var(--border-accent); }
/*  The pulsing ::after ring went with the centred disc, so there is no
    animation left on .hero-play to disable here.  The hover transform is
    covered by the global prefers-reduced-motion rule. */

.video-overlay { position: fixed; inset: 0; z-index: 4000; display: none;
  align-items: center; justify-content: center; padding: 4vmin; }
.video-overlay.is-open { display: flex; }
.video-overlay-backdrop { position: absolute; inset: 0; cursor: zoom-out;
  background: rgba(2,6,10,.82); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); }
.video-dialog { position: relative; z-index: 1; width: min(1100px, 94vw);
  border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.video-player { display: block; width: 100%; height: auto; max-height: 86vh;
  background: #000; }
.video-overlay-close { position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(0,0,0,.55); transition: all var(--transition); }
.video-overlay-close:hover { background: var(--accent); color: #04211d; }


/* ══════════════════════════════════════════════════════════════════════════
   Visitor forms — the public survey and Contact Us
   Everything here is .visitor-* or .vf-* prefixed. This stylesheet loads on
   the landing page only, but the modals render into the Mantine portal at the
   document root, so the .vf-* rules must not rely on being inside .home.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The band on the page ────────────────────────────────────────────────── */
.visitor-band {
  padding: 72px 24px;
  background:
    radial-gradient(900px 400px at 50% -10%, rgba(16, 185, 129, .10), transparent 70%),
    var(--bg-elevated, #10151a);
  border-top: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
}

.visitor-band-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  /* Two equal columns that collapse to one; auto-fit rather than a media
     query so the band reflows at whatever width the cards stop fitting. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.visitor-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 28px;
  border-radius: 18px;
  background: var(--bg-surface, rgba(255, 255, 255, .035));
  border: 1px solid var(--border, rgba(255, 255, 255, .09));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.visitor-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, .38);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6);
}

/* The survey is the primary action, so it carries the accent edge. */
.visitor-card--survey {
  border-color: rgba(16, 185, 129, .30);
  background:
    linear-gradient(180deg, rgba(16, 185, 129, .07), transparent 55%),
    var(--bg-surface, rgba(255, 255, 255, .035));
}

.visitor-card-icon {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .22);
}

.visitor-card-title {
  margin: 2px 0 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 25px;
  font-weight: 700;
  color: var(--text-primary, #f2f5f7);
}

.visitor-card-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-secondary, #9fb0bd);
}

.visitor-card-points {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.visitor-card-points li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--text-secondary, #9fb0bd);
}

.visitor-card-points li::before {
  content: "";
  position: absolute;
  left: 4px; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, #10b981);
}

/* Pushed to the bottom so both cards' buttons line up however much text each
   one carries — margin-top:auto inside a flex column. */
.visitor-card-btn {
  margin-top: auto;
  align-self: flex-start;
}

.footer-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.footer-linkbtn:hover { color: var(--accent, #10b981); }

/* ── The modals ──────────────────────────────────────────────────────────── */
.vf-modal-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary, #f2f5f7);
}

.vf-intro {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary, #9fb0bd);
}

.vf-questions {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.vf-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .07));
}

.vf-question:last-child { border-bottom: 0; }

.vf-q-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent, #10b981);
}

.vf-q-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary, #f2f5f7);
  margin-bottom: 4px;
}

.vf-privacy {
  margin: 18px 0 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary, #9fb0bd);
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border, rgba(255, 255, 255, .07));
}

.vf-alert { margin: 14px 0 0; }

.vf-verify {
  margin-top: 18px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(16, 185, 129, .07);
  border: 1px solid rgba(16, 185, 129, .25);
}

/* A 6-digit code reads better spaced out and centred. */
.vf-code-input input {
  font-size: 22px;
  letter-spacing: .5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vf-submit { margin-top: 20px; }

.vf-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 34px 18px 26px;
}

.vf-done-title {
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 23px;
  color: var(--text-primary, #f2f5f7);
}

.vf-done-body {
  margin: 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-secondary, #9fb0bd);
}

@media (max-width: 640px) {
  .visitor-band { padding: 52px 16px; }
  .visitor-card { padding: 24px 20px; }
  .visitor-card-title { font-size: 22px; }
  .visitor-card-btn { align-self: stretch; }
}


/* Secondary tier ----------------------------------------------------------
   A plan shown below the matrix rather than as a column in it (Field
   Investigator).  Most members are not choosing between it and the others, and
   as a fifth column it cost every other column a fifth of the width. */
.pkg-extra { display:flex; gap: 22px; align-items:center; flex-wrap:wrap;
  margin-top: 18px; padding: 20px 22px;
  background: var(--bg-base); border:1px solid var(--border);
  border-radius: var(--radius-md); }
.pkg-extra-main { flex: 1 1 380px; min-width: 0; }
.pkg-extra-head { display:flex; align-items:baseline; gap: 14px;
  flex-wrap:wrap; margin-bottom: 6px; }
.pkg-extra-name { font-family: var(--font-serif); font-size: 19px;
  font-weight:700; margin:0; color: var(--text-primary); }
.pkg-extra-price { display:flex; align-items:baseline; gap:3px; }
.pkg-extra-note { color: var(--text-secondary); font-size: 13.5px;
  line-height:1.55; margin: 0 0 10px; }
.pkg-extra-list { display:flex; flex-wrap:wrap; gap: 4px 20px;
  list-style:none; padding:0; margin:0; }
.pkg-extra-list li { color: var(--text-secondary); font-size: 12.5px;
  position:relative; padding-left: 15px; }
.pkg-extra-list li::before { content:"¹3"; position:absolute; left:0;
  color: var(--accent-text); font-weight:700; }
.pkg-extra-cta { flex: 0 0 auto; }

@media (max-width: 720px) {
  .pkg-extra { flex-direction:column; align-items:stretch; }
  .pkg-extra-cta { width:100%; }
}


/* Narrow phones: the nav row overflowed by ~17px at 390px ------------------
   The links are already hidden below 900px, so the row is logo + theme button
   + the portal CTA (162px).  With 24px side padding and 20px gaps that is
   wider than the viewport, and the BODY scrolls sideways - which on the
   landing page means every section can be dragged off-centre.

   Tightening the gutter rather than shrinking the CTA: the button is the one
   thing on this page we want tappable, and 44px of horizontal padding is
   spare space, not design. */
@media (max-width: 480px) {
  .home-nav-inner { padding: 12px 14px; gap: 12px; }
  /* Let the wordmark block shrink instead of forcing the row wider. */
  .home-logo { min-width: 0; }
  .home-logo-text { min-width: 0; }
}

/* Block 1.1 (2026-09-14): the community section shows measured reach, not quotes. */
.reach-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 8px 0 18px; }
.reach-stat { background: var(--bg-surface); border:1px solid var(--border); border-radius: var(--radius-lg, 12px);
              padding: 22px 16px; text-align:center; display:flex; flex-direction:column; gap:6px; }
.reach-num { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 40px); font-weight:700; color: var(--text-primary);
             font-variant-numeric: tabular-nums; line-height:1; }
.reach-label { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.reach-note { color: var(--text-secondary); font-size: 14px; margin: 0; }
@media (max-width: 720px) { .reach-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Block 2.3 (audit D-U1): phone nav. The burger is hidden on desktop; below 900px it
   opens .home-nav-links as a drawer under the bar (mupas_home_nav.js toggles .is-open). ── */
.home-burger { display:none; width:44px; height:44px; margin-left:auto; padding:0; border:1px solid var(--border);
  border-radius: var(--radius-sm); background: transparent; cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; }
.home-burger-bar { display:block; width:20px; height:2px; background: var(--text-primary); border-radius:2px;
  transition: transform .18s ease, opacity .18s ease; }
.home-burger.is-open .home-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.home-burger.is-open .home-burger-bar:nth-child(2) { opacity:0; }
.home-burger.is-open .home-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.home-nav-links a.is-active { color: var(--accent-text); }
@media (max-width: 900px) {
  .home-burger { display:inline-flex; }
  .home-nav-links.is-open { display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%;
    padding: 8px 24px 16px; background: var(--bg-surface); border-bottom:1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.25); }
  .home-nav-links.is-open a { display:flex; align-items:center; min-height:44px; font-size:16px;
    border-bottom:1px solid var(--border); }
  .home-nav-links.is-open a:last-child { border-bottom:0; }
  .home-nav-links.is-open #home-billing-wrap a { border-bottom:0; }
}


/* ══ Block 4.4 (2026-09-15): the landing page on a phone ═══════════════════════
   The pricing matrix kept min-width:640px below 720px and scrolled sideways
   inside the page (audit D-V5).  Below 720px: one card per plan in a snap-
   scroll row, the matrix behind a "Compare all features" disclosure; the
   feature and device grids snap-scroll instead of stacking into a 13,000px
   column.  Desktop: cards hidden, disclosure always open, summary hidden.  */
.pkg-cards { display: none; }
.pkg-compare > .pkg-compare-summary { display: none; }
.pkg-compare > .pkg-compare-summary::-webkit-details-marker { display: none; }

@media (max-width: 720px) {
  .pkg-cards { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 14px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -4px 6px; }
  .pkg-card { flex: 0 0 84%; scroll-snap-align: center; background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px;
    display: flex; flex-direction: column; gap: 8px; }
  .pkg-card--featured { border-color: var(--border-accent); background: var(--accent-dim); }
  .pkg-card .pkg-name { margin: 0; }
  .pkg-card .pkg-audience { color: var(--text-secondary); font-size: 13px; margin: 0; }
  .pkg-card-features { margin: 4px 0 8px; padding-left: 18px; font-size: 13.5px;
    color: var(--text-primary); display: flex; flex-direction: column; gap: 4px; }
  .pkg-card .pkg-cta, .pkg-card .btn { width: 100%; }
  .pkg-compare > .pkg-compare-summary { display: block; cursor: pointer; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 600;
    color: var(--text-primary); background: var(--bg-surface); list-style: none; }
  .pkg-compare > .pkg-compare-summary::before { content: '+  '; color: var(--accent-text); }
  .pkg-compare[open] > .pkg-compare-summary::before { content: '\2212  '; }
  .pkg-compare[open] > .pkg-compare-summary { margin-bottom: 10px; }
  .pkg-matrix { min-width: 640px; }        /* inside the disclosure, sideways is fine */

  /* the feature and device grids: a swipeable row, not a column of nine */
  .feature-grid, .device-grid { display: flex; overflow-x: auto; gap: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 4px 14px; margin: 0 -4px; }
  .feature-grid > *, .device-grid > * { flex: 0 0 82%; scroll-snap-align: center; }
}

/* ══ Block L — the landing page sells the invitation (2026-09-16) ══════════
   The page is one argument in eight sections. Everything here rides on the
   existing .feature-grid / .feature-card primitives on purpose: they already
   carry the 4.4/4.4b phone behaviour (one column, then a snap-scroll row with
   a named focusable region), so the three new rows needed no responsive work
   of their own and cannot drift from the ones that were already tested. */

/* L.1 — the invitation is the first line of the sub, set apart from the
   explanation that follows it so the ask is not buried mid-paragraph. */
.hero-lead { display: block; font-size: 1.12em; color: var(--text-primary);
  font-weight: 500; margin-bottom: 8px; }

/* L.1 — the overview is a text link under the one ask, not a third button. */
.hero-textlink-row { margin-top: 14px; }
.hero-textlink { display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--text-secondary); cursor: pointer;
  background: none; border: 0; padding: 6px 4px; border-radius: var(--radius-sm);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border-accent); transition: color var(--transition); }
.hero-textlink:hover { color: var(--accent-text, var(--accent)); }

/* L.2 — the three steps. Each panel carries a real screenshot of that step. */
.step-card { display: flex; flex-direction: column; }
.step-figure { margin: -4px 0 18px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-base);
  /* A fixed box so three panels of different screenshots line up and the
     images cannot shift the row as they load (CLS). */
  aspect-ratio: 16 / 10; }
.step-img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; }
/* The sample-report caption. It is not decoration: the picture is the report
   TEMPLATE with sample wording, and saying so is what keeps it from reading as
   somebody's real comparison. */
/*  ⚠ --text-secondary, NOT --text-muted: measured 2026-09-16, muted is
    2.65:1 on the light card and 2.43:1 on the light page, secondary is
    8.05 / 7.38. This is 2.2c's finding, reintroduced by three Block L rules
    and caught by the review's axe pass on the LIVE page. */
.step-caption { margin: 10px 0 0; font-size: 12.5px; font-style: italic;
  color: var(--text-secondary); line-height: 1.5; }

/* L.4 — the crisis line at the foot of peer support. Quiet, never a banner. */
.crisis-note { margin: 26px auto 0; max-width: 720px; text-align: center;
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }

/* L.5 — the instrument shot. */
.instrument-shot { margin: 0 auto; max-width: 940px; }
.instrument-img { width: 100%; height: auto; display: block;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); }
.instrument-caption { margin: 12px 0 0; text-align: center; font-size: 13px;
  color: var(--text-secondary); line-height: 1.6; }
.instrument-foot { max-width: 720px; margin: 34px auto 0; text-align: center; }

/* L.6 — "Done properly". Plainer than a feature card: no icon well, and the
   document link is the point of each one. */
.proof-card { padding: 24px 24px 22px; }
.proof-card .feature-title { font-size: 18px; }
.proof-card .inline-link { display: inline-block; margin-top: 12px; font-size: 14px; }
.proof-card:hover { transform: none; }

/* L.8 — the closing invitation, and the slim contact strip above it. */
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact-strip { padding: 34px 24px; background: var(--bg-surface);
  border-top: 1px solid var(--border); }
.contact-strip-inner { max-width: 1080px; margin: 0 auto; display: flex;
  align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.contact-strip-text { flex: 1 1 380px; }
.contact-strip-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  margin: 0 0 4px; color: var(--text-primary); }
.contact-strip-body { margin: 0; font-size: 14.5px; color: var(--text-secondary);
  line-height: 1.6; }
@media (max-width: 600px) {
  .contact-strip-inner { flex-direction: column; align-items: flex-start; }
}

/*  ── L.2b: the three "what happens next" panels are actions ───────────────
    The whole card is the mouse target, but the CONTROL is a real <a>/<button>
    ("stretched link"): ::after is blown up over the card, so a click anywhere
    hits the control, while the keyboard gets ONE genuine tab stop that
    announces what it does.  A div with an onclick would give neither. */
.step-card { position: relative; }
/*  ⚠ `position: static` IS LOAD-BEARING.  With `relative` here the ::after
    below is positioned against the LABEL, not the card, so the "whole panel is
    the target" claim silently became "the words are the target" - the live
    check caught it by clicking the card BODY, which an offline check could not
    have done.  The card is the positioned ancestor; the action must not be. */
.step-action { position: static;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--accent-text); cursor: pointer; text-decoration: none; }
.step-action::before { content: "→"; font-weight: 400; }
.step-card .step-action::after { content: ""; position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.step-card:hover .step-action { text-decoration: underline; }
.step-action:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 3px; border-radius: 4px; }

/*  the sample-report lightbox reuses .video-overlay / .video-dialog wholesale;
    only the contents differ */
.report-dialog { max-width: min(96vw, 900px); background: var(--bg-elevated);
  border-radius: 14px; padding: 18px; }
.report-image { display: block; width: 100%; height: auto; border-radius: 8px; }
.report-caption { margin: 12px 2px 0; font-size: 13px; color: var(--text-secondary); }

/*  L.9: who runs MUPAS
    ⚠ THERE IS NO PEOPLE SECTION ON THIS PAGE ANY MORE, and the rules that
    styled one (`.people-pair`, `.person-card`, `.person-link` and their
    portraits) are GONE rather than left inert.  The first build put a pair
    photo and three faces on the landing; Jim's decision on 2026-09-17 was one
    SENTENCE inside *Done properly* and the bios on /people, which is a Flask
    page in the legal frame and carries none of this.  Dead rules for a section
    that no longer exists are how a stylesheet stops describing its page.
    Only the closing line of that section needs anything at all. */
/*  62ch broke it as 'Charles / Holt. Meet them.' - an orphan of two words.
    `text-wrap: balance` evens the two lines; the width is the cap, not the
    target. */
.proof-foot { margin: 22px auto 0; max-width: 70ch; text-align: center;
  text-wrap: balance; }

/* Landing nav, 2026-09-27 (Jim's screenshot): with Reading room and a member's
   Billing the items wrapped onto two lines even at 1920px.  Each item stays on
   one line; the spacing tightens to 1280px; below 1100px the burger drawer
   takes over (it used to start at 900px, and 901-1100 wrapped or overflowed).
   Measured on the live page at 1920-800, signed in and out: no wrap, no overflow.
   2026-09-28: six items (Jim) fit on one line down to 901px, measured live,
   so the drawer starts at 900px again and the tight spacing covers 901-1280. */
.home-nav-links { align-items:center; gap:22px; }
.home-nav-links a { white-space:nowrap; }
@media (max-width: 1280px) and (min-width: 901px) {
  .home-nav-links { gap:16px; }
  .home-nav-links a { font-size:14px; }
}
@media (max-width: 900px) {
  .home-nav-links { display:none; }
  .home-burger { display:inline-flex; min-width:44px; flex:0 0 44px; }
  .home-nav-links.is-open { display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; left:0; right:0; top:100%;
    padding: 8px 24px 16px; background: var(--bg-surface); border-bottom:1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.25); }
  .home-nav-links.is-open a { display:flex; align-items:center; min-height:44px; font-size:16px;
    border-bottom:1px solid var(--border); }
  .home-nav-links.is-open a:last-child { border-bottom:0; }
  .home-nav-links.is-open #home-billing-wrap a { border-bottom:0; }
}

/* ── Live stations (Play 4, move 1 - 2026-10-03) ─────────────────────────────
   One card per public station: a bare last-24 h line (no axes, no numbers -
   the station page says what), the site's group and country, the link.  The
   line's teal reads on both schemes; the grid is the other landing grids', so
   at <=720 it becomes the same snap row (role=group, tabindex while it scrolls). */
.station-card { padding: 20px 20px 18px; display: flex; flex-direction: column; }
.station-card-spark { height: 72px; margin-bottom: 12px; display: flex; align-items: center; }
.station-card-img { width: 100%; height: 72px; display: block; }
.station-card-wait, .station-card-silent { font-size: 13px; line-height: 1.45;
  color: var(--text-secondary); margin: 0; }
.station-card .feature-title { margin-bottom: 4px; }
.station-card-meta { font-size: 13px; color: var(--text-secondary); margin: 0 0 10px; }
.station-card-link { margin-top: auto; font-weight: 600; font-size: 14px;
  color: var(--accent-text, var(--accent)); text-decoration: none; }
.station-card-link:hover { text-decoration: underline; }

/* Sites, not stations (Jim, 2026-10-03): a site card holds one row per station
   at the site - its name (only when there is more than one), its line, its link. */
.site-stations { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.site-station { display: flex; flex-direction: column; gap: 6px; }
.site-station + .site-station { border-top: 1px solid var(--border); padding-top: 12px; }
.site-station-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.site-station .station-card-spark { margin-bottom: 2px; }

/* Members' own words (2026-10-03) - five real testimonials, shown as written.
   The row rides .feature-grid, so on a phone it is the same snap row as the
   others (and mupas_home_nav.js gives it a tab stop only while it scrolls). */
.member-quotes { margin-top: 36px; }
.member-quotes-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600;
  margin: 0 0 6px; color: var(--text-primary); text-wrap: balance; }
.member-quotes-lead { color: var(--text-secondary); font-size: 14.5px; margin: 0 0 18px; }
.quote-card { margin: 0; display: flex; flex-direction: column; }
.quote-card:hover { transform: none; }
.quote-text { margin: 0 0 16px; flex: 1; font-family: var(--font-serif); font-size: 16.5px;
  line-height: 1.6; color: var(--text-primary); }
.quote-text p { margin: 0 0 10px; }
.quote-text p:last-child { margin-bottom: 0; }
.quote-by { border-top: 1px solid var(--border); padding-top: 12px; font-size: 14px; }
.quote-signoff { display: block; color: var(--text-secondary); font-style: italic; }
.quote-name { display: block; font-weight: 600; color: var(--text-primary); margin-top: 2px; }
/* On a phone the row scrolls sideways; a short quote must not stretch to the
   height of the longest one and become an empty box. */
@media (max-width: 720px) { .quote-grid { align-items: flex-start; } }

/* The device fee sentence on a landing device card, when prices show. */
.device-fee { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }