/*!
 * SetupPasskeys — Copyright (c) 2026 Brian Kinane. All rights reserved.
 * Proprietary and confidential. See LICENSE for terms.
 * https://github.com/briankinane/SetupPasskeys
 */
/* =========================================================
   SETUPPASSKEYS.COM
   Professional, restrained design — Apple & Microsoft inspired
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* Design tokens retuned to the V2 Framed handoff. Named vars
       preserved so 9000 lines of existing CSS keep working; values
       nudge to the handoff palette so everything re-tints cohesively
       (neutrals cooler, accent slightly deeper, shadows quieter). */

  --bg: #ffffff;
  --bg-subtle: #f6f8fb; /* was #fbfbfd — V2 bgAlt */
  --bg-muted: #eef2f7; /* was #f5f5f7 — V2 bgInset */
  --bg-card: #ffffff;

  --text: #0f1419; /* was #1d1d1f — V2 text (cooled) */
  --text-primary: #0f1419; /* alias used in newer sections */
  --text-secondary: #4e5968; /* was #515154 — V2 muted */
  --text-tertiary: #8a96a3; /* was #86868b — V2 subtle */
  --text-quaternary: #a1a1a6; /* kept */

  --border: #d6dde6; /* was #d2d2d7 — V2 borderStrong */
  --border-subtle: #e6ebf2; /* was #e8e8ed — V2 border */
  --divider: #eef1f4; /* new — V2 divider */

  --accent: #2563eb; /* was #0071e3 — V2 accent */
  --accent-hover: #1d4ed8; /* was #0077ed — V2 accentDeep */
  --accent-deep: #1d4ed8; /* alias */
  --accent-subtle: #eff5ff; /* was #e8f1fc — V2 accentSoft */
  --accent-ring: rgba(37, 99, 235, 0.18); /* new — V2 accentRing */

  --danger: #d70015;
  --warning: #b45309; /* cooled toward V2 warnText */
  --success: #1f8a55; /* V2 successFg */
  --warn-bg: #fef7e6; /* new — V2 warnBg */
  --warn-border: #f1c35a; /* new */
  --success-bg: #e9f7ef; /* new */

  /* Shadows — V2 layered, cooled (slight blue tint on the alpha
       so they read as "lifted paper", not "dirty shadow"). */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04), 0 1px 3px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 4px 14px -4px rgba(15, 20, 25, 0.08), 0 2px 6px rgba(15, 20, 25, 0.04);
  --shadow-lg: 0 24px 48px -20px rgba(15, 20, 25, 0.16), 0 8px 24px -8px rgba(15, 20, 25, 0.06);

  /* Radii — V2 introduces r1..r4 + rFull. Named vars aliased to
       the handoff scale so existing usage keeps working. */
  --radius-sm: 6px; /* r1 — form controls, small pills */
  --radius-md: 8px; /* r2 — buttons, small cards (was 10) */
  --radius-lg: 10px; /* r3 — feature cards, panels (was 14) */
  --radius-xl: 16px; /* r4 — hero frames (was 20) */
  --radius-full: 999px;

  /* Sticky-nav height. Used by viewport-fit screens (walkthrough,
       demo launcher) to compute available space below the nav.
       Bumps on mobile because nav items wrap onto a second row. */
  --app-nav-h: 64px;
}
@media (max-width: 767px) {
  :root {
    --app-nav-h: 80px;
  }
}

/* Selection tint + consistent focus-visible ring to match the
   V2 palette. Small polish that the handoff explicitly calls out. */
::selection {
  background: var(--accent-ring);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6; /* V2 body default (was 1.5) */
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* Balanced wrapping for display headings — V2 explicitly specs
   text-wrap:balance on h1/h2/h3 and pretty on body paragraphs.
   Progressively enhanced; older browsers get normal wrapping. */
h1,
h2,
h3,
.hero-title,
.section-title,
.orgs-hero-title,
.stuck-title,
.closing-cta-title,
.demo-complete-title,
.demo-intro-title,
.ai-showcase-title {
  text-wrap: balance;
}
p,
.section-subtitle,
.hero-subtitle {
  text-wrap: pretty;
}
/* Tabular numerics on counters + stats — keeps "3 of 8" and
   "94%" aligned across frames instead of jittering. */
.wk-meta,
.closing-cta-stats,
.orgs-deploy-stats,
.org-showcase-stats,
.admin-ai-usage-recent-when {
  font-variant-numeric: tabular-nums;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
ol,
ul {
  list-style: none;
}
pre,
code {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-feature-settings: "liga" 0;
}

/* Utilities */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.block {
  display: block;
}
.hidden {
  display: none;
}
.grid {
  display: grid;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.gap-6 {
  gap: 24px;
}
.gap-8 {
  gap: 32px;
}
.grid-cols-1 {
  grid-template-columns: 1fr;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0;
}
.top-0 {
  top: 0;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-2 {
  margin-bottom: 8px;
}
.mb-3 {
  margin-bottom: 12px;
}
.mb-4 {
  margin-bottom: 16px;
}
.mb-6 {
  margin-bottom: 24px;
}
.mb-8 {
  margin-bottom: 32px;
}
.mb-12 {
  margin-bottom: 48px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-4 {
  margin-top: 16px;
}
.mt-6 {
  margin-top: 24px;
}
.mt-8 {
  margin-top: 32px;
}
.mt-12 {
  margin-top: 48px;
}
.space-y-3 > * + * {
  margin-top: 12px;
}
.space-y-4 > * + * {
  margin-top: 16px;
}

/* Typography */
.text-xs {
  font-size: 12px;
  line-height: 1.4;
}
.text-sm {
  font-size: 14px;
  line-height: 1.45;
}
.text-base {
  font-size: 16px;
  line-height: 1.5;
}
.text-lg {
  font-size: 18px;
  line-height: 1.55;
}
.text-xl {
  font-size: 20px;
  line-height: 1.4;
}
.text-2xl {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.text-3xl {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.text-4xl {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.95em;
}
.uppercase {
  text-transform: uppercase;
}
.tracking-wide {
  letter-spacing: 0.06em;
}
.tracking-tight {
  letter-spacing: -0.02em;
}

/* Colors */
.text-primary {
  color: var(--text);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}
.text-accent {
  color: var(--accent);
}

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88); /* V2 — a touch more opaque */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--divider); /* V2 divider (quieter than border) */
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 6px 4px 4px;
  margin-left: -4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.nav-logo:hover {
  background: var(--bg-subtle);
}
.nav-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  flex-shrink: 0;
}
.nav-logo-mark svg {
  display: block;
}
.nav-logo-text {
  font-size: 15.5px;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1;
  font-family:
    "Inter",
    -apple-system,
    sans-serif;
}
.nav-logo-text-primary {
  font-weight: 400;
  color: var(--text-secondary);
}
.nav-logo-text-secondary {
  font-weight: 700;
  color: var(--text);
}

/* Refined nav bar — crisper, more corporate */
.nav {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
  max-width: 1200px;
  padding: 12px 24px;
}
@media (max-width: 640px) {
  .nav-inner {
    padding: 10px 16px;
  }
  .nav-logo-text {
    font-size: 14.5px;
  }
  .nav-logo-mark svg {
    width: 24px;
    height: 24px;
  }
}

/* Refined nav buttons — more corporate */
.btn-nav-secondary {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.btn-nav-secondary:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

/* Prominent "Admin →" shortcut shown next to the session slot when
   a signed-in admin is on the marketing site. Primary-colour pill so
   it reads as the main action — the avatar dropdown stays for
   secondary (billing / account / sign out). Kept compact so it doesn't
   dominate the nav. Selector uses :not([hidden]) so the HTML5 hidden
   attribute actually hides the button — display: inline-flex would
   otherwise override the browser default of display: none. */
.nav-admin-shortcut:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: white;
  background: var(--accent, #0c5e82);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition:
    background-color 0.15s,
    transform 0.15s;
}
.nav-admin-shortcut:hover {
  background: var(--accent-deep, #094764);
  transform: translateY(-1px);
}
.btn-nav {
  font-size: 13.5px;
  font-weight: 600;
  color: white;
  background: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition:
    background-color 0.15s,
    transform 0.08s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-nav:hover {
  background: #000;
}
.btn-nav:active {
  transform: translateY(1px);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Session-aware nav slot — surfaces the signed-in user dropdown when
   an admin-portal session is active. Hidden by default (admin.js /
   app.js sets [hidden]=false when a session resolves). Renders as a
   compact pill (avatar + email + chevron) that opens a dropdown with
   Admin / Billing / Account settings / Sign out on click. */
.nav-session {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-signin-link {
  font-size: 13px;
}

.nav-user-menu {
  position: relative;
}
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--bg-subtle, #f6f7f9);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  transition:
    background 0.12s,
    border-color 0.12s;
}
.nav-user-trigger:hover {
  background: var(--bg-muted, #eef0f3);
  border-color: var(--border, #d1d5db);
}
.nav-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent, #0c5e82);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.nav-user-email {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-chev {
  font-size: 11px;
  color: var(--text-tertiary, #9ca3af);
  line-height: 1;
}
.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: white;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 80;
}
.nav-user-dropdown-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border-subtle, #eef0f3);
  margin-bottom: 6px;
}
.nav-user-dropdown-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-dropdown-hint {
  font-size: 11.5px;
  color: var(--text-tertiary, #9ca3af);
  margin-top: 2px;
}
.nav-user-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.nav-user-dropdown-item:hover {
  background: var(--bg-subtle, #f6f7f9);
}
.nav-user-dropdown-arrow {
  color: var(--text-tertiary, #c7c7cc);
  font-size: 14px;
}
.nav-user-dropdown-sep {
  height: 1px;
  background: var(--border-subtle, #eef0f3);
  margin: 6px 4px;
}
.nav-user-dropdown-item--danger {
  color: #b91c1c;
}
.nav-user-dropdown-item--danger:hover {
  background: #fef2f2;
}

@media (max-width: 640px) {
  /* On narrow screens collapse the email — avatar + chev alone is
       enough signal that the user is signed in, saves horizontal
       space next to the logo. Tap still opens the full dropdown. */
  .nav-user-email {
    display: none;
  }
  .nav-user-trigger {
    padding: 4px;
  }
  /* Dropdown itself is 240 px min on desktop — would overflow a
       375 px viewport's left edge when anchored right. Constrain
       width + cap max so it always fits. */
  .nav-user-dropdown {
    min-width: 0;
    width: calc(100vw - 24px);
    max-width: 320px;
    right: 4px;
  }
}

.org-badge {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-badge.visible {
  display: inline-flex;
}
/* On narrow mobile the nav has logo + badge + buttons which
   wraps. Hide the org-badge below ~520px — the branded portal
   already repeats the org name below the nav. */
@media (max-width: 520px) {
  .org-badge.visible {
    display: none;
  }
}

.btn-nav {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent);
  color: white;
  border-radius: 980px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s;
}
.btn-nav:hover {
  background: var(--accent-hover);
}

.btn-nav-secondary {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  border: 1px solid var(--accent-subtle);
  border-radius: 8px;
  background: var(--accent-subtle);
  transition:
    color 0.15s,
    background-color 0.15s,
    border-color 0.15s;
}
.btn-nav-secondary:hover {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- HERO ---------- */
.hero {
  padding: 96px 24px 72px;
  text-align: center;
  background: var(--bg);
}
/* Mobile hero — default 96 px top was pushing the demo-detect input
   below the fold on 390×844 phones, with the cookie banner stacking
   on top. Trim top/bottom + reduce title margin so "Start branded
   demo" is visible on first paint without scrolling. */
@media (max-width: 640px) {
  .hero {
    padding: 20px 20px 28px;
  }
  .hero-kicker {
    margin-bottom: 10px;
    font-size: 12px;
  }
  .hero-title {
    /* Smaller clamp floor so the headline isn't a 36 px × 3-line
           wall on narrow phones. 28 px min keeps it readable while
           fitting in 2 lines on 360 px viewports. */
    font-size: clamp(28px, 7vw, 36px);
    margin-bottom: 12px;
    letter-spacing: -0.025em;
  }
  .hero-subtitle {
    /* Trim a line's worth of height — subtitle on 360 px wraps
           to 6-7 lines which ate 170 px. Shorter line-height + tighter
           bottom margin tips the demo input back above the fold. */
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 18px;
  }
}
/* Extra-narrow / short phones (iPhone SE 1st gen, older Androids). */
@media (max-width: 360px), (max-height: 680px) and (orientation: portrait) {
  .hero {
    padding: 14px 16px 22px;
  }
  .hero-kicker {
    margin-bottom: 8px;
  }
  .hero-title {
    font-size: clamp(26px, 7.5vw, 32px);
    margin-bottom: 10px;
  }
  .hero-subtitle {
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 1.45;
  }
}
.hero-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(36px, 6.5vw, 52px); /* V2 h1 caps at 52 */
  font-weight: 700;
  line-height: 1.08; /* V2 h1 leading */
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 820px;
  margin: 0 auto 20px;
}
.hero-subtitle {
  font-size: 17px; /* V2 bodyLg */
  line-height: 1.6; /* V2 body */
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 36px;
  font-weight: 400;
}
.hero-ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Single-CTA branded entry on the landing hero. The product IS the
   branded demo, so we funnel everyone through domain-detect first.
   "Skip" falls back to the unbranded demo for anyone without a
   tenant handy. */
.hero-detect {
  margin: 6px auto 0;
  max-width: 560px;
  width: 100%;
  padding: 0 14px;
}
.hero-detect-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}
.hero-detect-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  background: transparent;
  color: var(--text-primary);
  border-radius: 10px;
}
.hero-detect-input::placeholder {
  color: var(--text-tertiary);
}
.hero-detect-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
}
.hero-detect-status {
  min-height: 22px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  text-align: center;
}
.hero-detect-status--error {
  color: var(--danger, #c0392b);
}
.hero-detect-status--loading {
  color: var(--text-secondary);
}
.hero-detect-status--success {
  color: var(--success, #16a34a);
}
.hero-detect-skip {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}
.hero-detect-skip-link {
  background: none;
  border: none;
  /* Bumped from 0 / 4 to give a 36 px tap target — the link was
       landing at ~20 px tall which is a pain on phones. Padding adds
       the space without visually changing the text position. */
  padding: 8px 6px;
  margin: -4px 0 -4px 4px;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-detect-skip-link:hover {
  color: var(--accent-hover);
}
@media (max-width: 640px) {
  .hero-detect-form {
    flex-direction: column;
    padding: 8px;
    gap: 8px;
  }
  .hero-detect-btn {
    width: 100%;
  }
}

/* Tertiary "for orgs" link under the hero CTAs — visible on every screen
   (unlike the nav button which hides on narrow widths) so IT folks know
   there's a branded version. */
.hero-org-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 8px 16px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.hero-org-link:hover {
  background: #dbe9fd;
  border-color: #c7d9ff;
}
.hero-org-link strong {
  font-weight: 700;
}

/* Dual-path strip — two tall cards, one per audience. Placed right after
   the hero so the IT-teams path is visible within the first viewport. */
.dual-path {
  padding: 48px 24px 24px;
  background: transparent;
}
.dual-path-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dual-path-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
  text-align: left;
}
.dual-path-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}
.dual-path-card--org {
  background: linear-gradient(135deg, #eff6ff 0%, #fef7ff 100%);
  border-color: #c7d9ff;
}
.dual-path-card--org:hover {
  border-color: var(--accent);
}
.dual-path-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dual-path-card--org .dual-path-icon {
  background: white;
  color: var(--accent);
  border: 1px solid #d4e3ff;
}
.dual-path-copy {
  flex: 1;
  min-width: 0;
}
.dual-path-kicker {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.dual-path-card--org .dual-path-kicker {
  color: var(--accent);
}
.dual-path-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.dual-path-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.dual-path-btn {
  flex-shrink: 0;
  align-self: center;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--text);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap;
}
.dual-path-card--org .dual-path-btn {
  background: var(--accent);
}
.dual-path-card--org .dual-path-btn:hover {
  background: var(--accent-hover);
}
.dual-path-btn:hover {
  background: #000;
}
@media (max-width: 720px) {
  .dual-path {
    padding: 28px 16px 16px;
  }
  .dual-path-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dual-path-card {
    flex-wrap: wrap;
    padding: 16px 18px;
  }
  .dual-path-btn {
    width: 100%;
  }
}

/* =========================================================
   ORG SHOWCASE — the branded-version promo, directly below the hero.
   Two-column layout: copy on the left, a live-branded mockup phone
   on the right, with stats and dual CTAs. This is the landing's
   primary sales surface. Replaces the older dual-path strip.
   ========================================================= */
.org-showcase {
  padding: 48px 24px 24px;
}
.org-showcase-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #eff6ff 0%, #fef7ff 100%);
  border: 1px solid #d4e3ff;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.org-showcase-inner::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at center, rgba(147, 112, 219, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.org-showcase-copy {
  position: relative;
  z-index: 1;
}
.org-showcase-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 10px;
}
.org-showcase-sub {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: 20px;
}
.org-showcase-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.org-showcase-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.org-showcase-check svg {
  color: #107c10;
  flex-shrink: 0;
}
.org-showcase-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 22px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.org-showcase-stat {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.org-showcase-stat strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}
.org-showcase-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.org-showcase-visual {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.org-showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.org-showcase-phone {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  transform: rotate(-1deg);
  transition: transform 0.3s;
}
.org-showcase-phone:hover {
  transform: rotate(0);
}

/* Hide the iPhone-style notch on this decorative landing mini-phone —
   the f3f4f6 phone-frame background was showing through on either side
   of the notch at the very top and reading as a faint white line above
   the status bar. Clean edge from the black border to the mockup is
   better here where we're not trying to simulate a real iPhone look. */
.org-showcase-phone::before {
  display: none;
}
.org-showcase-caption {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 200px;
}

@media (max-width: 900px) {
  .org-showcase {
    padding: 32px 16px 16px;
  }
  .org-showcase-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 20px;
  }
  .org-showcase-visual {
    order: -1;
  }
  .org-showcase-phone {
    transform: none;
  }
}

/* ---------- SECTIONS ---------- */
.section {
  padding: 80px 24px;
}
.section-alt {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.section-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.section-heading {
  margin-bottom: 48px;
}
.section-title {
  font-size: clamp(28px, 3.5vw, 36px); /* V2 h2 caps at 36 */
  font-weight: 700;
  letter-spacing: -0.022em; /* V2 h2 tracking */
  line-height: 1.12; /* V2 h2 leading */
  color: var(--text);
  margin-bottom: 12px;
}
.section-subtitle {
  font-size: 17px;
  line-height: 1.6; /* V2 body */
  color: var(--text-secondary);
  max-width: 600px;
}

/* ---------- BUTTONS ---------- */
/* V2 Framed buttons — r2 rounded-rect (was 980px pill), weight 600,
   40px base height, 14px text. Three variants + the legacy
   accent-secondary tint. Transitions quicker (.12s) so hover
   feels responsive, not sluggish. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s,
    border-color 0.12s,
    transform 0.12s;
  white-space: nowrap;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
}
.btn-sm {
  height: 34px;
  padding: 8px 14px;
  font-size: 13px;
}
.btn-large {
  height: 48px;
  padding: 13px 22px;
  font-size: 15px;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--text-tertiary);
}

/* Accent-tinted secondary — used for the org-path CTA in the hero so it
   reads as a real alternative to the primary Try-now button, not an
   afterthought. Bridges secondary (no fill) and primary (solid accent). */
.btn-secondary-accent {
  background: var(--accent-subtle);
  color: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-weight: 600;
}
.btn-secondary-accent:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* ---------- FEATURE CARDS ---------- */
.feature-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
/* Intermediate tablet layout: iPad mini (768 px) was getting a
   cramped 3-up grid. 2-up is more readable until we hit 1024 px. */
@media (min-width: 640px) and (max-width: 1023px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature-card {
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
.feature-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.feature-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---------- STEP-BY-STEP OVERVIEW CARDS ---------- */
.how-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .how-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.how-card {
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
.how-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}
.how-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.how-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.how-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---------- WIZARD ---------- */
.wizard {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.wizard-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1024px) {
  .wizard-layout {
    flex-direction: row;
    gap: 64px;
  }
  .wizard-content {
    flex: 1;
    min-width: 0;
  }
  .wizard-visual {
    flex-shrink: 0;
    width: 280px;
    align-self: flex-start;
    position: sticky;
    top: 88px;
  }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  margin-left: -10px;
  transition:
    color 0.15s,
    background-color 0.15s;
}
.back-link:hover {
  color: var(--text);
  background: var(--bg-muted);
}

.progress {
  display: flex;
  gap: 4px;
  margin-bottom: 36px;
}
.progress-seg {
  height: 3px;
  flex: 1;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.progress-seg.active {
  background: var(--accent);
}

.step-kicker {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.step-title {
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 20px;
}
.step-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.step-body strong {
  color: var(--text);
  font-weight: 600;
}
.step-body em {
  font-style: italic;
  color: var(--text);
}

.time-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--bg-muted);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Numbered steps list */
.numbered-list {
  margin: 20px 0;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 4px 4px;
}
.numbered-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 15px;
  color: var(--text);
}
.numbered-list li:last-child {
  border-bottom: none;
}
.num-bullet {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  font-family: "JetBrains Mono", monospace;
}

/* Callouts */
.callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.5;
}
.callout-info {
  background: var(--accent-subtle);
  color: #0050a0;
}
.callout-info strong {
  color: #003d7a;
}
.callout-warn {
  background: #fff8e1;
  color: #755200;
  border: 1px solid #ffe0a0;
}
.callout-warn strong {
  color: #4a3400;
}

/* Chip row (name examples) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.chip {
  padding: 6px 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
}

/* Action button list */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
  cursor: pointer;
  border: 1px solid transparent;
}
.action-btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.action-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.action-btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.action-btn-secondary:hover {
  background: var(--bg-muted);
  border-color: var(--text-tertiary);
}
.action-btn-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.action-btn-chevron {
  opacity: 0.5;
}

/* Portal action buttons */
.portal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 16px;
}
.portal-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 980px;
  background: var(--accent);
  color: white;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
  border: none;
}
.portal-primary:hover {
  background: var(--accent-hover);
}
.portal-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  border-radius: 980px;
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.portal-copy:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-card);
}

/* Help link */
.help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  padding: 10px 14px;
  margin-left: -14px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition:
    color 0.15s,
    background-color 0.15s;
}
.help-link:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

/* Device picker */
.device-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .device-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.device-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}
.device-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.device-card:active {
  transform: scale(0.99);
}
.device-card-icon {
  color: var(--text);
  margin-bottom: 16px;
}
.device-card-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.device-card-sub {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Small device picker for troubleshoot */
.device-grid-sm {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 16px;
}
@media (min-width: 640px) {
  .device-grid-sm {
    grid-template-columns: repeat(3, 1fr);
  }
}
.device-card-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.device-card-sm:hover {
  border-color: var(--accent);
}
.device-card-sm-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-muted);
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.device-card-sm-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.device-card-sm-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Overview list */
.overview-list {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 28px;
}
.overview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 15px;
  color: var(--text);
}
.overview-row:last-child {
  border-bottom: none;
}
.overview-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Success state */
.success-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.success-summary {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 24px 0;
}

/* Buyer CTA on the success screen — biggest "they got it" moment. */
.success-buyer-cta {
  margin-top: 30px;
  padding: 24px 22px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 70%, black) 100%
  );
  color: white;
  text-align: left;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .success-buyer-cta {
    background: linear-gradient(135deg, var(--accent) 0%, #004aa0 100%);
  }
}
.success-buyer-cta-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}
.success-buyer-cta-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 6px;
}
.success-buyer-cta-sub {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  margin-bottom: 16px;
}
.success-buyer-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.success-buyer-cta-row .btn {
  flex: 1 1 160px;
  justify-content: center;
}
.success-buyer-cta-row .btn-primary {
  background: white;
  color: var(--accent);
  border-color: white;
}
.success-buyer-cta-row .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}
.success-buyer-cta-row .btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.35);
}
.success-buyer-cta-row .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}
.success-summary h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.success-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.success-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}

/* ---------- PHONE MOCKUP ---------- */
.phone-frame {
  position: relative;
  width: 248px;
  border: 10px solid #1d1d1f;
  border-radius: 38px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Background matches the border so any partially-transparent child
       (e.g. .mockup-statusbar.mockup-dimmed at 0.5 opacity on background
        frames) blends into the bezel instead of revealing a faint light
        strip at the top of the screen. */
  background: #1d1d1f;
  margin: 0 auto;
  /* Lock aspect ratio so all mockups fill consistently */
  aspect-ratio: 248 / 510;
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #1d1d1f;
  border-radius: 12px;
  z-index: 10;
}
.phone-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Background matches the phone-frame bezel so any mockup that
       doesn't fully fill the screen (e.g. the landing preview cycling
       through frames with different content lengths) blends into the
       bezel at the edges instead of revealing the page's white body
       background as a visible white strip. */
  background: #1d1d1f;
}

/* Tablet frame — used for iPad walkthroughs. Slightly wider than
   the phone frame (iPad Pro aspect ≈ 0.70) with less pronounced
   corner radius. A small centred camera dot sits above the screen
   in the top bezel. Real iPads are rectangular with thin bezels,
   not rounded/notched like iPhones. */
.tablet-frame {
  position: relative;
  width: 320px;
  border: 14px solid #1d1d1f;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #1d1d1f;
  margin: 0 auto;
  aspect-ratio: 320 / 457; /* ≈ iPad portrait (0.70) */
}
.tablet-frame::before {
  /* iPad front camera dot — small and centred on the top bezel */
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #0a0a0a;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.tablet-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 767px) {
  /* Mobile tablet-frame: height-led sizing like the phone frame so
       it fits in the viewport with the side arrows, using clamp to
       keep a minimum readable size. */
  .walkthrough .tablet-frame {
    width: auto;
    height: clamp(240px, calc(100dvh - 260px), 520px);
    max-width: calc(100vw - 110px);
    aspect-ratio: 320 / 457;
  }
}

/* Laptop frame — used for sign-in-method walkthroughs (Entra
   passkey on Windows, YubiKey, WHfB, macOS Platform SSO) where the
   mockup content is a desktop OS dialog or browser window. Screen
   is a dark rounded bezel; keyboard base peeks out underneath.
   Desktop size chosen to match the phone's visual footprint (the
   phone is 248w × 510h = vertical rectangle; the laptop is 560 ×
   385 = landscape rectangle, roughly the same visual area so the
   two sit next to each other in the walkthrough without dominating). */
.laptop-frame {
  position: relative;
  width: 560px;
  aspect-ratio: 16 / 11;
  background: #1d1d1f;
  border-radius: 12px 12px 3px 3px;
  padding: 12px 10px 10px;
  box-sizing: border-box;
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}
.laptop-frame::before {
  /* camera lens */
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #0a0a0a;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.laptop-frame::after {
  /* keyboard / base rail */
  content: "";
  position: absolute;
  bottom: -8px;
  left: -6%;
  right: -6%;
  height: 10px;
  background: linear-gradient(to bottom, #d1d1d6 0%, #a1a1a6 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.laptop-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 3px;
  overflow: hidden;
}

/* Laptop-frame doesn't have overflow:hidden (the ::after keyboard base
   sits outside it), so children with inset:0 — specifically the
   "Tap to watch" play overlay — have square corners poking past the
   frame's rounded top. Match them with the same corner radii as the
   frame itself. Same fix pattern for any future absolute-positioned
   overlay inside .laptop-frame. */
.laptop-frame .wk-play-overlay,
.laptop-frame .wk-done-prompt {
  border-radius: 12px 12px 3px 3px;
}

/* Mockups marked .mockup--desktop are authored at 540×363 canonical
   laptop-screen dimensions. On smaller laptop frames (mobile), JS adds
   .is-scaled and sets --scale-uniform so this class's transform shrinks
   content proportionally to fit. Uniform scaling preserves aspect —
   non-uniform distorted popups (e.g. the Windows Security picker)
   vertically on narrow frames whose aspect drifted from 540/363. Any
   leftover space in the laptop-screen shows its white background. */
.mockup--desktop.is-scaled {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 540px !important;
  height: 363px !important;
  transform-origin: top left;
  transform: scale(var(--scale-uniform, 1));
}

/* In a laptop frame, hide the iPhone-style status bar ("13:06 · 71")
   that mockupShell includes for phone renders — it's jarring on a
   desktop and isn't part of a real browser. The browser pill stays
   and now reads as a real URL bar at the top of the laptop screen. */
.laptop-screen .mockup-statusbar {
  display: none;
}
@media (max-width: 767px) {
  /* Mobile laptop frame: use an explicit calc width (not width:100%
       in a flex row — that was collapsing to 0 and rendering as a
       tiny black oval, same class of bug as the phone frame had).
       110px reserves the two 40px arrows + gaps. clamp keeps a sane
       minimum for readability and maxes at the desktop 560px. */
  .walkthrough .laptop-frame {
    width: clamp(230px, calc(100vw - 110px), 560px);
    max-width: none;
    height: auto;
  }
}
.phone-caption {
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 16px;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* ---------- DRAWER ---------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.drawer-scrim.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Use dvh so Safari's dynamic viewport is respected. 100dvh lets the
       drawer fill the whole visible viewport on mobile when needed so
       the pre-launch "Remember N things" content fits without scrolling
       even for 3-pain flows (e.g. Samsung → Google PM). */
  max-height: min(100dvh, 720px);
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
  border-radius: 20px 20px 0 0;
  z-index: 101;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
}
.drawer.open {
  transform: translateY(0);
}
.drawer-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 0;
}
/* Explicit close button on the drawer so users don't have to know
   that tapping the scrim or pressing Esc dismisses it. Sits in the
   top-right corner, above the content padding, and doesn't shift
   layout when hidden. Keyboard-accessible via focus trap + Enter. */
.drawer-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
  z-index: 1;
}
.drawer-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.drawer-body {
  padding: 24px 24px 32px;
}
@media (min-width: 768px) {
  .drawer {
    max-width: 520px;
    left: 50%;
    bottom: 20px;
    /* Translate by 100% of own height PLUS the 20px bottom offset,
           otherwise the drawer's top stays 20px inside the viewport
           when closed (visible as a white strip + handle pill along
           the bottom edge of iframed deployments). */
    transform: translate(-50%, calc(100% + 20px));
    border-radius: 20px;
    max-height: 80vh;
  }
  .drawer.open {
    transform: translate(-50%, 0);
  }
}
/* Also make sure the scrim stays non-interactive when hidden
   (belt-and-braces — pointer-events already set on the base rule
   but being explicit here so the scrim never catches clicks
   meant for the host page's content through an iframe). */
.drawer:not(.open) {
  pointer-events: none;
}
.drawer-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text);
}
.drawer-intro {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.drawer-item {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
}
.drawer-item-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.drawer-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
}
.drawer-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.drawer-item-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.drawer-item-action {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--text);
  color: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
}
.drawer-item-action:hover {
  background: #000;
}

/* Passkey info drawer cards */
.info-card {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Toast */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  /* Hide fully above the viewport when not shown — translate(-50%, -120%)
       was leaving a 12px black sliver visible at the top of the page on
       non-mobile viewports because top:20 + height ~ 41 - 49.2 ≈ 12. Use
       a larger offset so the toast is genuinely off-screen. */
  transform: translate(-50%, calc(-100% - 40px));
  background: var(--text);
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast.show {
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Code block */
.code-block {
  background: #1d1d1f;
  color: #f5f5f7;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #2a2a2e;
}
.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 12px;
  color: #a1a1a6;
  border-bottom: 1px solid #2a2a2e;
  font-family: "JetBrains Mono", monospace;
}
.code-copy {
  color: #a1a1a6;
  background: none;
  border: none;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition:
    color 0.15s,
    background 0.15s;
}
.code-copy:hover {
  color: white;
  background: #2a2a2e;
}
.code-block pre {
  padding: 20px;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0;
}
.stat-card {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
}
.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}

.cta-block {
  background: var(--text);
  color: white;
  padding: 48px 32px;
  border-radius: var(--radius-xl);
  text-align: center;
  margin-top: 48px;
}
.cta-block h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cta-block p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.cta-block .btn-primary {
  background: white;
  color: var(--text);
}
.cta-block .btn-primary:hover {
  background: var(--bg-subtle);
}

/* Legal pages (privacy, terms, DPA) — subprocessor table on DPA
   needs a card layout on mobile. Desktop keeps the 4-col grid.
   data-label attrs are inline on each td in dpa.html so the mobile
   card shows "Provider: Vercel Inc." instead of bare cells. */
.legal-page {
  /* Safety net — any child that over-reaches (long link URL,
       unexpected wide table) stays contained rather than pushing
       the document width. overflow-wrap catches long unbreakable
       strings; overflow-x hidden on the container catches anything
       else. */
  overflow-wrap: anywhere;
  overflow-x: clip;
}
.legal-table {
  table-layout: fixed;
}
@media (max-width: 640px) {
  .legal-table,
  .legal-table thead,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
  }
  .legal-table thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .legal-table tr {
    background: white;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 10px;
    padding: 8px 0;
    margin-bottom: 8px;
  }
  .legal-table td {
    padding: 6px 12px !important;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    text-align: right;
  }
  .legal-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-tertiary, #86868b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    text-align: left;
  }
  /* Inline links inside cells wrap naturally — allow word-break
       so long provider links don't push the cell wider than the
       viewport. */
  .legal-table a {
    overflow-wrap: anywhere;
  }
}

/* Cookie consent — deliberately understated. Small card pinned to
   bottom-right, ~320 px wide, one-click dismiss. No full-width
   banner that blocks content; no modal that forces interaction.
   Since we only set a strictly-necessary session cookie, GDPR
   doesn't require an accept/reject choice — a plain notice suffices.
   Users who want more detail follow the privacy-policy link. */
.cookie-consent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  max-width: 340px;
  background: white;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 14px 16px;
  animation: cookieConsentIn 0.35s ease-out both;
}
@keyframes cookieConsentIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cookie-consent-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cookie-consent-text {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary, #52525b);
  margin: 0;
}
.cookie-consent-link {
  color: var(--accent, #0c5e82);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.cookie-consent-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  min-height: 36px;
  background: var(--text-primary, #1d1d1f);
  color: white;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.cookie-consent-btn:hover {
  background: #2f2f31;
}
/* Desktop shows the longer copy; the short variant is mobile-only. */
.cookie-consent-text-short {
  display: none;
}
@media (max-width: 640px) {
  /* Thin pill pinned at the bottom but compact — leaves the hero's
       demo-detect input clearly above it. Hides the longer sentence
       in favour of a one-liner so the banner height stays ~48 px. */
  .cookie-consent {
    right: 10px;
    left: 10px;
    bottom: 10px;
    max-width: none;
    padding: 8px 12px;
    border-radius: 10px;
  }
  .cookie-consent-inner {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .cookie-consent-text {
    font-size: 12px;
    line-height: 1.4;
  }
  .cookie-consent-text-full {
    display: none;
  }
  .cookie-consent-text-short {
    display: inline;
  }
  .cookie-consent-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .cookie-consent-link {
    /* Save a few pixels of horizontal space on narrow screens. */
    display: inline-block;
    margin-left: 4px;
  }
}
/* Never renders in these contexts:
     • embedded iframes — the iframe host owns their cookie notice
     • branded ?org=<slug> pages (top-level) — the page is serving
       the customer's employees, who don't care about SetupPasskeys's
       cookie policy. The notice there makes the page feel like it
       isn't fully the customer's own property, and puts a competing
       CTA next to the "Start setup" button. Admins who want to see
       our notice find it via the privacy footer instead. */
body.embedded-mode .cookie-consent,
body.branded-mode .cookie-consent {
  display: none;
}

/* Footer */
.footer {
  border-top: 1px solid var(--divider); /* V2 divider */
  padding: 36px 24px; /* V2 — a little more air */
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.5;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
  margin: 0 10px;
  vertical-align: middle;
}
.footer a:hover {
  color: var(--text);
}

/* Icons */
svg.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1em;
  height: 1em;
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-fade {
  animation: fadeUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
}
.d-1 {
  animation-delay: 0.04s;
}
.d-2 {
  animation-delay: 0.08s;
}
.d-3 {
  animation-delay: 0.12s;
}
.d-4 {
  animation-delay: 0.16s;
}
.d-5 {
  animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* The walkthrough progress bar is a functional countdown, not decoration.
       Its transition is set inline from JS with setProperty(..., 'important')
       so it beats the global !important above — no CSS exception needed. */
}

/* ---------- MOCKUP STYLES (inside phone) ---------- */
.mockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  font-family:
    "Segoe UI",
    "Inter",
    -apple-system,
    sans-serif;
  color: #242424;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  contain: strict;
}
.mockup-content {
  flex: 1 1 auto;
  padding: 10px 11px;
  overflow: hidden;
}
.mockup-ms-bg {
  flex: 1 1 auto;
  padding: 14px 16px;
  background: #f3f4f6;
}
.mockup-statusbar {
  background: #000;
  color: white;
  padding: 6px 12px 3px;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mockup-browser {
  background: #1a1a1a;
  padding: 5px 8px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
}
.mockup-browser-pill {
  background: #3a3a3a;
  flex: 1;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 8.5px;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mockup-browser-pill svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.mockup-org-header {
  background: #f6f6f6;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
  min-height: 26px;
}
.mockup-app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  width: 12px;
  height: 12px;
}
.mockup-app-grid span {
  background: #333;
  border-radius: 50%;
  aspect-ratio: 1;
}
/* Org brand sits on the LEFT of the header (next to the app-grid), matching
   how Microsoft tenant pages actually render branded logos. Was centred
   previously — real Entra never centres the logo. */
.mockup-org-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  overflow: hidden;
}
.mockup-org-brand img {
  max-height: 20px;
  max-width: 110px;
  object-fit: contain;
}
.mockup-org-logo-box {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: white;
  background: #005335;
  text-transform: uppercase;
  line-height: 1.1;
}
.mockup-org-logo-box.stacked {
  display: inline-block;
  text-align: center;
  padding: 2px 5px;
}
.mockup-org-logo-box.stacked small {
  display: block;
  font-size: 5.5px;
  font-weight: 700;
  opacity: 0.85;
  margin-top: -1px;
  letter-spacing: 0.5px;
}
.mockup-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #555;
  background: white;
  flex-shrink: 0;
}
.mockup-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 13px;
  height: 10px;
  flex-shrink: 0;
}
.mockup-page-title {
  font-size: 14px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mockup-hamburger span {
  display: block;
  height: 1.5px;
  background: #333;
  border-radius: 1px;
}
.mockup-body-text {
  font-size: 9.5px;
  color: #333;
  margin-bottom: 7px;
}
.mockup-body-text.tiny {
  font-size: 8px;
  color: #666;
  line-height: 1.4;
}
.mockup-body-text.bold {
  font-weight: 600;
  color: #242424;
}
.mockup-methods-card {
  background: white;
  border-radius: 2px;
  border: 1px solid #e5e7eb;
  margin-top: 8px;
}
.mockup-method {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.mockup-method:last-child {
  border-bottom: none;
}
.mockup-method-add {
  color: #0067c0;
  font-weight: 500;
  font-size: 10.5px;
  align-items: center;
  padding: 9px 10px;
}
.mockup-method-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #444;
  margin-top: 1px;
}
.mockup-method-content {
  flex: 1;
  min-width: 0;
}
.mockup-method-title {
  font-weight: 600;
  font-size: 9.5px;
  color: #242424;
}
.mockup-method-subtitle {
  font-size: 8px;
  color: #666;
  margin-top: 1px;
  line-height: 1.3;
}
.mockup-method-action {
  color: #0067c0;
  font-size: 8.5px;
  margin-top: 3px;
}
.mockup-method-blurred {
  background: linear-gradient(90deg, #d1d5db, #e5e7eb);
  height: 6px;
  border-radius: 2px;
  margin-top: 2px;
  width: 70%;
}
.mockup-highlight {
  /* Inset box-shadow instead of outline so the ring sits INSIDE
       the element's box. outline + outline-offset extended outside
       the element and got clipped by ancestors' overflow:hidden
       (phone-screen + card containers), so the left + right edges
       of the red border disappeared. Inset never clips and doesn't
       shift layout like a real border would.
       border-radius defaults to 10px (softer than 3px) but gets
       overridden by inline styles on row-elements that need to
       match the surrounding card's rounded corners — e.g. the
       Google row at the bottom of a 12px-radius card sets its own
       0 0 12px 12px so the ring rounds cleanly into the card. */
  box-shadow: inset 0 0 0 2.5px #ef4444;
  border-radius: 10px;
  position: relative;
  animation: mockupPulse 1.8s ease-in-out infinite;
}
@keyframes mockupPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 2.5px #ef4444;
  }
  50% {
    box-shadow: inset 0 0 0 2.5px #ff7373;
  }
}
.mockup-footer-text {
  font-size: 9px;
  color: #242424;
  margin-top: 10px;
  font-weight: 500;
}
.mockup-footer-text a {
  color: #0067c0;
}
.mockup-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 10;
}
.mockup-modal {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 4px;
  padding: 10px 11px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 11;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  box-sizing: border-box;
  max-width: calc(100% - 20px);
}
.mockup-modal-top {
  top: 50px;
  transform: none;
  max-height: calc(100% - 70px);
}

.mockup-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.mockup-modal-title {
  font-size: 12px;
  font-weight: 700;
  color: #242424;
  line-height: 1.3;
}
.mockup-modal-close {
  color: #555;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 1px;
}
.mockup-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-bottom: 5px;
  background: white;
}
.mockup-option-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #333;
  margin-top: 1px;
}
.mockup-option-text {
  flex: 1;
  min-width: 0;
}
.mockup-option-title {
  font-size: 9.5px;
  font-weight: 700;
  color: #242424;
  line-height: 1.25;
  margin-bottom: 1px;
}
.mockup-option-sub {
  font-size: 8px;
  color: #666;
  line-height: 1.3;
}
.mockup-modal-footer {
  font-size: 8px;
  color: #333;
  margin-top: 6px;
  line-height: 1.4;
}
.mockup-modal-footer a {
  color: #0067c0;
}
.mockup-btn {
  padding: 5px 14px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  display: inline-block;
  min-width: 54px;
  text-align: center;
}
.mockup-btn-primary {
  background: #0067c0;
  color: white;
}
.mockup-btn-secondary {
  background: #e1dfdd;
  color: #242424;
}
.mockup-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}
.mockup-illustration {
  display: flex;
  justify-content: center;
  padding: 10px 0 8px;
}
.mockup-input {
  width: 100%;
  border: 2px solid #0067c0;
  background: white;
  padding: 4px 7px;
  font-size: 10.5px;
  border-radius: 2px;
  color: #242424;
  font-family: inherit;
  box-sizing: border-box;
  height: 24px;
  display: flex;
  align-items: center;
}
.mockup-input-caret {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #242424;
  animation: blink 1s infinite;
  margin-left: 1px;
  vertical-align: middle;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.mockup-success-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.mockup-success-check {
  width: 17px;
  height: 17px;
  background: #107c10;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.mockup-success-check svg {
  width: 10px;
  height: 10px;
}
.mockup-passkey-bubble {
  width: 54px;
  height: 54px;
  background: #e7eefe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 4px;
  color: #0067c0;
}
.mockup-passkey-bubble svg {
  width: 26px;
  height: 26px;
}
.mockup-ms-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.mockup-ms-logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 12px;
  height: 12px;
}
.mockup-ms-logo-grid span {
  display: block;
}
.mockup-ms-logo-text {
  font-size: 11px;
  color: #444;
  font-weight: 400;
}
.mockup-ms-heading {
  font-size: 17px;
  font-weight: 600;
  color: #1b1b1b;
  margin-bottom: 8px;
  line-height: 1.2;
}
.mockup-ms-body {
  font-size: 10px;
  color: #333;
  margin-bottom: 10px;
}
.mockup-ms-btn-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 20px;
}
.mockup-dimmed {
  opacity: 0.5;
  pointer-events: none;
}
.mockup-bottom-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f8faff;
  border-radius: 14px 14px 0 0;
  padding: 10px 12px 14px;
  z-index: 12;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  max-height: 70%;
  overflow: hidden;
}
.mockup-gpm-logo {
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
  margin-bottom: 5px;
}
.mockup-gpm-logo svg {
  height: 14px;
}
.mockup-gpm-title {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: #1f1f1f;
  margin-bottom: 3px;
}
.mockup-gpm-subtitle {
  font-size: 8.5px;
  color: #444;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.3;
}
.mockup-account-chip {
  background: #e8eaed;
  border-radius: 20px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.mockup-account-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #5f6368;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mockup-account-icon svg {
  width: 10px;
  height: 10px;
}
.mockup-account-name-blur,
.mockup-account-email-blur {
  height: 6px;
  background: linear-gradient(90deg, #bcc0c4, #d4d8dc);
  border-radius: 2px;
  margin-bottom: 2px;
}
.mockup-account-name-blur {
  width: 55%;
}
.mockup-account-email-blur {
  width: 70%;
  margin-bottom: 0;
}
.mockup-gpm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.mockup-gpm-row-link {
  font-size: 10px;
  font-weight: 500;
  color: #0b57d0;
}
.mockup-gpm-continue {
  background: #5a6578;
  color: white;
  padding: 5px 16px;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 500;
}
.mockup-gpm-footer {
  border-top: 1px solid #dadce0;
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  color: #555;
}
.mockup-gpm-footer-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5f6368;
  flex-shrink: 0;
  filter: blur(1.5px);
}
.mockup-synced-passkey {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  background: white;
  margin-top: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
}
/* Phone frame stays consistent across all viewports */

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-quaternary);
}

/* =========================================================
   NEW FEATURES: AI DIAGNOSIS, CONFIG PLAYGROUND, RESUME
   ========================================================= */

/* Resume banner */
.resume-banner {
  background: var(--accent-subtle);
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.resume-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.resume-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: #003d7a;
  line-height: 1.4;
}
.resume-banner-text strong {
  color: #002855;
  font-weight: 600;
}
.resume-banner-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.resume-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s;
  white-space: nowrap;
}
.resume-btn-primary {
  background: var(--accent);
  color: white;
}
.resume-btn-primary:hover {
  background: var(--accent-hover);
}
.resume-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
}
.resume-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

/* AI Diagnosis modal */
.ai-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}
.ai-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ai-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0071e3, #5856d6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ai-card-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
  background: var(--bg);
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.upload-zone-icon {
  color: var(--text-tertiary);
  margin-bottom: 12px;
  font-size: 32px;
  line-height: 1;
}
.upload-zone-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.upload-zone-hint {
  font-size: 12px;
  color: var(--text-tertiary);
}
.upload-preview {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-muted);
  max-height: 200px;
  border: 1px solid var(--border-subtle);
}
.upload-preview img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  display: block;
}
.upload-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.upload-remove:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Editable preview — wraps the canvas + blur toolbar so the user can
 * paint redactions over sensitive areas (emails, faces, badges, custom
 * UI) before the screenshot leaves their device. The canvas is the
 * actual drawing surface; rectangles drawn at on-screen coords paint
 * onto the underlying bitmap so redactBlurCanvas() can serialise the
 * composited result back to a data URL with no transform maths.
 *
 * The container is taller than the original .upload-preview because
 * the toolbar lives in-flow underneath the canvas. max-height drops
 * away here — phone screenshots are tall and we want enough drawing
 * surface for the user to actually pick out small UI elements. */
.upload-preview--editable {
  max-height: none;
  background: var(--bg);
  padding: 8px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-preview-canvas-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #0c0c0c;
}
.upload-preview-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: default;
  touch-action: none;
}
.upload-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 4px 4px;
}
.upload-preview-tool {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.upload-preview-tool:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.upload-preview-tool--active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.upload-preview-tool--ghost {
  background: transparent;
  font-weight: 500;
  color: var(--text-tertiary);
}
.upload-preview-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

.ai-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 80px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.ai-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.ai-textarea::placeholder {
  color: var(--text-tertiary);
}

.ai-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.ai-result {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  animation: fadeUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* Severity colour band on the header — driven by Gemini's severity
   field. info = neutral accent (default), warning = amber for "real
   problem", critical = red for "needs IT". */
.ai-result--warning {
  border-color: #f59e0b;
}
.ai-result--warning .ai-result-icon {
  background: #fef3c7;
  color: #b45309;
}
.ai-result--critical {
  border-color: #ef4444;
}
.ai-result--critical .ai-result-icon {
  background: #fee2e2;
  color: #b91c1c;
}
.ai-result-confidence {
  display: inline-block;
  padding: 1px 8px;
  margin-left: 4px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ai-result-confidence--high {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.ai-result-confidence--medium {
  color: #b45309;
  border-color: #fde68a;
  background: #fffbeb;
}
.ai-result-confidence--low {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
/* Numbered fix steps — Gemini returns "1. ... 2. ..." plain text;
   formatFixSteps detects that pattern and renders as <ol>. */
.ai-result-fix-steps {
  margin: 6px 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.ai-result-fix-steps li::marker {
  color: var(--accent);
  font-weight: 700;
}
/* Remediation block — pre-built mini phone mockup showing the exact
   screen the user needs to find. Inline inside the diagnosis card. */
.ai-remediation {
  margin-top: 6px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.ai-remediation-frame {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.ai-remediation-phone {
  transform: scale(0.62);
  transform-origin: center top;
  margin-bottom: -150px;
}

/* ---- AI diagnosis paywall card ----
   Rendered in the drawer when a non-paying visitor taps "Stuck?
   Snap the screen". Shows the feature's value prop + CTAs to
   signup / pricing. Feature stays visible — showing buyers what
   they'd get is part of the pitch — but the Gemini call itself
   is reserved for paying tenants (hidePitch === true). */
.ai-lock {
  padding: 20px 4px 4px;
}
.ai-lock-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.ai-lock-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--text);
}
.ai-lock-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 16px;
}
.ai-lock-hint {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
  margin: 0 0 16px;
}
.ai-lock-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-lock-bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.ai-lock-bullets li span strong {
  color: var(--text);
  font-weight: 600;
  display: inline;
}
.ai-lock-bullets li > svg,
.ai-lock-bullets li > span:first-child {
  flex-shrink: 0;
  color: var(--accent);
  padding-top: 2px;
}
.ai-lock-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ai-lock-ctas .btn {
  flex: 1 1 auto;
  min-width: 160px;
  justify-content: center;
}
.ai-lock-foot {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ai-lock-foot a,
.ai-lock-foot-link {
  color: var(--accent);
  text-decoration: underline;
}
.ai-lock-foot-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ---- Trust signal: "What I see" observed block ---- */
/* Rendered right under the diagnosis header before the player. Reads
   as the AI's evidence for the diagnosis — the single most important
   thing that makes the feature feel "smart". Italic body + subtle
   eye-icon label + muted border. */
.ai-result-observed {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin: -4px 0 14px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  align-items: flex-start;
}
.ai-result-observed-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 1px;
}
.ai-result-observed-body {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
}

/* Clarifying question card — shown on low-confidence diagnoses where
   the AI needs one more detail before it can help. Sits above the
   single resume-role frame so the question is front and centre. */
.ai-result-clarify {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  color: #92400e;
  align-items: flex-start;
}
.ai-result-clarify-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.ai-result-clarify-body {
  font-size: 13.5px;
  line-height: 1.45;
  color: #7c2d12;
}

/* "Your screen → Where to go" pair shown on the first diagnose frame.
   Puts the user's uploaded screenshot next to the AI-rendered mockup
   with an arrow between — zero-learning-curve context anchor. On narrow
   drawers the pair stacks vertically; on wide it's side-by-side. */
.ai-remediation-frame--paired {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.ai-user-shot,
.ai-target-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ai-user-shot-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ai-user-shot-img {
  max-width: 100%;
  max-height: 260px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  object-fit: contain;
}
.ai-repair-arrow-between {
  color: var(--accent);
  opacity: 0.6;
  font-size: 18px;
  padding-top: 16px; /* roughly align with phone screen centres */
}
@media (max-width: 520px) {
  .ai-remediation-frame--paired {
    grid-template-columns: 1fr;
  }
  .ai-repair-arrow-between {
    transform: rotate(90deg);
    padding-top: 0;
  }
}

/* Pulsing arrow callout overlaid on the mockup edge — AI uses this to
   point at a specific tap target when the built-in highlight alone
   isn't obvious. Edges map to arrowAt enum values. */
.ai-repair-arrow {
  position: absolute;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: aiArrowPulse 1.5s ease-in-out infinite;
  z-index: 2;
}
.ai-repair-arrow--top {
  top: 8px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}
.ai-repair-arrow--right {
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}
.ai-repair-arrow--bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}
.ai-repair-arrow--left {
  left: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}
@keyframes aiArrowPulse {
  0%,
  100% {
    box-shadow:
      0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent),
      0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
  }
  50% {
    box-shadow:
      0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent),
      0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

/* Staggered reveal when a fresh diagnosis lands — the progress rail,
   mockup, caption, and CTAs bounce in sequentially. Only fires on the
   first render of a given diagnosis (data-reveal=1); prev/next swaps
   get no animation so they feel snappy. */
.ai-repair-player[data-reveal="1"] > * {
  animation: aiReveal 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ai-repair-player[data-reveal="1"] > *:nth-child(1) {
  animation-delay: 0ms;
}
.ai-repair-player[data-reveal="1"] > *:nth-child(2) {
  animation-delay: 70ms;
}
.ai-repair-player[data-reveal="1"] > *:nth-child(3) {
  animation-delay: 140ms;
}
.ai-repair-player[data-reveal="1"] > *:nth-child(4) {
  animation-delay: 200ms;
}
.ai-repair-player[data-reveal="1"] > *:nth-child(5) {
  animation-delay: 260ms;
}
@keyframes aiReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Skeleton loading — fakes the shape of a result so the user never
   stares at a spinner-on-empty. Stages advance on a timer so there's
   always a small bit of forward motion even when Gemini is slow. */
.ai-loading-skeleton {
  padding: 8px 4px;
}
.ai-loading-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.ai-loading-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-tertiary);
  transition: color 0.3s;
}
.ai-loading-stage--active {
  color: var(--text);
  font-weight: 500;
}
.ai-loading-stage--done {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.ai-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.ai-loading-stage--active .ai-loading-dot {
  background: var(--accent);
  animation: aiStagePulse 1.2s ease-in-out infinite;
}
.ai-loading-stage--done .ai-loading-dot {
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}
@keyframes aiStagePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}
.ai-loading-skeleton-card {
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-sk {
  background: linear-gradient(
    90deg,
    var(--bg-subtle) 25%,
    color-mix(in srgb, var(--bg-subtle) 50%, var(--border)) 50%,
    var(--bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: aiSkShimmer 1.4s linear infinite;
  border-radius: 6px;
}
.ai-sk-pill {
  width: 120px;
  height: 22px;
  border-radius: 999px;
}
.ai-sk-line {
  height: 13px;
  width: 100%;
}
.ai-sk-line--wide {
  width: 88%;
}
.ai-sk-line--short {
  width: 42%;
}
.ai-sk-phone {
  height: 180px;
  width: 120px;
  border-radius: 16px;
  margin: 10px auto;
}
@keyframes aiSkShimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* Retry card — shown after a thumbs-down vote. Tells Gemini "try a
   different angle" via the priorAttempts context when the user
   re-uploads. */
.ai-repair-feedback--retry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}
.ai-repair-feedback-retry-btn {
  font-size: 13px;
  padding: 7px 12px;
  background: white;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9a3412;
  font-weight: 500;
  align-self: flex-start;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.ai-repair-feedback-retry-btn:hover {
  border-color: #ea580c;
  background: #fff7ed;
}

/* -------------------------------------------------------------
   Repair-frame player — rendered inside the AI diagnosis drawer
   when the response includes repairFrames. Shows a multi-step
   mini-walkthrough (mockup + caption) with prev/next nav. Each
   frame is a step the user follows to fix what went wrong, and
   the final frame's CTA jumps back into the main walkthrough.
   ------------------------------------------------------------- */
.ai-repair-player {
  margin-top: 4px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.ai-repair-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ai-repair-progress-label {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.ai-repair-progress-role {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.ai-repair-progress-dots {
  display: flex;
  gap: 6px;
}
.ai-repair-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background-color 0.2s;
}
.ai-repair-dot--done {
  background: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ai-repair-dot--active {
  background: var(--accent);
  transform: scale(1.2);
}
.ai-repair-caption {
  padding: 14px 4px 0;
}
.ai-repair-caption-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.ai-repair-caption-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ai-repair-annotation {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--accent-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.ai-repair-nav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.ai-repair-nav .btn {
  flex: 1;
  justify-content: center;
}
.ai-repair-retry {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.ai-repair-retry:hover {
  color: var(--text);
  text-decoration: underline;
}
/* Feedback thumbs shown below the resume-frame CTA — one click
   records helpful/not-helpful, form flips to a "Thanks" state. */
.ai-repair-feedback {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-repair-feedback--done {
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}
.ai-repair-feedback-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.ai-repair-feedback-btns {
  display: flex;
  gap: 6px;
}
.ai-repair-feedback-btn {
  font-size: 13px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.ai-repair-feedback-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* ---------------------------------------------------------------
   AI-repair slides rendered inline in the walkthrough. Same
   phone-frame + caption-panel layout as main walkthrough frames;
   an accent band + "AI repair" eyebrow + optional arrow callout
   flag them as AI-authored without making them feel like a
   different modal. Legibility matches the main slides: same
   headline size, same caption type ramp, same Prev/Next buttons.
   --------------------------------------------------------------- */

/* Caption panel accent — thin accent-purple left border + a very
   subtle accent-subtle background wash. Enough to feel distinct
   from normal slides without fighting the text for contrast. */
.walkthrough-caption--ai {
  position: relative;
  border-left: 3px solid var(--accent);
  padding-left: 16px;
}

/* AI eyebrow: role badge (Diagnose/Do this/Confirm) + step count +
   confidence chip, all in one row. Replaces the standard
   "Do this now / Important" eyebrow on AI slides. */
.wk-phase.wk-ai-phase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 14px;
}
.wk-ai-phase-count {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
}
.wk-ai-confidence {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid transparent;
}
.wk-ai-confidence--high {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.wk-ai-confidence--medium {
  color: #b45309;
  border-color: #fde68a;
  background: #fffbeb;
}
.wk-ai-confidence--low {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

/* Observed quote on the first repair slide — the AI's trust
   signal. Italic body, small eye-icon label, left-accent border. */
.wk-ai-observed {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin: 6px 0 16px;
  background: var(--bg-subtle);
  border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: 0 8px 8px 0;
  align-items: flex-start;
}
.wk-ai-observed-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 1px;
}
.wk-ai-observed-body {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
}

/* Clarify question — amber card on low-confidence diagnoses */
.wk-ai-clarify {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  color: #92400e;
  align-items: flex-start;
}
.wk-ai-clarify-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.wk-ai-clarify-body {
  font-size: 13.5px;
  line-height: 1.45;
  color: #7c2d12;
}

/* AI headline — same size as main walkthrough headlines, no
   special font tweaks. Legibility parity is the whole point. */
.wk-ai-headline { /* inherits wk-headline */ }

/* Annotation hint ("Tap this") — subtle accent strip with a
   hand-pointer icon. Same pattern the main walkthrough callouts
   use; kept visually quieter than the warn callout. */
.wk-ai-annotation {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--accent-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
}

/* User screenshot thumbnail on the diagnose slide — proof we
   actually looked at their screen. Sits below the caption. */
.wk-ai-usershot {
  margin-top: 16px;
  padding: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 180px;
}
.wk-ai-usershot-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wk-ai-usershot img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  border: 1px solid var(--border);
  object-fit: contain;
}

/* Feedback thumbs on the terminal AI slide — same card pattern
   the drawer version used, re-homed inside the caption panel. */
.wk-ai-feedback {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.wk-ai-feedback--done {
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}
.wk-ai-feedback--retry {
  flex-direction: column;
  align-items: flex-start;
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.wk-ai-feedback-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.wk-ai-feedback-btns { display: flex; gap: 6px; }
.wk-ai-feedback-btn {
  font-size: 13px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.wk-ai-feedback-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.wk-ai-feedback-retry-btn {
  font-size: 13px;
  padding: 7px 12px;
  background: white;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9a3412;
  font-weight: 500;
}
.wk-ai-feedback-retry-btn:hover { border-color: #ea580c; background: #fff7ed; }

/* Citation link below each AI repair caption — small, muted, opens
   in a new tab. Uses an underline-on-hover affordance so it reads as
   a link without competing with the primary action button. */
.wk-ai-learnmore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.wk-ai-learnmore:hover {
  color: var(--accent);
  text-decoration: underline;
}
.wk-ai-learnmore svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* "Send this to your IT team" CTA — appears under the feedback
   thumbs when AI confidence is low or severity is critical AND the
   tenant has configured an escalation address. Visually a soft
   secondary action so it doesn't compete with the primary repair
   path; lights up amber on hover to signal "human handover". */
.wk-ai-escalate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.wk-ai-escalate-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
}
.wk-ai-escalate-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.wk-ai-escalate-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #e6f7ea;
  color: #0d6a2a;
  font-size: 12px;
  font-weight: 600;
}
.wk-ai-escalate-done svg {
  color: #107c10;
}

/* Pulsing arrow callout overlaid on the wk-screen mockup. Edges
   map to the AI's arrowAt enum (top/right/bottom/left); rotates
   to point inward at the tap target. */
.wk-ai-arrow {
  position: absolute;
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: wkAiArrowPulse 1.5s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
.wk-ai-arrow--top { top: 10px; left: 50%; transform: translateX(-50%) rotate(180deg); }
.wk-ai-arrow--right { right: 10px; top: 50%; transform: translateY(-50%) rotate(270deg); }
.wk-ai-arrow--bottom { bottom: 10px; left: 50%; transform: translateX(-50%); }
.wk-ai-arrow--left { left: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); }
@keyframes wkAiArrowPulse {
  0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50%      { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* AI markers in the step rail + dot rail so the injected segment
   is visually obvious in the progress UI. Keeps the main-flow
   dots neutral; AI dots pick up the accent. */
.walkthrough-dot--ai { background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.walkthrough-dot--ai.active {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.wk-step--ai .wk-step-num--ai {
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wk-step--ai .wk-step-title {
  color: var(--accent);
}

/* In-walkthrough "Stuck? Snap the screen" affordance — a subtle
   chip under the reassurance text that summons the AI diagnosis
   drawer with the current frame's context pre-filled. Only shown
   when both AI_FEATURES_ENABLED and app-settings.aiDiagnosisEnabled
   are true (see isAIDiagnosisLive). */
.walkthrough-stuck-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.walkthrough-stuck-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------
   Generic parameterised mockup templates — filled in by Gemini at
   diagnose time. These render inside the existing phone-frame shell
   of the AI repair player. Three templates cover the long tail of
   devices / dialogs we don't have pixel-perfect mockups for:
     .gen-mockup--settings — list with rows
     .gen-mockup--dialog   — system modal
     .gen-mockup--picker   — bottom-sheet chooser
   Vendor modifiers (.gen-mockup--ios / --android / --desktop /
   --windows / --mac) tune the chrome colour + typography so the
   same data looks plausibly native on each platform.
   ---------------------------------------------------------------*/
.gen-mockup {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f5f7;
  color: #1d1d1f;
  font-family: -apple-system, "Segoe UI", Roboto, "Inter", sans-serif;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gen-mockup--ios {
  background: #f2f2f7;
}
.gen-mockup--android {
  background: #ffffff;
}
.gen-mockup--desktop {
  background: #fafbfd;
}
.gen-mockup--windows {
  background: #f3f3f3;
}
.gen-mockup--mac {
  background: #ececec;
}

/* Top chrome — one slim bar with the page title + back affordance. */
.gen-chrome {
  flex-shrink: 0;
  padding: 9px 12px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}
.gen-chrome--ios {
  justify-content: space-between;
}
.gen-chrome--ios .gen-chrome-title {
  font-weight: 600;
}
.gen-chrome--ios .gen-chrome-back {
  color: #0a84ff;
  font-weight: 400;
}
.gen-chrome--android {
  gap: 14px;
  justify-content: flex-start;
}
.gen-chrome--android .gen-chrome-back {
  font-size: 14px;
  color: #333;
}
.gen-chrome--android .gen-chrome-title {
  font-weight: 500;
}
.gen-chrome--desktop {
  justify-content: center;
}
.gen-chrome-right {
  width: 34px;
}

.gen-breadcrumb {
  padding: 6px 12px 2px;
  font-size: 9px;
  color: #666;
  letter-spacing: 0.01em;
}
.gen-breadcrumb-sep {
  opacity: 0.5;
  margin: 0 2px;
}
.gen-breadcrumb--current {
  color: #1d1d1f;
  font-weight: 500;
}

/* Settings list rows — Android default; iOS variant is a bit tighter. */
.gen-rows {
  flex: 1;
  overflow: hidden;
  padding: 4px 0;
}
.gen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  min-height: 38px;
}
.gen-row-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}
.gen-row-text {
  flex: 1;
  min-width: 0;
}
.gen-row-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #1d1d1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-row-sub {
  font-size: 9px;
  color: #666;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-row-trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #999;
}
/* Highlighted row — pulsing accent halo to show the AI-recommended
   tap target. Same visual language the fixed mockups use elsewhere. */
.gen-row--highlight {
  background: rgba(10, 132, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px #0a84ff;
  border-radius: 6px;
  margin: 0 6px;
  animation: genPulse 1.6s ease-in-out infinite;
}
@keyframes genPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1.5px #0a84ff,
      0 0 0 0 rgba(10, 132, 255, 0.35);
  }
  50% {
    box-shadow:
      inset 0 0 0 1.5px #0a84ff,
      0 0 0 6px rgba(10, 132, 255, 0);
  }
}

/* Toggles, checks, chevrons, radios. All drawn in pure CSS / inline
   SVG so no image deps. "on" variants pick up blue; "off" is muted. */
.gen-toggle {
  width: 24px;
  height: 14px;
  border-radius: 8px;
  background: #ccc;
  position: relative;
  transition: background-color 0.15s;
}
.gen-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transition: left 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gen-toggle--on {
  background: #34c759;
}
.gen-toggle--on .gen-toggle-knob {
  left: 11px;
}
.gen-check {
  font-weight: 700;
  color: #0a84ff;
  font-size: 12px;
}
.gen-chev {
  color: #999;
  font-size: 14px;
  font-weight: 400;
}
.gen-radio {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
}
.gen-radio--on {
  border-color: #0a84ff;
  background: #0a84ff;
  box-shadow:
    inset 0 0 0 3px white,
    inset 0 0 0 3.5px #0a84ff;
}

/* System dialogs — modal card over a dimmed scrim. Card style shifts
   per vendor: iOS = rounded large, Android = tighter, Mac = sharper. */
.gen-mockup--dialog {
  justify-content: center;
  align-items: center;
  background: #dadada;
}
.gen-mockup--ios.gen-mockup--dialog {
  background: #bfbfbf;
}
.gen-dialog-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.gen-dialog-card {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 12px;
  padding: 14px 16px 12px;
  width: 86%;
  max-width: 240px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.gen-mockup--ios .gen-dialog-card {
  border-radius: 14px;
  background: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(20px);
}
.gen-mockup--android .gen-dialog-card {
  border-radius: 8px;
  text-align: left;
  padding: 14px;
}
.gen-mockup--mac .gen-dialog-card {
  border-radius: 10px;
  text-align: left;
  padding: 14px;
}
.gen-mockup--windows .gen-dialog-card {
  border-radius: 6px;
  text-align: left;
  padding: 14px;
}

.gen-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  color: #1d1d1f;
}
.gen-dialog-title {
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
  line-height: 1.3;
}
.gen-dialog-body {
  font-size: 10.5px;
  color: #555;
  line-height: 1.4;
  margin-bottom: 12px;
}
.gen-dialog-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.gen-mockup--ios .gen-dialog-actions {
  flex-direction: column;
  margin: 8px -16px -12px;
}
.gen-mockup--ios .gen-dialog-btn {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 0;
}
.gen-dialog-btn {
  font-size: 10.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #f5f5f7;
  color: #1d1d1f;
  cursor: default;
}
.gen-dialog-btn--primary {
  background: #0a84ff;
  color: white;
  border-color: #0a84ff;
  font-weight: 600;
}
.gen-mockup--ios .gen-dialog-btn--primary {
  background: transparent;
  color: #0a84ff;
  border: none;
  font-weight: 600;
}
.gen-dialog-btn--highlight {
  animation: genPulse 1.6s ease-in-out infinite;
}

/* Bottom-sheet picker — docked to bottom like a real system chooser. */
.gen-mockup--picker {
  justify-content: flex-end;
  background: #dadada;
}
.gen-picker-card {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 8px 0 12px;
  max-height: 78%;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
.gen-mockup--ios .gen-picker-card {
  border-radius: 14px;
  margin: 0 6px 6px;
  max-height: 70%;
}
.gen-picker-handle {
  width: 32px;
  height: 3px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  margin: 0 auto 10px;
}
.gen-picker-title {
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px;
  padding: 0 16px;
  color: #1d1d1f;
}
.gen-opts {
  padding: 0 6px;
}
.gen-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
}
.gen-opt-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}
.gen-opt-text {
  flex: 1;
  min-width: 0;
}
.gen-opt-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #1d1d1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-opt-sub {
  font-size: 9px;
  color: #666;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-opt--highlight {
  background: rgba(10, 132, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px #0a84ff;
  animation: genPulse 1.6s ease-in-out infinite;
}
.gen-opt--selected {
  font-weight: 600;
}

.gen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Desktop companion handoff — QR + short URL panel shown in the
   drawer when a companion-mode user taps "Stuck? Snap the screen".
   Their phone scans the QR, uploads via /report/<code>, and the
   desktop's Realtime subscription swaps this panel for the repair
   player. Grid layout so the QR and the step list sit side-by-side
   on wide drawers and stack on narrow ones. */
.ai-companion-handoff {
  padding-top: 4px;
}
.ai-companion-handoff-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 0;
}
.ai-companion-handoff-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
.ai-companion-handoff-qr img {
  width: 180px;
  height: 180px;
  display: block;
  border-radius: 8px;
  background: white;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ai-companion-handoff-qr.qr-failed img {
  display: none;
}
.ai-companion-handoff-qr.qr-failed::after {
  content: "QR unavailable — type the URL below instead";
  display: block;
  padding: 16px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 180px;
  text-align: center;
}
.ai-companion-handoff-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-companion-handoff-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-companion-handoff-step {
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.ai-companion-handoff-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-companion-handoff-code-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-companion-handoff-code-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.ai-companion-handoff-code {
  padding: 8px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
}
.ai-companion-handoff-status {
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--accent-subtle);
  border-radius: 8px;
  font-size: 13px;
  color: var(--accent);
  text-align: center;
}
@media (max-width: 520px) {
  /* Stack on narrow drawers — the QR needs its own line. */
  .ai-companion-handoff-grid {
    grid-template-columns: 1fr;
  }
  .ai-companion-handoff-qr {
    display: flex;
    justify-content: center;
  }
}
.ai-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.ai-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-result-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ai-result-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.ai-result-section {
  margin-bottom: 16px;
}
.ai-result-section:last-child {
  margin-bottom: 0;
}
.ai-result-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ai-result-section-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.ai-result-action {
  margin-top: 16px;
  width: 100%;
  padding: 12px 18px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.15s;
}
.ai-result-action:hover {
  background: var(--accent-hover);
}

.ai-loading {
  padding: 32px 20px;
  text-align: center;
}
.ai-loading-dots {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 12px;
}
.ai-loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulseDot 1.4s ease-in-out infinite;
}
.ai-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.ai-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes pulseDot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
.ai-loading-text {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}
.ai-loading-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Config playground */
.playground {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}
@media (min-width: 960px) {
  .playground {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.playground-form {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.playground-form h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.playground-form-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.form-row {
  margin-bottom: 16px;
}
.form-row:last-child {
  margin-bottom: 0;
}
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.form-label-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 4px;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.form-input-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
}

/* Domain auto-detect row — input + Detect button side by side. Feeds
   the logo URL from a Microsoft tenant-branding lookup. */
.domain-detect-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.domain-detect-row .form-input {
  flex: 1;
  min-width: 0;
}
.domain-detect-btn {
  flex-shrink: 0;
  padding: 0 18px;
  background: var(--text);
  color: white;
  border: 1px solid var(--text);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s,
    transform 0.08s;
  white-space: nowrap;
}
.domain-detect-btn:hover:not(:disabled) {
  background: #000;
}
.domain-detect-btn:active {
  transform: translateY(1px);
}
.domain-detect-btn:disabled {
  opacity: 0.65;
  cursor: progress;
}
.domain-detect-status {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 18px;
}
.domain-detect-status.is-loading {
  color: var(--text-secondary);
}
.domain-detect-status.is-success {
  color: var(--success);
}
.domain-detect-status.is-warn {
  color: var(--warning);
}
.domain-detect-status.is-error {
  color: var(--danger);
}

.form-color {
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-color-swatch {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
}
.form-color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}
.form-color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 7px;
}

.upn-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 8px;
  margin-bottom: 6px;
}
.upn-row .form-input {
  padding: 8px 12px;
  font-size: 13px;
}
.upn-remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.upn-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.upn-add {
  margin-top: 6px;
  padding: 6px 12px;
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.upn-add:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.playground-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.playground-preview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.playground-caption {
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 16px;
  max-width: 280px;
  line-height: 1.4;
}

.playground-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Pricing cards */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
  margin-bottom: 48px;
}
/* Same 2-up / 3-up split as feature-grid so the pricing lands with
   comfortable width on iPad and below without cramming three cards
   onto a 768 px viewport. */
@media (min-width: 640px) and (max-width: 1023px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pricing-card {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.pricing-card-featured-label {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pricing-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.pricing-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.pricing-amount {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pricing-period {
  font-size: 14px;
  color: var(--text-tertiary);
}
.pricing-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}
.pricing-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.pricing-feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pricing-feature svg {
  flex-shrink: 0;
  color: var(--success);
  margin-top: 3px;
}

/* Sticky action bar on mobile wizard */
.wizard-action-bar {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 60%, rgba(255, 255, 255, 0));
  padding: 16px 0 8px;
  z-index: 5;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .wizard-action-bar {
    position: static;
    background: none;
    padding-top: 0;
  }
}

/* QR code section */
.qr-section {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.qr-box {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.qr-text {
  flex: 1;
  min-width: 0;
}
.qr-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.qr-desc {
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Floating AI help button */
.ai-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0071e3, #5856d6);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.ai-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.4);
}
.ai-fab-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: #34c759;
  border: 2px solid white;
  border-radius: 50%;
}

@media (max-width: 640px) {
  .ai-fab {
    width: 46px;
    height: 46px;
    right: 16px;
    bottom: 16px;
  }
}

/* =========================================================
   ENTERPRISE SALES BLOCKS
   ========================================================= */

/* Social proof bar on landing */
.proof-bar {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 32px 24px;
  background: var(--bg);
}
.proof-bar-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.proof-bar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.proof-bar-items {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.proof-item {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.proof-item:hover {
  opacity: 1;
}

/* Admin dashboard mockup preview */
.admin-dash {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.admin-dash-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-subtle);
}
.admin-dash-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.admin-dash-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.admin-dash-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
}
.admin-tab {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.admin-dash-body {
  padding: 20px;
}
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .admin-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}
.admin-kpi {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px;
}
.admin-kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.admin-kpi-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.admin-kpi-delta {
  font-size: 11px;
  font-weight: 500;
  color: var(--success);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.admin-kpi-delta.neg {
  color: var(--danger);
}

.admin-chart {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.admin-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-chart-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.admin-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}
.admin-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent), #4ea4ff);
  border-radius: 3px 3px 0 0;
  position: relative;
}
.admin-bar-labels {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.admin-bar-label {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.admin-issues-table {
  margin-top: 4px;
}
.admin-issues-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.admin-issues-row:last-child {
  border-bottom: none;
}
.admin-issues-name {
  flex: 1;
  color: var(--text);
  min-width: 0;
}
.admin-issues-count {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: "JetBrains Mono", monospace;
}
.admin-issues-bar {
  width: 80px;
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.admin-issues-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* ROI calculator */
.roi-calc {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 20px;
}
.roi-calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .roi-calc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.roi-output {
  background: var(--text);
  color: white;
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
}
.roi-output-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 500;
}
.roi-output-amount {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.roi-output-period {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}
.roi-output-break {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  margin-top: 16px;
}
.roi-output-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}
.roi-output-stat:last-child {
  margin-bottom: 0;
}
.roi-output-stat strong {
  color: white;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.roi-field {
  margin-bottom: 18px;
}
.roi-field:last-child {
  margin-bottom: 0;
}
.roi-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.roi-field-value {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.roi-slider {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--border-subtle);
  border-radius: 2px;
  outline: none;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.roi-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Deploy guide */
.deploy-steps {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .deploy-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.deploy-step {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
}
.deploy-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--text);
  color: white;
  font-size: 12px;
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  margin-bottom: 12px;
}
.deploy-step-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.deploy-step-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.deploy-code {
  background: #1d1d1f;
  color: #f5f5f7;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 20px;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  position: relative;
}
.deploy-code .tag {
  color: #ff8ba7;
}
.deploy-code .attr {
  color: #7fbbff;
}
.deploy-code .str {
  color: #b3e5a5;
}
.deploy-code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #2a2a2e;
  color: #a1a1a6;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition:
    color 0.15s,
    background 0.15s;
}
.deploy-code-copy:hover {
  color: white;
  background: #3a3a3e;
}

/* Trust / security block */
.trust-block {
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 32px;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.trust-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.trust-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Feedback widget on success */
.feedback-widget {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 24px 0;
}
.feedback-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.feedback-options {
  display: flex;
  gap: 10px;
}
.feedback-btn {
  flex: 1;
  padding: 14px 12px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    transform 0.08s;
  font-family: inherit;
}
.feedback-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.feedback-btn:active {
  transform: scale(0.97);
}
.feedback-btn.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.feedback-emoji {
  font-size: 24px;
  line-height: 1;
}
.feedback-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.feedback-btn.selected .feedback-label {
  color: var(--accent);
  font-weight: 600;
}
.feedback-thanks {
  text-align: center;
  padding: 8px 0;
  color: var(--success);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Pricing cards - tweaks */
.testimonial-card {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 32px;
}
.testimonial-quote {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.01em;
  font-weight: 500;
  margin-bottom: 20px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0071e3, #5856d6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.testimonial-role {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* =========================================================
   FOCUS MODE - Mobile-optimized single-instruction takeover
   ========================================================= */

.focus-mode {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: focusIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Safe area insets for iOS notch/home indicator */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes focusIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.focus-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
  flex-shrink: 0;
}
.focus-close {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  margin-left: -10px;
}
.focus-close:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.focus-step-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  font-family: "JetBrains Mono", monospace;
}

.focus-progress {
  display: flex;
  gap: 3px;
  padding: 0 20px;
  padding-top: 10px;
  flex-shrink: 0;
}
.focus-progress-seg {
  height: 3px;
  flex: 1;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.focus-progress-seg.active {
  background: var(--accent);
}

.focus-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.focus-icon-hero {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 28px;
  flex-shrink: 0;
}
.focus-icon-hero svg {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
}

.focus-headline {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  text-align: center;
  margin-bottom: 12px;
  max-width: 340px;
}
.focus-sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 28px;
  max-width: 340px;
}

/* Compact phone mockup in focus mode */
.focus-mockup-wrap {
  width: 176px;
  margin: 8px auto 20px;
  flex-shrink: 0;
}
.focus-mockup-wrap .phone-frame {
  width: 176px;
}

.focus-action-area {
  padding: 16px 20px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.focus-primary {
  width: 100%;
  padding: 16px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.01em;
  transition:
    background-color 0.15s,
    transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.focus-primary:hover {
  background: var(--accent-hover);
}
.focus-primary:active {
  transform: scale(0.98);
}
.focus-primary-ghost {
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 12px;
  font-size: 14px;
  width: 100%;
  border: none;
  cursor: pointer;
  margin-top: 8px;
}
.focus-primary-ghost:hover {
  color: var(--text);
}

/* Pre-switch coaching card */
.coach-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px 20px;
  margin: 0 auto 24px;
  max-width: 380px;
  text-align: left;
  width: 100%;
}
.coach-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.coach-instruction {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 16px;
}
.coach-hint {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.coach-hint-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Return banner — appears when user comes back to the tab */
.return-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 145;
  background: var(--accent);
  color: white;
  padding: 14px 20px;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 113, 227, 0.2);
  padding-top: calc(14px + env(safe-area-inset-top));
}
.return-banner.show {
  transform: translateY(0);
}
.return-banner-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.return-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.return-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.return-banner-text strong {
  font-weight: 600;
  display: block;
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 2px;
}
.return-banner-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.return-banner-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: white;
  color: var(--accent);
  transition: background-color 0.15s;
}
.return-banner-btn:active {
  transform: scale(0.96);
}
.return-banner-btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* Toggle between Focus Mode and full page */
.focus-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 40;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--text);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: none;
  align-items: center;
  gap: 6px;
}
@media (max-width: 1023px) {
  .focus-toggle {
    display: inline-flex;
  }
}
.focus-toggle:active {
  transform: scale(0.96);
}

/* When focus mode is active, hide the normal wizard */
body.focus-active .nav,
body.focus-active main,
body.focus-active footer,
body.focus-active .ai-fab {
  display: none;
}

/* "Ready to switch" confirmation modal */
.pre-switch {
  padding: 24px 24px 20px;
}
.pre-switch-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 8px;
}
.pre-switch-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.45;
}
.pre-switch-task {
  background: var(--accent-subtle);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.pre-switch-task-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
}
.pre-switch-task-text {
  font-size: 15px;
  font-weight: 600;
  color: #003d7a;
  line-height: 1.35;
}
.pre-switch-reassure {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-muted);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 20px;
}
.pre-switch-reassure-icon {
  color: var(--success);
  flex-shrink: 0;
  margin-top: 1px;
}

/* =========================================================
   DEVICE DETECTION & VENDOR-SPECIFIC SELECTION
   ========================================================= */

/* "Where are you setting this up?" screen */
.context-picker {
  padding: 24px 20px 32px;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

/* Hide the warn-badge sub-pill on tight mobile to keep cards clean. */
@media (max-width: 480px) {
  .context-picker .vendor-card-warn {
    display: none;
  }
  .context-picker .vendor-card-sub {
    display: none;
  }
}
.context-picker-title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 auto 8px;
  line-height: 1.2;
  max-width: 640px;
}
.context-picker-sub {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 auto 24px;
  max-width: 560px;
  line-height: 1.45;
}
.context-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .context-options {
    grid-template-columns: 1fr;
  }
}
.context-option {
  padding: 28px 20px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.08s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.context-option:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(0, 113, 227, 0.08);
}
.context-option:active {
  transform: scale(0.98);
}
.context-option-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-muted);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.context-option-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.context-option-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}

.context-detected-bar {
  background: var(--accent-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 20px auto 32px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #003d7a;
}
.context-detected-icon {
  color: var(--accent);
  flex-shrink: 0;
}
.context-detected-text {
  line-height: 1.3;
}
.context-detected-text strong {
  font-weight: 600;
}
.context-detected-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 2px;
}
.context-detected-action {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.context-detected-action:hover {
  background: rgba(0, 113, 227, 0.1);
}

/* Vendor picker grid */
.vendor-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 18px;
}
@media (min-width: 640px) {
  .vendor-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
  }
}
/* Wide variant — used on the phone picker (14 vendors) where the
   3-col cap on desktop wastes horizontal real estate and forces
   page scroll. Auto-fills as many columns as fit at 150px each so
   the grid uses the full screen width on a laptop. */
.vendor-grid--wide {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .vendor-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
.vendor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Tighter cards on mobile so 17 vendors fit in roughly one viewport
       (or close to it) instead of forcing scroll just to see the picker. */
  padding: 14px 10px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.08s;
  gap: 8px;
}

/* Minimal credential-kind label above each picker's device grid.
   "Portable credential" on the phone picker, "Local credential" on
   the desktop picker — the two terms from Microsoft's phishing-
   resistant passwordless guidance. Just a quiet uppercase eyebrow;
   no banner, no deep-link, no extra prose. If someone wants the
   detail they can tap through. */
.picker-section-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 4px 0 12px;
}
.picker-section-kind--local { color: var(--text-tertiary); }
@media (min-width: 640px) {
  .vendor-card {
    padding: 24px 16px;
    border-radius: 14px;
    gap: 12px;
  }
}
.vendor-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 113, 227, 0.08);
}
.vendor-card:active {
  transform: scale(0.98);
}
.vendor-card-logo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.vendor-card-logo svg {
  width: 100%;
  height: 100%;
}
@media (min-width: 640px) {
  .vendor-card-logo {
    width: 48px;
    height: 48px;
  }
}
.vendor-card-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (min-width: 640px) {
  .vendor-card-label {
    font-size: 15px;
  }
}
.vendor-card-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.25;
}
@media (min-width: 640px) {
  .vendor-card-sub {
    font-size: 12px;
    line-height: 1.3;
  }
}
/* Vendor card "specialist case" chip — reframes gnarly devices as
   "we have a custom flow for this", not "this device is broken".
   Accent-coloured (info) rather than orange (error). */
.vendor-card-warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  text-transform: uppercase;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .vendor-card-warn {
    border-color: rgba(0, 113, 227, 0.25);
  }
}
.vendor-warn-star {
  color: var(--accent);
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
}

/* Collapsible "what makes this device different" callout. Default
   state is a single compact line ("Handles Samsung Pass — why & how")
   — keeps the walkthrough above the fold. Click to expand the
   long-form context. Only shown on the marketing demo (suppressed
   in embedded paying deployments). */
.walkthrough-warn-detail {
  margin: 0 auto 10px;
  max-width: 560px;
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .walkthrough-warn-detail {
    border-color: rgba(0, 113, 227, 0.22);
  }
}
.walkthrough-warn-detail-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.walkthrough-warn-detail-summary::-webkit-details-marker {
  display: none;
}
.walkthrough-warn-detail-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.walkthrough-warn-detail-summary-text {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.walkthrough-warn-detail-toggle {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.walkthrough-warn-detail-body {
  padding: 0 14px 14px 46px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.walkthrough-warn-detail-body strong {
  color: var(--text-primary);
  font-weight: 700;
}
.walkthrough-warn-detail-body em {
  font-style: normal;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
  color: var(--accent);
}
.walkthrough-warn-detail[open] .walkthrough-warn-detail-toggle::after {
  content: " (hide)";
  opacity: 0.6;
  font-weight: 500;
}
@media (max-width: 767px) {
  .walkthrough-warn-detail {
    margin-bottom: 10px;
  }
  .walkthrough-warn-detail-summary {
    padding: 8px 12px;
  }
  .walkthrough-warn-detail-summary-text {
    font-size: 12px;
  }
  .walkthrough-warn-detail-body {
    padding: 0 12px 12px 42px;
    font-size: 12.5px;
  }
}

/* =========================================================
   WALKTHROUGH PLAYER — simple single-column layout.
   Same structure on every screen size; just gets wider
   breathing room on big screens via max-width. No
   viewport-fit, no rails, no dynamic clamps.
   ========================================================= */
.walkthrough {
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Fill the available viewport so the phone + caption sit
       vertically centred. Equal whitespace top + bottom. */
  min-height: calc(100dvh - var(--app-nav-h, 64px));
  box-sizing: border-box;
}
/* Symmetric auto margins above the player and below the caption
   distribute the leftover space equally. The player margin-top
   and the caption margin-bottom both resolve to the same value
   when there's spare vertical room. */
.walkthrough .walkthrough-player {
  margin-top: auto;
}
.walkthrough #wk-caption.walkthrough-caption {
  margin-bottom: auto;
}
/* Hide the marketing footer when in any flow screen — copyright +
   links belong on the landing page, not on a focused setup flow. */
body:has(.walkthrough) .footer,
body:has(.context-picker) .footer,
body:has(.demo-launcher) .footer,
body:has(.prereq-prep) .footer {
  display: none;
}
.walkthrough-back {
  align-self: flex-start;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.walkthrough-back:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
/* Mode banner sits below back link if present. */
.walkthrough .walkthrough-mode-banner {
  margin: 0;
  max-width: none;
}
/* Vendor chip + step counter row — small status bar above the phone. */
.walkthrough-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.walkthrough-meta .walkthrough-vendor {
  margin: 0;
}
.walkthrough-meta .wk-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.walkthrough .walkthrough-warn-detail {
  /* Hidden by default in the simple layout — the device chip + the
       phone mockup itself convey the vendor identity. The collapsible
       was mostly marketing fluff that ate vertical space. */
  display: none;
}

/* Phone player: phone centered with side prev/next nav buttons. */
.walkthrough .walkthrough-player {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  align-items: center;
}
.walkthrough .walkthrough-player--manual {
  max-width: none;
}
.walkthrough .walkthrough-dots {
  margin-bottom: 12px;
}
.walkthrough .phone-frame-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
/* Phone-frame: sensible size that lets caption + button fit below
   on a typical 800px-tall laptop. 220px wide → ~452px tall. */
.walkthrough .phone-frame-wrap .phone-frame {
  width: 220px;
  height: auto;
  max-width: calc(100vw - 100px);
  aspect-ratio: 248 / 510;
  margin: 0;
}
.walkthrough .phone-frame-wrap .tablet-frame {
  width: 260px;
  height: auto;
  max-width: calc(100vw - 100px);
  aspect-ratio: 320 / 457;
  margin: 0;
}
.walkthrough .phone-frame-wrap .laptop-frame {
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 540 / 363;
  margin: 0;
}

/* Caption below phone — light card, no speech bubble tail. */
.walkthrough #wk-caption.walkthrough-caption {
  /* Prominent action card: accent-tinted background, accent left
       border, bolder text. The caption is the user's "do this next"
       instruction — make it impossible to miss. */
  background: var(--accent-subtle, #eaf2ff);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  max-width: none;
  width: 100%;
  /* margin-bottom is auto'd by the rule above to push the caption +
       phone block into the vertical centre when there's spare space. */
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.005em;
  position: relative;
  /* Reserve vertical space for up to 3 lines so the phone mockup
       never shifts between frames when one caption wraps further
       than another. At 15 px × 1.45 line-height × 3 lines + 28 px
       padding ≈ 93 px. Before this the container was 56 px min and
       taller captions pushed the mockup 4-8 px down per frame — the
       reviewer clocked the shift. */
  min-height: 93px;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .walkthrough #wk-caption.walkthrough-caption {
    border-color: rgba(0, 113, 227, 0.22);
  }
}
.walkthrough #wk-caption.walkthrough-caption::after {
  display: none;
}
.walkthrough #wk-caption.walkthrough-caption.warn {
  background: #fef3c7;
  color: #7c2d12;
  border-color: #fde68a;
}

/* Launch section — primary CTA at bottom. Hidden while still in the
   locked state (the user hasn't watched all the steps yet) — the
   "Watch the demo first" placeholder was just visual noise that ate
   ~80px of vertical space. The Next arrow is the actual primary
   action during the demo; this section appears only once the user
   reaches the last frame and the action becomes "Open Microsoft" /
   "I'm done". */
.walkthrough .launch-section {
  margin: 0;
  padding: 0;
  text-align: center;
}
.walkthrough .launch-section:has(.launch-btn-pro--locked) {
  display: none;
}
.walkthrough .launch-section .launch-btn-pro {
  width: 100%;
  min-width: 0;
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 12px;
}
.walkthrough .launch-section .launch-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Mobile (≤640px): phone dominates the screen, supporting chrome
   compresses so everything fits a typical phone viewport without
   page scroll. Phone is capped at ~55% of the DYNAMIC viewport
   height so the URL bar appearing/disappearing doesn't push the
   caption + launch button below the fold. */
@media (max-width: 640px) {
  .walkthrough {
    max-width: none;
    /* Trimmed from 10/16 → 6/10 to reclaim ~10 px for the phone
           mockup on short viewports. Every bit helps on S24 Ultra-
           sized screens where dvh minus browser chrome is ~790 px. */
    padding: 6px 14px 10px;
    gap: 6px;
  }
  /* Kill the auto-margins that center phone+caption vertically.
       With variable-height captions (1 line vs 3), the auto-margin
       split rebalances every frame and pushes the phone up and down
       — reads as the phone jumping between steps. Fixed-flow layout
       instead: phone sticks right after the meta row, caption and
       button flow below with a reserved min-height so the caption
       box itself is the same size regardless of text length. */
  .walkthrough .walkthrough-player {
    margin-top: 0;
  }
  .walkthrough #wk-caption.walkthrough-caption {
    margin-bottom: 0;
  }

  .walkthrough .phone-frame-wrap .phone-frame {
    /* Phone must always fit within the remaining viewport height
           AFTER the nav + back-link + device chip + caption (106 px
           min) + step dots consume the top chrome. Rough sum of the
           top chrome on mobile is ~320 px; cap phone height at
           `100dvh - 320px` to guarantee the bottom of the phone is
           ON SCREEN on every device, even the shortest (S24 Ultra
           in mobile Chrome reports ~790 px usable height → phone
           tops out at ~470 px, well above the 220-px useful floor).
           Fallback `min()` with the width-based size stops the phone
           from bloating wider than the aspect-ratio implies. */
    height: min(calc(100vw - 90px) * 510 / 248, calc(100dvh - 320px));
    width: auto;
    max-height: calc(100dvh - 320px);
    min-height: 220px;
    max-width: 340px;
  }
  .walkthrough .phone-frame-wrap .tablet-frame {
    height: min(calc(100vw - 90px) * 457 / 320, calc(100dvh - 320px));
    width: auto;
    max-height: calc(100dvh - 320px);
    min-height: 220px;
    max-width: 380px;
  }
  .walkthrough #wk-caption.walkthrough-caption {
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.4;
    /* Reserve space for up to 4 lines on mobile — the long
           Samsung prep captions (e.g. "Under Additional services,
           make sure Google is switched on. If it isn't, tap the
           toggle to turn it on.") wrap to 4 lines on 360 px
           viewports. 4 × 14.5 × 1.4 + 24 padding ≈ 106 px. Keeps
           the phone mockup in the same spot across every frame,
           regardless of which one happens to be longest. */
    min-height: 106px;
    align-items: flex-start;
    text-align: left;
  }
  .walkthrough .launch-section .launch-btn-pro {
    padding: 12px 16px;
    font-size: 14px;
  }
  .walkthrough .launch-section .launch-hint {
    display: none; /* hint is secondary — save vertical space on mobile */
  }

  /* Breathing room between top rows so back link, vendor chip +
       counter, and caption don't feel squashed together. */
  .walkthrough-pagenav {
    padding-bottom: 8px;
  }
  .walkthrough-back {
    padding: 4px 8px;
    font-size: 13px;
  }
  .walkthrough-meta {
    margin-top: 4px;
    margin-bottom: 10px;
  }

  /* Compact the dots indicator so it doesn't eat extra vertical space. */
  .walkthrough .walkthrough-dots {
    margin-top: 10px;
    margin-bottom: 8px;
  }
}

/* --- Below the desktop grid breakpoint (≤959px): strip redundant
   portal chrome so the phone dominates. The page header, intro
   steps, and device-picker already told the user this is passkey
   setup for vendor X. The full .walkthrough-portal-header is 100+ px
   of info restated from the page context — hide it entirely and let
   the compact meta row (vendor chip + step counter) carry that info. */
@media (max-width: 959px) {
  .walkthrough-portal-header {
    display: none;
  }

  /* Reassurance line eats 38px for copy the user doesn't need here —
       the caption already is the instruction. */
  .walkthrough .walkthrough-reassurance {
    display: none;
  }
}
.walkthrough-header {
  text-align: center;
  margin-bottom: 14px;
}
/* Compact header — used when the banner above already conveys the
   page intent, so we only need the device chip (no H1, no sub). */
.walkthrough-header--compact {
  margin-bottom: 8px;
}
.walkthrough-header--compact .walkthrough-vendor {
  margin-bottom: 0;
}
.walkthrough-vendor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: var(--bg-muted);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.walkthrough-vendor-logo {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
/* Vendor SVGs have intrinsic width/height of 48 — force them to
   scale down to the 16px wrapper so they don't push the vendor
   chip (and the portal header along with it) to a larger height
   than the picker's equivalent chip. */
.walkthrough-vendor-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.walkthrough-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Embedded-mode header — bigger + clearer because this is a real
   set-up flow, not a "demo". Step eyebrow above gives the user
   their position in the bigger journey ("Step 2 of 3 — ..."). */
.walkthrough-title--big {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin-bottom: 8px;
}
.walkthrough-step-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 12px;
}
.walkthrough-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.walkthrough-player {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Manual mode (the only mode now) — caption sits in a fixed-height
   slot BELOW the phone so changing caption text per frame can never
   push the phone up or down. The phone is the visual anchor and
   stays exactly in place; only the caption text swaps. */
.walkthrough-player--manual {
  width: 100%;
  max-width: 760px;
}
.walkthrough-player--manual .walkthrough-caption {
  /* Reserve a fixed height block under the phone so changing
       caption per frame doesn't reflow the rest of the page. */
  min-height: 56px;
  max-height: 84px;
  overflow: hidden;
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--bg-subtle, #f3f4f6);
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.walkthrough-player--manual .walkthrough-caption.warn {
  background: #fef3c7;
  color: #7c2d12;
}
.walkthrough-player--manual .wk-counter-row {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
/* Hide the redundant progress bar — manual mode has no timer */
.walkthrough-player--manual .wk-progress-track {
  display: none;
}

/* Progress bar above phone */
.walkthrough-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.walkthrough-dot {
  width: 16px;
  height: 3px;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background-color 0.3s;
}
.walkthrough-dot.active {
  background: var(--accent);
}
.walkthrough-dot.done {
  background: var(--text-quaternary);
}

/* Caption under phone */
.walkthrough-caption {
  background: #1d1d1f;
  color: white;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  max-width: 340px;
  margin: 4px auto 12px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
  letter-spacing: -0.005em;
  position: relative;
}
/* Speech-bubble tail pointing DOWN at the phone */
.walkthrough-caption::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #1d1d1f;
}
/* wk-tap removed — using .mockup-highlight pulse instead */

.walkthrough-controls {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
  align-items: center;
}
.wk-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.wk-play:hover {
  background: var(--bg);
  border-color: var(--text-tertiary);
}
.wk-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: "JetBrains Mono", monospace;
}

/* Vendor-specific warning callout above the walkthrough */
.vendor-warn {
  background: #fff8e1;
  border: 1px solid #ffd98a;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.vendor-warn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffd98a;
  color: #754600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vendor-warn-title {
  font-size: 14px;
  font-weight: 700;
  color: #4a3400;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.vendor-warn-text {
  font-size: 13px;
  color: #5a3d00;
  line-height: 1.5;
}

/* CTA after watching walkthrough */
.walkthrough-cta {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-subtle);
  border-radius: 14px;
}
.walkthrough-cta-promise {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.walkthrough-cta-promise-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* =========================================================
   WALKTHROUGH ANNOTATIONS (floating labels on phone)
   ========================================================= */
/* wk-annotation removed — cleaner without floating labels */

/* Walkthrough nav buttons */
.wk-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    transform 0.08s;
}
.wk-nav-btn:hover {
  background: var(--bg-muted);
  border-color: var(--text-tertiary);
}
.wk-nav-btn:active {
  transform: scale(0.94);
}

/* Manual-mode prominent Next — used in companion/PC flow where user
   steps through at their own pace. Primary-coloured, slightly larger,
   with a quiet pulse so the eye lands on it. */
.wk-nav-btn--hero {
  width: 52px;
  height: 52px;
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: wk-next-pulse 2.2s ease-in-out infinite;
}
.wk-nav-btn--hero:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.wk-nav-btn--hero svg {
  width: 22px;
  height: 22px;
}
@keyframes wk-next-pulse {
  0%,
  100% {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  50% {
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wk-nav-btn--hero {
    animation: none;
  }
}

/* Manual-mode footer: Back + counter + big Next. Replaces the Play
   control row since there's no autoplay. */
.walkthrough-controls--manual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.wk-manual-prev,
.wk-manual-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text-primary);
  transition:
    transform 0.08s,
    background-color 0.15s;
}
.wk-manual-prev:hover {
  background: var(--bg-muted);
}
.wk-manual-prev:active,
.wk-manual-next:active {
  transform: scale(0.97);
}
.wk-manual-next {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}
.wk-manual-next:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.walkthrough-controls--manual .wk-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

/* Manual-mode play overlay — softer, more instructional than "Tap to
   watch". Hides the progress bar since there's no timing involved. */
.walkthrough-player--manual .wk-progress-track {
  display: none;
}
.wk-play-overlay--manual .wk-play-overlay-circle {
  background: var(--accent);
  color: white;
}
.wk-play-overlay--manual .wk-play-overlay-circle svg {
  stroke: white;
}

.walkthrough-dot {
  cursor: pointer;
  transition: background-color 0.2s;
}
.walkthrough-dot:hover {
  background: var(--text-tertiary);
}

/* Friendly pre-launch promise card */
.launch-promise-card {
  background: linear-gradient(135deg, #0071e3 0%, #5856d6 100%);
  color: white;
  border-radius: 18px;
  padding: 24px;
  margin: 24px auto;
  max-width: 480px;
  text-align: center;
}
.launch-promise-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.launch-promise-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.launch-promise-text {
  font-size: 15px;
  opacity: 0.95;
  line-height: 1.5;
  margin-bottom: 16px;
}
.launch-promise-text strong {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.launch-btn {
  background: white;
  color: var(--accent);
  border: none;
  padding: 16px 24px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: -0.01em;
  transition:
    background-color 0.15s,
    transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.launch-btn:hover {
  background: #f5f5f7;
}
.launch-btn:active {
  transform: scale(0.98);
}

/* "Came back stuck" landing (after user returns from MS tab) */
.stuck-landing {
  padding: 32px 20px;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.stuck-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 10px;
}
.stuck-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 28px;
  line-height: 1.5;
}
.stuck-actions {
  display: grid;
  gap: 12px;
}
.stuck-action {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.08s;
}
.stuck-action:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 113, 227, 0.08);
}
.stuck-action:active {
  transform: scale(0.98);
}
.stuck-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stuck-action-icon.success {
  background: #e8f5ed;
  color: var(--success);
}
.stuck-action-text {
  flex: 1;
  min-width: 0;
}
.stuck-action-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.stuck-action-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.stuck-chev {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* =========================================================
   STEP-BY-STEP REFERENCE (post-launch landing, direct mode)
   A scrollable numbered summary of the walkthrough frames so a
   user who flipped to Microsoft can flip back and find "where
   was I again?" without replaying the full interactive demo.
   Mobile-first — designed to be legible on a phone.
   ========================================================= */
.steps-ref {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  text-align: left;
}
.steps-ref-head {
  margin-bottom: 18px;
}
.steps-ref-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.steps-ref-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.25;
}
.steps-ref-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.steps-ref-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: none;
}
.steps-ref-item {
  display: flex;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px 18px;
  align-items: flex-start;
}
.steps-ref-item--warn {
  border-color: color-mix(in srgb, var(--accent) 35%, #f59e0b);
  background: color-mix(in srgb, #f59e0b 5%, var(--bg));
}
.steps-ref-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 1px;
}
.steps-ref-item--warn .steps-ref-num {
  background: #d97706;
}
.steps-ref-body {
  flex: 1;
  min-width: 0;
}
.steps-ref-warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.steps-ref-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.steps-ref-sub-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
}
.steps-ref-note {
  font-size: 12.5px;
  color: #92400e;
  background: #fef3c7;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}
.steps-ref-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}
.steps-ref-foot .btn {
  width: 100%;
  justify-content: center;
}
.steps-ref-replay {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13.5px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.steps-ref-replay:hover {
  color: var(--accent);
}

@media (min-width: 720px) {
  .steps-ref-foot {
    flex-direction: row;
    justify-content: flex-start;
  }
  .steps-ref-foot .btn {
    width: auto;
  }
}

/* =========================================================
   WRONG-OPTION VISUAL MARKER (mockup dropdown step 3)
   ========================================================= */
.mockup-option-wrong {
  background: #fafafa !important;
  border-color: #e5e5e7 !important;
  position: relative;
  opacity: 0.85;
}
.mockup-option-cross {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #d70015;
  color: white;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  font-family: "Inter", sans-serif;
}
.mockup-option-pick {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  background: #16a34a;
  color: white;
  font-size: 6.5px;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  font-family: "Inter", sans-serif;
  animation: pickPulse 1.5s ease-in-out infinite;
}
@keyframes pickPulse {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.08);
  }
}
.mockup-option.mockup-highlight {
  position: relative;
  padding-right: 50px !important;
}

/* =========================================================
   PROFESSIONAL LAUNCH CTA (replaces blue gradient card)
   ========================================================= */
.launch-section {
  margin-top: 24px;
  padding: 20px 0 0;
  text-align: center;
}
.launch-btn-pro {
  background: var(--accent);
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.01em;
  transition:
    background-color 0.15s,
    transform 0.08s,
    box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 3px rgba(0, 113, 227, 0.12),
    0 2px 8px rgba(0, 113, 227, 0.08);
  min-width: 260px;
}
.launch-btn-pro:hover {
  background: var(--accent-hover);
  box-shadow:
    0 2px 6px rgba(0, 113, 227, 0.18),
    0 4px 12px rgba(0, 113, 227, 0.12);
}
.launch-btn-pro:active {
  transform: translateY(1px);
}

/* Locked state — shown before the user has watched the walkthrough through
   to the last frame. Visually muted so it still signals "next step" without
   being easy to click by mistake. Disabled attribute also blocks clicks. */
.launch-btn-pro--locked {
  background: var(--bg-muted);
  color: var(--text-tertiary);
  box-shadow: none;
  cursor: not-allowed;
  border: 1px dashed var(--border);
}
.launch-btn-pro--locked:hover {
  background: var(--bg-muted);
  color: var(--text-tertiary);
  box-shadow: none;
}
.launch-btn-pro--locked:active {
  transform: none;
}
.launch-btn-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.launch-hint {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 12px;
  font-weight: 400;
}

/* Confirm prompt — shown on requiresConfirm frames (e.g. the Samsung
   "change preferred service" step) when the walkthrough pauses and
   waits for the user to do something on their phone. Sits UNDER the
   phone frame so the Settings mockup stays fully visible. */
.wk-confirm-prompt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  margin: 14px auto 0;
  max-width: 360px;
  width: 100%;
  background: var(--accent-subtle);
  border: 1px solid #c7d9ff;
  border-radius: 14px;
  animation: fadeUp 0.25s ease-out;
}
.wk-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wk-confirm-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: white;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7d9ff;
}
.wk-confirm-text {
  flex: 1;
  min-width: 0;
}
.wk-confirm-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.wk-confirm-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.wk-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wk-confirm-done {
  flex: 1;
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.wk-confirm-done:hover {
  background: var(--accent-hover);
}
.wk-confirm-skip {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 10px;
  flex-shrink: 0;
}
.wk-confirm-skip:hover {
  color: var(--text);
}

/* =========================================================
   ORGS PAGE — "Try it yourself" banner at the top of the page.
   Sits directly above the playground so users can see + click
   Preview full walkthrough without scrolling to find it.
   ========================================================= */
.orgs-try-banner {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  padding: 22px 28px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #eff6ff 0%, #fef7ff 100%);
  border: 1px solid #d4e3ff;
  border-radius: 16px;
  flex-wrap: wrap;
}
.orgs-try-banner-copy {
  flex: 1;
  min-width: 260px;
}
.orgs-try-banner-cta {
  flex-shrink: 0;
  min-width: 240px;
}
@media (max-width: 720px) {
  .orgs-try-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 20px;
  }
  .orgs-try-banner-cta {
    min-width: 0;
    width: 100%;
  }
}

/* Contact strip — shown right after ROI calculator, so the user has
   just seen the $ savings and is primed to reach out. */
.orgs-contact-strip {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  margin-top: 48px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  flex-wrap: wrap;
}
.orgs-contact-strip-copy {
  flex: 1;
  min-width: 240px;
}
.orgs-contact-strip-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .orgs-contact-strip {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
  }
  .orgs-contact-strip-actions {
    flex-direction: column;
  }
  .orgs-contact-strip-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   ORGS PAGE — restructured flow (2026-04 redesign)
   Hero with inline domain detect -> big live preview card ->
   quick policy chooser -> deploy CTA -> collapsible tailor panel
   -> ROI + proof sections below. Goal: ~5s from arrival to a
   branded live preview of the user's own Entra tenant.
   ========================================================= */

.orgs-page {
  padding-top: 24px;
}

.orgs-hero {
  max-width: 780px;
  margin: 20px auto 36px;
  text-align: center;
}
.orgs-hero-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 14px;
}
.orgs-hero-sub {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 28px;
}
.orgs-hero-detect {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 520px;
  margin: 0 auto;
}
.orgs-hero-input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  font-size: 16px;
  font-family: inherit;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.orgs-hero-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}
.orgs-hero-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s,
    transform 0.08s;
  white-space: nowrap;
}
.orgs-hero-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}
.orgs-hero-btn:active {
  transform: translateY(1px);
}
.orgs-hero-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}
.orgs-hero-status {
  margin-top: 14px;
  font-size: 14px;
  min-height: 20px;
}
.orgs-hero-manual {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.orgs-hero-manual a {
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px dotted transparent;
}
.orgs-hero-manual a:hover {
  border-bottom-color: var(--accent);
}

@media (max-width: 640px) {
  /* Mobile: input/button sized down so the placeholder domain
       (and anything the user types) fits without horizontal scroll.
       Previously 16px + 14/18 padding was visibly cramped next to the
       Detect button on a 360px viewport. */
  .orgs-hero-input {
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 10px;
  }
  .orgs-hero-btn {
    padding: 0 14px;
    font-size: 13.5px;
    border-radius: 10px;
  }
  .orgs-hero-detect {
    gap: 6px;
  }
}

/* LIVE PREVIEW CARD — big, centred. Phone on the left (mobile:
   top), copy + CTA on the right. The "Demo" watermark is fixed
   in the corner so it's always visible on free demo previews. */
.orgs-preview {
  margin: 0 auto 64px;
  padding: 28px;
  background: linear-gradient(135deg, #eff6ff 0%, #fef7ff 100%);
  border: 1px solid #d4e3ff;
  border-radius: 20px;
  max-width: 1000px;
  position: relative;
}
.orgs-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.orgs-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.orgs-preview-label svg {
  color: var(--success);
}
.orgs-preview-watermark {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(29, 29, 31, 0.88);
  color: white;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.orgs-preview-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
}
.orgs-preview-phone {
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transform: rotate(-1deg);
  transition: transform 0.3s;
}
.orgs-preview-phone:hover {
  transform: rotate(0);
}
.orgs-preview-side-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 6px;
}
.orgs-preview-side-sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 440px;
}
.orgs-preview-cta {
  margin-bottom: 16px;
}
.orgs-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.orgs-preview-chip {
  padding: 4px 10px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
@media (max-width: 840px) {
  .orgs-preview-stage {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .orgs-preview-side {
    text-align: center;
  }
  .orgs-preview-side-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .orgs-preview-chips {
    justify-content: center;
  }
}

/* Quick policy chooser — the one setting most orgs care about,
   promoted to a prominent block below the preview so it's part
   of the main flow, not buried in the tailor panel. */
.orgs-quick-policy {
  margin: 0 auto 48px;
  max-width: 1000px;
}
.orgs-quick-policy-head {
  text-align: center;
  margin-bottom: 24px;
}
.orgs-quick-policy-title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.orgs-quick-policy-sub {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.45;
}
.orgs-quick-policy-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 840px) {
  .orgs-quick-policy-group {
    grid-template-columns: 1fr;
  }
}

/* Deploy CTA block — warm pitch after the user has seen their
   own branded preview AND picked a policy. The "buying moment". */
.orgs-deploy {
  margin: 0 auto 56px;
  max-width: 960px;
  padding: 32px 36px;
  background: var(--text);
  color: white;
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.orgs-deploy::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -20%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at center, rgba(147, 112, 219, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.orgs-deploy-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  margin-bottom: 10px;
  position: relative;
}
.orgs-deploy-sub {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0 auto 24px;
  position: relative;
}
.orgs-deploy-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 640px;
  margin: 0 auto 28px;
  position: relative;
}
.orgs-deploy-stat {
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.orgs-deploy-stat strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.orgs-deploy-stat span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
}
.orgs-deploy-ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.orgs-deploy-ctas .btn-primary {
  background: white;
  color: var(--text);
}
.orgs-deploy-ctas .btn-primary:hover {
  background: var(--bg-subtle);
}
.orgs-deploy-ctas .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
.orgs-deploy-ctas .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}
.orgs-deploy-small {
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
}
@media (max-width: 640px) {
  .orgs-deploy {
    padding: 24px 20px;
  }
  .orgs-deploy-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .orgs-deploy-ctas .btn {
    width: 100%;
  }
}

/* Tailor panel — the full playground form, collapsed by default
   because most users are happy with the auto-detected branding +
   policy choice above. */
.orgs-tailor-section {
  margin: 0 auto 64px;
  max-width: 1120px;
}
.orgs-tailor {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.orgs-tailor[open] {
  border-color: var(--border);
}
.orgs-tailor-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.orgs-tailor-summary::-webkit-details-marker {
  display: none;
}
.orgs-tailor-summary::after {
  content: "";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.orgs-tailor[open] .orgs-tailor-summary::after {
  transform: rotate(-135deg);
}
.orgs-tailor-summary-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.orgs-tailor-summary-hint {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-left: 4px;
}
@media (max-width: 640px) {
  .orgs-tailor-summary-hint {
    display: none;
  }
}
.orgs-tailor-body {
  padding: 0 22px 22px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
}

/* Shared preview watermark — shown in every place a branded
   preview is rendered in the demo (here and on the walkthrough
   page when it's launched from the orgs playground). Visible
   reminder that this is a demo, not a deployed product. */
.demo-watermark {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(29, 29, 31, 0.88);
  color: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.demo-watermark strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.demo-watermark-tag {
  opacity: 0.6;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.demo-watermark-url {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* Diagonal tiled watermark inside every .phone-frame mockup on the
 * marketing demo. Repeating "setuppasskeys.com" text rotated -22°,
 * very low opacity — barely visible to a casual viewer but
 * pervasive enough across the mockup face that clone-stamping each
 * instance out of a stolen screenshot is way too tedious to be
 * worthwhile.
 *
 * Implementation:
 *   • Lives on .phone-frame::after so it's clipped by the phone's
 *     overflow:hidden + rounded bezel — only the device face
 *     carries the watermark; the rest of the page stays clean.
 *   • z-index 4 sits above the phone-screen content (mockups use
 *     z-indexes ≤ 3) but below any modal/drawer/sheet that
 *     overlays the mockup.
 *   • pointer-events: none so it never intercepts taps on mockup
 *     buttons, picker rows, etc.
 *   • mix-blend-mode: multiply adapts to light AND dark mockup
 *     backgrounds without per-mockup adjustment.
 *
 * Real customer branded URLs (body without .demo-mode-active) get
 * NO watermark — paying tenants' walkthroughs stay clean.
 */
body.demo-mode-active .phone-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 4;
  /* Enterprise-stamp tile: bands of repeating "SETUPPASSKEYS.COM"
   * separated by middle dots, edge-to-edge across the phone face,
   * rotated -22° for the diagonal ribbon look. Negative x offset
   * (-40) pushes the text past the tile's left edge so neighbouring
   * tiles seam without an obvious "centre stripe of nothing"
   * between bands. Five bands per 420×240 tile means a typical
   * 290×580 phone-frame shows ~10 bands of ~3-4 visible repeats. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'><g transform='rotate(-22 210 120)' fill='%23000000' font-family='Inter,Helvetica,Arial,sans-serif' font-size='10' font-weight='700' opacity='0.030' style='letter-spacing:2px'><text x='-40' y='30'>SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM</text><text x='-40' y='80'>SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM</text><text x='-40' y='130'>SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM</text><text x='-40' y='180'>SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM</text><text x='-40' y='230'>SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM %C2%B7 SETUPPASSKEYS.COM</text></g></svg>");
  background-repeat: repeat;
  background-size: 420px 240px;
  mix-blend-mode: multiply;
}

/* =========================================================
   ANTI-PIRACY — quiet, professional. The visible marker is a
   single corner badge (.demo-watermark above) with a per-
   session tag so screenshots are still traceable. We rely on
   silent protections for the rest: user-select blocked to
   discourage text lifts, print stylesheet that hides the page
   with an attribution notice so ctrl-P / save-as-PDF don't
   extract the UI cleanly. Earlier versions had a diagonal
   repeating watermark baked into every mockup — it worked but
   visibly downgraded the demo, so it's gone.
   ========================================================= */
body.demo-mode-active .walkthrough .mockup,
body.demo-mode-active .walkthrough .mockup * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media print {
  body.demo-mode-active * {
    visibility: hidden !important;
  }
  body.demo-mode-active::before {
    content: "SetupPasskeys — demo preview, not for redistribution. Visit setuppasskeys.com for licensing.";
    visibility: visible !important;
    display: block;
    position: fixed;
    inset: 40% 20% auto 20%;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #1d1d1f;
  }
}

/* =========================================================
   COMPANION PREAMBLE — shown to desktop users between phone
   pick and walkthrough. QR + URL + the 3 prep steps so they
   register on phone in real time as the demo plays, not from
   memory afterwards.
   ========================================================= */
.companion-preamble {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}
@media (max-width: 640px) {
  .companion-preamble {
    padding: 14px 14px 28px;
  }
  .companion-preamble-title {
    font-size: 22px;
    line-height: 1.2;
  }
  .companion-preamble-sub {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
}
.companion-preamble-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.companion-preamble-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 8px;
}
.companion-preamble-title strong {
  color: var(--accent);
  font-weight: 700;
}
.companion-preamble-sub {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 540px;
}
.companion-preamble-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  /* Stack QR + URL vertically and drop the "or" divider — the
       horizontal grid wraps awkwardly under 360px and the QR was
       eating the whole viewport. */
  .companion-preamble-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    margin-bottom: 18px;
  }
  .companion-preamble-or {
    display: none;
  }
}
.companion-preamble-qr img {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  padding: 6px;
  background: white;
  display: block;
}
@media (max-width: 640px) {
  .companion-preamble-qr {
    display: flex;
    justify-content: center;
  }
  .companion-preamble-qr img {
    width: 140px;
    height: 140px;
  }
}
.companion-preamble-qr.qr-failed {
  display: none;
}
.companion-preamble-or {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 4px;
}
.companion-preamble-url {
  flex: 1;
  min-width: 0;
}
.companion-preamble-url-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.companion-preamble-url-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
}
.companion-preamble-url-box code {
  flex: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.companion-preamble-steps {
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .companion-preamble-steps {
    margin-bottom: 16px;
  }
}
.companion-preamble-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 4px;
  font-size: 14.5px;
  color: var(--text-primary);
  line-height: 1.5;
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 640px) {
  .companion-preamble-step {
    padding: 10px 4px;
    font-size: 13.5px;
    gap: 10px;
  }
  .companion-preamble-cta {
    padding-top: 14px;
  }
  .companion-preamble-cta .btn-large {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
  }
}
.companion-preamble-step:first-child {
  border-top: none;
}
.companion-preamble-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.companion-preamble-cta {
  text-align: center;
  padding: 20px 0 0;
  border-top: 1px solid var(--border-subtle);
}
.companion-preamble-cta .btn-large {
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 16px;
}
.companion-preamble-cta-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
}
@media (max-width: 640px) {
  .companion-preamble-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .companion-preamble-qr img {
    margin: 0 auto;
  }
  .companion-preamble-url-box code {
    font-size: 12px;
  }
}

/* =========================================================
   DEMO SALES PITCH — fires when the admin clicks "Ready —
   open Microsoft" inside a _demo session. The strongest
   buying moment in the funnel, so it gets a dedicated modal.
   ========================================================= */
/* Full-screen sales pitch — replaces the side drawer that buyers
   were missing. Fires terminal (at the launch button) and mid-demo
   (after the user explores 2+ vendors). Designed to be impossible
   to miss but easy to dismiss. */
.demo-pitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(15, 15, 22, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.22s ease;
  overflow-y: auto;
}
.demo-pitch-overlay--in {
  opacity: 1;
}
.demo-pitch-overlay--out {
  opacity: 0;
  pointer-events: none;
}
body.demo-pitch-open {
  overflow: hidden;
}
.demo-pitch-card {
  position: relative;
  background: var(--bg);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 540px;
  padding: 30px 28px 24px;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.demo-pitch-overlay--in .demo-pitch-card {
  transform: translateY(0) scale(1);
}
.demo-pitch-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.demo-pitch-close:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .demo-pitch-overlay {
    padding: 12px;
  }
  .demo-pitch-card {
    padding: 24px 20px 18px;
    max-height: calc(100dvh - 24px);
  }
}

.demo-pitch {
  padding: 4px 4px 8px;
}
.demo-pitch-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.demo-pitch-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.demo-pitch-title strong {
  color: var(--accent);
  font-weight: 700;
}
.demo-pitch-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
}
.demo-pitch-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  background: var(--bg-subtle);
  border-radius: 12px;
}
.demo-pitch-stat {
  text-align: center;
}
.demo-pitch-stat strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.demo-pitch-stat span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.demo-pitch-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.demo-pitch-bullet {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.45;
}
.demo-pitch-bullet svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.demo-pitch-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.demo-pitch-cta-row .btn {
  flex: 1 1 180px;
  justify-content: center;
}
.demo-pitch-cta-primary {
  background: var(--accent);
  color: white;
}
.demo-pitch-continue {
  text-align: center;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.demo-pitch-continue-link {
  background: none;
  border: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.demo-pitch-continue-link:hover {
  color: var(--accent);
}

/* =========================================================
   END-OF-DEMO FLEXIBILITY STEP — "you just saw iPhone, here's
   what else we cover". Placed between the walkthrough's green-
   tick done prompt and the sales pitch modal. Showcases the
   USP (17+ device-specific flows) while users are still engaged.
   Seen vendors retain a small check so repeat visits feel like
   a progress game, not a restart.
   ========================================================= */
/* Demo-complete modal — overlays the walkthrough page when the
   user reaches the end. Three options: trial / sales / try another
   device. Less invasive than a full-page replacement and the
   buyer remembers what they just watched. */
.demo-complete-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: demo-complete-fade 0.18s ease;
}
.demo-complete-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 25, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.demo-complete-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 420px;
  padding: 28px 24px 22px;
  text-align: center;
  animation: demo-complete-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.demo-complete-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.demo-complete-close:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.demo-complete-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.demo-complete-title {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.demo-complete-title strong {
  color: var(--accent);
  font-weight: 700;
}
.demo-complete-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 auto 22px;
  max-width: 340px;
}
.demo-complete-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.demo-complete-actions .btn-large {
  width: 100%;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
}
.demo-complete-divider {
  position: relative;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 6px 0 12px;
}
.demo-complete-divider::before,
.demo-complete-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  height: 1px;
  background: var(--border-subtle);
}
.demo-complete-divider::before {
  left: 0;
}
.demo-complete-divider::after {
  right: 0;
}
.demo-complete-divider span {
  background: var(--bg);
  padding: 0 8px;
  position: relative;
}
.demo-complete-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.demo-complete-tertiary:hover {
  background: var(--bg-muted);
  border-color: var(--text-tertiary);
}
body.demo-complete-modal-open {
  overflow: hidden;
}
@keyframes demo-complete-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes demo-complete-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 640px) {
  .demo-complete-card {
    padding: 22px 18px 18px;
    border-radius: 16px;
  }
  .demo-complete-eyebrow {
    margin-bottom: 10px;
  }
  .demo-complete-sub {
    margin-bottom: 18px;
  }
}

.demo-flexibility {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  text-align: center;
}
.demo-flexibility-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 14px;
}
.demo-flexibility-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 10px;
  color: var(--text-primary);
}
.demo-flexibility-title strong {
  color: var(--accent);
  font-weight: 700;
}
.demo-flexibility-sub {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 22px;
}
.demo-flexibility-sub strong {
  color: var(--text-primary);
  font-weight: 600;
}
.demo-flexibility-progress {
  max-width: 360px;
  margin: 0 auto 26px;
}
.demo-flexibility-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.demo-flexibility-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 60%, white) 100%
  );
  transition: width 0.5s ease;
}
.demo-flexibility-progress-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.demo-flexibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.flex-vendor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  transition:
    transform 0.08s,
    background-color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.flex-vendor-card:hover {
  background: var(--bg-subtle);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.flex-vendor-card:active {
  transform: translateY(0);
}
.flex-vendor-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.flex-vendor-logo svg {
  width: 28px;
  height: 28px;
}
.flex-vendor-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.25;
}
.flex-vendor-seen {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success, #16a34a);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-vendor-seen svg {
  width: 10px;
  height: 10px;
}
.flex-vendor-card--seen {
  border-color: color-mix(in srgb, var(--success, #16a34a) 40%, transparent);
  background: color-mix(in srgb, var(--success, #16a34a) 6%, var(--bg));
}
.flex-vendor-card--current {
  /* Just-watched, mid-demo. Subtle accent ring to differentiate
       from the older 'seen' tiles. */
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.demo-flexibility-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.demo-flexibility-cta-row--prominent {
  padding: 18px;
  background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--bg) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 16px;
}
.demo-flexibility-cta-row .btn-large {
  padding: 13px 24px;
  font-size: 15px;
  border-radius: 12px;
}
.demo-flexibility-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 16px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.demo-flexibility-divider::before,
.demo-flexibility-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* Persistent enquire bar — sticks at the bottom of vendor demos so
   the buyer can convert at any moment without hunting for a button. */
.demo-enquire-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  margin: 24px -24px -24px;
  padding: 14px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -8px 24px rgba(15, 22, 30, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.demo-enquire-bar-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.demo-enquire-bar-text strong {
  color: var(--text-primary);
  font-weight: 700;
}
.demo-enquire-bar-actions {
  display: flex;
  gap: 8px;
}
.demo-enquire-bar-actions .btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
}
@media (max-width: 640px) {
  .demo-enquire-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }
  .demo-enquire-bar-actions {
    justify-content: center;
  }
}

/* =========================================================
   EMBEDDED MODE — strip SetupPasskeys-branded surfaces when
   the page is loaded as a paying customer's deployment via
   ?org=<slug>. Customer is buying their own product surface,
   not ours, so the nav, footer, and demo watermark all go
   away. The walkthrough + intro + handoff content remain.
   ========================================================= */
/* Branded customer URLs hide the marketing-site chrome (nav + footer
   + demo watermark) regardless of whether they're at top-level or
   inside an iframe. `embedded-mode` ALSO applies iframe-compact
   layout rules below; `branded-mode` does chrome hiding only, so
   top-level branded URLs get the normal full-size walkthrough. */
body.branded-mode .nav,
body.branded-mode .footer,
body.branded-mode #demo-watermark,
body.embedded-mode .nav,
body.embedded-mode .footer,
body.embedded-mode #demo-watermark {
  display: none !important;
}
body.embedded-mode #main-content {
  padding-top: 24px;
}
@media (max-width: 640px) {
  body.embedded-mode #main-content {
    padding-top: 12px;
  }
}

/* ============================================================================
   ZERO-SCROLL LIVE ORG — every screen of a branded deployment
   (?org=<slug>) fits the visible viewport on every device, no
   scroll, no URL-bar shimmy. Two layers of insurance:

   1. body is position:fixed inset:0 — locks to the visible viewport
      regardless of what the URL bar is doing. Mobile Safari can no
      longer rubber-band into showing extra content below.

   2. height uses 100svh (small viewport height) so we size against
      the WORST-CASE visible area (URL bar showing). Even when the
      URL bar collapses and 100dvh would grow, our height stays
      pinned to the smallest fit — content stays comfortably above
      the fold instead of stretching into the new space and re-
      flowing on bar transitions.

   The flex chain (body → #main-content → screen container → internal
   flex children) propagates the constrained height down so every
   layer respects it; the heaviest visual (phone frame, vendor grid)
   is sized to fill whatever's left.

   `embedded-mode` is now applied to every branded URL visit (top-
   level + iframe), not just iframe — see app.js. `inside-iframe`
   is the iframe-only marker for any rule that genuinely needs it.
   ============================================================================ */
html:has(body.embedded-mode),
body.embedded-mode {
  height: 100svh;
  max-height: 100svh;
  /* 100dvh fallback ordering: dvh comes after svh so newer
     browsers that support both pick svh (the safer one). Without
     either, height fallback is the parent's height (100% of html). */
  overflow: hidden;
  overscroll-behavior: none;
}
body.embedded-mode {
  position: fixed;
  inset: 0;
  width: 100%;
  /* The fixed pin is what actually defeats the URL bar. height +
     overflow alone are advisory on mobile Safari; position:fixed
     locks the body to the visible viewport regardless. */
}
body.embedded-mode #main-content {
  height: 100svh;
  max-height: 100svh;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* When inside an iframe, the parent already constrains us — the
 * fixed positioning becomes redundant and can fight with the
 * parent's scroll containment, so we revert to the looser
 * height-only model.  */
body.embedded-mode.inside-iframe {
  position: static;
}

/* Every top-level live-org screen is a 100dvh flex column. Headers
   shrink-to-content, the main visual stretches to fill. */
body.embedded-mode .org-boot,
body.embedded-mode .reg-intro,
body.embedded-mode .context-picker,
body.embedded-mode .companion-preamble,
body.embedded-mode .prereq-prep,
body.embedded-mode .walkthrough,
body.embedded-mode .stuck-landing {
  flex: 1;
  min-height: 0;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 18px;
  margin: 0 auto;
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  body.embedded-mode .org-boot,
  body.embedded-mode .reg-intro,
  body.embedded-mode .context-picker,
  body.embedded-mode .companion-preamble,
  body.embedded-mode .prereq-prep,
  body.embedded-mode .walkthrough,
  body.embedded-mode .stuck-landing {
    padding: 10px 14px;
  }
}

/* ----- 2. Reg intro: title + step list + CTA, no reassurance on tight
        viewports. Step list flex-fills. ----- */
body.embedded-mode .reg-intro-eyebrow {
  margin-bottom: 8px;
}
body.embedded-mode .reg-intro-title {
  margin-bottom: 6px;
  font-size: clamp(20px, 4vw, 28px);
}
body.embedded-mode .reg-intro-sub {
  margin-bottom: 14px;
  font-size: 14px;
}
body.embedded-mode .reg-intro-steps {
  flex: 1;
  min-height: 0;
  margin-bottom: 14px;
  gap: 4px;
  padding: 8px;
  overflow: hidden;
}
body.embedded-mode .reg-intro-step {
  padding: 10px 10px;
}
body.embedded-mode .reg-intro-cta {
  padding: 0;
  flex-shrink: 0;
}
body.embedded-mode .reg-intro-cta .btn-large {
  padding: 12px 22px;
  font-size: 15px;
}
body.embedded-mode .reg-intro-cta-hint {
  margin-top: 6px;
  font-size: 11.5px;
}
body.embedded-mode .reg-intro-reassurance {
  flex-shrink: 0;
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 11.5px;
}
@media (max-height: 640px) {
  body.embedded-mode .reg-intro-reassurance {
    display: none;
  }
}

/* ----- 3. Phone picker: banner shrinks, vendor grid auto-fits ----- */
body.embedded-mode .context-picker-title {
  font-size: clamp(20px, 4vw, 26px);
  margin-bottom: 4px;
}
body.embedded-mode .context-picker-sub {
  font-size: 13.5px;
  margin-bottom: 12px;
}
body.embedded-mode .mode-banner,
body.embedded-mode .walkthrough-mode-banner {
  flex-shrink: 0;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 12px;
}
body.embedded-mode .vendor-grid {
  flex: 1;
  min-height: 0;
  margin-top: 8px !important;
  align-content: start;
  overflow: hidden;
  grid-auto-rows: minmax(0, 1fr);
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px;
}
@media (min-width: 480px) {
  body.embedded-mode .vendor-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px;
  }
}
@media (min-width: 720px) {
  body.embedded-mode .vendor-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
body.embedded-mode .vendor-card {
  padding: 8px 6px;
  gap: 4px;
  min-height: 0;
  border-radius: 10px;
}
body.embedded-mode .vendor-card-logo {
  width: 26px;
  height: 26px;
}
body.embedded-mode .vendor-card-label {
  font-size: 11.5px;
  line-height: 1.15;
}
body.embedded-mode .vendor-card-sub {
  display: none;
}
body.embedded-mode .vendor-card-warn {
  display: none;
}
body.embedded-mode .picker-escape {
  margin-top: 8px;
  flex-shrink: 0;
}

/* ----- 4. Companion preamble: QR + URL + steps + CTA all visible ----- */
body.embedded-mode .companion-preamble-title {
  font-size: clamp(18px, 3.5vw, 24px);
  margin-bottom: 4px;
}
body.embedded-mode .companion-preamble-sub {
  font-size: 13px;
  margin-bottom: 10px;
}
body.embedded-mode .companion-preamble-card {
  flex: 1;
  min-height: 0;
  margin-bottom: 12px;
  padding: 14px;
  align-content: center;
}
body.embedded-mode .companion-preamble-qr img {
  width: clamp(120px, 28vh, 180px);
  height: clamp(120px, 28vh, 180px);
}
body.embedded-mode .companion-preamble-steps {
  margin-bottom: 12px;
  flex-shrink: 0;
}
body.embedded-mode .companion-preamble-step {
  padding: 6px 4px;
  font-size: 12.5px;
}
body.embedded-mode .companion-preamble-cta {
  padding-top: 10px;
  flex-shrink: 0;
}

/* ----- 5. Prereq prep: tighter, reassurance hidden on short ----- */
body.embedded-mode .prereq-prep-title {
  font-size: clamp(18px, 3.5vw, 24px);
  margin-bottom: 6px;
}
body.embedded-mode .prereq-prep-sub {
  font-size: 13px;
  margin-bottom: 12px;
}
body.embedded-mode .prereq-prep-body {
  flex: 1;
  min-height: 0;
  margin-bottom: 12px;
  padding: 12px;
}
body.embedded-mode .prereq-prep-rail {
  gap: 10px;
}
body.embedded-mode .prereq-prep-actions {
  padding: 0;
  gap: 4px;
}
body.embedded-mode .prereq-prep-reassurance {
  display: none;
}

/* ----- 6. WALKTHROUGH — the hardest. Strict flex column, phone frame
        fills available height. Most chrome compressed or hidden. ----- */
body.embedded-mode .walkthrough {
  padding: 8px 12px 10px;
}
body.embedded-mode .walkthrough .back-link {
  flex-shrink: 0;
  margin: 0 0 4px !important;
  font-size: 12px;
  padding: 2px 0;
}
body.embedded-mode .walkthrough-step-eyebrow {
  flex-shrink: 0;
  margin-bottom: 6px;
  padding: 3px 8px;
  font-size: 10px;
}
body.embedded-mode .walkthrough-header {
  flex-shrink: 0;
  margin-bottom: 4px;
}
body.embedded-mode .walkthrough-title,
body.embedded-mode .walkthrough-title--big {
  font-size: clamp(15px, 2.4vw, 20px) !important;
  margin: 0 0 2px;
  line-height: 1.15;
}
body.embedded-mode .walkthrough-sub {
  font-size: 12.5px;
  margin: 0 0 4px;
  line-height: 1.3;
}
body.embedded-mode .walkthrough-vendor {
  margin-bottom: 4px;
  padding: 3px 10px;
  font-size: 11.5px;
}
@media (max-height: 700px) {
  body.embedded-mode .walkthrough-title,
  body.embedded-mode .walkthrough-title--big,
  body.embedded-mode .walkthrough-sub,
  body.embedded-mode .walkthrough-vendor {
    display: none;
  }
  body.embedded-mode .walkthrough-step-eyebrow {
    display: none;
  }
}

/* Walkthrough player: takes the rest of the height, phone frame
   sized to fill its share. Player chrome (dots, controls) is
   shrink-to-content. */
body.embedded-mode .walkthrough .anim-fade.d-1 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.embedded-mode .walkthrough-player {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.embedded-mode .walkthrough-dots {
  flex-shrink: 0;
  margin-bottom: 2px;
}
body.embedded-mode .wk-progress-track {
  flex-shrink: 0;
  margin-bottom: 4px;
}
body.embedded-mode .walkthrough-caption {
  flex-shrink: 0;
  min-height: 0;
  height: auto;
  max-height: 64px;
  font-size: 12.5px;
  line-height: 1.35;
  margin-bottom: 4px;
  padding: 6px 10px;
  overflow: hidden;
}
/* Companion-preamble frames pack an eyebrow + headline + sub + QR
   handoff block into the caption and are ~400px+ tall by design.
   The 64px cap above was sized for short text captions only — on
   preamble it clips the handoff out of the card and makes the
   headline paint over the Back / Next buttons below. Opt out of
   the cap whenever the caption is hosting a handoff. */
body.embedded-mode .walkthrough-caption:has(.wk-handoff) {
  max-height: none;
  overflow: visible;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
body.embedded-mode .phone-frame-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.embedded-mode .walkthrough .phone-frame {
  /* Width-driven phone sizing for embedded iframes. The previous
       height:100% rule collapsed to a 20x41 sliver whenever the
       parent chain didn't expose a bounded height — which is
       exactly what happens on both desktop iframes (phone-panel
       uses align-items:center, doesn't stretch children) and mobile
       iframes (stage is a plain block, not a flex container).
       Width-driven sizing mirrors the top-level walkthrough phone
       and renders at the same proportions in any container.

       min() excludes 100% deliberately — when the phone lives in a
       grid column with minmax(0, auto), `width: 100%` creates a
       circular constraint (phone width -> column width -> phone
       width). max-width: 100% below handles narrow mobile iframes
       without the loop. */
  width: min(248px, calc((100dvh - 140px) * 248 / 510));
  height: auto;
  max-width: calc(100% - 4px);
  aspect-ratio: 248 / 510;
  margin: 0 auto;
}
/* Stop flex:1 at the player level from stranding the phone in a
   zero-height parent when align-items doesn't stretch. */
body.embedded-mode .walkthrough .phone-frame-wrap {
  flex: none;
  min-height: auto;
  height: auto;
}
body.embedded-mode .walkthrough-player {
  flex: none;
  min-height: auto;
  height: auto;
}
body.embedded-mode .walkthrough .laptop-frame {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 11;
  margin: 0;
}
body.embedded-mode .walkthrough-controls,
body.embedded-mode .walkthrough-controls--manual {
  flex-shrink: 0;
  margin-top: 4px;
  padding: 4px 0 0;
}
body.embedded-mode .launch-section {
  flex-shrink: 0;
  margin-top: 6px !important;
  padding: 0;
}
body.embedded-mode .launch-btn-pro {
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}
body.embedded-mode .launch-hint {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.3;
}
@media (max-height: 640px) {
  body.embedded-mode .launch-hint,
  body.embedded-mode .walkthrough-mode-banner {
    display: none;
  }
}

/* ----- 7+8. Post-launch / success — already compact; just lock fit ----- */
body.embedded-mode .stuck-landing {
  align-items: stretch;
  justify-content: flex-start;
  padding: 18px 20px;
}
body.embedded-mode .stuck-title {
  font-size: clamp(20px, 4vw, 28px);
  margin-bottom: 6px;
}
body.embedded-mode .stuck-sub {
  font-size: 13.5px;
  margin-bottom: 12px;
}
body.embedded-mode .stuck-actions {
  flex-shrink: 0;
  gap: 8px;
}
body.embedded-mode .stuck-action {
  padding: 12px 14px;
}
body.embedded-mode .success-summary {
  margin: 14px 0;
  padding: 14px;
}
body.embedded-mode .success-buyer-cta {
  display: none;
} /* not in embedded anyway */

/* Admin-portal static preview iframe — strips ALL chrome down to a
   single centred phone frame showing the branded Microsoft Security
   Info mockup. Re-renders live as the admin edits config fields.
   Phone sized via aspect-ratio + height:100% so it fills whatever
   space the parent admin panel allocates without distortion. */
body.preview-static {
  background: #f3f4f6;
  overflow: hidden;
  margin: 0;
}
body.preview-static #main-content {
  padding: 0 !important;
}
.preview-static-wrap {
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
.preview-static-phone {
  /* Width-driven sizing (matches the guide's phone-frame). The
       previous height:100% + max-width combo stretched the phone
       when the iframe was tall-and-narrow — height was forced to
       100% while width was clamped to 248px, breaking the 248:510
       aspect ratio. Now width is the primary driver and height
       follows from aspect-ratio. The third term in the min() keeps
       the phone fitting inside short iframes without a media query.
    */
  width: min(248px, calc(100% - 16px), calc((100dvh - 16px) * 248 / 510));
  height: auto;
  aspect-ratio: 248 / 510;
  margin: 0;
}
.preview-static-phone .phone-screen {
  background: white;
}

/* =========================================================
   PREREQ PREP SCREEN — for vendor flows (currently Samsung)
   that need a one-time settings change before the Microsoft
   walkthrough can succeed. Pulled out of the walkthrough
   itself so the user does ONE task at a time and doesn't
   have to remember the Microsoft steps while changing a
   Settings preference.
   ========================================================= */
.prereq-prep {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Simple single-column prereq layout. */
.prereq-prep {
  max-width: 460px;
  margin: 0 auto;
  padding: 14px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
@media (max-width: 640px) {
  .prereq-prep {
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 100px);
  }
  /* Sticky primary action so it stays reachable as the page scrolls. */
  .prereq-prep .prereq-prep-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border-subtle);
    z-index: 40;
  }
  .prereq-prep-reassurance {
    display: none;
  }
}
.prereq-prep-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.prereq-prep-top .back-link {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary);
}
.prereq-prep-mockup-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}
.prereq-prep-phone {
  width: 220px;
  height: auto;
  aspect-ratio: 248 / 510;
  margin: 0;
}
.prereq-prep-phone .phone-screen .mockup {
  transform: none;
  width: 100%;
  height: 100%;
}
@media (max-width: 640px) {
  .prereq-prep {
    padding: 14px 14px 28px;
  }
}
.prereq-prep-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 14px;
}
.prereq-prep-title {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
}
.prereq-prep-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: none;
}
.prereq-prep-sub strong {
  color: var(--text-primary);
  font-weight: 600;
}
.prereq-prep-instruction {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-subtle, #f6f7f9);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.prereq-prep-instruction-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prereq-prep-instruction-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.prereq-prep-instruction-text em {
  font-style: normal;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--text-primary);
}
.prereq-prep-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 0;
}
.prereq-prep-actions .btn-large {
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  justify-content: center;
}
.prereq-prep-actions .btn-tertiary {
  align-self: center;
}
@media (max-width: 640px) {
  .prereq-prep-actions {
    padding: 6px 0;
  }
  .prereq-prep-actions .btn-large {
    width: 100%;
    padding: 12px 20px;
  }
}
.btn-tertiary {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-tertiary:hover {
  color: var(--text-secondary);
}
.prereq-prep-reassurance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 18px;
}
.prereq-prep-reassurance svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* End-user registration explainer — shown at the start of an
   embedded (?org=slug) deployment. Plain language, device-aware
   3-step list, one big start button. This is the first thing a real
   employee sees when IT sends them the link, so no marketing fluff. */
.reg-intro {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 28px;
}

/* Two-column layout on wide laptops — hero on the left, "What to
   expect" + assurances stacked on the right. Keeps everything above
   the fold on a 1080p laptop (viewport ~937px tall) so end users
   never have to scroll to find the Start-setup button. Phones +
   tablets stay single-column (the mobile override below collapses
   everything below the hero anyway). */
@media (min-width: 900px) {
  .reg-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "hero expect"
      "hero assurances"
      "foot foot";
    gap: 20px 24px;
    align-items: start;
  }
  .reg-intro-hero { grid-area: hero; margin-bottom: 0; }
  .reg-intro-expect { grid-area: expect; }
  .reg-intro-assurances { grid-area: assurances; }
  .reg-intro-foot { grid-area: foot; }
}

/* Large-display override moved to end of this rule block; see the
   @media (min-width: 1400px) block appended after the mobile
   overrides below. Kept there so it wins against the individual-
   element base rules (.reg-intro-title, .reg-intro-brand-mark,
   etc.) that declare sizes after this point. */

/* Branded hero panel — tinted with the org's accent colour (via
   --accent set by applyOrgConfig). Large logo + explicit "Passkey
   Registration Guide" subtitle so the page reads as a named,
   sanctioned tool rather than a generic wizard. */
.reg-intro-hero {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 100%),
    var(--bg, #ffffff);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 28px 28px 24px;
  margin-bottom: 24px;
  overflow: hidden;
}
.reg-intro-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
  opacity: 0.85;
}

.reg-intro-masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border-subtle));
}
.reg-intro-brand-mark {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg, white);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
}
.reg-intro-brand-mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.reg-intro-brand-mark .mockup-org-logo-box {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.reg-intro-brand-mark--default {
  color: var(--accent);
  background: var(--bg-subtle);
}
.reg-intro-masthead-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reg-intro-masthead-org {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-intro-masthead-doctype {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.reg-intro-meta {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reg-intro-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg, white);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}
.reg-intro-meta-pill svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Section eyebrow above "What to expect" — a quiet uppercase
   label so the section break is clear without a heavy header. */
.reg-intro-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.reg-intro-expect {
  margin-bottom: 0;
}

/* Assurances block — reassurance + optional support card stacked. */
.reg-intro-assurances {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}

/* Support card — only rendered when the org has configured
   a helpdesk URL. External link opens in a new tab via
   rel="noopener". */
.reg-intro-support {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--bg, white);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}
.reg-intro-support:hover {
  background: var(--bg-subtle);
}
.reg-intro-support-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reg-intro-support-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.reg-intro-support-chev {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

/* Branded footer — quiet. Signals "this is the institution's
   tool, wrapped up" without shouting. */
.reg-intro-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-tertiary);
}
.reg-intro-foot-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.reg-intro-foot-mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.reg-intro-foot-mark .mockup-org-logo-box {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 4px;
  font-size: 7.5px;
  font-weight: 800;
}
.reg-intro-foot-copy { line-height: 1.4; }

@media (max-width: 640px) {
  /* End users on mobile get ONLY the hero — the goal is "tap
     Start setup", not read a 3-step preview (the walkthrough
     will show those steps live anyway). Everything below the
     hero (expect / assurances / footer) collapses on mobile so
     the page fits in a single viewport with no scrolling.
     Desktop visitors keep the full landing. */
  .reg-intro {
    padding: 14px 14px 20px;
    max-width: none;
  }
  .reg-intro-hero {
    padding: 20px 18px 18px;
    border-radius: 14px;
    margin-bottom: 0;
  }
  .reg-intro-masthead {
    padding-bottom: 14px;
    margin-bottom: 14px;
    gap: 12px;
  }
  .reg-intro-brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
  .reg-intro-masthead-org {
    font-size: 15px;
  }
  .reg-intro-masthead-doctype {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .reg-intro-title {
    font-size: 20px;
    line-height: 1.22;
    margin-bottom: 8px;
  }
  .reg-intro-sub {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .reg-intro-cta {
    padding: 0;
  }
  .reg-intro-cta .btn-large {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
  }
  .reg-intro-meta {
    margin-top: 14px;
    gap: 6px;
  }
  .reg-intro-meta-pill {
    font-size: 13px;
    padding: 5px 10px;
  }

  /* On mobile we keep the "what to expect" bullets — they give
     the user a concrete read on what they're committing to before
     tapping Start. The chunkier assurances + footer rows still
     collapse so the page stays focused. */
  .reg-intro-assurances,
  .reg-intro-foot {
    display: none;
  }
  .reg-intro-expect {
    margin-top: 14px;
  }
  .reg-intro-section-eyebrow {
    font-size: 10px;
    margin-bottom: 8px;
  }
}
@media (max-width: 640px) {
  .reg-intro {
    padding: 16px 14px 28px;
  }
  .reg-intro-eyebrow {
    margin-bottom: 10px;
  }
  .reg-intro-title {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .reg-intro-sub {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .reg-intro-steps {
    padding: 8px;
    gap: 4px;
    margin-bottom: 18px;
  }
  .reg-intro-step {
    padding: 12px 10px;
    grid-template-columns: 26px 32px 1fr;
    gap: 12px;
  }
  .reg-intro-step-num {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .reg-intro-step-icon {
    width: 32px;
    height: 32px;
  }
  .reg-intro-step-title {
    font-size: 16px;
  }
  .reg-intro-cta {
    padding: 4px 0 14px;
  }
  .reg-intro-cta .btn-large {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
  }
  .reg-intro-reassurance {
    font-size: 12px;
    padding: 12px 14px;
    line-height: 1.45;
  }
}
.reg-intro-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 14px;
}
.reg-intro-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.reg-intro-title strong {
  color: var(--accent);
  font-weight: 700;
}
.reg-intro-sub {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 560px;
}
.reg-intro-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 0;
}
.reg-intro-step {
  display: grid;
  grid-template-columns: 28px 38px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 12px;
  border-radius: 10px;
  transition: background-color 0.15s;
}
.reg-intro-step:hover {
  background: var(--bg-subtle);
}
.reg-intro-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reg-intro-step-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reg-intro-step-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.reg-intro-cta {
  text-align: left;
  padding: 0;
}
.reg-intro-cta .btn-large {
  padding: 11px 28px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
}
.reg-intro-cta-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.reg-intro-reassurance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.reg-intro-reassurance svg {
  color: var(--success, #16a34a);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Per-org embedded boot screen — shown while /orgs/<slug>.json loads.
   Kept minimal so the page doesn't flash white before the walkthrough
   takes over (or before the error state shows for an unknown slug). */
.org-boot {
  max-width: 420px;
  margin: 60px auto;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}
.org-boot-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 18px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: org-boot-spin 0.8s linear infinite;
}
@keyframes org-boot-spin {
  to {
    transform: rotate(360deg);
  }
}
.org-boot-label {
  font-size: 14px;
  font-weight: 500;
}
.org-boot-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.org-boot--error .org-boot-spinner {
  display: none;
}
.org-boot--error .org-boot-label strong {
  color: var(--text-primary);
}

/* =========================================================
   TRIAL RIBBON — branded URL persistent top strip
   ========================================================= */
/* =========================================================
   PREFLIGHT BANNERS — environment-readiness warnings that surface
   above the page content (above the trial ribbon when both are
   present). One banner per detected issue (in-app browser, missing
   biometric, no WebAuthn). Always dismissable — never blocks the
   user from continuing. Conservative styling so the page doesn't
   look broken when one appears.
   ========================================================= */
.preflight-banner-host {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.has-preflight-banner {
  padding-top: 0;
}
.preflight-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.4;
}
.preflight-banner--high {
  background: #fef2f2;
  border-bottom-color: #fecaca;
  color: #7f1d1d;
}
.preflight-banner-icon {
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
}
.preflight-banner-icon svg {
  color: #c2410c;
}
.preflight-banner--high .preflight-banner-icon svg {
  color: #b91c1c;
}
.preflight-banner-body {
  flex: 1;
  min-width: 0;
}
.preflight-banner-title {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.preflight-banner-text {
  font-size: 12.5px;
  opacity: 0.92;
  margin-bottom: 8px;
}
.preflight-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.preflight-banner-action {
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 5px 12px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}
.preflight-banner-action:hover {
  background: rgba(255, 255, 255, 0.5);
}
.preflight-banner-action--dismiss {
  border-color: transparent;
  font-weight: 500;
  opacity: 0.75;
}
.preflight-banner-action--dismiss:hover {
  background: transparent;
  opacity: 1;
}
.preflight-banner-action:disabled {
  opacity: 0.7;
  cursor: progress;
}
@media (max-width: 600px) {
  .preflight-banner {
    padding: 8px 12px;
    gap: 8px;
  }
  .preflight-banner-title {
    font-size: 12.5px;
  }
  .preflight-banner-text {
    font-size: 11.5px;
  }
}

/* Shown on the branded /?org=<slug> page while the org is in active
   trial (not expired, not capped). Pinned to the top so wherever
   in the walkthrough the admin lands, they see: how many days are
   left + how many pilot users they've served + a one-click Upgrade. */
.trial-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  color: #78350f;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.trial-ribbon-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: #d97706;
  color: white;
  border-radius: 4px;
}
.trial-ribbon-main {
  font-weight: 700;
}
.trial-ribbon-sep {
  color: #c8a05b;
}
.trial-ribbon-usage {
  color: #92400e;
}
.trial-ribbon-cta {
  margin-left: 6px;
  padding: 4px 12px;
  background: #1d1d1f;
  color: white;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}
.trial-ribbon-cta:hover {
  background: #2f2f31;
}

/* Push the rest of the page down so the ribbon doesn't sit on top
   of the first content row. 40px is the ribbon's natural height. */
body.branded-mode:has(.trial-ribbon) {
  padding-top: 40px;
}

/* Hide on narrow phones below the walkthrough's mobile breakpoint —
   it eats vertical space that the phone mockup already needs. The
   admin still sees the countdown in the admin portal topbar. */
@media (max-width: 640px) {
  .trial-ribbon {
    font-size: 11.5px;
    padding: 6px 10px;
    gap: 6px;
  }
  .trial-ribbon-sep,
  .trial-ribbon-usage {
    display: none;
  }
}

/* =========================================================
   TRIAL BLOCKED — upgrade-required screen
   ========================================================= */
/* Full-page card shown when the branded URL is blocked because the
   trial expired OR the pilot-visit cap was reached. Uses the org's
   accent colour (via --tb-accent CSS var) so it still feels like
   their branded page, not a generic error. */
.trial-blocked {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--bg-subtle, #f6f7f9);
}
.trial-blocked-card {
  width: 100%;
  max-width: 560px;
  background: white;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-top: 4px solid var(--tb-accent, #0c5e82);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  text-align: left;
}
.trial-blocked-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-accent, #0c5e82);
  margin-bottom: 12px;
}
.trial-blocked-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary, #1d1d1f);
  line-height: 1.2;
  margin: 0 0 14px;
}
.trial-blocked-reason {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary, #1d1d1f);
  margin: 0 0 14px;
}
.trial-blocked-body {
  font-size: 14px;
  color: var(--text-secondary, #52525b);
  line-height: 1.55;
  margin: 0 0 28px;
}
.trial-blocked-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.trial-blocked-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--tb-accent, #0c5e82);
  color: white;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition:
    filter 0.12s,
    transform 0.08s;
}
.trial-blocked-cta:hover {
  filter: brightness(1.08);
}
.trial-blocked-cta:active {
  transform: scale(0.98);
}
.trial-blocked-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: white;
  color: var(--text-secondary, #52525b);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}
.trial-blocked-cta-secondary:hover {
  background: var(--bg-subtle, #f6f7f9);
}
.trial-blocked-footer {
  font-size: 12.5px;
  color: var(--text-tertiary, #9ca3af);
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}
.trial-blocked-footer a {
  color: var(--tb-accent, #0c5e82);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Shared "copy URL" button used by the companion preamble's URL box. */
.phone-handoff-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.phone-handoff-copy:hover {
  background: var(--bg);
}

/* Mode banners — shown above the picker and the walkthrough player so
   the user always knows WHY they're here: companion ("watch, register
   on your phone") vs direct ("detected your phone, not yours? change").
   Keeps the flow legible without interrogating the user. */
.mode-banner,
.walkthrough-mode-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin: 0 auto 10px;
  max-width: 560px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}
.mode-banner svg,
.walkthrough-mode-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}
.mode-banner-text strong {
  color: var(--text-primary);
  display: inline;
}
.mode-banner--direct {
  border-color: var(--accent-subtle);
  background: var(--accent-subtle);
}
.walkthrough-mode-banner--companion {
  border-color: var(--accent-subtle);
  background: var(--accent-subtle);
}
.walkthrough-mode-banner--direct {
  background: var(--bg);
}
.walkthrough-mode-banner-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Companion-mode escape: for the rare case where the user would rather
   register on the laptop itself (Windows Hello, Mac Touch ID). Small,
   quiet link under the phone grid. */
.picker-escape {
  margin-top: 22px;
  text-align: center;
}
.picker-escape-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
}
.picker-escape-link:hover {
  color: var(--accent);
  background: var(--bg-subtle);
}

/* =========================================================
   DEMO LAUNCHER — one focused screen between domain detection
   and the walkthrough. Shows coverage (device grid) + policy
   flexibility (tabs) before the buyer picks a device to watch.
   ========================================================= */
/* =========================================================
   DEMO LAUNCHER — simple single-column layout. Buyer-facing
   "configure your tenant" screen between domain detection and
   the device picker. No side preview phone, no viewport-fit:
   normal page flow, scroll only if genuinely needed.
   ========================================================= */
.demo-launcher {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-launcher-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.demo-launcher-top .back-link {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.demo-launcher-top .back-link:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.demo-launcher-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #e6f7ea;
  color: #0d6a2a;
  border: 1px solid #b7e4c4;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.demo-launcher-confirm svg {
  color: #107c10;
  flex-shrink: 0;
}
.demo-launcher-title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 4px 0 0;
  line-height: 1.2;
}
.demo-launcher-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 4px;
}
.demo-launcher-panel {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-launcher-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.demo-launcher-panel-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  flex-shrink: 0;
}
.demo-launcher-cta {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.demo-launcher-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .demo-launcher {
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
    gap: 10px;
  }
  .demo-launcher-panel {
    padding: 12px 14px;
    gap: 10px;
  }
  /* Start demo sits inline at the bottom of the page (not fixed)
       so it doesn't cover the provider list. The whole page is
       compact enough on a typical phone viewport (812dvh) to fit
       without scrolling. */
  .demo-launcher-cta {
    position: static;
    margin: 4px 0 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
  }
  .demo-launcher-cta-btn {
    max-width: none;
    padding: 12px 20px;
    font-size: 14.5px;
  }
}

/* Policy tabs — compact segmented control. Active tab pops with
   a white fill + subtle shadow against the grey track. Tabs stretch
   to equal width inside the track so the control always reads
   symmetrically regardless of label length. */
.policy-tabs {
  display: flex;
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: 10px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  width: 100%;
}
.policy-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
  text-align: center;
}
.policy-tab:hover {
  color: var(--text);
}
.policy-tab.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
@media (max-width: 520px) {
  .policy-tab {
    padding: 9px 8px;
    font-size: 12.5px;
  }
}

/* Preference toggle — shown only when mode = 'any'. Lets orgs pick
   whether users are guided toward synced (iCloud/Google/etc) or
   device-bound (Authenticator/WHfB/security key/PSSO) methods, while
   still allowing the other path if the user wants it. Uses the
   shared .demo-launcher-panel-row layout so label + tabs align
   vertically with the Passkey types row above. */
.demo-preference {
  /* Margin + top border gives visual separation from the passkey
       types row above without needing an extra divider element. */
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* Synced-provider checklist under the policy tabs. The "Any method"
   and "Synced only" modes both honour this list — only ticked
   providers are offered in the walkthrough, with synced_alt / fallback
   routing to any ticked alternative when the device's native is not
   ticked. Hidden for authenticator_only. */
.demo-providers {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.demo-provider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background-color 0.12s;
  min-height: 44px;
}
.demo-provider:hover {
  border-color: var(--text-tertiary);
}
.demo-provider.checked {
  background: var(--accent-subtle);
  border-color: var(--accent);
}
.demo-provider input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin: 0;
}
.demo-provider-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.demo-provider-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-provider-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px) {
  /* Two-column symmetric grid on mobile — keeps all seven providers
       visible in a tight block without needing to scroll. Third-party
       (the only 2-line sub "1Password · Bitwarden") spans full-width
       so the grid stays neatly aligned without orphaned rows. */
  .demo-providers-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .demo-providers-grid .demo-provider:last-child {
    grid-column: 1 / -1;
  }
  .demo-provider {
    padding: 7px 10px;
    min-height: 40px;
    gap: 8px;
  }
  .demo-provider-name {
    font-size: 12.5px;
  }
  .demo-provider-sub {
    font-size: 10.5px;
  }
}

/* Device grid — every vendor logo as a click target. Visual USP:
   "we cover all these devices". Clicking a tile launches the
   walkthrough for that vendor with the currently-selected policy. */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.device-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.15s,
    border-color 0.15s;
  text-align: center;
}
.device-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  border-color: var(--accent);
}
.device-tile:active {
  transform: translateY(0);
}
.device-tile-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.device-tile-logo svg {
  width: 44px;
  height: 44px;
}
.device-tile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.device-tile-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.3;
}
@media (max-width: 767px) {
  /* Aggressive mobile compression so the launcher fits within a
       single viewport on typical phones. Tighten panel paddings,
       shrink device tiles. */
  .demo-launcher {
    padding: 10px 14px 12px;
  }
  /* Lock the top bar to a single line so a long brand name in
       the "Branded for <brand>" chip can't wrap onto a second line
       and push the Start-demo button below the fold. The chip
       shrinks to fit alongside the back link and ellipsises any
       overflow inside the brand strong tag. */
  .demo-launcher-top {
    flex-wrap: nowrap;
    min-width: 0;
    gap: 8px;
  }
  .demo-launcher-top .back-link {
    flex-shrink: 0;
  }
  .demo-launcher-confirm {
    margin: 0;
    padding: 4px 10px;
    font-size: 11.5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .demo-launcher-confirm > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .demo-launcher-confirm strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .demo-launcher-title {
    font-size: 20px;
    margin: 2px 0 0;
  }
  .demo-launcher-sub {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
  }
  .demo-launcher-panel {
    padding: 12px;
    margin-bottom: 0;
    border-radius: 12px;
  }
  .demo-launcher-panel-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .demo-launcher-panel-label {
    font-size: 10.5px;
  }

  .device-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .device-tile {
    padding: 10px 4px 8px;
    gap: 4px;
    border-radius: 10px;
  }
  .device-tile-logo {
    width: 32px;
    height: 32px;
  }
  .device-tile-logo svg {
    width: 32px;
    height: 32px;
  }
  .device-tile-label {
    font-size: 11px;
  }
  /* Hide the OS sub-label on narrow phones — the vendor name and
       logo are enough identifiers. Saves one full line per tile. */
  .device-tile-sub {
    display: none;
  }
}

/* Short phones (e.g. 360 x 640 with URL bar) — tighter compression
 * so the demo-launcher panel + Start-demo button still fit above the
 * fold. Targets viewports where total height is ≤ 700 px. */
@media (max-width: 767px) and (max-height: 700px) {
  .demo-launcher {
    gap: 8px;
  }
  .demo-launcher-title {
    font-size: 18px;
  }
  .demo-launcher-sub {
    font-size: 12px;
    line-height: 1.35;
  }
  .demo-launcher-panel {
    padding: 10px;
    gap: 8px;
  }
  .demo-providers-grid {
    gap: 4px;
  }
  .demo-provider {
    padding: 5px 10px;
    min-height: 36px;
    gap: 8px;
  }
  .demo-provider-name {
    font-size: 12px;
  }
  .demo-provider-sub {
    font-size: 10px;
  }
  .policy-tabs {
    padding: 3px;
  }
  .policy-tab {
    padding: 6px 8px;
    font-size: 12.5px;
  }
  .demo-launcher-cta-btn {
    padding: 10px 18px;
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .device-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   ADMIN PAGE — manage saved org profiles (#admin route)
   Each profile renders as a card with a colour swatch on the left
   (tenant accent) and name / domain / policy summary on the right.
   Inline actions: Preview demo / Edit / Duplicate / Delete.
   ========================================================= */
.admin-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}
.admin-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}
.admin-header-main {
  flex: 1;
  min-width: 260px;
}
.admin-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 8px;
}
.admin-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 640px;
}
.admin-header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.admin-profiles {
  display: grid;
  gap: 14px;
}
.admin-profile-card {
  display: flex;
  gap: 18px;
  align-items: stretch;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.admin-profile-card:hover {
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.admin-profile-swatch {
  flex-shrink: 0;
  width: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px;
}
.admin-profile-swatch-badge {
  font-size: 12px;
  line-height: 1.1;
  word-break: break-all;
}
.admin-profile-body {
  flex: 1;
  min-width: 0;
  padding: 16px 18px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-profile-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.admin-profile-tag {
  padding: 2px 8px;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.admin-profile-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.admin-profile-meta strong {
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  margin-right: 6px;
}
.admin-profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.btn-admin-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.btn-admin-delete:hover {
  background: #fef2f2;
  border-color: var(--danger);
}

.admin-help {
  margin-top: 40px;
  padding: 18px 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.admin-help strong {
  color: var(--text);
  font-weight: 600;
}
.admin-help em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 640px) {
  .admin-page {
    padding: 14px 14px 40px;
  }
  .admin-profile-card {
    flex-direction: column;
  }
  .admin-profile-swatch {
    width: 100%;
    height: 60px;
    padding: 12px;
  }
  .admin-profile-body {
    padding: 14px 16px;
  }
  .admin-profile-meta {
    gap: 12px;
    font-size: 12px;
  }
  .admin-profile-actions .btn {
    padding: 8px 12px;
    font-size: 12.5px;
  }
}

/* =========================================================
   PRE-LAUNCH MODAL — "Two things to remember"
   ========================================================= */
.pre-launch {
  padding: 28px 24px 20px;
}
.pre-launch-label {
  display: none;
}
.pre-launch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.pre-launch-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.2;
}
.pre-launch-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pre-launch-sub-logo {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pre-launch-sub-logo svg {
  width: 20px;
  height: 20px;
}

.pre-launch-pain {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--bg-subtle);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
}
.pre-launch-pain-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  flex-shrink: 0;
  margin-top: 2px;
}
.pre-launch-pain-text {
  flex: 1;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.45;
}
.pre-launch-pain-text strong {
  color: var(--danger);
  font-weight: 600;
  background: #fff0f0;
  padding: 1px 6px;
  border-radius: 4px;
}

.pre-launch-screenshot {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #f0f9ff;
  border: 1px solid #cfe5ff;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 22px;
}
.pre-launch-screenshot-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pre-launch-screenshot-text {
  flex: 1;
  font-size: 13.5px;
  color: #003d7a;
  line-height: 1.45;
}
.pre-launch-screenshot-text strong {
  font-weight: 600;
  color: #002855;
}

.pre-launch-actions {
  display: flex;
  gap: 10px;
}
.pre-launch-back {
  padding: 12px 18px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.pre-launch-back:hover {
  background: var(--bg-muted);
  border-color: var(--text-tertiary);
}
.pre-launch-go {
  flex: 1;
  padding: 12px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: -0.01em;
  transition: background-color 0.15s;
}
.pre-launch-go:hover {
  background: var(--accent-hover);
}

/* =========================================================
   WALKTHROUGH PLAY OVERLAY (initial state - "tap to play")
   ========================================================= */
.phone-frame-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Symmetrical nav arrows on either side of the phone — much easier to
   spot and tap than a single row below. Uses the base wk-nav-btn look
   (pill circle, filled on mobile); --side variant is a no-op hook for
   any future side-specific styling. */
.wk-nav-btn--side {
  flex-shrink: 0;
}

.wk-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 31, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* No border-radius — the overlay lives INSIDE .phone-frame, whose
       overflow:hidden + outer border-radius already clip the overlay
       to the phone's inner corner shape. Giving the overlay its own
       38px radius makes its corners curve inward past the phone's
       inside edge and exposes a ring of the black border. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 25;
  cursor: pointer;
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.wk-play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.wk-play-overlay-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d1d1f;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
  animation: playPulse 2s ease-in-out infinite;
}
@keyframes playPulse {
  0%,
  100% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.3),
      0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.3),
      0 0 0 12px rgba(255, 255, 255, 0);
  }
}
.wk-play-overlay:hover .wk-play-overlay-circle {
  transform: scale(1.05);
}
.wk-play-overlay-circle svg {
  width: 26px;
  height: 26px;
  fill: #1d1d1f;
  stroke: none;
  margin-left: 3px;
}
.wk-play-overlay-label {
  font-size: 14px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.01em;
  padding: 0 18px;
  text-align: center;
  line-height: 1.3;
  max-width: 200px;
}
.wk-play-overlay-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  font-weight: 400;
  padding: 0 20px;
  text-align: center;
  line-height: 1.35;
  max-width: 200px;
}

/* Full-screen 3-2-1 countdown played when the admin clicks Start demo
   (or a public visitor taps Begin setup). Announces the demo for the
   detected tenant + a big animated number per second. The countdown
   marks the handoff from admin-configured setup to the end-user flow. */
.demo-start-preroll {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(248, 248, 250, 0.72);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.demo-start-preroll--in {
  opacity: 1;
}
.demo-start-preroll--out {
  opacity: 0;
}
.demo-start-preroll-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  padding: 22px 28px 20px;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 28px rgba(0, 0, 0, 0.08);
  min-width: 280px;
  max-width: 360px;
  transform: translateY(6px);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.demo-start-preroll--in .demo-start-preroll-card {
  transform: translateY(0);
}
.demo-start-preroll-eyebrow {
  color: var(--text-tertiary, #86868b);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.demo-start-preroll-org {
  color: var(--text-primary, #1d1d1f);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 14px;
  overflow-wrap: break-word;
}
.demo-start-preroll-bar {
  height: 3px;
  width: 100%;
  background: var(--border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.demo-start-preroll-bar > span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--accent, #3b82f6);
  border-radius: 2px;
  transform: translateX(-100%);
  animation: demo-start-preroll-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.demo-start-preroll-sub {
  color: var(--text-tertiary, #86868b);
  font-size: 12px;
  font-weight: 500;
}
@keyframes demo-start-preroll-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-start-preroll-bar > span {
    animation: none;
    width: 100%;
    transform: none;
  }
}

/* =========================================================
   WALKTHROUGH PROGRESS BAR (subtle timing indicator)
   ========================================================= */
.wk-progress-track {
  width: 100%;
  max-width: 248px;
  height: 3px;
  background: var(--border-subtle);
  border-radius: 2px;
  margin: 0 auto 10px;
  overflow: hidden;
  position: relative;
}
.wk-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
}

/* =========================================================
   CAPTION — refined emphasis (no caps, subtle color)
   ========================================================= */
/* Emphasis — bold accent color so the key word pops on the
   light accent-subtle caption background. (Was white, which
   was invisible after the caption redesign moved away from a
   dark bubble.) The warn variant overrides with its own color
   further down. */
.walkthrough-caption em.em-key,
.walkthrough-caption .em-key {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
/* Play button in controls - more prominent when paused */
.wk-play {
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 500;
}
.wk-play:hover {
  background: var(--text);
  color: white;
  border-color: var(--text);
}

/* =========================================================
   PAIN THUMBNAILS (in pre-launch modal)
   ========================================================= */
.pre-launch-pain {
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.pre-launch-pain-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px 14px;
}
.pre-launch-pain-thumb {
  padding: 14px;
  background: var(--bg-muted);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pain-thumb {
  width: 100%;
  max-width: 260px;
  font-family: "Segoe UI", "Inter", sans-serif;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px;
  font-size: 10px;
  color: #242424;
}
.pain-thumb-title {
  font-size: 10px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 8px;
}
.pain-thumb-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  margin-bottom: 4px;
  background: white;
  position: relative;
}
.pain-thumb-opt:last-child {
  margin-bottom: 0;
}
.pain-thumb-opt-ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}
.pain-thumb-opt-text {
  flex: 1;
  min-width: 0;
  font-size: 9px;
  color: #242424;
  font-weight: 600;
}
.pain-thumb-opt-sub {
  font-size: 7.5px;
  color: #666;
  margin-top: 1px;
  font-weight: 400;
}
.pain-thumb-opt.wrong {
  opacity: 0.55;
  background: #fafafa;
}
.pain-thumb-opt.wrong .pain-thumb-opt-text {
  text-decoration: line-through;
  color: #9a9a9a;
}
.pain-thumb-opt.right {
  outline: 2px solid #ef4444;
  outline-offset: -1px;
  border-color: #ef4444;
}
.pain-thumb-badge-x {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d70015;
  color: white;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.pain-thumb-badge-ok {
  background: #16a34a;
  color: white;
  font-size: 6px;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Intercept-style pain thumbs (Samsung Pass, Mi Password, etc.) */
.pain-thumb-popup {
  background: #f8faff;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  position: relative;
}
.pain-thumb-popup-header {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  margin-bottom: 6px;
}
.pain-thumb-popup-logo {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 7px;
}
.pain-thumb-popup-title {
  font-size: 10px;
  font-weight: 600;
  color: #1f1f1f;
}
.pain-thumb-popup-sub {
  font-size: 8.5px;
  color: #666;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.3;
}
.pain-thumb-popup-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.pain-thumb-popup-link {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
}
.pain-thumb-popup-link.tap {
  color: white;
  background: #16a34a;
  outline: 2px solid #16a34a;
  outline-offset: 1px;
}
.pain-thumb-popup-btn {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.45;
  text-decoration: line-through;
}
.pain-thumb-popup-btn.dontgo {
  background: #ccc;
  color: #666;
}

/* Simple inline "this button" pain thumb */
.pain-thumb-simple {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}
.pain-thumb-simple-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #242424;
}
.pain-thumb-simple-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  display: inline-block;
}

/* =========================================================
   Walkthrough mobile polish — minimal overrides since the new
   simple layout already adapts via the .walkthrough rule above.
   ========================================================= */
@media (max-width: 767px) {
  /* Hide the iPhone-style notch pseudo-element on mobile —
       wastes ~30px of vertical mockup space. */
  .walkthrough .phone-frame::before {
    display: none;
  }

  /* Beefier dark side-nav buttons — easier to tap on touch. */
  .walkthrough .wk-nav-btn {
    width: 40px;
    height: 40px;
    background: var(--text);
    color: white;
    border-color: var(--text);
  }
  .walkthrough .wk-nav-btn:hover,
  .walkthrough .wk-nav-btn:active {
    background: #000;
    border-color: #000;
  }
  .walkthrough .wk-nav-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Context/vendor pickers - tighter on mobile too */
  .context-picker {
    padding: 24px 16px;
  }
  .context-picker-title {
    font-size: 26px;
  }
  .vendor-card {
    padding: 18px 12px;
    gap: 8px;
  }
  .vendor-card-logo svg {
    width: 40px;
    height: 40px;
  }
  .vendor-card-label {
    font-size: 14px;
  }
  .vendor-card-sub {
    font-size: 11px;
  }
}

/* =========================================================
   PRE-LAUNCH MODAL — compact mobile-first layout
   Actions always visible at bottom via sticky positioning
   ========================================================= */
@media (max-width: 767px) {
  /* "Remember N things" drawer is tight — must fit 3 pains + title +
       AI card + sticky actions on a 600dvh viewport with no scroll.
       Aggressive vertical compression below. Important: drawer-body
       already provides the outer padding, so .pre-launch must NOT
       add its own or we double-pad. */
  .drawer-body {
    padding: 14px 20px 0;
  }
  .pre-launch {
    padding: 0;
  }
  .pre-launch-label {
    font-size: 10.5px;
    margin-bottom: 4px;
  }
  .pre-launch-title {
    font-size: 18px;
    margin-bottom: 2px;
    line-height: 1.2;
  }
  .pre-launch-sub {
    font-size: 12.5px;
    margin-bottom: 10px;
  }
  .pre-launch-pain {
    margin-bottom: 6px;
  }
  .pre-launch-pain-header {
    padding: 8px 12px 8px;
    gap: 8px;
  }
  .pre-launch-pain-num {
    width: 20px;
    height: 20px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .pre-launch-pain-text {
    font-size: 12.5px;
    line-height: 1.35;
  }
  /* On mobile, pain thumbnails are decorative — the text carries the
       message. Hide them to reclaim ~80px per pain, which is what makes
       3-pain flows (e.g. Samsung -> Google PM) fit without scrolling. */
  .pre-launch-pain-thumb {
    display: none;
  }

  .pain-thumb-popup {
    padding: 8px;
  }
  .pain-thumb-popup-sub {
    font-size: 7.5px;
    margin-bottom: 6px;
  }
  .pain-thumb-popup-link {
    font-size: 8px;
    padding: 2px 5px;
  }
  .pain-thumb-popup-btn {
    padding: 2px 8px;
    font-size: 8px;
  }
  .pain-thumb-simple {
    padding: 10px;
  }
  .pain-thumb-simple-btn {
    padding: 4px 8px;
    font-size: 9px;
  }

  .pre-launch-screenshot {
    padding: 10px 12px;
    margin-top: 12px;
    margin-bottom: 14px;
    gap: 10px;
  }
  .pre-launch-screenshot-icon {
    width: 28px;
    height: 28px;
  }
  .pre-launch-screenshot-text {
    font-size: 12px;
    line-height: 1.4;
  }

  /* STICKY ACTIONS inside drawer */
  .pre-launch-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 -20px;
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border-subtle);
    z-index: 10;
  }
  .pre-launch-back {
    padding: 12px 16px;
    font-size: 13.5px;
  }
  .pre-launch-go {
    padding: 12px 18px;
    font-size: 14.5px;
  }
}

/* Ensure drawer can scroll internally with sticky footer visible */
.drawer {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   WALKTHROUGH COMPLETE — "Ready to start?" inline prompt
   ========================================================= */
.wk-done-prompt {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 31, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* No border-radius — lives inside .phone-frame; its overflow:hidden
       + outer border-radius clip this overlay to the phone's inner
       rounded corners. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 20px;
  text-align: center;
  animation: donePromptIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes donePromptIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.wk-done-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
  animation: donePop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
@keyframes donePop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.wk-done-label {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.wk-done-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
}
.wk-done-next {
  background: white;
  color: #1d1d1f;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.wk-done-next:active {
  transform: scale(0.96);
}
.wk-done-replay {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 6px;
}

/* =========================================================
   VENDOR PICKER — 3-column compact mobile layout (no scroll)
   ========================================================= */
@media (max-width: 767px) {
  .vendor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  .vendor-card {
    padding: 12px 6px !important;
    gap: 6px !important;
    min-height: 0;
  }
  .vendor-card-logo {
    width: 36px;
    height: 36px;
  }
  .vendor-card-logo svg {
    width: 32px;
    height: 32px;
  }
  .vendor-card-label {
    font-size: 12px;
    line-height: 1.2;
  }
  .vendor-card-sub {
    font-size: 9.5px;
    line-height: 1.2;
    color: var(--text-tertiary);
  }
  .vendor-card-warn {
    font-size: 8.5px;
    padding: 1px 5px;
    margin-top: 0;
  }
  /* Tighter header for vendor picker on mobile */
  .context-picker {
    padding: 18px 14px;
  }
  .context-picker-title {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .context-picker-sub {
    font-size: 13px;
    margin-bottom: 18px;
  }
}

/* Very small viewports — even more compact */
@media (max-width: 360px) {
  .vendor-card {
    padding: 10px 4px !important;
  }
  .vendor-card-logo {
    width: 32px;
    height: 32px;
  }
  .vendor-card-logo svg {
    width: 28px;
    height: 28px;
  }
  .vendor-card-label {
    font-size: 11px;
  }
  .vendor-card-sub {
    font-size: 9px;
  }
}

/* =========================================================
   SIMPLIFIED PRE-LAUNCH MODAL — less clutter, punchier layout
   ========================================================= */
.pre-launch-sub-compact {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.pre-launch-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  margin: 14px -4px 18px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
  background: var(--bg-subtle);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}

/* Prominent AI-help card — shown in the pre-launch modal so the user
   actively knows to screenshot any issue before switching tabs. */
.pre-launch-ai-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 16px -4px 18px;
  background: linear-gradient(135deg, #eff5ff 0%, #fef7ff 100%);
  border: 1px solid #c7d9ff;
  border-radius: 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.pre-launch-ai-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at center, rgba(147, 112, 219, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.pre-launch-ai-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: white;
  border: 1px solid #d4def5;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}
.pre-launch-ai-copy {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.pre-launch-ai-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pre-launch-ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pre-launch-ai-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Compact AI card on mobile so the "Remember N things" drawer fits
   without scrolling even for 3-pain flows. */
@media (max-width: 767px) {
  .pre-launch-ai-card {
    padding: 10px 12px;
    margin: 10px -4px 12px;
    gap: 10px;
  }
  .pre-launch-ai-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .pre-launch-ai-icon svg {
    width: 16px;
    height: 16px;
  }
  .pre-launch-ai-title {
    font-size: 12.5px;
    margin-bottom: 2px;
  }
  .pre-launch-ai-body {
    font-size: 11.5px;
    line-height: 1.35;
  }
  .pre-launch-ai-badge {
    font-size: 8.5px;
    padding: 1px 5px;
  }
}
.pre-launch-footnote svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Strong tags in simplified pain text should pop but stay professional */
.pre-launch-pain-text strong {
  color: var(--text);
  font-weight: 700;
}

/* Mobile — even tighter */
@media (max-width: 767px) {
  .pre-launch {
    padding: 20px 18px 0;
  }
  .pre-launch-title {
    font-size: 20px;
    margin-bottom: 3px;
  }
  .pre-launch-sub-compact {
    font-size: 12.5px;
    margin-bottom: 18px;
  }
  .pre-launch-footnote {
    font-size: 11.5px;
    padding: 9px 12px;
    margin: 10px -2px 14px;
  }
}

/* =========================================================
   WALKTHROUGH CAPTION — mobile adjustments for new position
   ========================================================= */
@media (max-width: 767px) {
  .walkthrough-caption {
    font-size: 14.5px;
    padding: 12px 18px;
    margin: 4px auto 14px;
    min-height: 48px;
    max-width: none;
    width: calc(100% - 16px);
  }
}

/* Idle caption state — before the user taps play. Was hidden; now
   shows an instructional hint (set in initializeWalkthrough) so the
   reserved caption space isn't blank. Slightly muted styling to
   distinguish it from real frame captions. */
.walkthrough-caption.wk-caption-idle {
  background: transparent;
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  font-weight: 500;
  font-size: 13px;
}
.walkthrough-caption.wk-caption-idle::after {
  /* Hide the speech-bubble tail while idle — it's not "speaking"
       a real caption yet. */
  display: none;
}

/* =========================================================
   LOGO UPLOAD UI (org playground)
   ========================================================= */
.logo-input-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-subtle);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
}
.logo-tab {
  flex: 1;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
  font-family: inherit;
}
.logo-tab:hover {
  color: var(--text);
}
.logo-tab.active {
  background: white;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.logo-file-drop {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  background: var(--bg-subtle);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.logo-file-drop:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.logo-file-drop-icon {
  width: 36px;
  height: 36px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.logo-file-drop-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.logo-file-drop-text strong {
  color: var(--text);
  font-weight: 600;
}
.logo-file-drop-text span {
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.logo-preview-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 10px;
}
.logo-preview-box {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #f6f6f8;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.logo-preview-meta {
  flex: 1;
  min-width: 0;
}
.logo-preview-status {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 4px;
}
.logo-preview-clear {
  font-size: 12px;
  font-weight: 500;
  color: var(--danger);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

/* =========================================================
   CLOSING CTA — final section on the marketing landing.
   Replaces the 'For IT teams' enterprise callout that was
   reading as unfinished. Big headline, stats row, two CTAs
   (free trial primary, talk to sales secondary).
   ========================================================= */
.closing-cta-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-subtle) 100%);
  border-top: 1px solid var(--border-subtle);
  padding: 72px 24px 96px;
}
.closing-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.closing-cta-title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 14px;
  color: var(--text-primary);
}
.closing-cta-sub {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 560px;
}
.closing-cta-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-bottom: 28px;
  color: var(--text-secondary);
  font-size: 14px;
}
.closing-cta-stat strong {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 20px;
  margin-right: 4px;
  letter-spacing: -0.01em;
}
.closing-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.closing-cta-actions .btn {
  padding: 12px 24px;
  font-size: 15px;
}
@media (max-width: 640px) {
  .closing-cta-section {
    padding: 48px 18px 64px;
  }
  .closing-cta-stats {
    gap: 6px 18px;
    font-size: 13px;
  }
  .closing-cta-stat strong {
    font-size: 17px;
  }
}

/* =========================================================
   ENTERPRISE CALLOUT ON LANDING (legacy — kept in case
   any other render path references it; unused on landing now)
   ========================================================= */
.enterprise-callout {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 80px 24px;
}
.enterprise-callout-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .enterprise-callout-inner {
    grid-template-columns: 1fr 1.3fr;
  }
}
.enterprise-callout-content .hero-kicker {
  margin-bottom: 12px;
}
.enterprise-callout-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
}
.enterprise-callout-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 520px;
}
.enterprise-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.enterprise-stat {
  text-align: left;
}
.enterprise-stat-val {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.enterprise-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.enterprise-callout-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.enterprise-feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.enterprise-feature svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--success);
}
.enterprise-callout-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.enterprise-preview {
  position: relative;
}
.enterprise-preview-frame {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.enterprise-preview-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.enterprise-preview-chrome-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}
.enterprise-preview-chrome-addr {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: "JetBrains Mono", monospace;
}

/* Mini dashboard preview styles reuse existing admin-dash CSS but compressed */
.enterprise-mini-dash {
  padding: 18px;
}
.enterprise-mini-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.enterprise-mini-kpi {
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
}
.enterprise-mini-kpi-label {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.enterprise-mini-kpi-val {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.enterprise-mini-kpi-delta {
  font-size: 10.5px;
  color: var(--success);
  font-weight: 500;
  margin-top: 4px;
}
.enterprise-mini-chart {
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
}
.enterprise-mini-chart-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.enterprise-mini-chart-title span:last-child {
  color: var(--text-tertiary);
  font-weight: 500;
}
.enterprise-mini-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 44px;
}
.enterprise-mini-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent), #4ea4ff);
  border-radius: 2px 2px 0 0;
}

/* =========================================================
   iOS NATIVE PASSKEY SHEET - authentic Keychain prompt
   ========================================================= */
.ios-passkey-sheet {
  position: absolute;
  /* Bottom corners rounded at 28px to match the phone-frame's INNER
       radius (38px border-radius − 10px bezel = 28px inner curve).
       With matching radii, the sheet's corners trace the phone's
       curve exactly instead of leaving a flat edge that gets clipped
       into a visible sliver by overflow:hidden.
       Background is fully opaque (#f9f9fd) — the previous rgba + blur
       relied on translucency that revealed the dimmed .mockup-ms-bg
       behind it at the curved edges, which read as ugly light slivers
       in the bottom corners of the landing preview. */
  bottom: 0;
  left: 0;
  right: 0;
  background: #f9f9fd;
  border-radius: 14px 14px 28px 28px;
  padding: 6px 14px 18px;
  z-index: 15;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  max-height: 72%;
  overflow: hidden;
  font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
}
.ios-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(60, 60, 67, 0.28);
  border-radius: 2.5px;
  margin: 0 auto 10px;
}
.ios-sheet-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  background: #f0f0f2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007aff;
  border: 0.5px solid rgba(60, 60, 67, 0.08);
}
.ios-sheet-title {
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  color: #1d1d1f;
  margin-bottom: 4px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  padding: 0 4px;
}
.ios-sheet-sub {
  font-size: 9.5px;
  text-align: center;
  color: #6e6e73;
  line-height: 1.35;
  margin-bottom: 12px;
  padding: 0 8px;
}
.ios-sheet-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 6px;
  box-sizing: border-box;
  letter-spacing: -0.005em;
}
.ios-sheet-primary svg {
  flex-shrink: 0;
}
.ios-sheet-cancel {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: rgba(118, 118, 128, 0.14);
  color: #007aff;
  border: none;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

/* iCloud Keychain prominent brand line — unmistakable iOS identity */
.ios-sheet-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #007aff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);
}

/* =========================================================
   iOS 26 Liquid Glass variant — translucent frosted sheet.
   Sits on top of the same layout as the iOS 18 mockup but
   lets the page behind show through, with a stronger blur
   and a subtle inner highlight at the top edge.
   ========================================================= */
.ios-passkey-sheet--glass {
  background: rgba(245, 245, 248, 0.55);
  -webkit-backdrop-filter: saturate(200%) blur(28px);
  backdrop-filter: saturate(200%) blur(28px);
  box-shadow:
    0 -2px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  border-top: 0.5px solid rgba(255, 255, 255, 0.4);
  /* Same bottom-corner rounding as the plain iOS sheet so the
       glass variant also tucks into the phone's inner curve. */
  border-radius: 18px 18px 28px 28px;
}
.ios-passkey-sheet--glass .ios-sheet-icon {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}
.ios-passkey-sheet--glass .ios-sheet-primary {
  background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 8px rgba(10, 132, 255, 0.25);
}
.ios-passkey-sheet--glass .ios-sheet-cancel {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.ios-passkey-sheet--glass .ios-sheet-brand {
  border-bottom-color: rgba(60, 60, 67, 0.08);
}

/* =========================================================
   PASSKEY POLICY UI (Orgs playground)
   ========================================================= */
.policy-section {
  background: var(--bg-subtle);
  padding: 18px 18px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  margin-top: 18px;
}
.policy-section .form-label {
  margin-bottom: 4px;
}
.policy-section .playground-form-sub {
  margin-bottom: 14px;
}

.policy-mode-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.policy-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.policy-mode-card:hover {
  border-color: var(--accent);
}
.policy-mode-card.selected {
  border-color: var(--accent);
  background: var(--accent-subtle, #f0f7ff);
}
.policy-mode-card input[type="radio"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.policy-mode-body {
  flex: 1;
  min-width: 0;
}
.policy-mode-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.25;
  margin-bottom: 3px;
}
.policy-mode-badge {
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.policy-mode-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.policy-providers {
  padding: 14px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 14px;
}
.policy-providers-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.policy-providers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 640px) {
  .policy-providers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.policy-provider-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background-color 0.12s;
  position: relative;
}
.policy-provider-check:hover {
  background: #eef2f5;
}
.policy-provider-check.checked {
  border-color: var(--success);
  background: #f0fdf4;
}
.policy-provider-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.policy-provider-check-indicator {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: white;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: all 0.12s;
}
.policy-provider-check.checked .policy-provider-check-indicator {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.policy-provider-body {
  flex: 1;
  min-width: 0;
}
.policy-provider-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.policy-provider-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.policy-preview {
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.policy-preview-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.policy-preview-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.policy-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.policy-preview-vendor {
  font-weight: 600;
  color: var(--text);
  min-width: 90px;
}
.policy-preview-arrow {
  color: var(--text-tertiary);
  font-size: 11px;
}
.policy-preview-flow {
  flex: 1;
  color: var(--text-secondary);
  font-weight: 500;
}
.policy-preview-flow.native {
  color: var(--success);
}
.policy-preview-flow.synced_alt {
  color: #c2410c;
}
.policy-preview-flow.authenticator {
  color: var(--accent);
  font-weight: 600;
}
.policy-preview-flow.unsupported {
  color: var(--danger);
  font-weight: 600;
}

/* =========================================================
   IMPORTANT CAPTION — emphasizes key steps without looking like an error.
   Design: same dark surface as normal captions (keeps visual hierarchy
   consistent) with a calm blue left-accent and a small uppercase label.
   No warning icon, no orange, no alarm color.
   ========================================================= */
.walkthrough-caption.warn {
  background: #1d1d1f;
  color: white;
  border-left: 3px solid #3b82f6;
  padding-left: 16px;
  font-weight: 500;
}
.walkthrough-caption.warn::after {
  border-top-color: #1d1d1f;
}
.walkthrough-caption.warn::before {
  content: "IMPORTANT";
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #60a5fa;
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 3px;
  vertical-align: 1px;
}
/* Warn-variant em-key: used to be white-on-dark when the caption was
   a dark pill; now the caption is transparent on desktop with a
   yellow callout below, so the em-key sits on white/yellow bg and
   needs a dark colour to stay legible. */
.walkthrough-caption.warn .em-key {
  color: #b45309;
  font-weight: 700;
}
/* Inside the new V2 headline/sub, em-key keeps its accent colour
   regardless of warn state — more specific so it wins cascade. */
.walkthrough-caption.warn .wk-headline em.em-key,
.walkthrough-caption.warn .wk-headline .em-key {
  color: var(--accent);
}
.walkthrough-caption.warn .wk-sub em.em-key,
.walkthrough-caption.warn .wk-sub .em-key {
  color: var(--text-primary);
}

/* =========================================================
   WIDE-DESKTOP OPTIMIZATIONS (1280px+, 1440px+, 1720px+)
   The base layout caps at 1120px, which leaves large 1440p
   displays with ~320px of dead space per side. These rules
   progressively widen containers, text columns, and grids,
   and trim aggressive vertical padding, so the landing +
   orgs pages feel full without losing tablet/laptop layout.
   ========================================================= */
@media (min-width: 1280px) {
  /* Container shells — bump from 1120 to 1280 */
  .nav-inner,
  .section-inner,
  .wizard,
  .footer-inner,
  .proof-bar-inner,
  .org-showcase-inner,
  .orgs-tailor-section,
  .enterprise-callout-inner {
    max-width: 1280px;
  }

  /* Hero — widen centered text columns, trim top/bottom air */
  .hero {
    padding: 72px 32px 56px;
  }
  .hero-title {
    max-width: 980px;
  }
  .hero-subtitle {
    max-width: 780px;
  }
  .hero-detect {
    max-width: 720px;
  }

  /* Sections — less vertical padding, wider horizontal gutters */
  .section {
    padding: 64px 32px;
  }
  .section-subtitle {
    max-width: 780px;
  }

  /* Wide wrappers that previously capped below 1120 */
  .dual-path-inner {
    max-width: 1120px;
  }
  .demo-flexibility {
    max-width: 1000px;
  }
  .orgs-deploy {
    max-width: 1200px;
    padding: 36px 48px;
  }
  .closing-cta-inner {
    max-width: 880px;
  }

  /* Wizard — give the content column more room, keep the sticky
       sidebar (admin preview) the same so the phone frame size is
       consistent with the rest of the app. */
  .wizard {
    padding: 48px 32px 80px;
  }
  .wizard-layout {
    gap: 72px;
  }

  /* Feature/how/deploy grids — stay 3 columns but the containers
       above are wider, so cells naturally get more breathing room. */

  /* Trust grid already jumps to 4-col at 1024+, nothing to change */
}

@media (min-width: 1440px) {
  /* Bump one more tier to 1360 — leaves comfortable breathing room
       on the edges of a 1440p monitor without pushing to the bezels. */
  .nav-inner,
  .section-inner,
  .wizard,
  .footer-inner,
  .proof-bar-inner,
  .org-showcase-inner,
  .orgs-tailor-section,
  .enterprise-callout-inner {
    max-width: 1360px;
  }

  .hero {
    padding: 80px 40px 64px;
  }
  .hero-title {
    max-width: 1040px;
  }
  .hero-subtitle {
    max-width: 820px;
  }
  .hero-detect {
    max-width: 760px;
  }

  .section {
    padding: 72px 40px;
  }
  .section-subtitle {
    max-width: 820px;
  }

  .dual-path-inner {
    max-width: 1200px;
  }
  .orgs-deploy {
    max-width: 1280px;
  }
  .wizard {
    padding: 56px 40px 88px;
  }

  /* Feature grid — at this width 3 columns of 28px padding feels
       sparse. Keep 3 cols but widen gap slightly so cards breathe. */
  .feature-grid,
  .how-grid {
    gap: 24px;
  }
}

@media (min-width: 1720px) {
  /* Ultra-wide (27"+ 1440p, 4K): cap at 1480 so lines of text
       don't get uncomfortably long and the phone preview doesn't
       look lost in a sea of whitespace. */
  .nav-inner,
  .section-inner,
  .wizard,
  .footer-inner,
  .proof-bar-inner,
  .org-showcase-inner,
  .orgs-tailor-section,
  .enterprise-callout-inner {
    max-width: 1480px;
  }
}

/* =========================================================
   DESKTOP WALKTHROUGH + PREREQ FLOW LAYOUT
   The base is a narrow (420/460px) centered mobile-first
   column — which leaves ~1000px of horizontal whitespace on
   a 1440p display. On desktop we switch to a two-column
   grid: info/instructions stack on the left, a bigger
   phone mockup on the right. CSS grid with named areas
   lets us do this without any HTML restructuring.
   ========================================================= */
@media (min-width: 960px) {
  /* V2 Framed stage model. The walkthrough is a simple column —
       topbar, stepbar, banner, then the tinted stage that contains
       two symmetrical white panels, then the reassurance and
       launch rows. No grid-area routing any more. */
  .walkthrough {
    max-width: 1200px;
    padding: 20px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /* Undo the mobile auto-margin centering — structural layout
       here, not vertical fill. */
  .walkthrough #wk-caption.walkthrough-caption {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .walkthrough > .walkthrough-mode-banner {
    margin: 0;
    max-width: none;
  }
  .walkthrough > .launch-section {
    text-align: left;
  }
  .walkthrough > .launch-section .launch-btn-pro {
    width: auto;
    min-width: 280px;
  }

  /* Make the caption card the visual anchor of the left column
       instead of a small box floating in whitespace. It fills
       nearly the full phone-column height, vertically centres
       its content, and uses a larger headline so the single-
       sentence instruction reads as substantial and purposeful. */
  .walkthrough #wk-caption.walkthrough-caption {
    grid-area: caption;
    text-align: left;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.32;
    padding: 44px 36px 44px;
    /* Target ~80% of phone-frame height so the card reads as
           the visual anchor of the left column, not a floating
           box in whitespace. Falls back gracefully on shorter
           viewports via the vh clamp. */
    min-height: min(calc((100vh - 260px) * 0.9), 620px);
    border-left-width: 5px;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(0, 113, 227, 0.1);
    letter-spacing: -0.012em;
    position: relative;
    overflow: hidden;
  }
  /* Row between meta and caption stretches so the caption
       aligns bottom with the phone, filling the available space
       rather than floating with a lot of whitespace under it. */
  .walkthrough > .walkthrough-meta {
    align-self: start;
  }
  /* Move the "Your screen might look slightly different" line
       into the bottom-right of the caption card on desktop — it's
       supporting context, not its own separate row. */
  .walkthrough > .walkthrough-reassurance {
    grid-area: caption;
    align-self: end;
    justify-self: end;
    position: relative;
    z-index: 2;
    margin: 0 28px 16px 0;
    padding: 0;
    max-width: 320px;
    text-align: right;
    font-size: 12px;
    color: var(--text-tertiary);
    pointer-events: none;
  }
  /* Big step indicator that lives above the instruction text —
       injected via ::before so app.js doesn't need to know. Also
       animates the active → next transition via ::after (below). */
  .walkthrough #wk-caption.walkthrough-caption::before {
    content: "Do this now";
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  /* Hide the eyebrow on warn variant — that state has its own
       "IMPORTANT" badge from the warn rule. */
  .walkthrough #wk-caption.walkthrough-caption.warn::before {
    content: "Important — watch out";
    color: #b45309;
  }
  /* Caption content wrapper (the <span> app.js puts inside
       #wk-caption). We animate THIS on frame change so the
       eyebrow and card stay stable while the text itself
       animates in. */
  .walkthrough #wk-caption.walkthrough-caption > span {
    display: block;
    animation: wk-caption-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes wk-caption-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* A soft corner ornament — quiet diagonal gradient wash in
       the bottom-right of the card. Lifts the card visually
       without competing with the text. */
  .walkthrough #wk-caption.walkthrough-caption::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at center, rgba(0, 113, 227, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .walkthrough #wk-caption.walkthrough-caption > * {
    position: relative;
    z-index: 1;
  }

  /* Bigger phone on desktop — the whole point of reclaiming the
       horizontal space is that the preview becomes legible without
       squinting. Width uses `min(px, vh-based)` so a short viewport
       (laptop 800h) doesn't push the phone below the fold. */
  .walkthrough .phone-frame-wrap .phone-frame {
    width: min(290px, calc((100vh - 220px) * 248 / 510));
  }
  .walkthrough .phone-frame-wrap .tablet-frame {
    width: min(360px, calc((100vh - 220px) * 320 / 457));
  }
  /* Laptop is the widest frame — scale it up so Windows Hello and
       Mac Touch ID mockups are legible on desktop. Explicit width
       (not %) so the auto-sized grid column resolves against it —
       the base rule sets width:100% which collapses to 0 inside a
       grid auto column. Size is chosen so the left info column
       still has ~320px+ for caption + meta. */
  .walkthrough .phone-frame-wrap .laptop-frame {
    width: 520px;
    max-width: 520px;
  }
}

@media (min-width: 1280px) {
  .walkthrough {
    max-width: 1200px;
    padding: 24px 32px 40px;
    gap: 18px 72px;
  }
  .walkthrough .phone-frame-wrap .phone-frame {
    width: min(320px, calc((100vh - 220px) * 248 / 510));
  }
  .walkthrough .phone-frame-wrap .tablet-frame {
    width: min(400px, calc((100vh - 220px) * 320 / 457));
  }
  .walkthrough .phone-frame-wrap .laptop-frame {
    width: 660px;
    max-width: 660px;
  }
  .walkthrough #wk-caption.walkthrough-caption {
    font-size: 21px;
    padding: 28px 30px 30px;
  }
  .walkthrough > .walkthrough-meta {
    padding: 16px 20px;
  }
}

@media (min-width: 1440px) {
  .walkthrough {
    max-width: 1280px;
    gap: 20px 88px;
  }
  .walkthrough .phone-frame-wrap .phone-frame {
    width: min(340px, calc((100vh - 220px) * 248 / 510));
  }
  .walkthrough .phone-frame-wrap .laptop-frame {
    width: 740px;
    max-width: 740px;
  }
  .walkthrough #wk-caption.walkthrough-caption {
    font-size: 22px;
  }
}

/* Prereq-prep — same two-column story: back bar + title/sub + the
   highlighted "change this setting" instruction card + action buttons
   on the left, larger phone mockup on the right. */
@media (min-width: 960px) {
  .prereq-prep {
    max-width: 1000px;
    padding: 24px 32px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "top          top"
      "title        mockup"
      "sub          mockup"
      "instruction  mockup"
      "actions      mockup"
      "reassurance  mockup";
    gap: 14px 56px;
    align-content: start;
    text-align: left;
  }
  .prereq-prep > .prereq-prep-top {
    grid-area: top;
  }
  .prereq-prep > .prereq-prep-title {
    grid-area: title;
    margin: 0;
  }
  .prereq-prep > .prereq-prep-sub {
    grid-area: sub;
    margin: 0;
  }
  .prereq-prep > .prereq-prep-mockup-wrap {
    grid-area: mockup;
    align-self: center;
    margin: 0;
  }
  .prereq-prep > .prereq-prep-instruction {
    grid-area: instruction;
  }
  .prereq-prep > .prereq-prep-actions {
    grid-area: actions;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .prereq-prep > .prereq-prep-actions .btn-large {
    width: auto;
    min-width: 240px;
  }
  .prereq-prep > .prereq-prep-reassurance {
    grid-area: reassurance;
  }

  .prereq-prep-phone {
    width: 280px;
  }
}

@media (min-width: 1280px) {
  .prereq-prep {
    max-width: 1120px;
    gap: 16px 72px;
  }
  .prereq-prep-phone {
    width: 320px;
  }
}

/* =========================================================
   LANDING — PHISHING RESISTANCE SECTION
   Positioned between the proof bar and the edge-cases feature
   grid. Makes the business case for passkeys before diving
   into device-specific capabilities.
   ========================================================= */
.section-phishing {
  padding: 72px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, #fafbff 100%);
}
.phishing-heading {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 48px;
}
.phishing-heading .section-title {
  margin-bottom: 16px;
}
.phishing-heading .section-subtitle {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
}
.phishing-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .phishing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.phishing-card {
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
}
.phishing-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.phishing-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.phishing-card-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* =========================================================
   LANDING — AI TROUBLESHOOTER SHOWCASE
   Two-column section mirroring org-showcase layout. Left:
   copy + 4-step flow + CTAs. Right: animated phone mockup
   cycling through four phases (stuck -> upload -> analyze
   -> diagnose).
   ========================================================= */
.ai-showcase-section {
  padding: 72px 24px;
}
.ai-showcase-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  .ai-showcase-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 64px;
  }
}
.ai-showcase-copy {
  min-width: 0;
}
.ai-showcase-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 16px;
}
.ai-showcase-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.ai-showcase-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-showcase-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.ai-showcase-steps li strong {
  color: var(--text);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.ai-showcase-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
}
.ai-showcase-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-showcase-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ai-showcase-phone {
  width: 280px;
  aspect-ratio: 248 / 510;
  margin: 0;
}
@media (min-width: 1280px) {
  .ai-showcase-phone {
    width: 320px;
  }
}
.ai-showcase-screen {
  background: var(--bg-subtle);
  position: relative;
  overflow: hidden;
}
.ai-showcase-phase-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Reserve ~32px at the top so content clears the .phone-frame::before
       notch (22px tall at 8px offset). Each phase decides its own flow. */
  padding: 32px 0 14px;
  text-align: center;
  /* Opacity-only fade — no transform. A translateY would visually
       shift the inside of the phone screen during the transition and
       read as the whole phone bouncing, especially on mobile where
       the phone sits below changing-height text. */
  animation: ai-showcase-fade 0.4s ease;
  overflow: hidden;
}
@keyframes ai-showcase-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Shared fake iOS status bar — sits inside the reserved notch area
   just below the phone notch. Kept minimal so it reads as a native
   phone chrome without competing with the phase content. */
.ai-showcase-statusbar {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 22px 0;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #1d1d1f;
  pointer-events: none;
  z-index: 2;
}
.ai-showcase-phase-box--stuck .ai-showcase-statusbar,
.ai-showcase-phase-box--analyzing .ai-showcase-statusbar,
.ai-showcase-phase-box--diagnosis .ai-showcase-statusbar {
  color: #1d1d1f;
}
.ai-showcase-phase-box--upload .ai-showcase-statusbar {
  color: white;
}
.ai-showcase-statusbar-right {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ai-showcase-statusbar-battery {
  display: inline-block;
  width: 18px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 1px;
  position: relative;
}
.ai-showcase-statusbar-battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 2px;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}
.ai-showcase-statusbar-battery-fill {
  display: block;
  width: 80%;
  height: 100%;
  background: currentColor;
  border-radius: 1px;
}

/* -----------------------------------------------------------------
   Phase 0 — Stuck state. Browser URL bar + dimmed Microsoft list +
   Samsung Pass bottom sheet. No alert banner: the Samsung branding
   tells the story.
   ----------------------------------------------------------------- */
.ai-showcase-phase-box--stuck {
  background: #e5e7eb;
}
.ai-showcase-browser {
  margin: 0 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  backdrop-filter: blur(4px);
}
.ai-showcase-browser-url {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 9.5px;
  color: #374151;
  font-weight: 500;
}
.ai-showcase-stuck-bg {
  margin: 10px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.35;
  filter: blur(0.4px);
}
.ai-showcase-stuck-bg-row {
  height: 30px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.ai-showcase-samsung-sheet {
  margin-top: auto;
  padding: 14px 16px 16px;
  background: white;
  border-top: 1px solid #e5e7eb;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
  text-align: left;
}
.ai-showcase-samsung-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 8px;
}
.ai-showcase-samsung-title {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.005em;
}
.ai-showcase-samsung-sub {
  font-size: 10.5px;
  color: #6b7280;
  margin-top: 2px;
}
.ai-showcase-samsung-sync {
  margin-top: 8px;
  padding: 5px 8px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  font-size: 9.5px;
  color: #1d4ed8;
}
.ai-showcase-samsung-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ai-showcase-samsung-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.ai-showcase-samsung-btn--cancel {
  background: #f3f4f6;
  color: #374151;
}
.ai-showcase-samsung-btn--primary {
  background: #2563eb;
  color: white;
}

/* -----------------------------------------------------------------
   Phase 1 — Capture + upload. Flash pulse + miniaturised screenshot
   preview + upload meta + indeterminate progress bar.
   ----------------------------------------------------------------- */
.ai-showcase-phase-box--upload {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: white;
  padding-top: 32px;
}
.ai-showcase-upload-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  animation: ai-showcase-flash 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}
@keyframes ai-showcase-flash {
  0%,
  10%,
  100% {
    opacity: 0;
  }
  2% {
    opacity: 0.7;
  }
  6% {
    opacity: 0.2;
  }
}
.ai-showcase-upload-body {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}
.ai-showcase-upload-thumb {
  margin: 0 auto;
  width: 82px;
  aspect-ratio: 248 / 510;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  animation: ai-showcase-thumb-in 0.5s ease;
}
@keyframes ai-showcase-thumb-in {
  from {
    transform: scale(1.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.ai-showcase-upload-thumb-bar {
  height: 10px;
  background: #e5e7eb;
}
.ai-showcase-upload-thumb-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 5px;
  background: #f3f4f6;
  position: relative;
}
.ai-showcase-upload-thumb-line {
  height: 6px;
  background: #d1d5db;
  border-radius: 2px;
}
.ai-showcase-upload-thumb-line--short {
  width: 60%;
}
.ai-showcase-upload-thumb-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: white;
  border-radius: 6px 6px 0 0;
  border-top: 2px solid #2563eb;
}
.ai-showcase-upload-meta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  text-align: left;
}
.ai-showcase-upload-meta-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-showcase-upload-meta-title {
  font-size: 11.5px;
  font-weight: 600;
  color: white;
}
.ai-showcase-upload-meta-sub {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.ai-showcase-upload-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.ai-showcase-upload-bar-fill {
  height: 100%;
  width: 30%;
  background: var(--accent);
  border-radius: 999px;
  animation: ai-showcase-bar 2.4s ease-in-out infinite;
}
@keyframes ai-showcase-bar {
  0% {
    width: 10%;
    margin-left: 0;
  }
  50% {
    width: 60%;
    margin-left: 20%;
  }
  100% {
    width: 10%;
    margin-left: 90%;
  }
}
.ai-showcase-upload-bar-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------
   Phase 2 — Vision model scanning the screenshot. Thumbnail with a
   sweeping scan line + overlay grid + detected-token chips below.
   ----------------------------------------------------------------- */
.ai-showcase-phase-box--analyzing {
  background: #f8fafc;
  color: #1d1d1f;
  justify-content: flex-start;
}
.ai-showcase-scan {
  margin: 6px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
.ai-showcase-scan-thumb {
  position: relative;
  width: 110px;
  aspect-ratio: 248 / 510;
  background: #e5e7eb;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ai-showcase-scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 113, 227, 0.3) 70%,
    rgba(0, 113, 227, 0.9) 100%
  );
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.5);
  animation: ai-showcase-sweep 1.8s ease-in-out infinite;
  z-index: 3;
}
@keyframes ai-showcase-sweep {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}
.ai-showcase-scan-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  opacity: 0.15;
}
.ai-showcase-scan-grid span {
  border: 1px dashed #64748b;
}
.ai-showcase-scan-model {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #1d4ed8;
}
.ai-showcase-scan-model-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1d4ed8;
  animation: ai-showcase-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-showcase-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.ai-showcase-scan-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.ai-showcase-scan-token {
  padding: 2px 7px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  color: #4b5563;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  animation: ai-showcase-token-in 0.5s ease both;
}
.ai-showcase-scan-token:nth-child(1) {
  animation-delay: 0.2s;
}
.ai-showcase-scan-token:nth-child(2) {
  animation-delay: 0.5s;
}
.ai-showcase-scan-token:nth-child(3) {
  animation-delay: 0.8s;
}
.ai-showcase-scan-token:nth-child(4) {
  animation-delay: 1.1s;
}
.ai-showcase-scan-token--accent {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.3);
  font-weight: 600;
}
@keyframes ai-showcase-token-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------
   Phase 3 — Final diagnosis card. Clean white surface. Header with
   a green confidence dot + latency. Short body. Numbered 3-step
   fix. Primary Resume CTA pinned to the bottom.
   ----------------------------------------------------------------- */
.ai-showcase-phase-box--diagnosis {
  background: white;
  color: #1d1d1f;
  justify-content: flex-start;
}
.ai-showcase-diag {
  margin: 6px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  text-align: left;
}
.ai-showcase-diag-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ai-showcase-diag-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #047857;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ai-showcase-diag-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.ai-showcase-diag-latency {
  font-size: 9.5px;
  font-weight: 600;
  color: #9ca3af;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.ai-showcase-diag-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.ai-showcase-diag-body {
  font-size: 10.5px;
  line-height: 1.5;
  color: #4b5563;
}
.ai-showcase-diag-fix {
  margin-top: 2px;
  padding: 10px 10px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.ai-showcase-diag-fix-head {
  margin-bottom: 6px;
}
.ai-showcase-diag-fix-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.ai-showcase-diag-fix-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ai-showcase-diag-fix-steps li {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 10px;
  color: #1d1d1f;
  line-height: 1.35;
}
.ai-showcase-diag-fix-steps li span {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.ai-showcase-diag-cta {
  margin-top: auto;
  margin-bottom: 2px;
  padding: 9px 10px;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

/* Caption strip under the auto-cycling phone mockup. A single
   current-phase label ("Step 2 of 6 · Upload") sits over a compact
   dot-progress rail. Replaces the earlier six-pill row, which looked
   orphaned and noisy — this reads as a proper animation caption. */
.ai-showcase-phases {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  min-height: 44px;
}
.ai-showcase-phases-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.ai-showcase-phases-step {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.ai-showcase-phases-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ai-showcase-phases-dots {
  display: inline-flex;
  gap: 6px;
}
.ai-showcase-phase-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition:
    background-color 0.25s,
    transform 0.25s;
}
.ai-showcase-phase-dot--done {
  background: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.ai-showcase-phase-dot--active {
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (max-width: 640px) {
  .section-phishing {
    padding: 56px 20px;
  }
  .ai-showcase-section {
    padding: 56px 20px;
  }
  .ai-showcase-phone {
    width: 240px;
  }
}

/* -----------------------------------------------------------------
   Phases 3 + 4 — Android settings screens with the highlighted row.
   Reused structure: header + list with coloured icon cells. A pulsing
   accent ring draws the eye to the row the user "taps" next.
   ----------------------------------------------------------------- */
.ai-showcase-phase-box--android,
.ai-showcase-phase-box--picker {
  background: #f3f4f6;
  color: #1d1d1f;
  justify-content: flex-start;
  padding: 32px 0 0;
}
.ai-showcase-diag-banner {
  margin: 4px 10px 8px;
  padding: 6px 9px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  font-size: 9.5px;
  color: #047857;
  display: flex;
  gap: 6px;
  align-items: center;
  text-align: left;
  line-height: 1.2;
}
/* Wrap used by phases 3-5 of the AI showcase to overlay the diagnosis
 * banner on top of a real renderMockup() output. The mockup fills the
 * .phone-screen as usual; the banner pins to the top with a slight
 * shadow so it reads as an in-product callout, not chrome.  */
.ai-showcase-fix-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.ai-showcase-fix-wrap .ai-showcase-diag-banner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  margin: 0;
  z-index: 4;
  background: rgba(16, 185, 129, 0.94);
  border-color: rgba(16, 185, 129, 0.6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ai-showcase-fix-wrap .ai-showcase-diag-banner strong {
  color: #ecfdf5;
}
.ai-showcase-fix-wrap .ai-showcase-diag-banner-dot {
  background: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.ai-showcase-diag-banner strong {
  color: #065f46;
  font-weight: 700;
  margin-right: 2px;
}
.ai-showcase-diag-banner-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}
.ai-showcase-android-header {
  margin: 2px 10px 8px;
  padding: 6px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.005em;
}
.ai-showcase-android-header--back {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 2px;
}
.ai-showcase-android-header--dim {
  opacity: 0.5;
}
.ai-showcase-android-list {
  margin: 0 8px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ai-showcase-android-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #f3f4f6;
}
.ai-showcase-android-row:last-child {
  border-bottom: none;
}
.ai-showcase-android-row-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-showcase-android-row-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.ai-showcase-android-row-title {
  font-size: 11px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-showcase-android-row-sub {
  font-size: 9px;
  color: #6b7280;
  line-height: 1.3;
  margin-top: 1px;
}
.ai-showcase-android-row-sub--warn {
  color: #b45309;
  font-weight: 600;
}
.ai-showcase-android-row-chevron {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  padding-right: 2px;
}
.ai-showcase-android-row--highlight {
  background: rgba(0, 113, 227, 0.04);
}
.ai-showcase-android-row-ring {
  position: absolute;
  inset: -1px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  pointer-events: none;
  animation: ai-showcase-ring 1.6s ease-in-out infinite;
}
@keyframes ai-showcase-ring {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* -----------------------------------------------------------------
   Phase 5 — Provider picker bottom sheet with Google selected.
   ----------------------------------------------------------------- */
.ai-showcase-picker-sheet {
  margin-top: auto;
  background: white;
  border-radius: 18px 18px 0 0;
  padding: 8px 14px 16px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  text-align: left;
  animation: ai-showcase-sheet-up 0.45s ease;
}
@keyframes ai-showcase-sheet-up {
  from {
    transform: translateY(30%);
  }
  to {
    transform: translateY(0);
  }
}
.ai-showcase-picker-sheet-grab {
  width: 34px;
  height: 3px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 0 auto 8px;
}
.ai-showcase-picker-title {
  font-size: 13px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.005em;
}
.ai-showcase-picker-sub {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 10px;
}
.ai-showcase-picker-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.ai-showcase-picker-option:last-child {
  margin-bottom: 0;
}
.ai-showcase-picker-option--selected {
  background: var(--accent-subtle);
}
.ai-showcase-picker-radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  position: relative;
}
.ai-showcase-picker-radio--on {
  border-color: var(--accent);
}
.ai-showcase-picker-radio--on::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
  border-radius: 50%;
}
.ai-showcase-picker-option-body {
  flex: 1;
  min-width: 0;
}
.ai-showcase-picker-option-title {
  font-size: 11px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.2;
}
.ai-showcase-picker-option-sub {
  font-size: 9px;
  color: #6b7280;
  margin-top: 1px;
}
.ai-showcase-picker-option-ring {
  position: absolute;
  inset: -1px;
  border: 2px solid var(--accent);
  border-radius: 11px;
  pointer-events: none;
  animation: ai-showcase-ring 1.6s ease-in-out infinite;
}

/* =========================================================
   COMMIT 1 — Passkey plain-English primers
   Shown on the phone picker and other first-encounter screens
   where a non-technical user needs the "what's a passkey?"
   question answered before they can follow the flow.
   ========================================================= */
.passkey-primer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 640px;
  margin: 18px auto 8px;
  padding: 14px 16px;
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
}
.passkey-primer > svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}
.passkey-primer strong {
  color: var(--text-primary);
  font-weight: 600;
}

.picker-reassurance {
  max-width: 640px;
  margin: 24px auto 0;
  padding: 8px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Device picker sits inside .walkthrough-portal now (same chrome
   as the walkthrough). This scopes the old .context-picker content
   styling to the new .context-picker-body inside the portal. */
.context-picker
  .walkthrough-portal
  .walkthrough-portal-header
  .walkthrough-portal-meta
  .walkthrough-vendor {
  /* Explicitly scoped so the vendor pill in the picker header
       reads as a step indicator, not the mobile meta row. */
}
.context-picker-body {
  text-align: center;
  padding: 8px 0 0;
}
.context-picker-body .vendor-grid,
.context-picker-body .passkey-primer,
.context-picker-body .picker-reassurance,
.context-picker-body .picker-escape {
  max-width: none;
}

/* Small reassurance line under the walkthrough caption —
   calms "my screen looks different" panic. */
.walkthrough-reassurance {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.4;
  padding: 4px 8px 0;
  max-width: 320px;
  margin: 0 auto;
}

/* =========================================================
   COMMIT 2 — Branded demo framing
   Persistent PREVIEW badge (top-right) + demo intro
   interstitial. Shown only when orgConfig._demo === true —
   i.e. a buyer previewing with their tenant's branding
   applied. Never shown on real paid embeds (hidePitch=true)
   or the public unbranded demo (no orgConfig).
   ========================================================= */
/* PREVIEW watermark is now hidden entirely — the org-badge
   in the nav + the branded portal already make it clear that
   the buyer is previewing a demo. A sticky banner above the
   nav was adding vertical height to the whole header area and
   the user specifically asked for the site header not to grow
   when a demo starts. */
.demo-watermark {
  display: none;
}
.demo-watermark-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: white;
  border-radius: 0;
  font-size: 12px;
  line-height: 1;
  box-shadow: none;
  max-width: none;
}
.demo-watermark-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25);
  flex-shrink: 0;
  animation: demo-watermark-pulse 2s ease-in-out infinite;
}
@keyframes demo-watermark-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}
.demo-watermark-label {
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #22d3ee;
  font-size: 10.5px;
}
.demo-watermark-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
}
.demo-watermark-desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-watermark-desc strong {
  color: white;
  font-weight: 700;
}
@media (max-width: 640px) {
  .demo-watermark-desc {
    font-size: 11px;
  }
}

/* Demo intro interstitial — shown once when a buyer enters
   the branded demo. Frames the whole preview so they know
   it's not a real production deploy. */
.demo-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.demo-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.demo-intro-title {
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.demo-intro-title strong {
  color: var(--accent);
  font-weight: 700;
}
.demo-intro-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 640px;
}
.demo-intro-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.demo-intro-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.demo-intro-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}
.demo-intro-step > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.demo-intro-step strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.demo-intro-step span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.demo-intro-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  /* Compress every band so the "Start the preview" button is above
   * the fold on a typical Android viewport (412 x ~740 with URL bar
   * visible). Without these overrides the intro is ~824 px tall and
   * forces the button below the fold on every URL-bar-visible state. */
  .demo-intro {
    padding: 14px 16px 20px;
  }
  .demo-intro-badge {
    margin-bottom: 10px;
    font-size: 10.5px;
    padding: 4px 10px 4px 8px;
  }
  .demo-intro-title {
    font-size: clamp(20px, 5.2vw, 26px);
    line-height: 1.18;
    margin-bottom: 8px;
  }
  .demo-intro-sub {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 14px;
  }
  .demo-intro-steps {
    gap: 8px;
    margin-bottom: 14px;
  }
  .demo-intro-step {
    gap: 12px;
    padding: 10px 12px;
  }
  .demo-intro-step-num {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .demo-intro-step > div:last-child {
    gap: 2px;
  }
  .demo-intro-step strong {
    font-size: 13.5px;
  }
  .demo-intro-step span {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .demo-intro-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .demo-intro-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   COMMIT 3 — Pre-launch reassurance + Contact IT escalation
   ========================================================= */
.pre-launch-extras {
  margin-top: 4px;
}
.pre-launch-extras > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  padding: 8px 0;
  list-style: none;
  user-select: none;
}
.pre-launch-extras > summary::-webkit-details-marker {
  display: none;
}
.pre-launch-extras > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s;
}
.pre-launch-extras[open] > summary::before {
  transform: rotate(90deg);
}
.pre-launch-reassure {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.4;
}

/* Contact-IT escalation card on the post-launch stuck landing —
   styled subtly so it doesn't compete with the primary three
   actions above it (I did it / Got stuck / Watch again) but is
   present for the user who's tried everything. */
.stuck-action--escalate {
  text-decoration: none;
  color: inherit;
  margin-top: 4px;
  border-style: dashed;
  background: transparent;
}
.stuck-action--escalate .stuck-action-icon {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}
.stuck-action--escalate:hover {
  border-style: solid;
  background: var(--bg-card);
}

/* =========================================================
   WALKTHROUGH V2 FRAMED LAYOUT
   Desktop-only. Adds: a persistent stepper rail, a top
   context strip (back link + vendor chip + branding), a
   tinted phone panel on the right, and inline prev/next
   buttons with a keyboard hint in the caption column.
   Mobile falls through to the existing single-column rules.
   ========================================================= */
/* Default (mobile + below-breakpoint): hide the new chrome
   so nothing changes for small screens. */
.walkthrough-topbar,
.walkthrough-stepbar,
.walkthrough-inline-nav {
  display: none;
}

@media (min-width: 960px) {
  .walkthrough-topbar {
    display: flex;
  }
  .walkthrough-stepbar {
    display: flex;
  }
  .walkthrough-inline-nav {
    display: flex;
  }

  /* Hide the mobile meta row; the desktop portal header +
       stepper replace it. */
  .walkthrough .walkthrough-meta {
    display: none;
  }

  /* ---- The simulated portal ----
       Self-contained neutral container — subtle off-white gradient,
       not the blue wash from v1. Same portal container whether the
       user is on the device picker (step 1) or the walkthrough
       (step 2) — the admin configuration is separate. */
  .walkthrough-portal {
    background: linear-gradient(180deg, #fafbfd 0%, #f3f5f9 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 32px 36px 36px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  /* Portal header — dedicated brand module at the top. Logo on
       the left, larger org title + "Passkey setup" subtitle, with
       a meta chip on the right showing the current flow step. */
  .walkthrough-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .walkthrough-portal-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }
  .walkthrough-portal-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--bg);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  /* Tenant-uploaded logos come in every aspect ratio — compact
       square marks (Apple, Microsoft), wide wordmarks (Slack, IBM),
       and brand "banners" that are wider than tall. Forcing them into
       a 56×56 square with object-fit: contain letterboxes wide marks
       down to ~20px of visible content. Instead, when an <img> is
       present, let the container grow horizontally: hold a 56px
       height, drop width to auto, and cap at 200px so a 5:1 banner
       still sits nicely in the header without dwarfing the title.
       Badge fallback (.mockup-org-logo-box) stays square below. */
  .walkthrough-portal-logo:has(img) {
    width: auto;
    min-width: 56px;
    max-width: 200px;
    padding: 3px 8px;
  }
  .walkthrough-portal-logo img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  .walkthrough-portal-logo--default {
    color: var(--text);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .walkthrough-portal-logo--default svg {
    width: 32px;
    height: 32px;
  }
  /* When the org config uses a badge (letters on a color bg),
       the orgLogoHtml returns a span with inline styles. Fill the
       logo container, strip the base padding + tight letter-spacing
       so 4-char badges ("ACME") don't clip, and auto-scale font so
       long badges still fit. */
  .walkthrough-portal-logo .mockup-org-logo-box {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(9px, 11px, 13px);
    font-weight: 800;
    color: white;
    letter-spacing: 0.02em;
    line-height: 1;
    overflow: hidden;
  }
  /* Stacked badge variant (logo + sub-text) needs different
       padding, else the sub-line gets cut off. */
  .walkthrough-portal-logo .mockup-org-logo-box.stacked {
    padding: 3px 2px;
    font-size: 10px;
  }
  .walkthrough-portal-titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .walkthrough-portal-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .walkthrough-portal-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
  }
  .walkthrough-portal-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .walkthrough-portal-meta .walkthrough-vendor {
    background: var(--bg);
    border: 1px solid var(--border-subtle);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    box-shadow: var(--shadow-sm);
  }
  .walkthrough-portal-meta .walkthrough-vendor svg {
    color: var(--accent);
  }

  /* Stepbar inside the portal — strip the border since it now
       sits on the blue wash. */
  .walkthrough-portal .walkthrough-stepbar {
    border-bottom: none;
    padding: 0;
    margin: 0;
  }
  .walkthrough-portal .wk-step:hover {
    background: rgba(255, 255, 255, 0.6);
  }

  /* Stage inside the portal — no more own bg, just a transparent
       grid of two white panels. The portal itself carries the tint. */
  .walkthrough-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: 24px;
    align-items: stretch;
  }
  .walkthrough-text-panel,
  .walkthrough-phone-panel {
    background: var(--bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 32px;
  }
  .walkthrough-text-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
  }
  /* Pin the Back/Next nav to the bottom of the text panel so the
       buttons stay in a fixed screen position across frames. Before
       this the panel used justify-content: center, which re-centred
       the caption+nav+reassurance block whenever caption height
       changed, forcing the user to chase the Next button with their
       mouse every step. margin-top:auto pushes the nav (and the
       reassurance that follows) to the bottom of the flex column
       regardless of how tall the caption happens to be. */
  .walkthrough-text-panel .walkthrough-inline-nav {
    margin-top: auto;
  }
  .walkthrough-phone-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
  }
  .walkthrough-stage .walkthrough-player {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    margin: 0;
  }

  /* Launch CTA + reassurance live INSIDE the text panel now
       (not in a separate portal footer below the stage). Nothing
       sits outside the portal — the whole user experience is one
       contained box. */
  .walkthrough-text-panel .launch-section {
    width: 100%;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .walkthrough-text-panel .launch-section .launch-btn-pro {
    width: 100%;
    min-width: 0;
  }
  .walkthrough-text-panel .launch-section .launch-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
  }
  .walkthrough-text-panel .walkthrough-reassurance {
    margin: 14px 0 0;
    padding: 0;
    text-align: left;
    max-width: none;
    font-size: 12.5px;
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--text-tertiary);
  }
  .walkthrough-text-panel .walkthrough-reassurance svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
  }

  /* Page-level back link sits above the portal with breathing
       room — admin chrome, not part of the simulated experience. */
  .walkthrough-pagenav {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 6px;
  }
  /* Reset the absolute positioning the earlier rule put it in so
       it sits normally under the nav. */
  .walkthrough > .walkthrough-reassurance {
    position: static;
    align-self: start;
    justify-self: start;
    margin: 12px 0 0;
    padding: 0;
    max-width: none;
    text-align: left;
    font-size: 12.5px;
    color: var(--text-tertiary);
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .walkthrough > .walkthrough-reassurance > svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
  }

  /* V2 Framed: on desktop the caption container is a transparent
       structured column, not a big tinted card. The eyebrow, headline,
       sub and optional callout stack vertically with proper hierarchy
       (like the handoff mockup). Mobile still uses the existing bg
       card for compact readability.

       `max-height: none` is important: the global `body.embedded-mode
       .walkthrough-caption` rule caps the caption at 64px for mobile
       iframe layouts. Without this reset, the companion-preamble
       frame's QR + headline + sub overflow that 64px and render on
       top of the Back / Next buttons below. */
  .walkthrough #wk-caption.walkthrough-caption {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 28px 4px;
    min-height: auto;
    max-height: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    border-radius: 0;
    overflow: visible;
  }
  .walkthrough #wk-caption.walkthrough-caption::before,
  .walkthrough #wk-caption.walkthrough-caption::after {
    display: none;
  }

  .wk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .wk-eyebrow--do {
    color: var(--accent);
  }
  .wk-eyebrow--warn {
    color: #b45309;
  }
  /* Phase label for 2-phase flows (Samsung's "set up your phone"
       followed by "register in Microsoft"). Sits above the eyebrow
       as a tiny overline tag so the user reads "Part 1 of 2" before
       the more prominent "Do this now" call-to-action. Single-phase
       flows omit the label entirely — the component only renders
       when multiple phases exist. */
  .wk-phase {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary, #86868b);
    margin-bottom: 8px;
    padding: 3px 9px;
    background: var(--bg-subtle, #f4f5f7);
    border-radius: 999px;
  }

  .wk-headline {
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.12;
    color: var(--text-primary);
    margin: 0 0 14px;
    text-wrap: balance;
  }
  .wk-headline em.em-key,
  .wk-headline .em-key {
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
  }

  .wk-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 20px;
    max-width: 48ch;
    text-wrap: pretty;
  }
  .wk-sub em.em-key,
  .wk-sub .em-key {
    font-style: normal;
    font-weight: 600;
    color: var(--text-primary);
  }

  .wk-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.55;
    color: var(--warning);
    margin: 0 0 6px;
    max-width: 52ch;
  }
  .wk-callout-icon {
    flex-shrink: 0;
    color: var(--warning);
    margin-top: 2px;
  }
  .wk-callout strong {
    color: var(--warning);
    font-weight: 700;
  }

  /* No special warn-variant styling on the caption container now
       that the visual treatment lives in the eyebrow + callout. */
  .walkthrough #wk-caption.walkthrough-caption.warn {
    background: transparent;
    border: none;
  }
}

/* Mobile: portal-header is hidden, so the meta row carries the
   vendor chip + step counter in one compact strip above the caption. */
@media (max-width: 959px) {
  .walkthrough-meta {
    justify-content: space-between;
    padding: 2px 0;
  }
  .walkthrough-meta .walkthrough-vendor {
    padding: 4px 10px;
    font-size: 12px;
    margin: 0;
  }
}

/* Mobile caption: ruthlessly simple — just the instruction headline.
   The "Do this now" eyebrow is noise at this size (every frame IS
   "do this now"); sub + callout + phase label are hidden so the
   caption reads as one clean line of bold text. Phase framing
   ("Part 1 of 2") stays on desktop where there's room; on mobile
   the step rail's numbered pills already communicate progress. */
@media (max-width: 959px) {
  .wk-eyebrow {
    display: none;
  }
  .wk-sub {
    display: none;
  }
  .wk-callout {
    display: none;
  }
  .wk-phase {
    display: none;
  }
  /* Belt-and-braces: force the caption to stack its children
       vertically. Previously flex-direction defaulted to row and
       any element that slipped through the display:none filters
       above (e.g. a newly-added .wk-* component) would sit inline
       next to the headline and wrap messily — reviewer caught this
       Apr 2026 on the Samsung warn frame. Column means anything
       that renders still looks clean. */
  .walkthrough #wk-caption.walkthrough-caption {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .wk-headline {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.35;
    margin: 0;
    color: var(--text-primary);
  }
  .wk-headline em.em-key,
  .wk-headline .em-key {
    color: var(--accent);
    font-weight: 700;
  }
  /* Warn captions: swap the caption card to a warn colour so the
       "watch out" signal survives without the eyebrow label. */
  .walkthrough #wk-caption.walkthrough-caption.warn {
    background: #fef3c7;
    border-color: #fde68a;
    border-left-color: #d97706;
  }
  .walkthrough #wk-caption.walkthrough-caption.warn .wk-headline {
    color: #7c2d12;
  }
}

/* ---- Top context strip ---- */
.walkthrough-topbar {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.walkthrough-topbar .walkthrough-back {
  margin: 0;
}
.walkthrough-context {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.walkthrough-context .walkthrough-vendor {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.walkthrough-context-sep {
  color: var(--text-tertiary);
}
.walkthrough-brand-chip {
  padding: 5px 12px;
  background: var(--accent-subtle);
  color: var(--accent-deep);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- Stepper rail ----
   Long walkthroughs (Samsung synced_alt is ~14 frames) used to cram
   every step into equal-width pills — each pill ended up ~50 px wide
   and the title truncated to "O.." / "M.." / "T..", which is noise.
   New layout:
     • DONE steps  → compact ✓ dot, content width, hugging the left
     • ACTIVE step → pill sized to its title (content width) — no more,
                     no less — sitting just after the done run
     • UPCOMING    → each dot gets flex:1 so they distribute evenly
                     across the leftover space on the right
   The active pill isn't allowed to eat every remaining pixel any more,
   which is what created the awkward gap between "Open Security Info"
   and "10". It's now just big enough for its text, and the remaining
   dots spread neatly to the far right. */
.walkthrough-stepbar {
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10px 4px 0;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 4px;
  scrollbar-width: none;
  align-items: center;
}
.walkthrough-stepbar::-webkit-scrollbar {
  display: none;
}
.wk-step {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 6px 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-tertiary);
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.12s;
  border-radius: 0;
  position: relative;
}
.wk-step:hover {
  color: var(--text-secondary);
}
.wk-step:hover .wk-step-num {
  background: var(--bg-subtle);
}
.wk-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.wk-step-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success, #1f8a55);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wk-step-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* Hidden by default — only the active step's title renders. */
  display: none;
}
.wk-step--active {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 12px 10px;
  gap: 10px;
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.wk-step--active .wk-step-num {
  background: var(--accent);
  color: white;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.wk-step--active .wk-step-title {
  display: inline;
  font-weight: 700;
}
.wk-step--done {
  color: var(--text-secondary);
}
.wk-step--upcoming {
  /* Distribute upcoming dots evenly across whatever horizontal
       space is left after the done run + active pill. Center the
       dot inside each slot so the spacing reads as "tidy ruler"
       rather than "bunched on the right". */
  flex: 1 1 0;
  min-width: 28px;
  justify-content: center;
  opacity: 0.85;
}

/* ---- Inline prev/next nav under the caption ---- */
.walkthrough-inline-nav {
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.walkthrough-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    opacity 0.12s;
}
.walkthrough-nav-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--text-tertiary);
}
.walkthrough-nav-btn--next {
  background: var(--accent);
  color: white;
  border-color: transparent;
}
.walkthrough-nav-btn--next:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: transparent;
}
.walkthrough-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.walkthrough-kbd-hint {
  font-size: 12.5px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.sp-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border-subtle);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ---- Tinted phone panel ---- */
@media (min-width: 960px) {
  .walkthrough > .walkthrough-player {
    background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-muted) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 28px 20px;
    box-shadow: var(--shadow-sm);
  }
  /* Hide the side prev/next arrows on desktop — the inline
       nav buttons under the caption replace them. Mobile keeps
       the side arrows since there's no room for inline nav. */
  .walkthrough .wk-nav-btn--side {
    display: none;
  }
}

/* =========================================================
   POST-AUDIT POLISH (issues 9/11/12/13/14)
   Small visual fixes from the end-to-end audit.
   ========================================================= */

/* #11: Post-launch stuck title was breaking on the em-dash
   ("When you're done — / or if you're stuck"). Balance the
   wrap so the dash stays with the preceding word. */
.stuck-title {
  text-wrap: balance;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* #9 legacy: the old six-pill row used to wrap awkwardly at
   narrow-desktop widths. The new label-plus-dots strip is a
   single compact line, so no override needed. Block intentionally
   left empty as a marker in case we reintroduce the variant. */

/* #12: Mobile device picker hid the "HANDLES SAMSUNG PASS" /
   "MI AUTOFILL HANDLED" badges in the 3-col grid. Show them as
   tiny chips below the device label instead. */
@media (max-width: 640px) {
  .vendor-card-warn {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    gap: 3px;
  }
  .vendor-card-warn svg {
    width: 10px;
    height: 10px;
  }
}

/* #13: Demo launcher policy tabs stay on a single row on mobile —
   equal-width segmented control, symmetric under the label. */

/* #14: Closing-CTA stats row breaks awkwardly on narrow mobile.
   Let the stats wrap onto two columns with generous gap. */
@media (max-width: 480px) {
  .closing-cta-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
  }
}

/* #8: Feedback widget emoji faces were rendering small and
   lost. Give them a bit more presence on the success screen. */
.feedback-widget .feedback-rating {
  gap: 10px;
}
.feedback-widget .feedback-rating button {
  font-size: 24px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  transition:
    background-color 0.12s,
    transform 0.12s;
}
.feedback-widget .feedback-rating button:hover {
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

/* =========================================================
   WALKTHROUGH PREAMBLE — QR/URL handoff rendered inside the
   caption column when the first frame is a companion-mode
   preamble. Sits beside the passive Security Info mockup.
   ========================================================= */
/* Stacked (narrow-viewport) companion stage: reserve caption-panel
   height so the phone mockup below doesn't jump when moving from
   the QR preamble (~340 px) to a normal walkthrough caption (~100 px).
   Only applies when:
     • viewport is stacked (< 960 px, where caption and phone panels
       flow vertically instead of side-by-side)
     • walkthrough is in companion mode (phone has a QR preamble at all)
   Direct-mode walkthroughs on actual phones don't have a preamble,
   so reserving 340 px just created dead vertical space that pushed
   the phone off-screen. S24 Ultra user caught this Apr 2026. */
@media (max-width: 959px) {
  /* Only reserve the tall preamble height on the preamble frame
     itself (the QR+URL handoff card, marked by .wk-handoff). On
     subsequent frames, the panel shrinks to content so the phone
     mockup below can sit above the fold. Users reported the phone
     being pushed off-screen on mobile during the standard frames —
     accepting a 200 px "jump" when leaving the preamble is a better
     trade than burying the mockup. */
  body.companion-walkthrough
    .walkthrough-stage
    .walkthrough-text-panel:has(.wk-handoff) {
    min-height: 340px;
  }
}

.wk-handoff {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
  text-align: center;
}
.wk-handoff-qr {
  /* Smaller than before (was 168 px) so the preamble caption panel
       isn't dramatically taller than a normal walkthrough caption —
       was causing a 200 px+ vertical jump on the phone mockup when
       moving from preamble → frame 1 on stacked (narrow) layouts
       where stage is a 1-col grid rather than 2-col. */
  width: 140px;
  height: 140px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wk-handoff-qr img {
  width: 100%;
  height: 100%;
  display: block;
}
.wk-handoff-qr--failed {
  background: var(--bg-subtle);
}
.wk-handoff-qr--failed::after {
  content: "QR unavailable";
  color: var(--text-tertiary);
  font-size: 12px;
}
.wk-handoff-or {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wk-handoff-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--text-primary);
  max-width: 100%;
}
.wk-handoff-url code {
  font: inherit;
  color: var(--text-primary);
}
.wk-handoff-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family:
    "Inter",
    -apple-system,
    sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s;
}
.wk-handoff-copy:hover {
  background: var(--bg-subtle);
  border-color: var(--text-tertiary);
}

/* On desktop the handoff lives in a wider panel — let the QR +
   URL share a horizontal row. */
@media (min-width: 960px) {
  .wk-handoff {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
  }
  .wk-handoff-qr {
    flex-shrink: 0;
    width: 136px;
    height: 136px;
  }
  .wk-handoff-or {
    align-self: center;
  }
  .wk-handoff-url {
    flex: 1;
    min-width: 180px;
    justify-content: space-between;
  }
}

/* ==============================================================
   Large-display tiering for the branded org landing (/?org=slug).
   Matches the marketing site's container ramp (1120 → 1280 → 1360
   → 1480) so a customer's org page never feels narrower than the
   public site next to it. Type, logo, and step chrome scale up in
   step with each tier so the layout stays proportioned instead of
   just stretching wider text across more pixels.

   Placed at the end of the stylesheet so the cascade wins against
   the per-element base rules declared earlier in this file.
   ============================================================== */

/* Tier 1 — laptops (1280px ≤ viewport < 1440px). Bump container
   to 1280 matching .section-inner's first tier. */
@media (min-width: 1280px) {
  .reg-intro { max-width: 1280px; }
}

/* Tier 2 — large laptops / small external monitors (≥1440px).
   Bump to 1360, scale hero chrome + type + step cards. */
@media (min-width: 1440px) {
  .reg-intro {
    max-width: 1360px;
    padding: 36px 32px 40px;
    gap: 24px 32px;
  }
  .reg-intro-hero {
    padding: 40px 40px 32px;
    border-radius: 22px;
  }
  .reg-intro-brand-mark {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    padding: 7px;
  }
  .reg-intro-masthead {
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 24px;
  }
  .reg-intro-masthead-org { font-size: 22px; }
  .reg-intro-masthead-doctype {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .reg-intro-title {
    font-size: 34px;
    margin-bottom: 12px;
  }
  .reg-intro-sub {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .reg-intro-cta .btn-large {
    padding: 13px 34px;
    font-size: 15.5px;
    border-radius: 12px;
  }
  .reg-intro-meta {
    margin-top: 24px;
    gap: 10px;
  }
  .reg-intro-meta-pill {
    font-size: 15px;
    padding: 7px 14px;
  }
  .reg-intro-steps {
    padding: 14px;
    border-radius: 16px;
    gap: 6px;
  }
  .reg-intro-step {
    padding: 16px 14px;
    grid-template-columns: 34px 44px 1fr;
    gap: 16px;
  }
  .reg-intro-step-num {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .reg-intro-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .reg-intro-step-title {
    font-size: 20px;
  }
  .reg-intro-section-eyebrow {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .reg-intro-support {
    padding: 20px 22px;
    grid-template-columns: 52px 1fr auto;
    gap: 18px;
  }
  .reg-intro-support-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
  }
  .reg-intro-support-title { font-size: 18px; }
  .reg-intro-reassurance {
    padding: 16px 18px;
    font-size: 14px;
  }
  .reg-intro-foot {
    padding-top: 18px;
    font-size: 13px;
  }
  .reg-intro-foot-mark {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }
}

/* Tier 3 — very wide monitors (≥1800px). Match the marketing
   site's top tier of 1480 so a 1440p/2560 screen fills equally.
   Type is already comfortable at 1360 — no further bump needed. */
@media (min-width: 1800px) {
  .reg-intro {
    max-width: 1480px;
    padding: 40px 32px 44px;
    gap: 28px 36px;
  }
  .reg-intro-hero { padding: 44px 44px 36px; }
  .reg-intro-title { font-size: 38px; }
  .reg-intro-sub { font-size: 17px; }
}

/* ============================================================================
   ENTERPRISE POLISH — final layer for branded URL visits.
   Loads after every other rule so it wins specificity ties. Three
   themes:

     1. Premium typography rhythm — refined letter-spacing,
        line-heights, and font-weight pairings for each surface.
     2. Multi-layer depth — phone-frame shadow, hero card shadow,
        button shadow each composed from a contact shadow + a soft
        ambient layer. Single-layer shadows look flat at every
        zoom level; two layers fake real depth without bloating
        paint cost.
     3. Smooth motion — frame fades, hover micro-interactions, and
        a respectful `prefers-reduced-motion` opt-out so the page
        feels alive without nauseating motion-sensitive users.

   Scoped to `body.embedded-mode` (which now applies to every
   branded URL — see app.js around line 12625) so the marketing
   site / admin portal don't pick up these tweaks unintentionally.
   ============================================================================ */

/* --- 1. Typography refinements --- */
body.embedded-mode {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.embedded-mode .walkthrough-title,
body.embedded-mode .walkthrough-title--big,
body.embedded-mode .walkthrough-portal-title,
body.embedded-mode .reg-intro-title,
body.embedded-mode .context-picker-title {
  letter-spacing: -0.022em;
  font-weight: 700;
  line-height: 1.12;
}
body.embedded-mode .walkthrough-sub,
body.embedded-mode .reg-intro-sub,
body.embedded-mode .context-picker-sub,
body.embedded-mode .walkthrough-portal-subtitle {
  letter-spacing: -0.005em;
  line-height: 1.45;
}
body.embedded-mode .walkthrough-step-eyebrow,
body.embedded-mode .reg-intro-section-eyebrow,
body.embedded-mode .reg-intro-masthead-doctype {
  letter-spacing: 0.14em;
  font-feature-settings: "ss01", "cv11";
}

/* --- 2. Multi-layer depth --- */
body.embedded-mode .phone-frame {
  /* Two-layer shadow: tight contact shadow grounds the phone, soft
     ambient shadow gives the depth-of-field cue. The accent var
     tints the ambient layer so the phone feels "of" the brand
     palette rather than floating on a generic grey. */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 18px 38px -8px color-mix(in srgb, var(--accent, #0c5e82) 18%, rgba(15, 23, 42, 0.18));
  border-radius: 38px;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1);
}
body.embedded-mode .laptop-frame {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.07),
    0 22px 44px -10px color-mix(in srgb, var(--accent, #0c5e82) 14%, rgba(15, 23, 42, 0.16));
  border-radius: 14px;
}
body.embedded-mode .reg-intro-hero {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -12px color-mix(in srgb, var(--accent, #0c5e82) 12%, rgba(15, 23, 42, 0.10));
}
body.embedded-mode .launch-btn-pro,
body.embedded-mode .reg-intro-cta .btn-primary,
body.embedded-mode .stuck-action.btn-primary {
  /* Buttons get a hover-lift that reads as "tappable" without
     screaming. Shadow goes from contact-only at rest to a small
     ambient on hover so the lift feels physical. */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 4px 12px -4px color-mix(in srgb, var(--accent, #0c5e82) 24%, rgba(15, 23, 42, 0.12));
  transition:
    transform 0.18s cubic-bezier(0.2, 0.7, 0.25, 1),
    box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.25, 1),
    filter 0.18s ease;
}
body.embedded-mode .launch-btn-pro:hover,
body.embedded-mode .reg-intro-cta .btn-primary:hover,
body.embedded-mode .stuck-action.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.10),
    0 10px 22px -6px color-mix(in srgb, var(--accent, #0c5e82) 32%, rgba(15, 23, 42, 0.18));
}
body.embedded-mode .launch-btn-pro:active,
body.embedded-mode .reg-intro-cta .btn-primary:active,
body.embedded-mode .stuck-action.btn-primary:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.05s;
}

/* Vendor cards in the picker get the same restrained lift on hover
 * — premium, not busy. */
body.embedded-mode .vendor-card {
  transition:
    transform 0.18s cubic-bezier(0.2, 0.7, 0.25, 1),
    box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.25, 1),
    border-color 0.18s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.embedded-mode .vendor-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 14px -6px color-mix(in srgb, var(--accent, #0c5e82) 22%, rgba(15, 23, 42, 0.10));
  border-color: color-mix(in srgb, var(--accent, #0c5e82) 28%, var(--border-subtle, #e5e7eb));
}
body.embedded-mode .vendor-card:active { transform: translateY(0); }

/* --- 3. Smooth motion --- */
@keyframes embedded-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.embedded-mode .walkthrough-player,
body.embedded-mode .reg-intro-hero,
body.embedded-mode .context-picker-title,
body.embedded-mode .vendor-grid {
  animation: embedded-fade-in 0.32s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
body.embedded-mode #wk-screen {
  /* Frame swaps within the walkthrough — fade the new mockup in so
     the frame transition reads as deliberate rather than a flash. */
  animation: embedded-fade-in 0.22s cubic-bezier(0.2, 0.7, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.embedded-mode .walkthrough-player,
  body.embedded-mode .reg-intro-hero,
  body.embedded-mode .context-picker-title,
  body.embedded-mode .vendor-grid,
  body.embedded-mode #wk-screen,
  body.embedded-mode .launch-btn-pro,
  body.embedded-mode .reg-intro-cta .btn-primary,
  body.embedded-mode .stuck-action.btn-primary,
  body.embedded-mode .vendor-card,
  body.embedded-mode .phone-frame {
    animation: none !important;
    transition: none !important;
  }
  body.embedded-mode .launch-btn-pro:hover,
  body.embedded-mode .reg-intro-cta .btn-primary:hover,
  body.embedded-mode .vendor-card:hover {
    transform: none;
  }
}

/* --- 4. Cap content width on giant viewports --- */
/* On a 27" desktop monitor 720px max-width was too narrow for the
 * walkthrough — phone looked stranded in whitespace. Bump the cap
 * for that viewport class so the layout breathes without going
 * fully full-bleed (which would feel even more lost). */
@media (min-width: 1280px) {
  body.embedded-mode .walkthrough,
  body.embedded-mode .context-picker,
  body.embedded-mode .reg-intro,
  body.embedded-mode .companion-preamble,
  body.embedded-mode .stuck-landing {
    max-width: 880px;
  }
}
@media (min-width: 1600px) {
  body.embedded-mode .walkthrough,
  body.embedded-mode .context-picker,
  body.embedded-mode .reg-intro,
  body.embedded-mode .companion-preamble,
  body.embedded-mode .stuck-landing {
    max-width: 1040px;
  }
}

/* --- 5. iOS Safari-specific quirk: the visual viewport API can
 *     report height changes faster than the layout settles, so the
 *     phone frame can briefly flicker during a URL-bar animation.
 *     Pinning the frame's height to 100% of its locked parent means
 *     it can't grow into the transitional space. */
body.embedded-mode .phone-frame-wrap {
  contain: layout;
}

/* --- 6. Refined surfaces in the walkthrough caption + vendor cards
 *     so the brand colour shows through on light backgrounds without
 *     the cards looking like flat boxes. --- */
body.embedded-mode .walkthrough-caption {
  background: color-mix(in srgb, var(--accent, #0c5e82) 4%, var(--bg, #ffffff));
  border: 1px solid color-mix(in srgb, var(--accent, #0c5e82) 12%, var(--border-subtle, #e5e7eb));
  border-radius: 12px;
  font-weight: 500;
  color: var(--text-primary, #1d1d1f);
}
body.embedded-mode .walkthrough-caption em.em-key {
  color: var(--accent, #0c5e82);
  font-weight: 700;
  font-style: normal;
  background: color-mix(in srgb, var(--accent, #0c5e82) 10%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}

/* --- 7. Tight portrait phones (iPhone SE / mini, ≤ 360px wide):
 *     drop the brand mark size + intro padding so the hero block
 *     doesn't dominate the viewport on the narrowest devices. --- */
@media (max-width: 360px) {
  body.embedded-mode .reg-intro-hero { padding: 18px 18px 16px; }
  body.embedded-mode .reg-intro-brand-mark { width: 44px; height: 44px; }
  body.embedded-mode .reg-intro-masthead-org { font-size: 16px; }
}

/* ============================================================================
   WALKTHROUGH-ACTIVE — applies to ANY page rendering a .walkthrough
   container, not just branded URLs. Marketing demo + every branded
   flow inherit the same zero-scroll, phone-fits-the-viewport polish
   the user expects. Toggled by setupWalkthroughActiveObserver in
   app.js — no per-screen wiring needed.

   The trigger: when an Android user is mid-walkthrough on the
   marketing site, the site nav + IMPORTANT callout + diagnose
   button + dots eat the budget the phone needs, and the bottom
   of the phone slips below the fold. With this layer:

     1. body locks to 100svh + position:fixed (same trick the
        branded view uses) so the URL-bar shimmy can't crop the
        phone.
     2. Site nav is hidden during walkthrough so 76px of vertical
        chrome moves to the phone.
     3. Back link, IMPORTANT caption, diagnose button, dots all
        compress on portrait viewports.
     4. The phone frame is sized to fill whatever's left.
   ============================================================================ */
html:has(body.walkthrough-active),
body.walkthrough-active {
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.walkthrough-active {
  position: fixed;
  inset: 0;
  width: 100%;
}
body.walkthrough-active.inside-iframe {
  position: static;
}
/* The marketing site nav is the biggest gain on phones — it's 76
 * px of brand chrome the user doesn't need mid-walkthrough.
 * Cookie banner + footer hidden too; they're not relevant in the
 * walkthrough context anyway. */
body.walkthrough-active .nav,
body.walkthrough-active .footer,
body.walkthrough-active .cookie-consent,
body.walkthrough-active #demo-watermark {
  display: none !important;
}
body.walkthrough-active #main-content {
  height: 100svh;
  max-height: 100svh;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.walkthrough-active .walkthrough {
  flex: 1;
  min-height: 0;
  max-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 14px;
  margin: 0 auto;
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  body.walkthrough-active .walkthrough { max-width: 880px; }
}
@media (min-width: 1600px) {
  body.walkthrough-active .walkthrough { max-width: 1040px; }
}

/* Page-nav (back link) + walkthrough-portal-header + caption +
 * diagnose button + dots = "chrome above the phone". Each one's
 * height is shrunk on tight portrait viewports so the phone gets
 * the most space possible. */
body.walkthrough-active .walkthrough-pagenav {
  flex-shrink: 0;
  margin-bottom: 4px;
}
body.walkthrough-active .walkthrough-pagenav .back-link {
  font-size: 12.5px;
  padding: 4px 0;
  margin: 0;
}
body.walkthrough-active .walkthrough-portal {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
body.walkthrough-active .walkthrough-portal-header {
  flex-shrink: 0;
  padding: 6px 0;
}
body.walkthrough-active .walkthrough-portal-meta {
  flex-shrink: 0;
}
body.walkthrough-active .walkthrough-mode-banner {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  margin: 4px 0;
}
body.walkthrough-active .walkthrough-step-eyebrow {
  flex-shrink: 0;
  margin-bottom: 2px;
  padding: 2px 8px;
  font-size: 9.5px;
  line-height: 1.2;
}
/* Top instruction caption: tighter container + fluid text so the
 * phone gets every pixel back. font-size scales with viewport
 * width via clamp() so a 320-wide screen still renders the
 * headline at ~11px instead of cutting it off.
 *
 * Specificity: needs #wk-caption to beat the existing
 * `.walkthrough #wk-caption.walkthrough-caption` rules earlier in
 * this file (0,1,2,0). Adding body.walkthrough-active gives us
 * 0,1,2,1 which wins on IDs-tied, classes-tied, more-elements. */
body.walkthrough-active #wk-caption.walkthrough-caption {
  flex-shrink: 0;
  margin: 0 0 4px;
  padding: 7px 11px 8px;
  font-size: clamp(11.5px, 3.3vw, 13px);
  line-height: 1.3;
  /* FIXED height (min == max). The mobile rule at L7364 reserves
   * min-height: 106px so the phone position doesn't shift between
   * frames. We need that anti-shift behaviour but at a tighter size:
   * 68px fits ~3 lines (3 × 13 × 1.3 ≈ 50.7 + 16 padding) which
   * covers the long Samsung captions. Anything longer ellipsises
   * via overflow:hidden — but the headline/sub structure means
   * those rarely run past 3 lines. */
  min-height: 68px;
  max-height: 68px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
body.walkthrough-active #wk-caption.walkthrough-caption .wk-headline {
  font-size: clamp(12px, 3.5vw, 13.5px);
  line-height: 1.25;
  margin: 0;
}
body.walkthrough-active #wk-caption.walkthrough-caption .wk-sub {
  font-size: clamp(10.5px, 3vw, 12px);
  line-height: 1.3;
  margin: 2px 0 0;
  opacity: 0.85;
}
body.walkthrough-active #wk-caption.walkthrough-caption:has(.wk-handoff) {
  max-height: none;
  overflow: visible;
}
body.walkthrough-active .walkthrough-dots {
  flex-shrink: 0;
  margin-bottom: 4px;
}
body.walkthrough-active .wk-progress-track {
  flex-shrink: 0;
  margin-bottom: 4px;
}
/* The "Run screenshot diagnosis" button is a pill that lives ABOVE
 * the dots in the marketing demo. On DESKTOP companion mode the
 * pill is the whole point — the user is following along on their
 * phone and uploads a screenshot if they get stuck. On MOBILE the
 * walkthrough is being followed in-place; there's no second screen
 * to capture from, so the pill is dead weight that eats vertical
 * space. Hide on mobile, keep on desktop.
 *
 * The actual button class shipped in app.js is .walkthrough-stuck-btn
 * (rendered conditionally on isAIDiagnosisLive). The other names in
 * this rule are alternative selectors used by other entry points in
 * the codebase — keep them so any future render path also obeys the
 * mobile-hide rule. */
body.walkthrough-active .walkthrough-stuck-btn,
body.walkthrough-active .ai-diagnose-pill,
body.walkthrough-active .stuck-cta-pill,
body.walkthrough-active .wk-stuck-link {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 12px;
  margin: 4px 0;
}
@media (max-width: 768px) {
  body.walkthrough-active .walkthrough-stuck-btn,
  body.walkthrough-active .ai-diagnose-pill,
  body.walkthrough-active .stuck-cta-pill,
  body.walkthrough-active .wk-stuck-link {
    display: none !important;
  }
}

/* Phone-frame-wrap takes ALL remaining space; the phone is sized
 * by an aspect-ratio + max-height so its long edge can never
 * overflow the available area. The previous height calculations
 * (100vh - 220px) assumed a thin layout; locking the parent to
 * 100svh and using flex: 1 + min-height: 0 means the phone always
 * gets exactly the leftover space, never more.
 *
 * Critically, every intermediate container in the chain must be
 * flex itself, otherwise the propagation breaks at the first
 * `display: block` ancestor and the phone collapses to its
 * minimum height (~220px).  The default markup wraps the player
 * in two extra panels (`.walkthrough-stage` outer + `.walkthrough-
 * phone-panel` inner) — both blocks by default. We force them to
 * flex columns here so the full-height chain reaches the phone. */
body.walkthrough-active .walkthrough-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.walkthrough-active .walkthrough-phone-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.walkthrough-active .walkthrough-player {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.walkthrough-active .phone-frame-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Phone sizing in walkthrough-active mode. Specificity has to beat
 * `.walkthrough .phone-frame-wrap .phone-frame` (3 classes) at
 * L7202 and the @media-scoped overrides at L14215 / L14239 which
 * both set hardcoded `width: 220px / 290px / 320px`. Using the same
 * chain prefixed with `body.walkthrough-active` gives us 4 classes
 * + 1 element which wins both at the rule and at every @media tier.
 *
 * Drive sizing FROM height: take 100% of the wrap's available
 * height and let aspect-ratio derive the width. With width:auto
 * + aspect-ratio in a flex-row container, the browser picks the
 * intrinsic content width (~100 px) instead of computing from the
 * aspect — that's why the phone collapsed before. height: 100% +
 * aspect-ratio = unambiguous: width auto-computes from the height.
 * max-width caps it so on huge desktops the phone doesn't grow
 * absurdly wide. */
body.walkthrough-active .walkthrough .phone-frame-wrap .phone-frame,
body.walkthrough-active .walkthrough .phone-frame,
body.walkthrough-active .phone-frame {
  width: auto;
  height: 100%;
  max-width: min(290px, 90%);
  max-height: 100%;
  aspect-ratio: 248 / 510;
  margin: 0 auto;
  flex: 0 1 auto;
}
/* Mobile: phone is the hero. The "width: auto + aspect-ratio +
 * height: 100%" path SHOULD compute width from height per the spec,
 * but in flex-row the automatic minimum (min-content) collapses the
 * width to ~228 px — the phone-screen child + 10 px border. Ignore
 * the inherited aspect-ratio path and drive width directly from the
 * viewport instead.
 *
 * Use 100svh (small viewport — URL bar visible) NOT 100dvh: the
 * walkthrough body is locked to position:fixed; height:100svh, so
 * referencing 100dvh in the phone calc gives a value that's larger
 * than the actual visible body whenever the URL bar is showing,
 * and the phone clips below the fold. 100svh keeps the phone
 * inside the body in every URL-bar state.
 *
 * Subtract 220 px for the chrome (pagenav 36 + walkthrough padding
 * ~16 + portal-meta ~45 + caption 68 + 4 caption margin + dots ~25
 * + bottom buffer ~26 = 220). The 10 px buffer protects against
 * slight per-device variance in the system status bar / chrome. */
@media (max-width: 768px) {
  body.walkthrough-active .walkthrough .phone-frame-wrap .phone-frame,
  body.walkthrough-active .walkthrough .phone-frame,
  body.walkthrough-active .phone-frame {
    --wk-phone-h: calc(100svh - 220px);
    --wk-phone-w: min(380px, 90vw, calc(var(--wk-phone-h) * 248 / 510));
    width: var(--wk-phone-w);
    min-width: var(--wk-phone-w);
    max-width: var(--wk-phone-w);
    height: auto;
    max-height: var(--wk-phone-h);
  }
}
/* Ensure the wrap doesn't stretch the phone past its design width
 * when there's lots of vertical space — cap the wrap's effective
 * width via the phone's max-width instead of making the wrap a
 * row that swallows the full row. align-items keeps the phone
 * vertically centered inside the available space. */
body.walkthrough-active .phone-frame-wrap {
  align-items: center;
  justify-content: center;
}
body.walkthrough-active .walkthrough .laptop-frame,
body.walkthrough-active .laptop-frame {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: min(620px, 100%);
  aspect-ratio: 16 / 11;
  margin: 0 auto;
}
body.walkthrough-active .walkthrough .tablet-frame,
body.walkthrough-active .tablet-frame {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: min(380px, 90%);
  aspect-ratio: 320 / 457;
  margin: 0 auto;
}

/* Bottom chrome — controls + launch button get squashed too so
 * they don't push the phone up. */
body.walkthrough-active .walkthrough-controls,
body.walkthrough-active .walkthrough-controls--manual {
  flex-shrink: 0;
  margin-top: 4px;
  padding: 4px 0 0;
}
body.walkthrough-active .launch-section {
  flex-shrink: 0;
  margin-top: 6px !important;
  padding: 0;
}
body.walkthrough-active .launch-btn-pro {
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}
body.walkthrough-active .launch-hint {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.3;
}

/* Squeeze even harder on short portrait viewports where every
 * pixel matters. */
@media (max-height: 720px) {
  body.walkthrough-active .walkthrough-mode-banner,
  body.walkthrough-active .walkthrough-step-eyebrow,
  body.walkthrough-active .launch-hint {
    display: none;
  }
  body.walkthrough-active .walkthrough-caption { max-height: 64px; }
}
@media (max-height: 600px) {
  body.walkthrough-active .walkthrough-caption { max-height: 52px; font-size: 12px; }
  body.walkthrough-active .walkthrough-pagenav .back-link { font-size: 11px; padding: 2px 0; }
}