/* StormRecord /report — redesign overrides
   Loaded by report/index.html ONLY, after the inline <style> block in head.
   All selectors scoped under .page-report so other pages are unaffected.
   Mirrors home.css token system. */

.page-report {
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --paper: #FBFAF6;
  --paper-2: #F3EFE5;
  --paper-3: #E8E2D3;
  --rule: #D8D1BF;
  --rule-soft: #E8E2D3;

  --ink: #0B1220;
  --ink-soft: #1A2540;
  --text-1: #0B1220;
  --text-2: #3A4860;
  --text-3: #64748B;
  --text-4: #94A3B8;

  --cool: #2563EB;
  --warm: #DC2626;
  --baseline: #047857;

  font-family: var(--sans);
  background: var(--paper);
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.page-report a { text-decoration: none; }
.page-report button { font-family: inherit; cursor: pointer; }
.page-report img { max-width: 100%; display: block; }

/* No noise overlay on /report — was creating subtle visible band differences
   between sections with overlapping bg colors. Page is uniform paper bg only. */
.page-report::before { content: none; }

/* Force every section to inherit body's paper bg directly — overrides any
   leftover production inline gradient/bg-light rules on .checkout-hero,
   .progress-wrapper, .checkout-page, etc. */
.page-report,
.page-report .checkout-hero,
.page-report .stat-row,
.page-report .checkout-page,
.page-report .progress-wrapper {
  background: var(--paper) !important;
}
.page-report .checkout-hero,
.page-report .stat-row,
.page-report .checkout-page,
.page-report .progress-wrapper,
.page-report .checkout-main > .progress-wrapper {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ============================================
   NAV — copy of homepage nav (cream paper, 3-col grid on desktop)
============================================ */
/* Nav — copied from CD .header (lines 55-85). 14px 32px padding. */
.page-report .nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 250, 246, 0.9);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 0.5px solid var(--rule);
  padding: 14px 32px;
  box-shadow: none;
  transition: box-shadow 200ms ease;
}
.page-report .nav.scrolled {
  box-shadow: 0 4px 20px -10px rgba(11, 18, 32, 0.12);
}
.page-report .nav-container {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-report .nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-1);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.page-report .nav-logo img { width: 32px; height: 32px; border-radius: 8px; }
.page-report .nav-logo span { color: var(--text-1); }

/* Nav links — copied from CD .nav-links (lines 71-73): gap 26px, no per-link padding */
.page-report .nav-links {
  display: none;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-report .nav-links > li > a,
.page-report .nav-links > li .nav-dropdown-toggle {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 150ms ease;
}
.page-report .nav-links > li > a:hover,
.page-report .nav-links > li .nav-dropdown-toggle:hover {
  color: var(--text-1);
  background: rgba(11, 18, 32, 0.04);
}
/* Nav-cta — copied from CD .nav-cta (lines 74-85) */
.page-report .nav-links .nav-cta {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 13.5px;
  margin-left: 8px;
  padding: 10px 16px;
  border-radius: 8px;
}
.page-report .nav-links .nav-cta:hover { background: #16213d; color: var(--paper); }

.page-report .nav-dropdown { position: relative; }
.page-report .nav-dropdown-chevron { width: 12px; height: 12px; transition: transform 200ms ease; }
.page-report .nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); }
.page-report .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(11, 18, 32, 0.18);
  list-style: none;
  margin: 0;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.page-report .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.page-report .nav-dropdown-menu .dropdown-inner { display: flex; flex-direction: column; }
.page-report .nav-dropdown-menu li { list-style: none; }
.page-report .nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text-2);
  border-radius: 8px;
  transition: background 150ms ease, color 150ms ease;
}
.page-report .nav-dropdown-menu a:hover { background: rgba(11, 18, 32, 0.04); color: var(--text-1); }

/* Mobile hamburger — iOS Safari fix (see home.css for rationale) */
.page-report .mobile-menu-toggle {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: #0B1220;
  cursor: pointer;
  transition: background 200ms ease;
}
.page-report .mobile-menu-toggle:hover { background: rgba(11, 18, 32, 0.05); }
.page-report .mobile-menu-toggle span {
  display: block !important;
  width: 26px !important;
  height: 3px !important;
  background: #0B1220 !important;
  border-radius: 2px;
  flex-shrink: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .page-report .nav-links { display: flex; }
  .page-report .mobile-menu-toggle { display: none !important; }
  /* CD .header padding 14px 32px stays at all sizes */
  .page-report .nav { padding: 14px 32px; }
  .page-report .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  .page-report .nav-logo { justify-self: start; grid-column: 1; }
  .page-report .nav-links { justify-self: center; grid-column: 2; margin: 0; padding: 0; }
}

/* Mobile drawer — copied verbatim from home.css .page-home .nav-drawer rules
   (lines 290-406), rescoped to .page-report. /report only loads styles.css +
   report.css, so without these the drawer rendered inline as a default block
   on desktop, looking like a duplicate nav bar below the real one. */
.page-report .nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  visibility: hidden;
}
.page-report .nav-drawer.open {
  pointer-events: auto;
  visibility: visible;
}
.page-report .nav-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 250ms ease;
}
.page-report .nav-drawer.open .nav-drawer-scrim { opacity: 1; }
.page-report .nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 88vw);
  background: var(--paper);
  border-left: 0.5px solid var(--rule);
  box-shadow: -20px 0 60px -20px rgba(11, 18, 32, 0.25);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: 20px 24px 32px;
  gap: 4px;
  overflow-y: auto;
}
.page-report .nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.page-report .nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--rule);
}
.page-report .nav-drawer-head .brand-name {
  font-weight: 600;
  font-size: 15px;
}
.page-report .nav-drawer-close {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-report .nav-drawer-close:hover { background: rgba(11, 18, 32, 0.05); }
.page-report .nav-drawer-close svg { width: 22px; height: 22px; }
.page-report .nav-drawer-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1);
  padding: 14px 4px;
  border-bottom: 0.5px solid var(--rule-soft);
  letter-spacing: -0.005em;
  display: block;
}
.page-report .nav-drawer-link.sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
  padding: 10px 4px 10px 20px;
}
.page-report .nav-drawer-link:hover { color: var(--cool); }
.page-report .nav-drawer-group-toggle {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  cursor: pointer;
}
.page-report .nav-drawer-chevron {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.page-report .nav-drawer-group-toggle[aria-expanded="true"] .nav-drawer-chevron {
  transform: rotate(180deg);
}
.page-report .nav-drawer-group {
  display: flex;
  flex-direction: column;
}
.page-report .nav-drawer-group[hidden] { display: none; }
.page-report .nav-drawer-cta {
  margin-top: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.page-report .nav-drawer-cta:hover { background: #000; color: var(--paper); }

/* ============================================
   HERO — copied from CD .hero-top + h1.display + .tagline + .trust-pill
   (lines 110-160). Centered text, italic emphasis on Report., dark ink (no blue).
============================================ */
.page-report .checkout-hero {
  background: var(--paper);
  /* No border-bottom — creates a visible divider that looked like a darker
     band around the stat row. Sections flow into each other on the same
     paper background. */
  border-bottom: none;
  padding: 0;
  text-align: center;
}
.page-report .checkout-hero-inner {
  max-width: none;
  margin: 0 auto;
  display: block;
  text-align: center;
  /* CD .hero-top — padding: 4px 0 28px */
  padding: 4px 20px 28px;
}
/* .trust-pill — copied verbatim from CD lines 115-134 */
.page-report .checkout-hero .trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 250, 246, 0.85);
  border: 0.5px solid var(--rule);
  border-radius: 100px;
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.page-report .checkout-hero .trust-pill .dot {
  width: 7px;
  height: 7px;
  background: var(--baseline);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(4, 120, 87, 0.4);
  animation: pr-pulse 2.6s ease-in-out infinite;
}
@keyframes pr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* h1.display — copied from CD lines 142-152: 44px constant, weight 500, italic emphasis */
.page-report .checkout-hero h1 {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-1);
  margin: 0 0 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* h1.display .emphasis — copied from CD line 153: italic 400, dark ink color */
.page-report .checkout-hero h1 .emphasis {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  letter-spacing: -0.025em;
}
/* Legacy .blue alias — kept in case any page still references it (no-op now) */
.page-report .checkout-hero h1 .blue {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
/* .tagline — copied from CD lines 154-160 */
.page-report .checkout-hero .hero-subtitle {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 auto;
  max-width: 540px;
}
.page-report .checkout-hero .mobile-feature-strip { display: none; }

/* Mobile small viewports: scale h1 down to fit (CD line 994: 32px at <=720) */
@media (max-width: 720px) {
  .page-report .checkout-hero h1 { font-size: 32px; }
  .page-report .checkout-hero .hero-subtitle { font-size: 15px; }
}

/* ============================================
   STAT ROW — copied verbatim from CD .stat-row (lines 162-200)
   No band background, no full-width — just a centered 920px group
   under the hero.
============================================ */
.page-report .stat-row {
  /* Explicit paper bg (not transparent) so it visibly matches surrounding
     sections — even if a production inline rule sets a different body bg
     elsewhere on the page, this stays consistent with .checkout-hero +
     .checkout-page above and below. */
  background: var(--paper);
  border-bottom: none;
  border-top: none;
  padding: 0;
}
.page-report .stat-row-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  max-width: 920px;
  margin: 24px auto 0;
  padding: 0 8px;
  row-gap: 0;
}
.page-report .stat-cell {
  display: block;
  padding: 14px 4px;
  border-left: none;
  border-top: 1px solid rgba(11, 18, 32, 0.18);
  text-align: left;
  min-width: 0;
}
.page-report .stat-cell:first-child {
  border-top: none;
  padding-top: 4px;
}
.page-report .stat-cell-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* a11y: removed `opacity: 0.65` and bumped to --text-1 so the small mono
     label hits 4.5:1 contrast on cream paper background. */
  color: var(--text-1);
  margin-bottom: 6px;
  font-weight: 500;
  line-height: 1;
}
.page-report .stat-cell-value {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* CD line 946: at 769-1080 use 3-col grid; at 720- single column (above) */
@media (min-width: 769px) and (max-width: 1080px) {
  .page-report .stat-row-inner {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    max-width: 620px;
    padding: 0 8px;
  }
  .page-report .stat-cell {
    border-top: none;
    border-left: 1px solid rgba(11, 18, 32, 0.28);
    padding: 4px 18px;
  }
  .page-report .stat-cell:first-child { border-left: none; padding-top: 4px; }
  .page-report .stat-cell:nth-child(4) { border-left: none; }
}
/* CD line 162-172: default (>1080) is full 5-col */
@media (min-width: 1081px) {
  .page-report .stat-row-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 0;
    max-width: 920px;
    padding: 0 8px;
  }
  .page-report .stat-cell {
    border-top: none;
    border-left: 1px solid rgba(11, 18, 32, 0.28);
    padding: 4px 18px;
  }
  .page-report .stat-cell:first-child { border-left: none; padding-top: 4px; }
}

/* ============================================
   PROGRESS BAR (stepper) — Q4: now sits INSIDE .checkout-main as
   first child. CD .stepper has no full-width section, just margin-bottom 16.
============================================ */
.page-report .checkout-main > .progress-wrapper {
  background: transparent;
  padding: 0;
  border-bottom: none;
  margin-bottom: 16px;
}
.page-report .checkout-main > .progress-wrapper .progress-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: none;
  margin: 0;
  gap: 0;
  padding: 0 4px;
}
/* Legacy fallback rules for any other .progress-wrapper instance */
.page-report .progress-wrapper {
  background: var(--paper);
  padding: 28px 20px 24px;
  border-bottom: 0.5px solid var(--rule);
}
.page-report .progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 0;
}
/* Stepper — copied verbatim from CD .step / .step-num / .step-label / .step-connector
   (lines 217-253). 22x22 mono numbered circle, mono uppercase label. */
.page-report .progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-report .progress-step-number {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 200ms ease;
}
.page-report .progress-step-num-text { display: inline-block; }
.page-report .progress-step-check {
  width: 12px;
  height: 12px;
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
}
.page-report .progress-step.active .progress-step-number {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.page-report .progress-step.completed .progress-step-number {
  background: var(--baseline);
  border-color: var(--baseline);
  color: var(--paper);
}
.page-report .progress-step.completed .progress-step-num-text { display: none; }
.page-report .progress-step.completed .progress-step-check { display: block; color: var(--paper); }
.page-report .progress-step-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  transition: color 200ms ease;
}
.page-report .progress-step.active .progress-step-label { color: var(--text-1); font-weight: 600; }
.page-report .progress-step.completed .progress-step-label { color: var(--baseline); }
.page-report .progress-connector {
  width: 32px;
  height: 0.5px;
  background: var(--rule);
  margin: 0 12px;
  transition: background 200ms ease;
}
.page-report .progress-connector.active {
  background: var(--baseline);
}
@media (max-width: 559px) {
  .page-report .progress-step-label { display: none; }
  .page-report .progress-connector { width: 20px; margin: 0 8px; }
}
@media (min-width: 768px) {
  .page-report .progress-wrapper { padding: 36px 40px 32px; }
  .page-report .progress-connector { width: 56px; margin: 0 16px; }
}

/* ============================================
   CHECKOUT BODY (2-col on desktop: form + carousel)
   Values copied from CD .conversion-grid (lines 202-215).
============================================ */
.page-report .checkout-page {
  padding: 0;
  background: var(--paper);
}
.page-report .checkout-layout {
  /* CD: max-width 1500, margin 40px auto 0, padding 0 24px */
  max-width: 1500px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.page-report .checkout-main {
  min-width: 0;
  /* Production inline has max-width: 640px which clamps the form to 640
     and leaves a wide empty gap inside the grid column. Override so
     .checkout-main fills its full grid column width. */
  max-width: none !important;
  width: 100%;
}
.page-report .checkout-sidebar { min-width: 0; max-width: none; width: 100%; }

/* Desktop 2-col layout — kicks in above CD's 1080px collapse breakpoint */
@media (min-width: 1081px) {
  .page-report .checkout-layout {
    display: grid;
    /* CD line 204: minmax(0, 1.1fr) minmax(0, 0.85fr).
       Form column widened by ~15% per user request: 1.1 -> 1.265, carousel
       reduced from 0.85 -> 0.685 to compensate. */
    grid-template-columns: minmax(0, 1.265fr) minmax(0, 0.685fr);
    gap: 40px;
    align-items: start;
  }
  .page-report .checkout-main { grid-column: 1; }
  .page-report .checkout-sidebar {
    grid-column: 2;
    position: sticky;
    top: 88px;
  }
}

/* Step panels — keep production show/hide via .active class */
.page-report .step-panel { display: none; }
.page-report .step-panel.active { display: block; }

/* ============================================
   CHECKOUT CARDS (form steps)
============================================ */
/* Form card — copied verbatim from CD .wizard-card + .wizard-card-primary
   (lines 255-267). Step-1 form is the active card so apply primary border. */
.page-report .checkout-card {
  background: rgba(251, 250, 246, 0.96);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 rgba(11, 18, 32, 0.04),
    0 16px 48px -16px rgba(11, 18, 32, 0.22);
}
/* Card heading (.card-header in CD lines 269-291) */
.page-report .card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.page-report .card-heading-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-report .card-heading-icon svg { width: 16px; height: 16px; }
.page-report .card-heading-icon.blue { background: rgba(37, 99, 235, 0.10); color: var(--cool); }
.page-report .card-heading-icon.green { background: rgba(4, 120, 87, 0.10); color: var(--baseline); }
.page-report .card-heading-icon.red { background: rgba(220, 38, 38, 0.10); color: var(--warm); }
.page-report .card-heading h2 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  letter-spacing: -0.012em;
}
.page-report .checkout-card .subtitle {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 4px 0 22px;
}

/* Inputs — copied verbatim from CD .text-input / .date-input (lines 328-346) */
.page-report .input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
/* .field-label — copied from CD lines 296-310. Includes .num numbered badge inline */
.page-report .input-group label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* .num — copied from CD lines 311-322: 16px ink-filled circle */
.page-report .input-group label .num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  letter-spacing: 0;
  font-weight: 600;
  flex-shrink: 0;
}
.page-report .input-group input[type="text"],
.page-report .input-group input[type="email"] {
  width: 100%;
  padding: 13px 14px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-1);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  appearance: none;
}
.page-report .input-group input::placeholder { color: var(--text-4); }
.page-report .input-group input:hover { border-color: var(--text-4); }
.page-report .input-group input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.06);
}
.page-report .input-hint {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0;
}

/* Continue / Search button — copied from CD .cta-primary (lines 372-391) */
.page-report .checkout-btn {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 22px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 12px 32px -8px rgba(11, 18, 32, 0.3),
    0 4px 12px -4px rgba(11, 18, 32, 0.15);
  transition: transform 200ms ease, box-shadow 300ms ease, background 200ms ease;
}
.page-report .checkout-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #000;
  color: var(--paper);
  box-shadow:
    0 16px 40px -8px rgba(11, 18, 32, 0.4),
    0 6px 16px -4px rgba(11, 18, 32, 0.2);
}
.page-report .checkout-btn:active:not(:disabled) { transform: translateY(0); }
.page-report .checkout-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  background: var(--ink);
  color: var(--paper);
}
.page-report .checkout-btn svg { width: 18px; height: 18px; }
.page-report .checkout-btn .btn-free-hint {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(251, 250, 246, 0.7);
  margin-left: 4px;
}

/* Trust block inside Step 1 form card — re-enabled per Q3 decision.
   CD-style horizontal row with production strings + production icons. */
.page-report .checkout-trust {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid var(--rule);
}
.page-report .checkout-trust .trust-items-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 18px;
}
.page-report .checkout-trust .trust-item-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}
.page-report .checkout-trust .trust-item-small svg {
  width: 14px;
  height: 14px;
  color: var(--text-4);
  flex-shrink: 0;
}
.page-report .checkout-trust .trust-item-small .trust-pdf-mobile { display: none; }
.page-report .checkout-trust .trust-item-small .trust-pdf-full { display: inline; }
.page-report .checkout-trust .trust-free-text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 12px 0 0;
}
.page-report .mobile-free-search-hint { display: none; }

/* Back button */
.page-report .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px 12px 8px 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  margin-bottom: 12px;
}
.page-report .back-btn:hover { color: var(--ink); }
.page-report .back-btn svg { width: 14px; height: 14px; }

/* Confirmed address (Step 2) */
.page-report .confirmed-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(4, 120, 87, 0.06);
  border: 0.5px solid rgba(4, 120, 87, 0.25);
  border-radius: 12px;
  margin-bottom: 24px;
}
.page-report .confirmed-address-icon {
  width: 18px;
  height: 18px;
  color: var(--baseline);
  flex-shrink: 0;
  margin-top: 2px;
}
.page-report .confirmed-address-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--text-1);
}
.page-report .confirmed-address-text strong { color: var(--text-1); }
.page-report .change-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--cool);
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  font-family: inherit;
}
.page-report .change-link:hover { text-decoration: underline; }

/* ============================================
   PREVIEW CARD (Step 3 paywall)
============================================ */
.page-report .preview-card {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px -12px rgba(11, 18, 32, 0.10);
}
.page-report .preview-body { padding: 28px 24px; }
.page-report .preview-brand-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.page-report .preview-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.page-report .preview-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.015em;
  margin: 0;
}
.page-report .preview-title-line {
  height: 0.5px;
  background: var(--rule);
  margin: 16px 0;
}
.page-report .preview-address-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.page-report .preview-street {
  font-size: 15px;
  color: var(--text-1);
  margin: 0;
  font-weight: 500;
}
.page-report .preview-city {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
}
.page-report .preview-doi {
  font-size: 13.5px;
  color: var(--text-2);
  margin: 0;
}
.page-report .preview-doi-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-right: 6px;
}
.page-report .preview-doi strong { color: var(--text-1); }

/* State banner */
/* Paywall preview banner — white card with uniform black border. Only the
   icon and headline text carry the state color; border + bg stay constant.
   Per real-iPhone test fix: solid black border (--ink) regardless of state,
   color-coded icon + headline, white card body. */
.page-report .preview-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  background: #FFFFFF;
  border: 1px solid var(--ink);
}
.page-report .preview-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* iPhone retest fix: solid colored circle (per state below) with WHITE SVG
     inside. The SVG uses stroke="currentColor" so setting color: #FFFFFF here
     forces the icon to render white on the colored disc. */
  color: #FFFFFF;
}
.page-report .preview-banner-icon svg {
  width: 18px;
  height: 18px;
  stroke: #FFFFFF;
  color: #FFFFFF;
}
.page-report .preview-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-report .preview-banner-headline {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.page-report .preview-banner-sub {
  font-size: 12.5px;
  color: var(--text-2);
}
/* State signals: solid colored icon disc + colored headline text. Card bg
   stays white, card border stays --ink (uniform black per Fix 3 spec).
   .preview-banner-sub is overridden per state too — the inline `<style>` in
   report/index.html sets state-specific sub colors (medium green/blue) which
   are hard to read on white. Force --text-2 (dark slate) for all states. */
.page-report .preview-banner.banner-gray .preview-banner-icon { background: #475569; }
.page-report .preview-banner.banner-gray .preview-banner-headline { color: #334155; }
.page-report .preview-banner.banner-gray .preview-banner-sub { color: var(--text-2); }

.page-report .preview-banner.banner-blue .preview-banner-icon { background: #2563EB; }
.page-report .preview-banner.banner-blue .preview-banner-headline { color: #1D4ED8; }
.page-report .preview-banner.banner-blue .preview-banner-sub { color: var(--text-2); }

.page-report .preview-banner.banner-green .preview-banner-icon { background: #059669; }
.page-report .preview-banner.banner-green .preview-banner-headline { color: #047857; }
.page-report .preview-banner.banner-green .preview-banner-sub { color: var(--text-2); }

/* Scope metrics */
.page-report .scope-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.page-report .scope-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.page-report .scope-metric-value {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
}
.page-report .scope-metric-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Source line */
.page-report .preview-divider {
  height: 0.5px;
  background: var(--rule);
  margin: 20px 0;
}
.page-report .preview-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.page-report .noaa-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-report .preview-source .source-line {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.4;
}

/* Checklist */
.page-report .report-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.page-report .report-checklist-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.page-report .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.page-report .checklist-item.muted .checklist-item-text { color: var(--text-3); }
.page-report .checklist-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.page-report .checklist-item-text strong { color: var(--text-1); font-weight: 600; }

.page-report .no-events-note {
  font-size: 12px;
  color: var(--text-3);
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0 0;
  display: none;
}
.page-report .no-events-note.visible { display: block; }

.page-report .preview-breakdown-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cool);
}
.page-report .preview-breakdown-link:hover { text-decoration: underline; }
.page-report .preview-fine-print {
  font-size: 11.5px;
  color: var(--text-3);
  margin: 16px 0 0;
  line-height: 1.5;
  text-align: center;
}

/* Purchase section */
.page-report .purchase-section {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-report .purchase-btn {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 24px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 12px 32px -8px rgba(11, 18, 32, 0.3),
    0 4px 12px -4px rgba(11, 18, 32, 0.15);
  transition: transform 200ms ease, box-shadow 300ms ease, background 200ms ease;
}
.page-report .purchase-btn:hover {
  transform: translateY(-1px);
  background: #000;
  color: var(--paper);
}
.page-report .purchase-btn:active { transform: translateY(0); }
.page-report .purchase-btn .price-badge {
  background: rgba(251, 250, 246, 0.18);
  color: var(--paper);
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.page-report .purchase-otp,
.page-report .purchase-combined-row,
.page-report .purchase-note,
.page-report .purchase-note-mobile-combined {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.page-report .purchase-note { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.page-report .purchase-note svg { width: 14px; height: 14px; vertical-align: middle; }
.page-report .purchase-combined-row,
.page-report .purchase-note-mobile-combined { display: none; }

/* Hide some duplicate purchase notes per CD aesthetic */
.page-report .purchase-otp { display: none; }

@media (min-width: 768px) {
  .page-report .preview-body { padding: 32px 32px; }
}

/* ============================================
   CALENDAR — minor cream-paper polish (keep prod functionality)
============================================ */
.page-report .calendar-widget {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
}
.page-report .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.page-report .calendar-nav {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.page-report .calendar-nav:hover { background: var(--paper-2); color: var(--text-1); }
.page-report .calendar-nav svg { width: 14px; height: 14px; }
.page-report .calendar-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
  text-align: center;
}
.page-report .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.page-report .calendar-weekdays span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
  letter-spacing: 0.06em;
}
.page-report .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.page-report .calendar-day {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.page-report .calendar-day:hover:not(:disabled):not(.empty) { background: var(--paper-2); }
.page-report .calendar-day.selected {
  /* iPhone test: previously rendered as gray to user. Force literal #0B1220
     and white !important to win over any inline-style or info-blue fallback. */
  background: #0B1220 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}
.page-report .calendar-day:disabled,
.page-report .calendar-day.disabled {
  color: var(--text-4);
  cursor: not-allowed;
  opacity: 0.45;
}
.page-report .calendar-day.empty { background: transparent; cursor: default; }
.page-report .calendar-hint {
  font-size: 11.5px;
  color: var(--text-3);
  text-align: center;
  margin: 12px 0 0;
}

/* Spinner / error */
.page-report .spinner-overlay {
  display: none;
  margin-top: 16px;
  padding: 18px;
  background: rgba(251, 250, 246, 0.9);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  text-align: center;
}
.page-report .spinner-overlay.active { display: block; }
.page-report .spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--rule);
  border-top-color: var(--ink);
  border-radius: 50%;
  margin: 0 auto 10px;
  animation: pr-spin 800ms linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }
.page-report .spinner-text {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
}

/* Step 3 prominent loading state — shown during the weather-lookup API
   delay after the user clicks Search. Replaces the small in-form spinner
   so the user has an unambiguous "report is being generated" signal and
   doesn't perceive the sample-reports carousel below as the active state. */
.page-report .step3-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 64px 24px;
  text-align: center;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  margin-bottom: 16px;
}
.page-report .step3-loading.is-active { display: flex; }
.page-report .step3-loading .loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(11, 18, 32, 0.1);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: pr-spin 800ms linear infinite;
  margin-bottom: 24px;
}
.page-report .step3-loading .loading-headline {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.page-report .step3-loading .loading-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
  max-width: 320px;
}
@media (max-width: 768px) {
  .page-report .step3-loading {
    min-height: 280px;
    padding: 48px 20px;
  }
  .page-report .step3-loading .loading-headline { font-size: 20px; }
}
.page-report .error-message {
  display: none;
  background: rgba(220, 38, 38, 0.06);
  border: 0.5px solid rgba(220, 38, 38, 0.3);
  color: var(--warm);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 14px;
}
.page-report .error-message.visible { display: block; }

/* ============================================
   SAMPLE CAROUSEL (right column desktop, below form mobile)
============================================ */
/* Sample carousel — copied verbatim from CD .sample-preview-wrap and friends
   (lines 447-625). The .sample-carousel-wrap is just position; the styled frame
   is .sample-carousel; the stage holds arrows + counter as absolute children. */
.page-report .sample-carousel-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: sticky;
  top: 96px;
}
/* .sample-eyebrow — CD lines 451-471, with rule lines on each side */
.page-report .sample-carousel-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-report .sample-carousel-eyebrow::before {
  content: '';
  width: 16px;
  height: 0.5px;
  background: var(--rule);
}
.page-report .sample-carousel-eyebrow::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--rule);
}
/* .sample-title — CD lines 473-479 */
.page-report .sample-carousel-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.012em;
  margin: 0 0 4px;
}
/* .sample-sub — CD lines 480-486 */
.page-report .sample-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 18px;
  line-height: 1.5;
}
/* .carousel — CD lines 489-496: the styled frame */
.page-report .sample-carousel {
  position: relative;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 8px 30px -12px rgba(11, 18, 32, 0.12);
}
/* .carousel-stage — CD lines 497-507: bg + border + shadow + cursor */
.page-report .sample-carousel-stage {
  position: relative;
  aspect-ratio: 0.78;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  box-shadow: 0 12px 30px -10px rgba(11, 18, 32, 0.18);
  cursor: zoom-in;
}
/* .carousel-track — CD lines 508-516 */
.page-report .sample-carousel-track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0.2, 1);
  will-change: transform;
  touch-action: pan-y;
}
/* .carousel-slide — CD lines 518-525 (renamed .sample-page-slot in our markup) */
.page-report .sample-page-slot {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background: var(--paper);
  display: block;
  position: relative;
  user-select: none;
  cursor: zoom-in;
  aspect-ratio: auto;
}
.page-report .sample-page-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* .carousel-arrow — CD lines 535-565: absolute on stage, 38x38, with shadow */
.page-report .sample-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -6px rgba(11, 18, 32, 0.25);
  z-index: 5;
  padding: 0;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease;
}
.page-report .sample-carousel-arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-50%) scale(1.05);
}
.page-report .sample-carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
.page-report .sample-carousel-arrow.prev { left: 6px; }
.page-report .sample-carousel-arrow.next { right: 6px; }
.page-report .sample-carousel-arrow svg { width: 16px; height: 16px; }

/* .carousel-counter — CD lines 568-580: dark chip on stage top-right */
.page-report .sample-carousel-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(11, 18, 32, 0.78);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* .carousel-dots — CD lines 583-606: below stage, active is 18px pill */
.page-report .sample-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
/* Carousel dots: 24x24 hit target (a11y target-size) with a small visual
   dot rendered via ::before so the design intent is preserved. */
.page-report .sample-carousel-dot {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-report .sample-carousel-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule);
  transition: background 160ms ease, width 220ms ease;
}
.page-report .sample-carousel-dot:hover::before { background: var(--text-3); }
.page-report .sample-carousel-dot.active::before {
  background: var(--ink);
  width: 18px;
  border-radius: 100px;
}

/* .carousel-hint — CD lines 608-622: with arrow-out icon */
.page-report .sample-carousel-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.page-report .sample-carousel-hint svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* .sample-caption — CD lines 624-632 */
.page-report .sample-caption {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}
.page-report .sample-caption strong { color: var(--text-1); font-weight: 600; }

/* Lightbox */
.page-report .sr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  padding: 24px;
}
.page-report .sr-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.page-report .sr-lightbox-stage {
  position: relative;
  max-width: min(840px, 100%);
  max-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-report .sr-lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  display: block;
  transition: opacity 200ms ease;
}
.page-report .sr-lightbox-img.swapping { opacity: 0; }
.page-report .sr-lightbox-btn {
  position: absolute;
  background: rgba(251, 250, 246, 0.95);
  color: var(--ink);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background 200ms ease, transform 200ms ease;
}
.page-report .sr-lightbox-btn:hover { background: var(--paper); transform: scale(1.05); }
.page-report .sr-lightbox-btn svg { width: 20px; height: 20px; }
.page-report .sr-lightbox-close { top: -56px; right: 0; }
.page-report .sr-lightbox-prev { left: -64px; top: 50%; transform: translateY(-50%); }
.page-report .sr-lightbox-next { right: -64px; top: 50%; transform: translateY(-50%); }
.page-report .sr-lightbox-prev:hover, .page-report .sr-lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.page-report .sr-lightbox-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(251, 250, 246, 0.7);
}
@media (max-width: 720px) {
  .page-report .sr-lightbox-prev { left: 8px; }
  .page-report .sr-lightbox-next { right: 8px; }
  .page-report .sr-lightbox-close { top: 8px; right: 8px; }
  .page-report .sr-lightbox-counter { bottom: 12px; }
  .page-report .sr-lightbox-img { max-height: calc(100vh - 32px); }
}

/* ============================================
   "WHAT'S INSIDE YOUR REPORT" full-width band (below fold)
============================================ */
/* .inside-band — copied from CD lines 829-836 */
.page-report .whats-inside-band {
  background: var(--paper-2);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  padding: 64px 24px;
  margin-top: 56px;
}
.page-report .whats-inside-inner {
  /* CD line 838: max-width 1200 */
  max-width: 1200px;
  margin: 0 auto;
}
.page-report .whats-inside-header {
  text-align: center;
  margin-bottom: 40px;
}
.page-report .whats-inside-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.page-report .whats-inside-title {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}
/* .inside-grid — copied from CD line 858-862. 5-col default, then collapsing
   media queries below match CD line 946 + 1005 + 1014. */
.page-report .whats-inside-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
/* .inside-card — copied from CD line 863-868: vertical stack (icon on top, name + desc below) */
.page-report .sidebar-feature,
.page-report .whats-inside-feature {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 12px;
  padding: 22px 20px;
  display: block;
  transition: border-color 300ms ease, transform 300ms ease;
}
.page-report .sidebar-feature:hover,
.page-report .whats-inside-feature:hover {
  border-color: var(--text-2);
  transform: translateY(-2px);
}
/* .inside-mark from CD line 869-874: 32x32 icon block with margin-bottom 14 */
.page-report .sidebar-feature-icon,
.page-report .whats-inside-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.page-report .sidebar-feature-icon svg,
.page-report .whats-inside-feature-icon svg { width: 16px; height: 16px; }
.page-report .sidebar-feature-icon.blue,
.page-report .whats-inside-feature-icon.blue { background: rgba(37, 99, 235, 0.10); color: var(--cool); }
.page-report .sidebar-feature-icon.red,
.page-report .whats-inside-feature-icon.red { background: rgba(220, 38, 38, 0.10); color: var(--warm); }
.page-report .sidebar-feature-icon.green,
.page-report .whats-inside-feature-icon.green { background: rgba(4, 120, 87, 0.10); color: var(--baseline); }
.page-report .sidebar-feature-icon.amber,
.page-report .whats-inside-feature-icon.amber { background: rgba(217, 119, 6, 0.10); color: #B45309; }
.page-report .sidebar-feature-icon.dark,
.page-report .whats-inside-feature-icon.dark { background: rgba(11, 18, 32, 0.08); color: var(--ink); }
/* .inside-name from CD line 882-889 */
.page-report .sidebar-feature-text h5,
.page-report .whats-inside-feature h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
/* .inside-desc from CD line 890-894 */
.page-report .sidebar-feature-text p,
.page-report .whats-inside-feature p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.page-report .whats-inside-foot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--sans);
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}
.page-report .whats-inside-foot svg {
  width: 16px;
  height: 16px;
  color: var(--baseline);
}

/* CD line 946: at <=1080 → 3 cols */
@media (min-width: 721px) {
  .page-report .whats-inside-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
/* CD line 858: default (>1080) → 5 cols. CD title font/size only get bigger at desktop. */
@media (min-width: 1081px) {
  .page-report .whats-inside-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}
/* Title scaling — keep CD desktop sizing (CD .inside-title font-size 30px regardless of breakpoint) */
@media (min-width: 768px) {
  .page-report .whats-inside-title { font-size: 30px; }
}
/* CD line 988-989: smaller padding at <=720 */
@media (max-width: 720px) {
  .page-report .whats-inside-band { padding: 44px 16px; margin-top: 36px; }
  .page-report .whats-inside-title { font-size: 24px; }
}

/* ============================================
   SIDEBAR — keep production sidebar-card hidden by default
   (we move "What's Inside" content to the full-width band below the fold).
   Sidebar slot now holds the sample carousel.
============================================ */
.page-report .checkout-sidebar .sidebar-card { display: none; }

/* ============================================
   FOOTER
============================================ */
.page-report .footer {
  background: var(--paper-3);
  border-top: 0.5px solid var(--rule);
  padding: 56px 0 40px;
  position: relative;
  z-index: 2;
}
.page-report .footer-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-report .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.page-report .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-report .footer-brand img { width: 32px; height: 32px; border-radius: 8px; }
.page-report .footer-brand-text h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 2px;
}
.page-report .footer-tagline {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
}
.page-report .footer-links h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 500;
}
.page-report .footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-report .footer-links a {
  font-size: 14px;
  color: var(--text-2);
  transition: color 200ms ease;
}
.page-report .footer-links a:hover { color: var(--text-1); }
.page-report .footer-bottom {
  border-top: 0.5px solid var(--rule);
  padding-top: 24px;
}
.page-report .footer-independence {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
  margin: 0 0 12px;
}
.page-report .footer-bottom > p {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 12px;
}
.page-report .footer-disclaimer {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.75;
  color: var(--text-3);
  letter-spacing: 0.04em;
  padding-top: 16px;
  border-top: 0.5px solid var(--rule-soft);
  margin: 0;
}
@media (min-width: 768px) {
  .page-report .footer { padding: 64px 0 40px; }
  .page-report .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 56px;
  }
}

/* ============================================
   MOBILE REORDER — per spec:
   nav → hero → form → sample-carousel → stat-row → what's-inside → footer
   The DOM order will already be: nav, hero, stat-row, progress, form, sidebar (carousel),
     whats-inside, footer. On mobile we reorder via flex on body, but body has many
     children so we use order on the relevant top-level wrappers.
============================================ */

/* Mobile-only hero adjustments (under 768px the trust pill text is wider than
   the viewport — match the production inline behaviour and hide it). */
@media (max-width: 767px) {
  .page-report .checkout-hero .trust-pill { display: none; }
  .page-report .checkout-hero { padding: 24px 20px 24px; }
  .page-report .checkout-hero-inner { gap: 12px; }
}

@media (max-width: 1023px) {
  .page-report body,
  body.page-report {
    display: flex;
    flex-direction: column;
  }
  .page-report .nav { order: 1; }
  .page-report .checkout-hero { order: 2; }
  .page-report .progress-wrapper { order: 3; }
  .page-report .checkout-page { order: 4; }
  .page-report .stat-row { order: 6; }
  .page-report .whats-inside-band { order: 7; }
  .page-report .severity-modal-overlay,
  .page-report .summary-modal-overlay { order: 99; }
  .page-report .footer { order: 8; }
  /* Within checkout-layout (flex column on mobile already), carousel after form */
  .page-report .checkout-main { order: 1; }
  .page-report .checkout-sidebar { order: 2; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-report .checkout-hero .trust-pill .dot,
  .page-report .spinner { animation: none !important; }
  .page-report .sample-carousel-track,
  .page-report .sr-lightbox-img,
  .page-report .checkout-btn,
  .page-report .purchase-btn {
    transition: none !important;
  }
}

/* a11y: bump small text on cream-2 background to --text-2 for 4.5:1 contrast */
.page-report .sample-carousel-hint,
.page-report .whats-inside-eyebrow,
.page-report .whats-inside-foot {
  color: var(--text-2);
}

/* ─── Step 2 mobile: tighten calendar so it fits without scrolling, and pin
   the Continue button to the bottom of the viewport ─── */
@media (max-width: 768px) {
  /* Tighten calendar layout vertically on mobile so the full grid fits in the
     viewport without scrolling. Keeps the desktop layout untouched. */
  .page-report #step-2 .calendar-widget {
    margin: 8px 0 12px;
    padding: 12px;
  }
  .page-report #step-2 .calendar-day {
    height: 36px;
    font-size: 13px;
  }
  .page-report #step-2 .calendar-header {
    padding: 4px 0 8px;
  }
  .page-report #step-2 .calendar-hint {
    margin: 6px 0 0;
    font-size: 11px;
  }

  /* Sticky continue button: pinned to bottom of viewport on mobile only.
     Wrapping in a sticky band gives the user a steady action target without
     scrolling the calendar. Desktop unaffected. */
  .page-report #step-2 #search-date-btn {
    /* Position: fixed (not sticky) so it stays at viewport bottom regardless
       of scroll position. The legacy inline rule with this selector + the
       same fixed/bottom/0 positioning was removed from report/index.html so
       this rule is the sole authority on the Step 2 sticky button. */
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    z-index: 100;
    margin: 0;
    padding: 16px;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 -8px 24px -4px rgba(11, 18, 32, 0.18);
  }
  /* Keep the disabled state visually muted on the new redesign sticky button */
  .page-report #step-2 #search-date-btn:disabled {
    background: var(--text-3);
    color: var(--paper);
    opacity: 0.85;
    box-shadow: none;
  }
}