/* =============================================
   DEPLOYREADY — Premium refinement layer
   Loaded after style.css. Same palette, same copy, same sections.
   Changes only type, rhythm, elevation and motion, and gives the
   hero a real product visual. Scoped to html.dr-premium so the
   current page and the refined page can be compared side by side.
   ============================================= */

html.dr-premium {
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-2xl: clamp(2.125rem, 1.35rem + 2.6vw, 3.5rem);
  --text-hero: clamp(2.375rem, 1.3rem + 2.9vw, 3.75rem);
  --color-text-muted: #A9B6C8;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(201, 162, 94, 0.30);
  --hairline: rgba(255, 255, 255, 0.07);
  --inner-light: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  --section-y: clamp(4.5rem, 8vw, 8rem);
}

html.dr-premium body {
  font-feature-settings: "cv11", "ss01", "kern";
  letter-spacing: -0.005em;
}

/* ---------- Header: hairline instead of the 2px gold rule, no wrapping ---------- */
html.dr-premium .site-header {
  border-bottom: 1px solid rgba(201, 162, 94, 0.22);
  background: rgba(11, 26, 46, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html.dr-premium .site-header.scrolled {
  background: rgba(11, 26, 46, 0.92);
  box-shadow: 0 1px 0 rgba(201, 162, 94, 0.12), 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
html.dr-premium .header-inner { gap: var(--space-6); }
html.dr-premium .header-nav { gap: clamp(0.9rem, 1.4vw, 1.5rem); }
html.dr-premium .header-nav a,
html.dr-premium .nav-dropdown-btn {
  white-space: nowrap;
  font-size: 0.875rem;
  letter-spacing: 0;
}
html.dr-premium .logo-text { font-size: 0.9375rem; letter-spacing: 0.01em; }

/* ---------- Type ---------- */
html.dr-premium .hero-headline {
  font-size: var(--text-hero);
  font-weight: 460;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.022em;
  line-height: 1.04;
  max-width: 19ch;
  text-wrap: balance;
  margin-bottom: var(--space-6);
}
html.dr-premium .section-title {
  font-weight: 460;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.018em;
  line-height: 1.06;
}
html.dr-premium .section-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}
html.dr-premium .hero-sub,
html.dr-premium .section-desc {
  font-size: var(--text-lg);
  line-height: 1.55;
  letter-spacing: -0.008em;
}
html.dr-premium .hero-sub { max-width: 44ch; margin-bottom: var(--space-8); }
html.dr-premium .hero-sub-link { font-weight: 500; }

/* ---------- Rhythm ---------- */
html.dr-premium .section { padding-block: var(--section-y); }
html.dr-premium .section-header { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

/* ---------- Hero: two columns with the product on the right ---------- */
html.dr-premium .hero {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}
html.dr-premium .hero-bg-pattern {
  background:
    radial-gradient(ellipse 70% 55% at 72% 30%, rgba(201, 162, 94, 0.13), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 90%, rgba(13, 148, 136, 0.07), transparent 70%);
}
html.dr-premium .hero::before {
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, black, transparent);
}
html.dr-premium .hero-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1024px) {
  /* 2026-09-25: David asked for the product window 40% larger on the desktop
     (phone unchanged). The frame takes 13 of 23 columns instead of 10 of 21
     and, from 1280px, overhangs the content column on the right so the copy
     keeps its width. ~510px -> ~710px at 1440px. */
  html.dr-premium .hero-content { grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); }
}
@media (min-width: 1280px) {
  html.dr-premium .hero-visual { margin-right: clamp(-120px, calc(24px - (100vw - var(--content-wide)) / 2), 0px); }
}
@media (min-width: 1024px) {
  /* Centre the frame on the headline-to-microcopy block, not on the whole
     copy column (which includes the stats row below). The grid centres the
     margin box, so a bottom margin about the height of the stats block
     lifts the frame by half of it. */
  html.dr-premium .hero-visual { margin-bottom: 84px; }
  /* The copy column is narrower now; keep the three stats on one row. */
  html.dr-premium .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  html.dr-premium .hero-stats .stat-label { font-size: 0.6875rem; letter-spacing: 0.05em; }
}
html.dr-premium .hero-copy { min-width: 0; }
html.dr-premium .hero-badge { margin-bottom: var(--space-5); }
html.dr-premium .badge {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
  box-shadow: var(--inner-light);
}
html.dr-premium .hero-actions { margin-bottom: var(--space-4); gap: var(--space-3); }
html.dr-premium .btn-lg {
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 0.625rem;
  letter-spacing: -0.005em;
}
html.dr-premium .hero-microcopy { margin-bottom: clamp(2rem, 4vw, 3rem); }
html.dr-premium .hero-stats {
  gap: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
html.dr-premium .stat-number {
  font-family: var(--font-heading);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
  font-size: var(--text-xl);
}
html.dr-premium .stat-divider { display: none; }
@media (max-width: 639px) {
  html.dr-premium .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  html.dr-premium .stat-label { font-size: 0.6875rem; letter-spacing: 0.05em; }
}


/* ---------- Cards: the raised slabs from style.css, hairline border ---------- */
html.dr-premium .problem-card,
html.dr-premium .feature-card,
html.dr-premium .step-card,
html.dr-premium .audience-card,
html.dr-premium .gov-card {
  border-color: var(--hairline);
  box-shadow: var(--elevation-raised);
  border-radius: var(--radius-lg);
}
html.dr-premium .feature-card:hover,
html.dr-premium .problem-card:hover,
html.dr-premium .audience-card:hover,
html.dr-premium .gov-card:hover {
  border-color: rgba(201, 162, 94, 0.28);
  box-shadow: var(--elevation-raised-hover);
}
html.dr-premium .feature-card h3,
html.dr-premium .problem-card h3,
html.dr-premium .step-card h3,
html.dr-premium .audience-card h3 {
  letter-spacing: -0.012em;
  font-weight: 600;
}
html.dr-premium .feature-number { letter-spacing: 0.08em; }

/* Pricing: featured plan carries a quiet gold halo */
html.dr-premium .pricing-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-raised);
}
html.dr-premium .pricing-card:hover { box-shadow: var(--elevation-raised-hover); }
html.dr-premium .pricing-card-featured {
  box-shadow:
    var(--elevation-raised),
    0 0 0 4px rgba(201, 162, 94, 0.12);
}
html.dr-premium .pricing-card-featured:hover {
  box-shadow:
    var(--elevation-raised-hover),
    0 0 0 4px rgba(201, 162, 94, 0.12);
}

/* CTA block */
html.dr-premium .cta-headline {
  font-weight: 460;
  font-variation-settings: "opsz" 120;
  letter-spacing: -0.02em;
}

/* ---------- Motion: reveal is shorter and quieter ---------- */
html.dr-premium .fade-up {
  transform: translateY(14px);
  transition: opacity 0.7s var(--dr-ease-release), transform 0.7s var(--dr-ease-release);
}
html.dr-premium .hero-headline.fade-up { transition-delay: 40ms; }
html.dr-premium .hero-sub.fade-up { transition-delay: 110ms; }
html.dr-premium .hero-actions.fade-up { transition-delay: 180ms; }
html.dr-premium .hero-stats.fade-up { transition-delay: 260ms; }
html.dr-premium .hero-visual.fade-up { transition-delay: 220ms; transform: translateY(22px); }
html.dr-premium .hero-visual.fade-up.visible { transform: none; } /* was stuck 22px low: this rule outranked .fade-up.visible */
html.dr-premium .stagger > .fade-up:nth-child(n+7) { transition-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  html.dr-premium .fade-up { transition: none; transform: none; opacity: 1; }
}

/* Safety net: content never stays hidden. If the scroll observer never
   fires (fast scroll, old browser, print, crawler snapshot), every reveal
   element becomes visible 2.5 s after load regardless. */
@keyframes dr-reveal-fallback { to { opacity: 1; transform: none; } }
html.dr-premium .fade-up { animation: dr-reveal-fallback 0s 2.5s forwards; }
html.dr-premium .fade-up.visible { animation: none; }

/* The product frame, film and footer credit live in hero-film.css (shared with the landers). */