/* =========================================================
   snapshot.css — Security Snapshot pages only: the Baseline Check
   landing/consent page (security-snapshot.html) and the questionnaire
   itself (security-snapshot-cards.html). Shared furniture
   (header/footer/nav/ticker/drawer/tokens) lives in core.css; general
   inner-page patterns (page-hero, .section-head/.container) in inner.css.
   ========================================================= */

/* Widen the hero column for this page only (page-hero-content/.tagline are
   shared with about.html + the 9 service pages at 800px/680px, so these
   are page-scoped overrides, not edits to inner.css). Fewer line breaks
   in the tagline + disclaimer paragraphs read as a cleaner block instead
   of the short/long ragged look at the narrower shared widths. */
.snapshot-page-hero-content { max-width: 960px; }

/* ---------- Landing-page hero background photo (2026-08-18) ----------
   .page-hero-baseline-landing scopes this to security-snapshot.html's
   hero only. Plain .page-hero would also hit security-snapshot-cards.html
   (the questionnaire also uses the shared .page-hero section) and,
   through inner.css, about.html + all 9 service pages — none of which
   should get this photo. Went through several owner-reviewed rounds in
   mockups/security-snapshot-hero-preview.html before shipping (image
   choice, opacity, and which headline word is gold); see PROGRESS.md's
   2026-08-18 entry for the round-by-round history. */
.page-hero-baseline-landing {
  background-image:
    url(../images/security-snapshot/hero-background.jpg),
    radial-gradient(ellipse 900px 400px at 50% -5%,
      color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 85%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, auto, auto;
  background-position: center center, center, center;
}
.page-hero-baseline-landing::after { display: none; }
/* 2026-08-18, later: swapped which half of the headline is gold ("Know
   Your" is now .gold-text; "Security Baseline" is now the plain navy
   .page-hero h1 color) and dropped the brightness(.8) darkening tried
   earlier the same day - owner wants the standard, undimmed gold this
   time, not the dimmed version that was needed for the other word's
   position against the photo. If gold legibility becomes an issue again
   here, don't just re-add brightness(.8) by default - ask first, since
   it was deliberately removed. */

/* ---------- Intro / disclaimer ---------- */
.snapshot-intro {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1rem;
}
.snapshot-disclaimer {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.snapshot-disclaimer i { color: var(--gold-dark); margin-top: .15rem; flex-shrink: 0; }

/* ---------- Form shell ---------- */
.snapshot-section { background: var(--bg); }
.snapshot-form {
  max-width: 860px;
  margin: 0 auto;
}

/* Sticky progress bar */
.snapshot-progress {
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  padding: .5rem .5rem .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}
.snapshot-progress-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.snapshot-progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.snapshot-progress-fill {
  height: 100%;
  width: 0;
  min-width: 0;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark));
  border-radius: var(--r-pill);
  transition: width .35s var(--ease-out);
}
.snapshot-progress-fill.has-progress { min-width: 10px; }

/* Category group */
.q-category {
  margin: 2.25rem 0 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.q-category:first-of-type { margin-top: 0; }
.q-category-name {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-dark);
  white-space: nowrap;
}
.q-category-rule { flex: 1; height: 1px; background: var(--border-line); }

/* Question item */
.q-item {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.q-item.q-unanswered.q-flagged { /* highlighted when submit attempted while blank */
  background: color-mix(in srgb, var(--crimson) 5%, transparent);
  border-radius: var(--r-md);
  padding-left: 1rem; padding-right: 1rem;
}
.q-text {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: .3rem;
}
.q-num { color: var(--gold-dark); font-weight: 700; margin-right: .35rem; }
.q-why {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: .85rem;
  max-width: 68ch;
}

/* Options as a segmented control */
.q-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  max-width: 520px;
}
/* Compact button variant (mockup B / data-btnsize="compact") — ~20% smaller footprint */
[data-btnsize="compact"] .q-options { gap: .45rem; max-width: 420px; }
.q-option {
  position: relative;
}
.q-option input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.q-option label {
  display: block;
  text-align: center;
  font-size: .84rem;
  font-weight: 600;
  padding: .55rem .4rem;
  border: 1px solid var(--border-navy);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
[data-btnsize="compact"] .q-option label { font-size: .82rem; padding: .42rem .35rem; }
.q-option label:hover { border-color: var(--gold-dark); color: var(--text-primary); }
.q-option input:checked + label {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  color: #fff;
  border-color: var(--navy-deep);
}
.q-option input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Submit */
.snapshot-submit-wrap { text-align: center; margin-top: 2.25rem; }
.snapshot-error {
  display: none;
  color: var(--crimson);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .85rem;
}
.snapshot-error.show { display: block; }

/* ---------- Results ---------- */
.snapshot-results { display: none; scroll-margin-top: calc(var(--header-h) + var(--ticker-h) + 1rem); }
.snapshot-results.show { display: block; }

/* Results block sized up 20% (2026-08-10, owner request) relative to the
   .result-gate box below, which was sized down 15% the same pass — the
   score/category output should visually outweigh the email-gate CTA. */
.result-hero {
  text-align: center;
  max-width: 864px;
  margin: 0 auto 2.5rem;
}

/* 4-segment rating indicator — replaces the percentage ring. Each segment
   is always shown in its own color (crimson/amber/gold/emerald); the
   segment matching the result is raised and full-opacity, the others sit
   dimmed. This shows "which of 4 bands" without implying a measured
   percentage within that band. */
.rating-ladder {
  display: flex;
  gap: .54rem;
  max-width: 408px;
  margin: 0 auto 1.32rem;
}
.ladder-seg {
  flex: 1;
  height: 16px;
  border-radius: var(--r-pill);
  opacity: .3;
  transform: scaleY(1);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.ladder-seg.seg-1 { background: var(--crimson); }
.ladder-seg.seg-2 { background: var(--amber); }
.ladder-seg.seg-3 { background: var(--tier3-yellow); }
.ladder-seg.seg-4 { background: var(--emerald); }
.ladder-seg.seg-active { opacity: 1; transform: scaleY(1.4); }

.rating-word {
  font-size: 2.52rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--sev-c-text, var(--sev-c));
  margin-bottom: .42rem;
}
.result-tier-label { font-size: .96rem; color: var(--text-muted); margin-top: .42rem; }
.result-blurb { color: var(--text-secondary); line-height: 1.7; margin-top: 1.2rem; font-size: 1.2rem; }

/* Standout "not a determination of fully secure" callout. Deliberately
   bolder than .snapshot-disclaimer (the quiet intro note above the
   questions) — this one needs to be seen even by someone skimming
   straight to their score, especially at the top tier where a good
   result could otherwise read as "you're done." */
.result-disclaimer {
  display: flex;
  gap: .75rem;
  align-items: center;
  max-width: 640px;
  margin: 0 auto 2rem;
  background: color-mix(in srgb, var(--gold) 14%, var(--bg));
  border: 1px solid var(--gold-dark);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  text-align: left;
}
.result-disclaimer i {
  color: var(--gold-dark);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.result-disclaimer span {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
}
@media (max-width: 560px) { .result-disclaimer { flex-direction: column; text-align: center; } }

/* Rating-scale legend — explains the 4 tier words wherever they appear
   (overall rating, category cards, landing page, and the gated report).
   Sized up 20% (2026-08-10, owner request); margin-top added (was 0,
   which sat it flush against whatever paragraph precedes it — the
   "icons crowd the paragraph" complaint on the landing page). */
.rating-legend {
  max-width: 864px;
  margin: 2rem auto 2.5rem;
}
.rating-legend-title {
  display: block;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: .9rem;
}
.rating-legend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.rating-legend-item {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--sev-c);
  border-radius: var(--r-md);
  padding: .9rem .84rem;
  display: flex;
  flex-direction: column;
  gap: .36rem;
}
.rating-legend-name {
  font-size: .96rem;
  font-weight: 700;
  color: var(--sev-c-text, var(--sev-c));
}
.rating-legend-desc {
  font-size: .91rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
@media (max-width: 640px) { .rating-legend-grid { grid-template-columns: 1fr 1fr; } }

/* Category bars (rating word replaces the numeric pct) */
.category-bars {
  max-width: 864px;
  margin: 0 auto 3rem;
  display: grid;
  gap: 1.02rem;
}
.category-bars h3 { font-size: 1.26rem; color: var(--text-primary); margin-bottom: .42rem; text-align: center; }
.cat-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .42rem .9rem;
  align-items: center;
}
.cat-bar-name { font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
.cat-bar-rating { font-size: .94rem; font-weight: 700; color: var(--sev-c-text, var(--sev-c)); }
.cat-bar-track {
  grid-column: 1 / -1;
  height: 10px;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cat-bar-fill {
  /* fixed to the tier's fraction of the track (1 of 4, 2 of 4, etc.),
     not the raw score — reinforces "which band," not "what percent" */
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  transition: width .8s var(--ease-out);
}

/* Tier / severity colors. Tier-3 ("Partial") intentionally does NOT share
   --gold-dark with sev-medium: gold-dark reads brown at a glance.
   A single hex can't be both "obviously yellow" and readable as small
   plain text on white: yellow's brightness IS its yellowness, so any
   shade dark enough to pass contrast as text stops looking yellow and
   starts looking olive/brown (this is why the first attempt still read
   brown). So Partial uses two values: --tier3-yellow, a genuinely bright
   yellow for anything with area (ladder fill, card border, chip
   background), and --tier3-yellow-text, a darker but still true-yellow-hued
   variant (not shifted toward gold-dark's orange) for the few spots where
   the color IS the text sitting directly on a light background. The chip
   itself gets dark navy text instead of white, since white-on-bright-yellow
   fails contrast outright. --tier3-yellow also has to be declared at :root,
   not scoped to .tier-3, because .ladder-seg.seg-3 (see above) isn't a
   descendant of any .tier-3 element — it renders unconditionally as
   "band 3" of the indicator regardless of which tier is active. */
:root { --tier3-yellow: #eab308; --tier3-yellow-text: #a88c00; }
.tier-1, .sev-critical { --sev-c: var(--crimson); --sev-c-text: var(--sev-c); }
.tier-2, .sev-high     { --sev-c: var(--amber);   --sev-c-text: var(--sev-c); }
.tier-3                { --sev-c: var(--tier3-yellow); --sev-c-text: var(--tier3-yellow-text); }
.sev-medium            { --sev-c: var(--gold-dark); }
.tier-4, .sev-low      { --sev-c: var(--emerald); --sev-c-text: var(--sev-c); }
.tier-3 .cat-card-tier { color: var(--navy-deep); }

/* ---------- Email gate ---------- */
/* Sized down 15% (2026-08-10, owner request) — the results above it were
   sized up 20% the same pass, so the score/category output outweighs
   this CTA box rather than competing with it. */
.result-gate {
  max-width: 527px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  padding: 1.7rem;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.result-gate h3 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: .43rem; }
.result-gate p { color: var(--text-secondary); font-size: .78rem; line-height: 1.6; margin-bottom: 1.15rem; }
.gate-fields { display: grid; gap: .64rem; margin-bottom: .94rem; text-align: left; }
.gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: .64rem; }
.gate-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.gate-field label { display: block; font-size: .66rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .26rem; }
.gate-field input, .gate-field select {
  width: 100%;
  padding: .55rem .68rem;
  font: inherit;
  font-size: .77rem;
  border: 1px solid var(--border-line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-primary);
}
.gate-field select { color: var(--text-primary); }
.gate-field select:invalid { color: var(--text-muted); }
.gate-field input:focus-visible, .gate-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold-dark); }
.gate-reassure { font-size: .66rem; color: var(--text-muted); margin-top: .85rem; }
.gate-reassure i { color: var(--emerald); }

/* ---------- Full report (revealed after gate) ---------- */
.result-report { display: none; max-width: 760px; margin: 2.5rem auto 0; }
.result-report.show { display: block; }
.report-head { text-align: center; margin-bottom: 1.75rem; }
.report-head h3 { font-size: 1.4rem; color: var(--text-primary); }
.report-head p { color: var(--text-muted); font-size: .9rem; margin-top: .35rem; }
.mobile-report-disclaimer { font-size: .85rem; color: var(--text-muted); line-height: 1.6; text-align: center; margin: 0 0 1.5rem; }
/* #mobileFullReport is mobile-only by design -- JS decides whether to
   populate it based on the shorter of the two viewport dimensions (so
   phones held in landscape still count as mobile). This is a CSS
   backstop matching that same logic: only hide when BOTH dimensions
   are past the phone threshold, i.e. genuinely not a phone in either
   orientation. A width-only guard would incorrectly hide this on a
   phone in landscape, where width alone often exceeds 640px. */
@media (min-width: 641px) and (min-height: 641px) {
  #mobileFullReport { display: none; }
}

.report-group-label {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-dark); margin: 1.75rem 0 .85rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--border-line);
}
.report-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.report-item-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.report-item-q { font-size: .9rem; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 60%; }
.report-chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: var(--r-pill);
  color: #fff; background: var(--sev-c, var(--text-muted));
}
.report-chip.answer-good { background: var(--emerald); }
.report-item-body { font-size: .85rem; line-height: 1.65; color: var(--text-secondary); }

.report-actions { text-align: center; margin-top: 2rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ====== PDF GENERATION STATUS (post-gate) ====== */
.pdf-status {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border-line);
  border-radius: var(--r-xl);
}
.pdf-status-icon {
  width: 56px; height: 56px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: var(--surface-alt);
  color: var(--gold-dark);
}
.pdf-status.success .pdf-status-icon { background: rgba(5,150,105,.12); color: var(--emerald); }
.pdf-status.error .pdf-status-icon { background: rgba(220,38,38,.12); color: var(--crimson); }
.pdf-status-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: .5rem; }
.pdf-status-text { font-size: .88rem; color: var(--text-secondary); line-height: 1.6; max-width: 440px; margin: 0 auto; }
.pdf-status-actions { margin-top: 1.5rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .q-options { max-width: none; }
  .q-option label { font-size: .78rem; padding: .5rem .25rem; }
  [data-btnsize="compact"] .q-option label { font-size: .76rem; padding: .4rem .2rem; }
  .gate-row, .gate-row-3 { grid-template-columns: 1fr; }
  .rating-word { font-size: 2.04rem; }
  .rating-ladder { max-width: 336px; }
  .cat-card-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- NIST reference sub-label under the tier badge ---------- */
/* ---------- Category CARDS layout (v2: each area rated like the main score) ---------- */
.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.02rem;
  margin-top: .6rem;
}
.cat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-line);
  border-top: 3px solid var(--sev-c, var(--border-navy));
  border-radius: var(--r-md);
  padding: 1.32rem 1.02rem 1.38rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .72rem;
}
/* Mini 4-segment ladder, same logic as the main hero indicator, scaled down */
.cat-ladder {
  display: flex;
  gap: .3rem;
  width: 100%;
  max-width: 144px;
}
.cat-ladder .ladder-seg { height: 8px; }
.cat-card-name {
  font-size: .96rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  min-height: 2.5em;
  display: flex;
  align-items: center;
}
.cat-card-tier {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sev-c);
  padding: .26rem .72rem;
  border-radius: var(--r-pill);
  /* Grid rows stretch cards to equal height by default; pushing the pill
     to the bottom of the flex column keeps it aligned row-to-row even
     when one card's category name wraps to more lines than its neighbor's. */
  margin-top: auto;
}
@media (max-width: 860px) { .cat-card-grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   BASELINE CHECK landing page (security-snapshot.html) only.
   Deliberately ONE flowing section, not several alternating-background
   blocks — owner feedback 2026-08-10: the earlier per-topic section
   treatment (own background + section-head banner per topic) read as
   choppy/oversplit. .container is a shared class from core.css, reused
   not redefined.
   ========================================================= */
.intro-section { background: var(--bg); padding: 4rem 0; }

/* Quick-facts strip — sits above the flowing content as a lightweight
   orientation row, replaces what was a full "What This Is" section */
.intro-quickfacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1.5rem;
  margin: 0 auto 2.5rem;
  max-width: 820px;
}
.intro-quickfact {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.intro-quickfact i { color: var(--gold-dark); }

/* The flowing content column itself — reads as one continuous page,
   not stitched-together marketing blocks */
.intro-body { max-width: 820px; margin: 0 auto 3rem; }
.intro-body h3 {
  font-size: 1.15rem;
  color: var(--text-primary);
  display: flex; align-items: center; gap: .6rem;
  margin: 2.25rem 0 .75rem;
}
.intro-body h3:first-child { margin-top: 0; }
.intro-body h3 i { color: var(--gold-dark); font-size: 1rem; }
.intro-body p { color: var(--text-secondary); font-size: .95rem; line-height: 1.7; }

/* How It Works — inline numbered list, not separate bordered cards */
.intro-steps-inline {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin: .5rem 0 0;
}
.intro-steps-inline li { display: flex; align-items: flex-start; gap: 1rem; }
.intro-steps-inline p, .intro-steps-inline div { color: var(--text-secondary); font-size: .95rem; line-height: 1.7; }
.intro-steps-inline strong { color: var(--text-primary); }
.intro-step-num {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--navy-deep);
  font-weight: 800;
  font-size: .88rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* What This Is Not — checklist, deliberately navy (not crimson) so it
   reads as clear scope-setting, not a warning/alarm */
.intro-not-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 2rem;
  max-width: 960px;
  margin: 1rem auto 0;
}
.intro-not-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.intro-not-list i {
  color: var(--navy-mid);
  background: var(--surface-alt);
  border-radius: 50%;
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  margin-top: .1rem;
}

/* Consent + start card — mirrors .result-gate's visual language */
.consent-gate {
  max-width: 620px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.consent-gate h3 { font-size: 1.4rem; color: var(--text-primary); margin-bottom: .5rem; }
.consent-gate > p { color: var(--text-secondary); font-size: .95rem; margin-bottom: 1.5rem; }
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  text-align: left;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  margin-bottom: 1.5rem;
  cursor: pointer;
}
.consent-check input {
  margin-top: .2rem;
  width: 18px; height: 18px;
  flex-shrink: 0;
  accent-color: var(--gold-dark);
  cursor: pointer;
}
.consent-check span { font-size: .88rem; line-height: 1.55; color: var(--text-secondary); }
#startCheckBtn:disabled { opacity: .45; cursor: not-allowed; }
#startCheckBtn:disabled:hover { transform: none; }

@media (max-width: 860px) {
  .intro-not-list { grid-template-columns: 1fr; }
}

/* Long button labels ("Start Your Baseline Security Check",
   "Unlock Your Full Report") overflow .btn's site-wide white-space:nowrap
   on narrow phones. Allow wrap + a smaller size, scoped to just these two
   full-width gate buttons rather than touching .btn-lg globally. */
@media (max-width: 640px) {
  .consent-gate .btn-lg,
  .result-gate .btn-lg {
    white-space: normal;
    font-size: .82rem;
    line-height: 1.35;
    padding: .8rem 1rem;
  }
}