/* VioVerse Mockup — Landing, Onboarding, Scanning screens */

/* LANDING */

/* FS-2 (2026-08-02), the app-wide typeface sweep. Same defect class FT-1
   found on Disputes: the document default in base.css is Inter, every
   screen is expected to override it on its own root container, and this
   one never did. Only .landing h1 and a scattering of individual child
   rules carried the family, so the upload zone, the "what the scan hunts
   for" strip, the tour deck, the trust line and the site footer all
   rendered in Inter. Measured in a real browser before and after, not
   inferred from the cascade.

   The mount consequence is the load-bearing part. #acr-guide-landing-mount
   lives inside .landing, so openAcrGuide('acr-guide-landing-mount')
   rendered the SAME component in Inter here while the identical call at
   the Home mount rendered it in Plus Jakarta Sans. acr-guide.css declares
   no family of its own and never needed to; it inherits from wherever it
   lands. This one declaration is what makes both mounts agree.

   ONE declaration, here on the root. Do NOT add a second on a child --
   the `font-family: inherit` rules on form controls only work while
   there is exactly one root to inherit from. Matches home.css `.home`
   verbatim. Standing lesson in .claude/rules/vioverse-mockup.md. */
.landing {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: calc(100dvh - var(--shell-top-gap, 10px) - var(--shell-nav-h, 60px)); padding: 36px 32px 40px; text-align: center;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* ZA4.19: viewport-conditional line-break utilities for the landing
   headline + subhead. Desktop keeps the existing single break after
   "really"; mobile (<= 480px) swaps to breaks after "what's", "your",
   and after "credit report." so the headline stacks as three lines and
   the subhead splits after the first sentence. The flip happens in
   mobile.css @media (max-width: 480px). */
.br-mobile { display: none; }
.br-desktop { display: inline; }
.landing h1 { font-size: clamp(48px, 6vw, 72px); font-weight: 700; margin-bottom: 28px; line-height: 1.05; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -0.04em; }
.landing h1 span { color: var(--coral); }
.landing-subtitle { display: none; }
/* Task 1/2 upload-affordance redesign: PROMOTE the box. Dashed coral border
   (drop-zone signal), solid white fill that steps forward against the cream
   page, and a resting neutral lift so it reads as pressable on mobile with no
   hover. The lift is the attention-draw (no motion, per AG-4). */
.upload-zone {
  width: 100%; max-width: clamp(380px, 55vw, 580px); border-radius: var(--radius);
  padding: 28px 48px 32px; cursor: pointer; transition: all 0.25s;
  margin-top: 8px;
  background-color: #fff;
  /* Custom dashed border: short dashes + wide gaps, which CSS `border: dashed`
     cannot control. Painted as an inline-SVG <rect> with stroke-dasharray and
     rx matching --radius. stroke-width is ~2x the visible thickness because the
     rect sits on the box edge and its outer half is clipped to the border-box. */
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='28' ry='28' fill='none' stroke='%23f26419' stroke-width='5' stroke-dasharray='8%2c 5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  /* background-size 100% 100% forces iOS Safari to render the SVG at the box
     size. Without it WebKit uses the SVG default 300x150 and scales it up,
     enlarging the dashes/gaps (the "major gaps" that appeared only on mobile). */
  background-size: 100% 100%;
  box-shadow: 0 12px 34px rgba(30,42,53,0.10);
}
/* Hover intentionally adds no coral ring or extra shadow now; only the resting
   light shadow remains. */
.upload-zone:active { transform: scale(0.998); }
/* State rules use background-color (NOT the `background` shorthand) so they do
   not wipe the SVG dashed-border background-image. */
.upload-zone.drag-over { background-color: rgba(242,100,25,0.06); transform: scale(1.02); box-shadow: 0 8px 32px rgba(242,100,25,0.15); }
/* ZA4.20: click feedback no longer paints a coral fill or coral glow ring. The
   box stays white with only the resting light shadow while the picker is open. */
.upload-zone.uploading {
  box-shadow: 0 7px 24px rgba(30,42,53,0.10);
}
.upload-icon { width: 56px; height: 56px; display: block; margin: 0 auto 16px; color: var(--coral); }
.upload-icon svg { width: 100%; height: 100%; display: block; }
.upload-zone h3 { font-size: 30px; font-weight: 600; margin-bottom: 14px; letter-spacing: -0.02em; }
.upload-zone p { font-size: 14px; color: var(--text-secondary); margin-bottom: 0; }
/* "Drag & drop it here, or" line. Desktop only; hidden on mobile. */
.upload-zone .upload-zone-drag {
  font-size: 14px;
  font-weight: 400;
  color: rgba(30,42,53,0.55);
  margin: 0 0 20px;
}
/* Navy action pill replaces the old coral text cue. */
.upload-zone-btn {
  display: inline-block;
  padding: 12px 32px;
  background: #1D2430;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(29,36,48,0.22);
  margin: 0 0 14px;
  transition: opacity 0.15s;
}
.upload-zone-btn:hover { opacity: 0.88; }
.upload-zone-sub {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.7;
  margin: 0;
  line-height: 1.3;
}

/* Bucket B (Phase 3): "Get Started" landing CTA. Shown only when no
   Identity Anchor exists yet (#screen-landing.needs-id-setup, toggled in
   showScreen('landing')); otherwise hidden and the upload-zone takes its
   place. Floating Bone-field pill: same width/spot as the upload-zone so
   the brand-anchor X-position is continuous, 28px radius, solid coral
   border, navy text, subtle elevation. Clicking it routes through
   _handleUploadClick -> gateUploadOnIdAnchor -> the id-setup form. */
.get-started-zone {
  display: none;            /* default; .needs-id-setup reveals it (see below) */
  width: 100%; max-width: 580px;
  border: 2px solid var(--coral);
  border-radius: var(--radius);
  background: #F3EFE7;      /* Bone Field */
  box-shadow: 0 8px 24px rgba(30, 42, 53, 0.08);
  padding: 48px 56px;
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s, transform 0.1s;
  text-align: center;
}
.get-started-zone:hover {
  background: rgba(242, 100, 25, 0.06);
  box-shadow: 0 10px 32px rgba(242, 100, 25, 0.15);
}
.get-started-zone:active { transform: scale(0.998); }
.gs-primary {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 28px; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em; line-height: 1.1;
}
.gs-secondary {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px; font-weight: 400; color: var(--text);
  opacity: 0.7; margin: 6px 0 0; line-height: 1.3;
}
/* State swap: when the landing screen knows there's no anchor yet, show
   the Get Started box and hide the upload-zone. Without the class (anchor
   present, or pre-JS first paint) the markup default holds: upload-zone
   visible, get-started hidden. */
#screen-landing.needs-id-setup .upload-zone { display: none; }
#screen-landing.needs-id-setup .get-started-zone {
  display: flex; flex-direction: column; align-items: center;
}

.trust-line { display: none; }
/* ZA6.8: pill expanded to two-line label with external href to
   AnnualCreditReport.com. Was fixed 228x34 with single-line "Get
   your free report" + onclick="showScreen('guide')"; now auto-width
   pill with padded two-line content, real link, opens new tab.
   Lead-in and proof lines bracket the pill to address user state
   ("Don't have your report yet?" above, "The only federally
   authorized source" below). Viewport-relative calc(16px+2vh) top
   margin moved from pill to lead-in so pill-group's page position
   is preserved. */
.report-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; min-width: 260px; max-width: 320px;
  padding: 10px 28px;
  border-radius: 16px;
  margin: calc(16px + 2vh) auto 0;
  background: #fff; border: 2px solid var(--coral);
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--text);
  text-decoration: none; cursor: pointer;
  text-align: center;
  appearance: none; -webkit-appearance: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.report-pill:hover { background: rgba(242,100,25,0.04); box-shadow: 0 2px 12px rgba(242,100,25,0.12); }
.report-pill-label {
  display: inline-block;
  line-height: 1.25;
  text-align: center;
}
.report-pill-icon { width: 18px; height: 18px; display: block; color: var(--coral); }

.report-pill-lead {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  margin: calc(16px + 2vh) 0 10px;
}

/* When lead-in is present, pill collapses its own top margin so the
   lead-in anchors the group's viewport-relative offset. */
.report-pill-lead + .report-pill { margin-top: 0; }

.report-pill-proof {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
  text-align: center;
  margin: 10px 0 0;
  opacity: 0.8;
}

/* HOW IT WORKS — ZA4.22 polish pass (heading removed ZA4.23) */
.how-it-works { margin: 27px auto 45px; width: 100%; max-width: 580px; text-align: center; }

/* Task 1 redesign: DEMOTE the three info steps from a 3-cell grid (which read
   as a tab bar, especially on mobile) into one quiet inline process strip:
   "Upload -> Scan -> See what's wrong". Small, muted, no tap-target affordance. */
.hiw-steps {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hiw-step { display: inline-flex; align-items: center; cursor: default; }
/* Arrows are real markup elements so justify-content: space-between distributes
   them evenly across the box width, matching the desktop reference (Upload flush
   left, "See what's wrong" flush right, arrows centered in the gaps). */
.hiw-arrow {
  color: rgba(30,42,53,0.40);
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}

.hiw-icon-slot {
  width: auto;
  height: auto;
  margin: 0 10px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hiw-icon {
  width: 26px;
  height: 26px;
  color: rgba(30,42,53,0.45);
}
.hiw-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Strip uses the short label on both breakpoints; long copy retired. */
.hiw-copy { display: none; }
.hiw-copy-mobile {
  display: inline;
  font-size: 24px;
  font-weight: 400;
  color: rgba(30,42,53,0.55);
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.hiw-closer {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 32px auto 4px;
  letter-spacing: -0.01em;
  text-align: center;
}

/* "No report handy?" demo link under upload zone (anchor-present state).
   Hidden on first-visit alongside the upload-zone itself. */
.upload-demo-link {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(30,42,53,0.55);
  text-align: center;
}
.upload-demo-link a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}
.upload-demo-link a:hover { text-decoration: underline; }
#screen-landing.needs-id-setup .upload-demo-link { display: none; }

/* === "What the scan hunts for" section (Item 4 redesign, 2026-05-24) ======
   Replaces .landing-subtitle + .how-it-works on the anchor-present upload
   page. 4 Tabler icons, coral stroke, left-aligned text column. Hidden on
   first-visit via the #screen-landing.needs-id-setup rule above. */
.scan-hunts {
  width: 100%;
  max-width: clamp(380px, 55vw, 580px);
  margin: 0 auto;
  margin-top: 24px;
  text-align: left;
}
.scan-hunts-heading {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  color: var(--coral);
  margin: 12px 0 18px;
  letter-spacing: -0.01em;
}
.scan-hunts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scan-hunts-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}
.scan-hunts-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--coral);
}
.scan-hunts-icon svg { width: 100%; height: 100%; display: block; }
.scan-hunts-note {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 300;
  color: rgba(30,42,53,0.7);
  margin: 20px 0 32px;
  line-height: 1.5;
}

/* === vioverse logotype + slogan (above footer, anchor-present only) ====== */
.landing-logotype {
  text-align: center;
  margin: 0 auto;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}
.landing-logotype-mark {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.landing-logotype-mark .wm-vio { color: var(--coral); }
.landing-logotype-mark .wm-verse { color: var(--text); }
.landing-logotype-slogan {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  color: rgba(30,42,53,0.6);
  margin-left: 0.4em;
  letter-spacing: -0.005em;
}

/* Step-icon hover animations + their reduced-motion block removed with the
   Task 1 demotion: an info strip must not signal interactivity (the hover coral
   + icon micro-animations read as tappable). The .hiw-anim-* SVG classes remain
   inert in the markup with no rule referencing them. */

/* GUIDED ONBOARDING */
/* FS-2: root typeface declaration. #screen-guide's body copy, step
   headings and tips were all Inter -- only the h2 below carried the
   family. See the .landing block above for the full rationale. */
.onboarding {
  max-width: 560px; margin: 0 auto; padding: 40px 24px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.onboarding h2 { font-size: clamp(35px, 4.13vw, 56px); font-weight: 700; margin-bottom: 28px; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -0.04em; line-height: 0.95; }
.onboarding h2 span { color: var(--coral); }
.onboarding > p { color: var(--text-secondary); margin-bottom: 28px; }
.ob-step { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.ob-step .step-num { width: 28px; height: 28px; font-size: 13px; }
.ob-step h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.ob-step p { font-size: 14px; color: var(--text-secondary); }
.ob-step .tip { font-size: 13px; color: var(--coral); margin-top: 4px; }
.ob-actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
/* FS-2: `font-family: inherit` is what carries the root declaration into a
   form control. Buttons do NOT inherit the family -- the UA stylesheet
   hard-sets Arial on them -- so this rule, which already set size and
   weight, was leaving "Go to AnnualCreditReport.com" in Arial. */
.ob-actions button { padding: 12px 24px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.ob-primary { background: var(--ink-0); color: var(--bone-0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.ob-step-num { background: var(--ink-0) !important; color: var(--bone-0) !important; }
/* Session 8 ZA7.3: Guide screen escape control as bottom-row pill.
   Replaces ZA7.2's top-right `.ob-home-btn` (collided with wrapped h2).
   Lives inside `.ob-actions` alongside the primary CTA. House icon +
   coral/navy "vioverse" wordmark. `justify-content: center` keeps the
   icon+wordmark balanced when mobile stretches the pill full-width. */
.ob-home-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border: 1.5px solid var(--line-strong); background: transparent; border-radius: 999px; cursor: pointer; color: var(--text); font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size: 15px; font-weight: 600; appearance: none; -webkit-appearance: none; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.ob-home-pill svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.ob-home-pill-brand { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase; font-size: 17px; line-height: 1; }
.ob-home-pill-brand > span { color: var(--coral); }
.ob-home-pill:hover { border-color: var(--coral); background: rgba(242,100,25,0.04); }

/* SCANNING */
.scanning {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: calc(100dvh - var(--shell-top-gap, 10px) - var(--shell-nav-h, 60px)); padding: 12vh 24px 40px; text-align: center;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; /* FS-D5: normalized to match .home */
}
.scan-status { font-size: 15px; color: var(--text-secondary); margin-bottom: 24px; min-height: 24px; }
/* ZA4.26: scanning visual = single unified-path SVG icon with coral band sweep
   via SMIL gradient animation. Container is now just a size holder; the icon
   provides its own visual. scan-line / scan-fake-text / scan-fake-line /
   scanDown / flagPulse rules removed. scanning.js still references .scan-line
   + #sl4/sl7/sl11 via null-guarded queries — harmless dead code, candidate
   for follow-up cleanup. */
.scan-doc {
  width: 340px;
  height: 440px;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}
.scan-doc-icon {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .scan-doc-icon animate { display: none; }
}
.scan-substatus { margin-top: 16px; font-size: 13px; color: var(--text-secondary); opacity: 0.7; min-height: 20px; transition: opacity 0.4s; }
.scan-counter { margin-top: 24px; font-size: 28px; font-weight: 700; color: var(--text); }
.scan-counter span { color: var(--coral); }
.scan-label { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

/* SCAN ERROR STATE */
.scan-retry-btn {
  padding: 10px 24px; border: none; border-radius: 999px;
  background: var(--ink-0); color: var(--bone-0); font-size: 14px; font-weight: 600;
  cursor: pointer; display: block; margin: 16px auto 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.scan-retry-btn:hover { filter: brightness(1.1); }
.scan-back-link {
  font-size: 14px; color: var(--text-secondary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  border: none; background: none; display: block; margin: 8px auto 0;
}

/* ========================================================================
   PATH (c) v10 FIRST-VISIT LANDING (Session 7-impl-B, 2026-05-17 evening).
   Replaces v6's eight-block stack with a single orange-outlined card per
   BACKLOG 12d sign-off-withheld diagnosis ("too cluttered, too transactional"
   for a first-visit user). Card holds the subhead + four steps + relocated
   .get-started-zone (Q1 Plan A) + footnote. Hero h1 stays OUTSIDE the card.
   No mobile sticky CTA — fully removed (markup + CSS + the legacy CSS hide
   rule that depended on its existence).

   All v10 selectors scoped under #screen-landing.needs-id-setup so the
   anchor-present landing renders exactly as today (regression contract —
   see BACKLOG entry 12d). Authority: handoff-2026-05-17 v10 prompt +
   landing-path-c-revised-v10.html sketch (compositional intent only;
   production tokens win on every divergence).

   Rendered first-visit stack (top to bottom):
     .pc-block.pc-hero (h1 + .pc-payoff subhead "Here's how:")  →
     .pc-whats-inside (3 bullets + invite)  →  .pc-card (eyebrow + 3 numbered
     steps + CTA + footnote)  →  legacy .report-pill-lead + .report-pill
     →  .pc-trust (outside-card trust line)  →  site-footer.
   ====================================================================== */

/* Hide-by-default + reveal-in-first-visit (regression contract).
   .pc-block, .pc-payoff, .pc-whats-inside, .pc-card, and .pc-trust all
   default to display:none and reveal under #screen-landing.needs-id-setup. */
.pc-block,
.pc-card,
.pc-trust,
.pc-payoff,
.pc-whats-inside,
.tour-card,
.tour-merged-row,
.tour-acr-link,
.tour-h1,
.tour-deck,
.ld-card,
.ld-strip { display: none; }

/* Relay 22: anchor-present sessions never show landing sample material.
   The inline-style toggle in acr-guide.js owns first-visit visibility. */
#screen-landing:not(.needs-id-setup) #acr-guide-landing-mount { display: none !important; }

#screen-landing.needs-id-setup .pc-block,
#screen-landing.needs-id-setup .tour-h1,
#screen-landing.needs-id-setup .tour-deck { display: block; }
/* Relay 11: .pc-trust, .tour-merged-row, .tour-acr-link retired from the
   first-visit state (the .ld-strip absorbs their jobs); markup preserved for
   the anchor-present regression contract. Tour card demoted: hidden until the
   strip's tour link adds .tour-revealed. */
#screen-landing.needs-id-setup .tour-card.tour-revealed { display: grid; }
/* RETIRED from first-visit: .pc-card and .pc-whats-inside now hidden
   (base display:none takes effect; no longer in the show list).
   .report-pill-lead, .report-pill, .report-pill-proof also hidden. */
#screen-landing.needs-id-setup .report-pill-lead,
#screen-landing.needs-id-setup .report-pill,
#screen-landing.needs-id-setup .report-pill-proof { display: none; }

/* Hide legacy shared content in first-visit state (anchor-present keeps
   it visible — that's today's design, untouched). The .landing > h1
   direct-child selector targets the original anchor-present headline;
   .tour-h1 is excluded so the reframe H1 stays visible. */
/* FIX 1+2: wider content area for first-visit. Reduce horizontal padding
   so the 62px H1 fits on one line and the tour card has more breathing room. */
#screen-landing.needs-id-setup .landing { padding: 36px 20px 40px; }

#screen-landing.needs-id-setup .landing > h1:not(.tour-h1),
#screen-landing.needs-id-setup .landing-subtitle,
#screen-landing.needs-id-setup .how-it-works,
#screen-landing.needs-id-setup .scan-hunts,
#screen-landing.needs-id-setup .trust-line,
#screen-landing.needs-id-setup .report-pill-proof,
#screen-landing.needs-id-setup .hiw-closer,
#screen-landing.needs-id-setup .landing-logotype { display: none; }

/* Width columns — hero gets 820px so the headline ramp can breathe; card
   gets 580px to inherit production's .upload-zone brand-anchor X-axis.
   Both centered in the existing .landing flex-column wrapper. */
.pc-block {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.pc-card {
  width: 100%;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* === Hero (outside card, h1 only) =============================== */
.pc-hero { padding: 0 0 8px; }
/* Specificity: `.landing h1` (the legacy hero rule at line 16) has
   specificity (0,1,1) — beats a bare .pc-h1 (0,1,0). Scope under
   #screen-landing.needs-id-setup to win specificity reliably. */
#screen-landing.needs-id-setup .pc-h1 {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: clamp(56px, 7vw, 86px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 22px;
  text-align: center;
}
.pc-h1 em { color: var(--coral); font-style: normal; }

/* === The card ==================================================== */
/* Orange-outlined frame. Decorative only — no hover, no click affordance,
   no glow on the container. The only interactive element is the Get Started
   pill inside (the relocated .get-started-zone). */
.pc-card {
  padding: 36px 40px 32px;
  background: var(--bone-0);
  border: 2px solid var(--coral);
  border-radius: 28px;
  text-align: left;
}

/* Card subhead — "Four steps. About a minute." */
.pc-card .pc-subhead {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 26px;
  opacity: 1;
  max-width: none;
}
.pc-card .pc-subhead em { color: var(--coral); font-style: normal; }

/* Steps list */
.pc-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pc-step {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.pc-step-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-step-icon svg { width: 100%; height: 100%; display: block; }
/* Footnote-reference asterisks: inline (next to "PDF") + the footnote line.
   Shared rule so the two markers can never drift apart (BUG 1, 2026-05-20).
   Small + raised reads as a proper footnote marker AND shrinks the glyph's
   side-bearing, fixing the iOS-vs-Chrome gap mechanically instead of chasing
   a brittle px margin. */
.pc-aster-inline, .pc-aster {
  color: var(--coral);
  font-weight: 800;
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
}

/* CTA — relocated .get-started-zone INSIDE .pc-card (Q1 Plan A). Wrapper +
   onclick handler + .gs-primary inner pill all survive from Bucket B; this
   override centers the pill inside the card and strips the Bone-Field
   rectangle chrome. The .uploading coral-glow contract propagates inward
   via descendant combinator — preserves the post-payment animation. */
.pc-card .get-started-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0 0 22px;
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
.pc-card .get-started-zone:hover {
  background: transparent;
  box-shadow: none;
}
.pc-card .get-started-zone .gs-primary {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--coral);
  color: #fff;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 18px 56px;
  border-radius: 999px;
  box-shadow: 0 6px 16px -4px rgba(242,100,25,0.4);
  transition: filter 0.15s, transform 0.15s, box-shadow 0.18s;
  cursor: pointer;
}
.pc-card .get-started-zone:hover .gs-primary {
  filter: brightness(1.06);
  box-shadow: 0 0 0 6px rgba(242,100,25,0.18), 0 10px 22px -4px rgba(242,100,25,0.5);
  transform: translateY(-1px);
}
.pc-card .get-started-zone:active .gs-primary {
  transform: scale(0.998);
}
.pc-card .get-started-zone.uploading .gs-primary {
  filter: brightness(1.06);
  box-shadow: 0 0 0 4px rgba(242,100,25,0.18), 0 10px 24px -4px rgba(242,100,25,0.5);
}

/* "Already have an account? Sign in" — below the Create your account pill,
   inside .pc-card. Matches .id-signin-line style (id-setup.css). */
.pc-signin-line {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px;
  color: rgba(30,42,53,0.78);
  text-align: center;
  margin: 12px 0 16px;
  font-weight: 500;
}
.pc-signin-line a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}
.pc-signin-line a:hover { text-decoration: underline; }

/* Footnote inside card — coral asterisk anchored to the PDF step above. */
.pc-footnote {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(30,42,53,0.62);
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
}

/* === Footer trust line (FIX 3: hairline + muted + reordered) ====== */
/* Restyled for the tour-first landing. Hairline border-top separates
   the trust line from the page content. Text muted, no bold, no coral.
   The .site-footer (Terms/Privacy) follows immediately after. */
#screen-landing.needs-id-setup .pc-trust {
  margin: 48px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(30,42,53,0.08);
  text-align: center;
  max-width: 1000px;
}
#screen-landing.needs-id-setup .pc-trust-primary {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(30,42,53,0.45);
  margin: 0;
  text-align: center;
}
#screen-landing.needs-id-setup .pc-trust-primary em {
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}
/* Footer Terms/Privacy in first-visit: match the trust-line muted gray. */
#screen-landing.needs-id-setup .site-footer {
  font-size: 12.5px;
  color: rgba(30,42,53,0.45);
  opacity: 1;
  padding: 12px 16px 32px;
}
#screen-landing.needs-id-setup .site-footer a {
  color: inherit;
}
#screen-landing.needs-id-setup .site-footer .sep {
  opacity: 0.55;
}

/* === Nav Sign-in pill (auth front-end stub, 2026-05-23) ===============
   Outlined navy pill, shown only on the first-visit landing. Hidden on all
   other screens and on the anchor-present landing state. Visible-but-not-
   yet-wired — clicking it is a future Clerk build. */
.nav-signin {
  display: none;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border: 1.5px solid var(--text);
  border-radius: 40px;
  padding: 9px 20px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.nav-signin:visited { color: var(--text); }
.nav-signin:hover { background: var(--text); color: var(--bone-0); }
.nav-signin svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 1.75; fill: none;
}
/* Show only on the landing screen when unauthenticated. The nav is NOT
   inside #screen-landing, so we scope via body.show-signin
   (_syncLandingCtaState in app.js). */
body.show-signin .nav-signin { display: flex; }
/* Hide Sign-in when authenticated (body.clerk-authenticated overrides) */
body.clerk-authenticated .nav-signin { display: none !important; }
/* Belt-and-suspenders: tour signup + ACR rows are first-visit-only chrome.
   The base display:none at the top of this file hides them, but a downstream
   styling rule can override that (the .tour-account-row leak, fixed above).
   This selector is high-enough specificity to catch future regressions. */
body.clerk-authenticated .tour-merged-row,
body.clerk-authenticated .tour-acr-link { display: none !important; }

/* === Nav Sign-out link (auth, 2026-05-24; Option A restyle, 2026-05-25)
   Navy semibold text + exit icon, no border. Mirror of .nav-signin but
   quieter (no pill outline). Visible on every screen when authenticated.
   Hidden by default; shown via body.clerk-authenticated. */
.nav-signout {
  display: none;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  padding: 9px 0;
  transition: opacity 0.15s;
}
.nav-signout:visited { color: var(--text); }
.nav-signout:hover { opacity: 0.7; }
.nav-signout svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 1.75; fill: none;
}
body.clerk-authenticated .nav-signout { display: flex; }

/* --- Tips replay + divider (coach tour, 2026-06-18) --- */
.nav-tips {
  display: none;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 9px 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-tips:hover { opacity: 0.7; }
.nav-tips svg {
  width: 16px; height: 16px;
  fill: currentColor;
}
.nav-divider {
  display: none;
  width: 1px;
  height: 14px;
  background: rgba(30, 42, 53, 0.16);
  flex-shrink: 0;
}
body.clerk-authenticated[data-screen="report-view"] .nav-tips { display: flex; }
body.clerk-authenticated[data-screen="report-view"] .nav-divider { display: block; }

/* === Payoff line (auth front-end reflow, 2026-05-23) ==================
   Hero subhead below the headline, centered. Uses the existing
   .landing-subtitle size (33px desktop / 19px mobile) as the closest
   existing "hero subhead" token, but at weight 400 (lighter). */
.pc-payoff {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}

/* === "What vioverse does" block (auth front-end reflow, 2026-05-23) ===
   Boxless left-aligned content sharing the action card's 580px/left-edge. */
.pc-whats-inside {
  width: 100%; max-width: 580px;
  margin: 18px auto 26px;
  padding-left: 40px;
  text-align: left;
}
/* Bullet list: sized + weighted to match .pc-step (16px/500, 26px icons) */
.pc-demo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pc-demo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.pc-demo-item b { font-weight: 600; }
.pc-demo-item-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-demo-item-icon svg { width: 100%; height: 100%; display: block; }
/* Coral invite line — left-aligned with the bullets + wordmark */
.pc-demo-invite {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--coral);
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px;
}
.pc-demo-invite svg {
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 1.75; fill: none;
}
/* Desktop shows "Click", mobile shows "Tap" */
.pc-demo-invite-mobile { display: none; }

/* === Step numbers (auth front-end rewrite: 4 items to 3, numbered) ==== */
.pc-step-num {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--coral);
  width: 14px;
  flex-shrink: 0;
}

/* ===================== TOUR-FIRST LANDING REFRAME (2026-06-21) ===================== */

/* --- H1 + deck --- */
/* FIX 1: H1 sits outside .pc-block to avoid the 820px cap. Styled at the
   .landing level so the full content width (padding-limited) is available.
   62px 800-weight fits "The problem might not be you" on one line at
   desktop widths. The same element dims in playing state (see page-dim
   rules below), so sizing must work in both states. */
/* Phone scale variable -- recomputed per breakpoint via media queries below */
:root { --scale: 1.18; }

.tour-h1 {
  font-size: clamp(34px, 6.4vw, 62px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 16px;
  text-align: center;
  white-space: nowrap;
}
.tour-h1 em { font-style: normal; color: var(--coral); }
.tour-deck {
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

/* --- Tour card (the coral-bordered hero container) --- */
/* GRID SHELL: phone column spans both rows and is the tallest element,
   so it locks card height. Play never resizes the card. */
.tour-card {
  display: none; /* base hide; shown via needs-id-setup */
  position: relative;
  grid-template-columns: 500px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "copy phone" "action phone";
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--coral);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 20px 50px -24px rgba(242,100,25,0.45);
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  transition: box-shadow 0.3s ease;
}
.tour-card.is-playing {
  box-shadow: 0 28px 64px -24px rgba(242,100,25,0.5);
}

/* --- X close button (playing state only) --- */
.tour-card-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(30,42,53,0.5);
  font-family: inherit; /* FS-2: buttons do not inherit the family on their own */
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: color 0.15s;
}
.tour-card-close:hover { color: var(--coral); }
.tour-card.is-playing .tour-card-close { display: flex; }

/* --- GRID CHILD: tc-copy (caption zone) --- */
.tc-copy {
  grid-area: copy;
  padding: 44px 44px 0;
}
/* Reserved-height box: longest 3-line caption fits without pushing controls */
.cap-area { position: relative; min-height: 176px; }

/* Resting caption (hidden when playing) */
.tour-resting-cap { display: block; }
.tour-card.is-playing .tour-resting-cap { display: none; }

.tour-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 10px;
}
.tour-headline {
  font-size: 33px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 24px;
  text-wrap: balance;
}
.tour-headline em { font-style: normal; color: var(--coral); }

/* --- GRID CHILD: tc-action (controls zone) --- */
.tc-action {
  grid-area: action;
  padding: 0 44px 44px;
  min-height: 132px;
}
/* Resting action (hidden when playing) */
.tour-rest-action { display: block; }
.tour-card.is-playing .tour-rest-action { display: none; }

/* Play button */
.tour-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--coral);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 16px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(242,100,25,0.5);
  font-family: inherit;
  transition: box-shadow 0.2s, transform 0.15s;
}
.tour-play-btn:hover {
  box-shadow: 0 12px 28px -6px rgba(242,100,25,0.6);
  transform: translateY(-1px);
}
.tour-play-btn:active { transform: translateY(0); }
.tour-play-btn svg { width: 19px; height: 19px; }

/* Decorative scrubber (resting state, inert) */
.tour-scrubber-decor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.tour-ctrl-rest {
  stroke: rgba(30,42,53,0.5);
  cursor: pointer;
  transition: stroke 0.15s ease;
  flex-shrink: 0;
}
.tour-ctrl-rest:hover { stroke: var(--coral); }
.tour-track-decor {
  width: 120px;
  height: 5px;
  border-radius: 999px;
  background: rgba(30,42,53,0.14);
  overflow: hidden;
}
.tour-fill-decor {
  width: 0%;
  height: 100%;
  background: var(--coral);
  border-radius: 999px;
}
.tour-dots-decor {
  display: flex;
  gap: 5px;
}
.tour-dots-decor span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(30,42,53,0.2);
}

/* Play/pause button: Lucide circle icons replace the button's own border */
.tour-card .vw-pp { border: none; background: transparent; width: 34px; height: 34px; }
.tour-card .vw-pp svg { width: 34px; height: 34px; }
.tour-card .vw-pp:hover { color: var(--coral); }

/* Beat counter (playing state only) */
.tour-beat-counter {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(30,42,53,0.5);
  margin-top: 14px;
}
.tour-card.is-playing .tour-beat-counter { display: block; }

/* --- GRID CHILD: tc-phone (device column, spans both rows) --- */
.tc-phone {
  grid-area: phone;
  background: #F3EFE7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

/* --- Merged row (demo invite + account row) --- */
/* display is governed by the show/hide block at the top of this file:
   display:none by default, display:block under #screen-landing.needs-id-setup.
   Do NOT set display here -- it overrides the hide rule. */
.tour-merged-row {
  margin-top: 32px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.tour-demo-line {
  font-size: 14px;
  font-weight: 500;
  color: rgba(30,42,53,0.55);
  margin-bottom: 14px;
}
.tour-demo-link {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}
.tour-demo-link:hover { text-decoration: underline; }

/* --- Demoted account row (inside merged row) --- */
.tour-account-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tour-like {
  font-size: 15px;
  font-weight: 500;
  color: rgba(30,42,53,0.7);
}
.tour-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(30,42,53,0.25);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 15px;
  background: var(--bone-0);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  background: transparent;
  transition: border-color 0.15s, color 0.15s;
}
.tour-create-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.tour-signin-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(30,42,53,0.55);
}
.tour-signin-text a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}
.tour-signin-text a:hover { text-decoration: underline; }

/* --- Demoted ACR link --- */
.tour-acr-link {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(30,42,53,0.6);
  text-align: center;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.tour-acr-link a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
.tour-acr-link a:hover { text-decoration: underline; }

/* --- Page dim (playing state, no layout shift) --- */
#screen-landing.needs-id-setup.tour-is-playing .tour-h1 {
  color: rgba(30,42,53,0.32);
  transition: color 0.4s ease;
}
#screen-landing.needs-id-setup.tour-is-playing .tour-h1 em {
  color: rgba(242,100,25,0.4);
  transition: color 0.4s ease;
}
#screen-landing.needs-id-setup.tour-is-playing .tour-deck {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#screen-landing.needs-id-setup.tour-is-playing .tour-merged-row {
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
#screen-landing.needs-id-setup.tour-is-playing .tour-acr-link,
#screen-landing.needs-id-setup.tour-is-playing .pc-trust,
#screen-landing.needs-id-setup.tour-is-playing .site-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Reverse transitions on collapse */
.tour-h1 { transition: color 0.3s ease; }
.tour-h1 em { transition: color 0.3s ease; }
.tour-deck { transition: opacity 0.3s ease; }
.tour-merged-row { transition: opacity 0.3s ease; }
.tour-acr-link { transition: opacity 0.3s ease; }

/* --- Tour card responsive breakpoints --- */


/* Live coral pulse dot on beat counter while playing */
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.6); } }
.tour-card.is-playing .tour-beat-counter::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral); margin-right: 8px; vertical-align: middle;
  animation: livePulse 1.8s ease-in-out infinite;
}

/* =====================================================================
   MOBILE (<=860px) -- its OWN layout, not a squished desktop.
   Resting: Play up top, clean bezel-less preview below.
   Playing: full-screen player (caption top / scene middle / controls bottom).
   ===================================================================== */
@media (max-width: 860px) {
  .tour-h1 { white-space: normal; font-size: clamp(30px, 8vw, 40px); text-wrap: balance; }
  .tour-deck { font-size: 16px; text-wrap: balance; margin-bottom: 6px; }

  /* lock the page behind the full-screen player */
  html:has(.tour-card.is-playing) { overflow: hidden; }

  /* ---- RESTING: headline -> Play -> compact clean preview ---- */
  .tour-card {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "action" "phone";
    max-width: 440px;
  }
  .tc-copy { padding: 20px 22px 0; text-align: center; }
  .cap-area { min-height: 0; }
  .tour-card .vw-cap { position: relative; opacity: 1; transform: none; display: none; }
  .tour-card .vw-cap.is-active { display: block; }
  .tour-headline { font-size: clamp(22px, 5.6vw, 26px); margin-bottom: 4px; }

  .tc-action {
    padding: 8px 22px 18px; min-height: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  .tour-rest-action { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .tour-play-btn { width: auto; max-width: none; justify-content: center; padding: 13px 28px; font-size: 14px; }
  .tour-scrubber-decor { display: none; }
  .tour-like { display: none; }

  /* Stack merged row: demo line + account row. Both centered. */
  .tour-demo-line { font-size: 13px; margin-bottom: 12px; }
  .tour-account-row {
    flex-direction: column; align-items: center; gap: 16px;
  }
  .tour-create-btn { margin-bottom: 6px; }
  .tour-signin-text { display: block; text-align: center; }
  .upload-demo-link { font-size: 13px; }

  .tc-phone { padding: 22px 0 22px; }
  /* drop the dark phone frame -> clean screen (no boxes-in-boxes).
     Specificity: .tour-card .tc-phone .vw-* (0-3-0) beats walkthrough.css
     .tour-card .vw-device (0-2-0) which loads later. */
  .tour-card .tc-phone .vw-device { background: transparent; padding: 0; box-shadow: none; --scale: 0.66; width: calc(320px * var(--scale)); }
  .tour-card .tc-phone .vw-notch { display: none; }
  .tour-card .tc-phone .vw-screen-frame { box-shadow: 0 16px 38px -20px rgba(28,20,14,0.35); }

  /* ---- PLAYING: full-screen player ---- */
  #screen-landing.needs-id-setup .tour-card.is-playing {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; flex-direction: column;
    max-width: none; margin: 0;
    border: none; border-radius: 0;
    background: var(--bone-0); box-shadow: none;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  }
  .tour-card.is-playing .tc-copy {
    order: 1; flex: none; background: transparent;
    padding: 20px 24px 6px;
    display: flex; align-items: center; justify-content: center;
  }
  .tour-card.is-playing .cap-area { width: 100%; max-width: 480px; }
  .tour-card.is-playing .tc-phone {
    order: 2; flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 4px 0; background: transparent;
  }
  .tour-card.is-playing .tc-phone .vw-device { --scale: 0.86; }
  .tour-card.is-playing .tc-action {
    order: 3; flex: none; background: transparent;
    padding: 10px 24px calc(18px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center;
  }
  .tour-card.is-playing .vw-controls { width: 100%; max-width: 440px; }
  .tour-card.is-playing .tour-beat-counter { display: none; }
  .tour-card-close { top: calc(10px + env(safe-area-inset-top)); right: 14px; width: 38px; height: 38px; font-size: 24px; }
}

/* taller phones: let the scene fill more of the full-screen player */
@media (max-width: 860px) and (min-height: 740px) {
  .tour-card.is-playing .tc-phone .vw-device { --scale: 0.98; }
}

/* very small phones: shrink the resting preview */
@media (max-width: 380px) {
  .tour-card:not(.is-playing) .tc-phone .vw-device { --scale: 0.6; }
}

/* ======================================================================
   LANDING DEMO CONTAINER (relay 11). The sample-report demo as the hero.
   Scoped to the first-visit state. Values are pinned to the approved
   factory mockup (3a); do not eyeball-adjust.
   ====================================================================== */
#screen-landing.needs-id-setup .ld-card {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "copy stage" "list stage";
  background: #fff;
  border: 2px solid var(--coral);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 20px 50px -24px rgba(242,100,25,0.45);
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}
#screen-landing.needs-id-setup .ld-copy { grid-area: copy; padding: 36px 34px 0; }
.ld-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--coral); margin: 0 0 10px;
}
.ld-headline {
  font-size: 27px; font-weight: 700; line-height: 1.14; letter-spacing: -0.025em;
  color: var(--text); margin: 0 0 20px; text-wrap: balance;
}
.ld-headline em { font-style: normal; color: var(--coral); }
#screen-landing.needs-id-setup .ld-list { grid-area: list; padding: 0 34px 30px; }
.ld-list-label { font-size: 12.5px; font-weight: 500; color: rgba(30,42,53,0.5); margin: 0 0 10px; }
.ld-rows { display: flex; flex-direction: column; gap: 8px; max-height: 236px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.ld-rows::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ld-more { margin-top: 9px; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; color: rgba(30,42,53,0.5); }
.ld-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border: 1px solid rgba(31,24,19,0.22); background: transparent;
  border-radius: 12px; padding: 11px 15px; cursor: pointer;
  font-family: inherit; text-align: left; transition: border-color 0.15s ease;
}
.ld-row:hover { border-color: var(--coral); }
.ld-row.selected { border: 2px solid var(--coral); background: rgba(243,239,231,0.5); padding: 10px 14px; }
.ld-row-name { font-size: 15px; font-weight: 600; color: var(--text); }
.ld-row-meta { font-size: 12px; font-weight: 500; color: rgba(30,42,53,0.5); flex-shrink: 0; }
.ld-row.ld-coming { border: 1.5px dashed rgba(31,24,19,0.22); cursor: default; }
.ld-row.ld-coming:hover { border-color: rgba(31,24,19,0.22); }
.ld-row.ld-coming .ld-row-name { color: rgba(30,42,53,0.5); }
.ld-row.ld-coming .ld-row-meta {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(30,42,53,0.4);
}
#screen-landing.needs-id-setup .ld-stage {
  grid-area: stage; background: #F3EFE7; padding: 34px 38px;
  display: grid; grid-template-columns: 1fr 296px;
  grid-template-areas: "quote page" "attrib page" "support page" "cta page";
  align-content: center; align-items: start;
  column-gap: 40px; row-gap: 14px;
}
.ld-quote { grid-area: quote; font-size: 19px; font-weight: 500; font-style: italic; line-height: 1.5; color: var(--text); align-self: end; }
.ld-attrib { grid-area: attrib; font-size: 12.5px; font-weight: 600; color: rgba(30,42,53,0.5); }
.ld-support { grid-area: support; font-size: 15px; font-weight: 500; line-height: 1.55; color: rgba(30,42,53,0.75); }
.ld-cta {
  grid-area: cta; justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  background: var(--coral); color: #fff; font-size: 17px; font-weight: 700;
  letter-spacing: -0.005em; padding: 16px 30px; border-radius: 999px; border: none;
  cursor: pointer; box-shadow: 0 8px 20px -6px rgba(242,100,25,0.5);
  font-family: inherit; margin-top: 6px; transition: box-shadow 0.2s, transform 0.15s;
}
.ld-cta:hover { box-shadow: 0 12px 28px -6px rgba(242,100,25,0.6); transform: translateY(-1px); }
.ld-cta:active { transform: translateY(0); }
.ld-cta-mobile { display: none; }
.ld-page {
  grid-area: page; width: 296px; align-self: center; background: #fff; border-radius: 10px;
  box-shadow: 0 16px 38px -16px rgba(28,20,14,0.35); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 9px;
}
.ld-page-heading { font-size: 14px; font-weight: 500; color: rgba(158,27,50,0.6); margin-bottom: 2px; }
.ld-bar { height: 5px; border-radius: 2.5px; background: rgba(30,42,53,0.22); }
.ld-bar.dark { height: 6px; border-radius: 3px; background: rgba(30,42,53,0.45); }
.ld-bar-row { display: flex; justify-content: space-between; gap: 12px; }
.ld-bar-row .ld-bar { flex: 1; }
.ld-bar-a { background: rgba(30,42,53,0.35); }
.ld-vio-wrap { margin: 8px 0 2px; }
.ld-vio {
  display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 3px solid var(--coral); border-radius: 999px; padding: 7px 14px;
  animation: vvDemoRing 2.2s ease-in-out infinite;
}
.ld-vio-label { font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--coral); }
.ld-vio-value { font-size: 11px; font-weight: 600; color: var(--text); }
@keyframes vvDemoRing {
  0%, 100% { box-shadow: 0 0 0 5px rgba(242,100,25,0.20), 0 0 22px 6px rgba(242,100,25,0.42); }
  50% { box-shadow: 0 0 0 9px rgba(242,100,25,0.10), 0 0 30px 12px rgba(242,100,25,0.6); }
}
#screen-landing.needs-id-setup .ld-strip {
  width: 100%; max-width: 1100px; margin: 30px auto 0;
  border-top: 1px solid rgba(31,24,19,0.12); border-bottom: 1px solid rgba(31,24,19,0.12);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.ld-cell {
  padding: 18px 20px; display: flex; flex-direction: column; align-items: center;
  gap: 7px; border-right: 1px solid rgba(31,24,19,0.12);
}
.ld-cell:last-child { border-right: none; }
.ld-cell-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: rgba(30,42,53,0.45);
}
.ld-cell-link { font-size: 14px; font-weight: 600; color: var(--coral); text-decoration: none; cursor: pointer; }
.ld-cell-link:hover { text-decoration: underline; }
.ld-cell-link:visited { color: var(--coral); }
.ld-cta-row { grid-area: cta; display: inline-flex; flex-direction: column; align-items: center; align-self: start; justify-self: start; gap: 12px; margin-top: 6px; }
.ld-cta-row .ld-cta { margin-top: 0; }
.ld-pdf-link {
  font-size: 12.5px; font-weight: 600; color: rgba(30,42,53,0.5);
  text-decoration: underline; text-underline-offset: 3px;
}
.ld-pdf-link:hover { color: var(--coral); }
#screen-landing.needs-id-setup #acr-guide-landing-mount {
  width: 100%; max-width: 1100px; margin: 30px auto 0;
}

/* Mobile (matches the landing's existing 860px breakpoint) */
@media (max-width: 860px) {
  #screen-landing.needs-id-setup .ld-card {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "stage" "list";
    max-width: 440px;
    border-radius: 24px;
  }
  #screen-landing.needs-id-setup .ld-copy { padding: 22px 20px 18px; text-align: center; }
  .ld-eyebrow { font-size: 11px; margin-bottom: 8px; }
  .ld-headline { font-size: 21.5px; line-height: 1.16; margin-bottom: 0; }
  #screen-landing.needs-id-setup .ld-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "quote" "attrib" "page" "support" "cta";
    justify-items: center; row-gap: 13px; padding: 22px 20px 24px;
  }
  .ld-quote { font-size: 15.5px; text-align: center; max-width: 300px; align-self: auto; }
  .ld-attrib { font-size: 11.5px; }
  .ld-support { font-size: 13.5px; text-align: center; max-width: 280px; }
  .ld-cta { justify-self: center; font-size: 15.5px; padding: 14px 26px; margin-top: 0; }
  .ld-cta-desktop { display: none; }
  .ld-cta-mobile { display: inline; }
  .ld-page { width: 212px; padding: 16px 15px; gap: 7px; }
  .ld-page-heading { font-size: 10.5px; margin-bottom: 1px; }
  .ld-bar { height: 4px; border-radius: 2px; }
  .ld-bar.dark { height: 5px; border-radius: 2.5px; }
  .ld-vio { border-width: 2.5px; padding: 5px 10px; gap: 5px; }
  .ld-vio-label { font-size: 6.5px; letter-spacing: 0.05em; }
  .ld-vio-value { font-size: 8.5px; }
  #screen-landing.needs-id-setup .ld-list { padding: 16px 18px 20px; }
  .ld-row-name { font-size: 14px; }
  .ld-row-meta { font-size: 11.5px; }
  #screen-landing.needs-id-setup .ld-strip { grid-template-columns: 1fr; margin-top: 24px; }
  .ld-cell { border-right: none; border-bottom: 1px solid rgba(31,24,19,0.12); padding: 14px 8px; }
  .ld-cell:last-child { border-bottom: none; }
  .ld-cell-label { font-size: 10px; }
  .ld-cell-link { font-size: 13.5px; }
  .ld-cta-row { justify-self: center; gap: 10px; margin-top: 0; }
  .ld-pdf-link { font-size: 12px; }
}


/* Ruling (b) mockup 1a: the quiet-carry card on the analyzing screen. Shown
   only when the consumer's answers carried and this report makes nothing
   stale, so the interview never mounts. Deliberately has NO eyebrow above the
   bold line (David, 2026-08-08) and no button: it reports, it does not gate. */
.carry-quiet {
  max-width: 460px;
  margin: 0 auto 22px;
  padding: 18px 22px;
  background: #F3EFE7;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
}
.carry-quiet-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.carry-quiet-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(30, 42, 53, 0.7);
  margin-bottom: 12px;
}
.carry-quiet-link {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.carry-quiet-link:hover { opacity: 0.8; }

@media (max-width: 480px) {
  .carry-quiet { max-width: 100%; padding: 16px 18px; }
  .carry-quiet-title { font-size: 16px; }
  .carry-quiet-body { font-size: 13px; }
}