/* ═══════════════════════════════════════════════════════════════
   Di Fiore Creative — Apple-style theme overlay

   Load this AFTER your site's existing inline <style> block.
   It re-tokenizes the palette and re-tunes typography + components
   to match the Free-Month landing page look. Markup stays untouched.

   Install:
     <link rel="stylesheet" href="/difiorecreative-theme.css">
   Add to every page's <head>, AFTER the existing stylesheet.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── 1. Palette: collapse to 2 brand colors + white ─── */
:root {
  --navy:        #051B42;   /* was #000435 — brand navy */
  --navy-mid:    #051B42;
  --blue:        #051B42;   /* was #4361EE — unified to navy */
  --blue-light:  #0A2A5C;
  --blue-pale:   #B3CDF9;   /* unchanged, exact brand match */
  --blue-glow:   #B3CDF9;
  --white:       #FFFFFF;
  --off-white:   #F5F5F7;   /* was #FAFBFF — Apple's off-white */
  --gray-100:    #F5F5F7;
  --gray-300:    rgba(5,27,66,0.18);
  --gray-500:    rgba(5,27,66,0.55);
  --gray-700:    rgba(5,27,66,0.75);
}

/* ─── 2. Typography: Inter / SF Pro stack ─── */
body,
button,
input,
textarea,
select {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Inter", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv11", "kern";
}

/* ─── 3. Headlines: tighter tracking, bolder weight ─── */
.hero-title,
.section-title,
.step-title,
.final-cta h2,
.service-card h3,
.why-card h4 {
  letter-spacing: -0.035em;
  font-weight: 700;
}

.hero-title {
  letter-spacing: -0.04em;
  font-weight: 700;
  line-height: 1.02;
  font-size: clamp(42px, 7vw, 84px);
}

.section-title {
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.service-card h3,
.why-card h4 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Drop the em italic tint everywhere — use pale blue as accent color */
.section-title em,
.final-cta h2 em,
.footer-tagline em,
.dfc-popup-title em {
  color: var(--blue-pale);
  font-style: normal;
}

/* ─── 4. Hero: Apple-style gradient on the rotating headline ─── */
.hero-title-line2 { color: #FFFFFF; }
.hero-title-line2 .fixed {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.hero-title-line2 .rotating-word {
  background: linear-gradient(90deg, #FFFFFF 0%, #B3CDF9 40%, #A8B8FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  padding-right: 0.12em;
}

.hero-badge {
  background: rgba(179,205,249,0.12);
  border-color: rgba(179,205,249,0.28);
}
.hero-badge span {
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-pale);
}

.hero-sub {
  color: rgba(255,255,255,0.72);
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.55;
}

/* ─── 5. Buttons: pill-shaped ─── */
.btn {
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 15px;
  transition: background 160ms ease, transform 160ms ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: none; }

.btn-primary {
  background: var(--white);
  color: var(--navy);
  border: none;
}
.btn-primary:hover { background: var(--blue-pale); }

.btn-dark {
  background: var(--navy);
  color: var(--white);
  border: none;
}
.btn-dark:hover { background: var(--blue-light); }

.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.3);
  padding: 11.5px 26px;
  border-radius: 999px;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.5);
}

/* ─── 6. Navigation: compact, Apple-translucent ─── */
.nav-inner { height: 60px; }
.nav-logo img { height: 38px; }
.nav-cta {
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.nav-cta:hover { background: var(--blue-pale); }

.nav-links a {
  letter-spacing: -0.005em;
  font-weight: 500;
}

/* ─── 7. Section eyebrows: drop the lines, soften ─── */
.section-eyebrow { margin-bottom: 10px; justify-content: flex-start; }
.section-eyebrow-line { display: none; }
.section-eyebrow span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--navy);
}
.why-header .section-eyebrow span { color: var(--blue-pale); }

/* ─── 8. Social proof / metrics: softer + responsive 4/2/1 grid ─── */
.social-proof-label {
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
  line-height: 1.4;
}

/* Force CSS grid — 4-up desktop, 2×2 mobile (instead of flex-wrap producing 1-per-row) */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.metric-card {
  border-radius: 16px;
  background: var(--off-white);
  border: 1px solid rgba(5,27,66,0.08);
  padding: 16px 20px;
  min-width: 0;
  justify-content: flex-start;
}
.metric-icon {
  background: rgba(179,205,249,0.28);
  border-radius: 12px;
  flex-shrink: 0;
}
.metric-icon svg { stroke: var(--navy); }
.metric-value { letter-spacing: -0.02em; white-space: nowrap; }
.metric-label {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
}

/* Tablet + mobile: 2×2 grid */
@media (max-width: 900px) {
  .metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 520px;
    padding: 0 12px;
  }
  .metric-card { padding: 12px 14px; gap: 10px; }
  .metric-icon { width: 36px; height: 36px; }
  .metric-icon svg { width: 16px; height: 16px; }
  .metric-value { font-size: 18px; }
  .metric-label { font-size: 11px; }
}

/* Very narrow phones: ensure readability but keep 2 columns */
@media (max-width: 380px) {
  .metrics-row { gap: 8px; }
  .metric-card { padding: 10px 12px; gap: 8px; }
  .metric-icon { width: 32px; height: 32px; }
  .metric-value { font-size: 15px; }
  .metric-label { font-size: 10px; }
}

.logo-track span {
  letter-spacing: 0.04em;
  color: rgba(5,27,66,0.3);
  font-weight: 600;
}

/* ─── 9. Steps ─── */
.step-card { border-radius: 22px; }
.step-num { background: var(--navy); border-radius: 999px; }
.step-num-label {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
}
.step-feature-icon {
  background: rgba(179,205,249,0.22);
  border-radius: 10px;
}
.step-feature-icon svg { stroke: var(--navy); }

/* Waypoint dots along the rail — glowing, more visible */
.step-dot {
  width: 14px;
  height: 14px;
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow:
    0 0 0 6px rgba(179,205,249,0.28),
    0 0 22px rgba(5,27,66,0.22);
  z-index: 4;
}

/* Scroll-driven progress line for "Three Steps. Zero Guesswork."
   Grows from top to bottom as the user scrolls through the section.
   Gracefully falls back to the existing static track on older browsers. */
@supports (animation-timeline: view()) {
  @media (min-width: 1025px) {
    .steps::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 80px;
      width: 3px;
      height: 0;
      background: linear-gradient(180deg, var(--navy) 0%, #1E4A99 55%, var(--blue-pale) 100%);
      transform: translateX(-50%);
      border-radius: 3px;
      box-shadow:
        0 0 24px rgba(5,27,66,0.28),
        0 0 0 6px rgba(179,205,249,0.1);
      z-index: 3;
      animation: steps-scroll-fill linear both;
      animation-timeline: view();
      animation-range: entry 15% exit 85%;
    }
    @keyframes steps-scroll-fill {
      to { height: calc(100% - 160px); }
    }
    /* Soften the static track so the growing fill pops */
    .steps::before {
      background: linear-gradient(180deg, rgba(5,27,66,0.08) 0%, rgba(5,27,66,0.04) 100%);
    }
  }
}

/* ─── 10. Why section ─── */
.why-card {
  border-radius: 20px;
  padding: 30px;
}
.why-card:hover { border-color: rgba(179,205,249,0.3); }
.why-image { border-radius: 22px; }
.why-card-icon {
  background: rgba(179,205,249,0.14);
  border-radius: 12px;
}

/* ─── 11. Services ─── */
.service-card {
  border-radius: 22px;
  padding: 36px 30px;
}
.service-icon {
  background: rgba(179,205,249,0.22);
  border-radius: 14px;
}
.service-icon svg { stroke: var(--navy); }
.service-check svg { stroke: var(--navy); }
.service-quote {
  color: var(--navy);
  font-style: normal;
  font-weight: 500;
}
.service-number { color: rgba(5,27,66,0.05); }

/* ─── 12. Testimonials ─── */
.t-card { border-radius: 22px; }
.t-card::before {
  background: linear-gradient(90deg, var(--navy), var(--blue-pale));
}
.t-card-metric {
  background: rgba(5,27,66,0.05);
  border-color: rgba(5,27,66,0.12);
}
.t-card-metric svg { stroke: var(--navy); }
.t-card-metric span { color: var(--navy); }
.t-card-stars svg { fill: var(--navy); }
.read-more-btn { color: var(--navy); }

/* ─── 13. Final CTA: Apple-style dark feature block ─── */
.final-cta {
  background: var(--navy);
  color: var(--white);
  padding: 140px 0;
}
.final-cta h2 {
  color: var(--white);
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-weight: 700;
}
.final-cta h2 em {
  background: linear-gradient(90deg, #FFFFFF, #B3CDF9);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  padding-right: 0.12em;
}
.final-cta p {
  color: rgba(255,255,255,0.72);
  font-size: 19px;
  letter-spacing: -0.01em;
}
.final-cta .btn-dark {
  background: var(--white);
  color: var(--navy);
}
.final-cta .btn-dark:hover { background: var(--blue-pale); }

/* ─── 14. Section rhythm: more Apple whitespace on desktop ─── */
@media (min-width: 769px) {
  .problem        { padding: 140px 0; }
  .solution       { padding: 60px 0 140px; }
  .how-it-works   { padding: 60px 0 140px; }
  .why-section    { padding: 140px 0; }
  .services       { padding: 140px 0; }
  .testimonials   { padding: 60px 0 140px; }
}

/* ─── 16. WORK PAGE — .work-* and .case-* class overrides ─── */

/* Hero */
.work-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.work-title em { color: var(--blue-pale); font-style: normal; }
.work-label span {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 15px;
  color: var(--blue-pale);
}
.work-label-line { display: none; }
.work-label { justify-content: flex-start; gap: 0; }
.work-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.55;
  color: rgba(255,255,255,0.68);
}

/* Pill-shaped guide button */
.work-guide-btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 14px 28px;
  font-size: 15px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(5,27,66,0.18);
}
.work-guide-btn:hover {
  background: var(--blue-pale);
  color: var(--navy);
  box-shadow: 0 12px 32px rgba(5,27,66,0.24);
}

/* Stats row — softer Apple-style pill bar */
.work-stats {
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.work-stat-value {
  letter-spacing: -0.02em;
  font-weight: 700;
}
.work-stat-value .accent { color: var(--blue-pale); }
.work-stat-label {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

/* Cases section heading */
.cases-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--navy);
}
.cases-title em { color: var(--blue-pale); font-style: normal; }
.cases-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--gray-500);
}
.cases-eyebrow span {
  color: var(--navy);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 15px;
}
.cases-eyebrow-line { display: none; }

/* Case cards — bigger radius, softer navy accents */
.case-card {
  border-radius: 22px;
  border: 1px solid rgba(5,27,66,0.08);
}
.case-card:hover { border-color: rgba(5,27,66,0.14); }
.case-client {
  color: var(--navy);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
}
.case-headline {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.case-card.featured .case-headline { letter-spacing: -0.03em; }
.case-desc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}

/* Metric pills under each card */
.case-metric {
  border-radius: 999px;
  background: rgba(179,205,249,0.2);
  border-color: rgba(5,27,66,0.08);
  padding: 8px 14px;
}
.case-metric svg { stroke: var(--navy); }
.case-metric span { font-weight: 600; color: var(--navy); }
.case-metric .metric-label { color: var(--gray-500); font-weight: 500; }

/* Tags */
.case-tag {
  border-radius: 999px;
  background: rgba(5,27,66,0.05);
  border-color: rgba(5,27,66,0.1);
  color: var(--gray-500);
  font-weight: 500;
}

/* Type badges */
.case-type-badge {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
}
.badge-video { background: rgba(5,27,66,0.85); color: #fff; }
.badge-campaign { background: var(--blue-pale); color: var(--navy); }
.badge-brand { background: rgba(251,191,36,0.9); color: var(--navy); }

.case-play {
  background: rgba(5,27,66,0.7);
  border-color: rgba(255,255,255,0.2);
}

/* ═══════════════════════════════════════════════════════
   17. PRICING PAGE — .vid-*, .mgmt-*, .calc-*, .faq-* classes
   ═══════════════════════════════════════════════════════ */

/* Big headlines */
.vid-title, .mgmt-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.vid-title em, .mgmt-title em { color: var(--blue-pale); font-style: normal; }
.vid-sub, .mgmt-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.01em;
}

/* Eyebrows — drop the horizontal lines across all pages */
.vid-eyebrow-line, .mgmt-eyebrow-line, .faq-eyebrow-line,
.guide-label-line, .onboard-eyebrow-line, .quiz-label-line { display: none; }
.vid-eyebrow span, .mgmt-eyebrow span, .faq-eyebrow span,
.guide-label span, .onboard-eyebrow span, .quiz-label span {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 15px;
}

/* Promo banner */
.promo-banner {
  background: rgba(179,205,249,0.12);
  border-color: rgba(179,205,249,0.3);
}
.promo-banner-pulse { background: var(--blue-pale); }
.promo-banner span { color: var(--blue-pale); }

/* Video-production pricing cards */
.vid-card { border-radius: 22px; }
.vid-card.featured { background: var(--navy); }
.popular-badge {
  background: var(--blue-pale);
  color: var(--navy);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.card-tier-label {
  letter-spacing: 0;
  text-transform: none;
  color: var(--blue-pale);
  font-weight: 500;
  font-size: 13px;
}
.card-tier-name {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.card-tier-desc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}
.card-price {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  letter-spacing: -0.03em;
}
.card-discount-badge {
  background: rgba(179,205,249,0.14);
  border-color: rgba(179,205,249,0.3);
}
.card-discount-badge span { color: var(--blue-pale); }
.card-cta {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.check-icon { background: rgba(179,205,249,0.18); }
.check-icon svg { stroke: var(--blue-pale); }

/* Mobile pricing tabs */
.mobile-vid-tab.active { background: rgba(179,205,249,0.15); }
.mobile-vid-tab-badge { background: var(--blue-pale); color: var(--navy); letter-spacing: 0; text-transform: none; }

/* Comparison table */
.vid-comp-table, .comp-table {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
}

/* Calculator */
.calc-card { border-radius: 24px; }
.calc-spend-display {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.calc-label {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
}
.calc-result { border-radius: 16px; }
.calc-result-label {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 12px;
}
.calc-result-value {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.calc-result-value.highlight { color: var(--blue-pale); }
.calc-total-row {
  background: rgba(179,205,249,0.1);
  border-color: rgba(179,205,249,0.2);
  border-radius: 16px;
}
.calc-total-value {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.calc-slider::-webkit-slider-thumb { border-color: var(--navy); }
.calc-slider::-moz-range-thumb { border-color: var(--navy); }
.calc-slider-fill { background: linear-gradient(90deg, var(--navy), var(--blue-pale)); }

/* Starter banner on pricing page */
.starter-banner { border-radius: 22px; }
.starter-banner-tag {
  background: rgba(179,205,249,0.14);
  border-color: rgba(179,205,249,0.3);
}
.starter-banner-tag svg { stroke: var(--blue-pale); }
.starter-banner-tag span { color: var(--blue-pale); letter-spacing: 0; text-transform: none; }
.starter-banner-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.starter-banner-amount {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.starter-banner-fees { color: var(--blue-pale); }
.starter-banner-cta { border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; }
.starter-banner-cta:hover { background: var(--blue-pale); }

/* "What you get" includes */
.includes-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.includes-title em { color: var(--blue-pale); font-style: normal; }
.mgmt-include { border-radius: 14px; }
.mgmt-include-icon { background: rgba(179,205,249,0.14); }
.mgmt-include-icon svg { stroke: var(--blue-pale); }

/* Management CTA */
.mgmt-cta {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mgmt-cta:hover { background: var(--blue-pale); }

/* FAQ */
.faq-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.faq-title em { color: var(--blue-pale); font-style: normal; }
.faq-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}
.faq-cta {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.faq-cta:hover { background: var(--blue-light); }
.faq-count {
  background: rgba(5,27,66,0.05);
  border-color: rgba(5,27,66,0.1);
  border-radius: 999px;
}
.faq-count-dot { background: var(--navy); }
.faq-count span { color: var(--navy); letter-spacing: 0; text-transform: none; }
.faq-item { border-radius: 18px; }
.faq-item.active::before { background: linear-gradient(180deg, var(--navy), var(--blue-pale)); }
.faq-num {
  background: rgba(179,205,249,0.18);
  color: var(--navy);
  border-radius: 999px;
}
.faq-item.active .faq-num { background: var(--navy); color: #fff; }
.faq-q-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.faq-toggle { border-radius: 999px; }
.faq-item.active .faq-toggle { background: rgba(179,205,249,0.2); }
.faq-item.active .faq-toggle svg { stroke: var(--navy); }
.faq-answer a { color: var(--navy); }

/* Trusted banner */
.trusted-card { border-radius: 28px; }
.trusted-quote {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════════════════
   18. FREE-GUIDE PAGE — .quiz-*, .guide-* classes
   ═══════════════════════════════════════════════════════ */

.quiz-hero-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.quiz-hero-title em { color: var(--blue-pale); font-style: normal; }
.quiz-hero-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.01em;
}
.quiz-time {
  background: rgba(5,27,66,0.05);
  border-color: rgba(5,27,66,0.1);
  border-radius: 999px;
}
.quiz-time svg { stroke: var(--navy); }
.quiz-time span { color: var(--navy); letter-spacing: -0.005em; }

/* Preview card */
.quiz-preview { border-radius: 28px; }
.quiz-preview-badge {
  background: rgba(179,205,249,0.1);
  border-color: rgba(179,205,249,0.2);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  font-weight: 600;
}
.quiz-preview-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.quiz-preview-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}
.quiz-preview-item-dot {
  background: rgba(179,205,249,0.2);
  border-color: rgba(179,205,249,0.35);
}
.quiz-preview-item-dot svg { stroke: var(--blue-pale); }

/* Quiz card */
.quiz-card { border-radius: 28px; background: rgba(179,205,249,0.08); border-color: rgba(179,205,249,0.2); }
.quiz-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.quiz-progress-label {
  color: var(--navy);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
}
.quiz-progress-fill { background: linear-gradient(90deg, var(--navy), var(--blue-pale)); }
.quiz-question {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.quiz-option {
  border-radius: 14px;
  border-color: rgba(5,27,66,0.12);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.quiz-option:hover { border-color: var(--navy); background: rgba(5,27,66,0.03); color: var(--navy); }
.quiz-option.selected { border-color: var(--navy); background: rgba(5,27,66,0.06); }
.quiz-option.selected .opt-dot { background: var(--navy); border-color: var(--navy); }
.quiz-input { border-radius: 14px; border-color: rgba(5,27,66,0.15); letter-spacing: -0.005em; }
.quiz-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(5,27,66,0.06); }
.quiz-input-label { letter-spacing: -0.005em; font-weight: 500; }
.quiz-btn-next {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.quiz-btn-next:hover { background: var(--blue-light); }
.quiz-btn-back { border-radius: 999px; font-weight: 500; }
.quiz-thanks-btn { border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; }
.quiz-thanks-btn:hover { background: var(--blue-light); }
.quiz-thanks h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* "What You'll Learn" */
.guide-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.guide-title em { color: var(--blue-pale); font-style: normal; }
.guide-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}
.guide-card { border-radius: 22px; }
.guide-card-num {
  color: var(--navy);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
.guide-card-icon {
  background: rgba(179,205,249,0.2);
  border-color: rgba(179,205,249,0.3);
  border-radius: 14px;
}
.guide-card-icon svg { stroke: var(--navy); }
.guide-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.guide-card-desc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}
.guide-cta { border-radius: 28px; }
.guide-cta-text h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.guide-cta-btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.guide-cta-btn:hover { background: var(--blue-pale); }

/* ═══════════════════════════════════════════════════════
   19. ONBOARDING PAGE — .onboard-*, .steps-*, .bottom-* classes
   ═══════════════════════════════════════════════════════ */

.onboard-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
/* Shimmering gradient on "Started." — pans slowly like on the landing Success-Story CTA */
.onboard-title em {
  background: linear-gradient(90deg,#FFFFFF 0%,#B3CDF9 40%,#A8B8FF 65%,#6C83FF 85%,#B3CDF9 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: normal;
  display: inline-block;
  padding-right: 0.12em;
  animation: onboard-shimmer 7s ease-in-out infinite;
}
@keyframes onboard-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Animated drifting glow orbs in the hero background */
.onboard-hero::before {
  width: 900px !important;
  height: 900px !important;
  background: radial-gradient(circle, rgba(168,184,255,0.14) 0%, rgba(108,131,255,0.06) 35%, transparent 70%) !important;
  animation: onboard-orb-drift-a 22s ease-in-out infinite;
  will-change: transform;
}
.onboard-hero::after {
  width: 700px !important;
  height: 700px !important;
  background: radial-gradient(circle, rgba(179,205,249,0.12) 0%, rgba(40,90,200,0.06) 40%, transparent 70%) !important;
  animation: onboard-orb-drift-b 28s ease-in-out infinite;
  will-change: transform;
}
@keyframes onboard-orb-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%     { transform: translate(-50px, 70px) scale(1.15); }
  66%     { transform: translate(60px, -30px) scale(0.9); }
}
@keyframes onboard-orb-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%     { transform: translate(70px, -50px) scale(1.18); }
  70%     { transform: translate(-40px, 40px) scale(0.88); }
}

/* Pulsing halo behind the main CTA */
.onboard-cta {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.onboard-cta::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(179,205,249,0.5) 0%, rgba(168,184,255,0.25) 50%, transparent 75%);
  opacity: 0;
  z-index: -1;
  animation: onboard-cta-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
  filter: blur(8px);
}
@keyframes onboard-cta-pulse {
  0%, 100% { opacity: 0; transform: scale(0.94); }
  50%     { opacity: 0.85; transform: scale(1.12); }
}
.onboard-cta:hover::before { animation-play-state: paused; opacity: 1; transform: scale(1.15); }
.onboard-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.01em;
}
.onboard-cta {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 16px 36px;
}
.onboard-cta:hover { background: var(--blue-pale); }
.onboard-feature-icon { background: rgba(179,205,249,0.14); border-radius: 999px; }
.onboard-feature-icon svg { stroke: var(--blue-pale); }
.onboard-feature-text { letter-spacing: -0.005em; }

.steps-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.steps-title em { color: var(--blue-pale); font-style: normal; }
.steps-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}
.step-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.step-card-desc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}

/* Bottom CTA section (onboarding) */
.bottom-cta-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.005em;
}
.bottom-cta {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bottom-cta:hover { background: var(--blue-light); }
.bottom-help { letter-spacing: -0.005em; }
.bottom-help a { color: var(--navy); }

/* ─── 15. Modal ─── */
.quote-modal { border-radius: 22px; }
.dfc-popup   { border-radius: 22px; }
.dfc-popup::before {
  background: linear-gradient(90deg, var(--navy), var(--blue-pale));
}
.dfc-popup-icon {
  background: linear-gradient(135deg, var(--navy), var(--blue-pale));
}
.dfc-popup-badge {
  background: rgba(179,205,249,0.14);
  border-color: rgba(179,205,249,0.3);
}
.dfc-popup-badge span { color: var(--navy); letter-spacing: 0; text-transform: none; }
.dfc-popup-cta { background: var(--navy); border-radius: 999px; font-weight: 600; }
.dfc-popup-cta:hover { background: var(--blue-light); }
