/* ══════════════════════════════
   THEME VARIABLES
══════════════════════════════ */
:root {
  --brand:           #2c6bed;
  --brand-dark:      #1f4fb3;
  --brand-light:     #e8f0ff;
  --brand-faint:     #f0f4ff;
  --brand-muted:     #7aa8f7;
  --brand-tint:      rgba(44,107,237,0.25);
  --brand-border:    rgba(44,107,237,0.3);
  --brand-shadow-sm: rgba(44,107,237,0.08);
  --brand-shadow-md: rgba(44,107,237,0.45);
  --brand-shadow-lg: rgba(44,107,237,0.55);
  --nav-bg:          #111;
  --footer-bg:       #0d1117;
  --star-color:      #f5a623;
  --accent:          #2c6bed;
  --accent-txt:      white;
}

/* UofO Ducks */
body.theme-ducks {
  --brand:           #007030;
  --brand-dark:      #005225;
  --brand-light:     #d6ede1;
  --brand-faint:     #edf7f1;
  --brand-muted:     #66b38a;
  --brand-tint:      rgba(0,112,48,0.2);
  --brand-border:    rgba(0,112,48,0.3);
  --brand-shadow-sm: rgba(0,112,48,0.08);
  --brand-shadow-md: rgba(0,112,48,0.35);
  --brand-shadow-lg: rgba(0,112,48,0.45);
  --nav-bg:          #007030;
  --footer-bg:       #005225;
  --star-color:      #FEE11A;
  --accent:          #FEE11A;
  --accent-txt:      #007030;
}

/* OSU Beavers */
body.theme-beavers {
  --brand:           #dc4405;
  --brand-dark:      #000000;
  --brand-light:     #fde0d0;
  --brand-faint:     #fff0ea;
  --brand-muted:     #f4784a;
  --brand-tint:      rgba(220,68,5,0.2);
  --brand-border:    rgba(220,68,5,0.3);
  --brand-shadow-sm: rgba(220,68,5,0.08);
  --brand-shadow-md: rgba(220,68,5,0.35);
  --brand-shadow-lg: rgba(220,68,5,0.45);
  --nav-bg:          #000000;
  --footer-bg:       #000000;
  --star-color:      #dc4405;
  --accent:          #dc4405;
  --accent-txt:      white;
}

      * {
        box-sizing: border-box;
      }
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        line-height: 1.6;
        background: #f5f5f5;
        color: #333;
      }
      .container {
        max-width: 1100px;
        margin: auto;
        padding: 40px 20px;
      }
      h1, h2 {
        margin-bottom: 20px;
      }
      button {
        background: var(--brand);
        color: white;
        border: none;
        padding: 14px 22px;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
      }
      button:hover {
        background: var(--brand-dark);
      }

      /* ── NAVBAR ── */
      nav {
        background: var(--nav-bg);
        color: white;
        position: sticky;
        top: 0;
        z-index: 1000;
      }
      nav .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1100px;
        margin: auto;
        padding: 15px;
        position: relative;
      }
      nav .nav-brand {
        font-size: 20px;
        white-space: nowrap;
      }
      nav .nav-brand-link {
        color: white !important;
        text-decoration: none !important;
        font-size: 20px !important;
        font-weight: bold;
        margin-left: 0 !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
        transition: none !important;
      }
      nav .nav-brand-link:hover {
        background: none !important;
        color: white !important;
        transform: none !important;
      }

      /* Hamburger button */
      .nav-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
      }
      .nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: white;
        border-radius: 2px;
        transition: transform 0.3s, opacity 0.3s;
      }
      /* Animate hamburger → X */
      .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .nav-toggle.open span:nth-child(2) { opacity: 0; }
      .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

      /* Desktop links */
      .nav-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      nav a {
        color: white;
        text-decoration: none;
        margin-left: 4px;
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background 0.3s, color 0.3s;
        white-space: nowrap;
      }
      nav a:hover {
        background: #333;
        color: white;
      }

      /* ── HERO SLIDER ── */
      .hero-slider {
        position: relative;
        width: 100%;
        height: 48vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
        color: white;
        text-align: center;
      }
      .hero-slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
      }
      .hero-slide::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: inherit;
        background-size: cover;
        background-position: center center;
        filter: blur(18px) brightness(0.55);
        transform: scale(1.06); /* slightly oversized to hide blur edge fringing */
        z-index: 0;
      }
      .hero-slide.active {
        opacity: 1;
      }
      /* Crisp centered image rendered above the blurred backdrop */
      .hero-slide::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: inherit;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: 1;
      }
      .hero-content {
        position: relative;
        z-index: 3;
        max-width: 700px;
        padding: 20px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
      }
      .hero-content h1 {
        font-size: 36px;
        margin-bottom: 12px;
      }
      .hero-content p {
        font-size: 16px;
      }
      .hero-content .subtext {
        font-size: 14px;
        margin-top: 8px;
        font-style: italic;
      }

      /* ── FLOATING CTA ── */
      .floating-cta {
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
      }
      .floating-cta a {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
        display: block;
        background: var(--brand);
        color: white;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        padding: 18px 12px;
        border-radius: 8px;
        box-shadow: 0 4px 14px var(--brand-shadow-md);
        letter-spacing: 0.05em;
        transition: background 0.2s, box-shadow 0.2s;
      }
      .floating-cta a:hover {
        background: var(--brand-dark);
        box-shadow: 0 6px 18px var(--brand-shadow-lg);
      }

      /* ── TESTIMONIALS ── */
      .testimonials-section {
        background: #fff;
        padding: 60px 20px;
      }
      .testimonials-inner {
        max-width: 1100px;
        margin: auto;
      }
      .testimonials-inner h2 { margin-bottom: 8px; }
      .section-sub {
        font-size: 16px;
        color: #666;
        margin-bottom: 36px;
      }
      .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
      }
      .testimonial-card {
        background: #f9fbff;
        border: 1px solid var(--brand-light);
        border-radius: 10px;
        padding: 24px;
        box-shadow: 0 2px 8px var(--brand-shadow-sm);
      }
      .testimonial-stars {
        color: var(--star-color);
        font-size: 18px;
        margin-bottom: 10px;
        letter-spacing: 2px;
      }
      .testimonial-card p {
        font-style: italic;
        font-size: 15px;
        margin-bottom: 14px;
        color: #444;
        line-height: 1.7;
      }
      .testimonial-author {
        font-weight: bold;
        font-size: 14px;
        color: var(--brand);
      }
      .testimonial-author span {
        font-weight: normal;
        color: #888;
        margin-left: 4px;
      }

      /* ── PRICING ── */
      .pricing-section {
        background: var(--brand-faint);
        padding: 60px 20px;
      }
      .pricing-inner {
        max-width: 1100px;
        margin: auto;
      }
      .pricing-inner h2 { margin-bottom: 8px; }
      .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
        margin-top: 36px;
      }
      .pricing-card {
        background: white;
        border-radius: 10px;
        padding: 28px 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        text-align: center;
        position: relative;
        border: 2px solid transparent;
        display: flex;
        flex-direction: column;
      }
      .pricing-card.popular { border-color: var(--brand); }
      .popular-badge {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--brand);
        color: white;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 14px;
        border-radius: 20px;
        white-space: nowrap;
        letter-spacing: 0.04em;
      }
      .pricing-card h3 {
        font-size: 18px;
        margin-bottom: 6px;
        color: #111;
      }
      .pricing-card .price {
        font-size: 36px;
        font-weight: bold;
        color: var(--brand);
        margin: 10px 0 4px;
      }
      .pricing-card .price-note {
        font-size: 13px;
        color: #888;
        margin-bottom: 16px;
      }
      .pricing-card ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
        text-align: left;
        flex: 1;
      }
      .pricing-card ul li {
        font-size: 14px;
        padding: 5px 0;
        color: #444;
        border-bottom: 1px solid #f0f0f0;
      }
      .pricing-card ul li::before {
        content: '✓ ';
        color: var(--brand);
        font-weight: bold;
      }
      .pricing-disclaimer {
        margin-top: 20px;
        font-size: 13px;
        color: #888;
        text-align: center;
      }

      /* ── MEMBERSHIP ── */
      .membership-wrapper {
        margin-top: 48px;
        background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 60%, var(--accent) 100%);
        border-radius: 16px;
        padding: 48px 40px;
        color: white;
        position: relative;
        overflow: hidden;
      }
      .membership-wrapper::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -60px;
        width: 240px;
        height: 240px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
      }
      .membership-wrapper::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -40px;
        width: 300px;
        height: 300px;
        background: rgba(255,255,255,0.04);
        border-radius: 50%;
      }
      .membership-inner {
        position: relative;
        z-index: 1;
        display: flex;
        gap: 48px;
        align-items: center;
        flex-wrap: wrap;
      }
      .membership-left {
        flex: 1;
        min-width: 240px;
      }
      .membership-tag {
        display: inline-block;
        background: rgba(255,255,255,0.2);
        color: white;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 5px 14px;
        border-radius: 20px;
        margin-bottom: 16px;
      }
      .membership-left h3 {
        font-size: 28px;
        margin: 0 0 10px;
        color: white;
      }
      .membership-left p {
        font-size: 15px;
        color: rgba(255,255,255,0.85);
        line-height: 1.7;
        margin: 0;
      }
      .membership-right {
        flex: 1;
        min-width: 280px;
      }
      .membership-price-row {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 24px;
      }
      .membership-price {
        font-size: 52px;
        font-weight: bold;
        color: white;
        line-height: 1;
      }
      .membership-price-detail {
        font-size: 15px;
        color: rgba(255,255,255,0.75);
      }
      .membership-features {
        list-style: none;
        padding: 0;
        margin: 0 0 28px;
      }
      .membership-features li {
        font-size: 15px;
        color: rgba(255,255,255,0.92);
        padding: 7px 0;
        border-bottom: 1px solid rgba(255,255,255,0.12);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .membership-features li:last-child {
        border-bottom: none;
      }
      .membership-features li::before {
        content: '✓';
        background: rgba(255,255,255,0.2);
        color: white;
        font-weight: bold;
        font-size: 12px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .membership-cta {
        background: white;
        color: var(--brand);
        border: none;
        padding: 14px 32px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s, transform 0.2s;
        width: 100%;
      }
      .membership-cta:hover {
        background: var(--brand-faint);
        transform: translateY(-2px);
      }
      .membership-note {
        font-size: 12px;
        color: rgba(255,255,255,0.6);
        text-align: center;
        margin-top: 10px;
      }

      /* ── PROBLEMS ── */
      .problem-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
      }
      .problem-card {
        background: white;
        padding: 16px 10px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.07);
        transition: background 0.2s, transform 0.2s;
        cursor: default;
      }
      .problem-card:hover {
        background: var(--brand-light);
        transform: translateY(-2px);
      }
      .problem-card svg {
        display: block;
        margin: 0 auto 8px;
      }
      .problem-card h3 {
        font-size: 13px;
        font-weight: 600;
        color: #333;
        margin: 0;
        line-height: 1.3;
      }

      /* ── MEET THE DADS ── */
      .dads-section {
        background: #f5f8ff;
        padding: 60px 20px;
      }
      .dads-inner {
        max-width: 1100px;
        margin: auto;
      }
      .dads-inner h2 { margin-bottom: 8px; }
      .dad-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 28px;
        margin-top: 36px;
      }
      .dad-card {
        background: white;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 16px var(--brand-shadow-sm);
        transition: transform 0.2s, box-shadow 0.2s;
        display: flex;
        flex-direction: column;
      }
      .dad-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--brand-shadow-md);
      }
      .dad-card-photo {
        width: 100%;
        height: 240px;
        object-fit: cover;
        object-position: top;
        display: block;
      }
      .dad-card-photo-placeholder {
        width: 100%;
        height: 240px;
        background: linear-gradient(135deg, #c8d8ff 0%, var(--brand-light) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 64px;
      }
      .dad-card-body {
        padding: 22px 24px 26px;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .dad-card-name {
        font-size: 20px;
        font-weight: bold;
        color: #111;
        margin: 0 0 4px;
      }
      .dad-card-tagline {
        font-size: 14px;
        color: var(--brand);
        font-style: italic;
        margin: 0 0 14px;
      }
      .dad-card-bio {
        font-size: 14px;
        color: #555;
        line-height: 1.7;
        margin-bottom: 0;
        flex: 1;
      }
      .dad-card-badges {
        border-top: 1px solid #eef1f8;
        padding-top: 14px;
        margin-top: 16px;
      }
      .badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .badge {
        display: inline-block;
        background: var(--brand-light);
        color: var(--brand);
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
      }

      /* ── HOW IT WORKS ── */
      .how-section {
        background: #fff;
        padding: 60px 20px;
      }
      .how-inner {
        max-width: 1100px;
        margin: auto;
      }
      .how-inner h2 { margin-bottom: 8px; }
      .timeline {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin: 48px 0 36px;
        position: relative;
      }
      .timeline-step {
        flex: 1;
        text-align: center;
        padding: 0 16px;
        position: relative;
      }
      .timeline-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 35px;
        left: calc(50% + 38px);
        right: calc(-50% + 38px);
        height: 3px;
        background: linear-gradient(to right, var(--brand), var(--brand-light));
        z-index: 0;
      }
      .timeline-icon {
        width: 72px;
        height: 72px;
        background: var(--brand-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        position: relative;
        z-index: 1;
        border: 3px solid var(--brand);
        transition: background 0.3s;
      }
      .timeline-step:hover .timeline-icon {
        background: var(--brand);
      }
      .timeline-step:hover .timeline-icon svg {
        fill: white;
      }
      .timeline-step-number {
        position: absolute;
        top: -10px;
        right: -6px;
        background: var(--brand);
        color: white;
        font-size: 11px;
        font-weight: bold;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .timeline-step h3 {
        font-size: 17px;
        margin-bottom: 8px;
        color: #111;
      }
      .timeline-step p {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        max-width: 200px;
        margin: 0 auto;
      }
      .how-reassurance {
        background: var(--brand-faint);
        border-radius: 10px;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .reassurance-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        color: #333;
        font-weight: 500;
      }
      .reassurance-item svg { flex-shrink: 0; }

      /* ── FORM ── */
      form {
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
      form input,
      form textarea,
      form select {
        width: 100%;
        padding: 12px;
        margin-bottom: 15px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 14px;
      }

      /* ── FOOTER ── */
      footer {
        background: var(--footer-bg);
        color: white;
        margin-top: 0;
      }
      .footer-top {
        padding: 60px 20px 40px;
        max-width: 1100px;
        margin: auto;
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 48px;
      }
      .footer-brand h3 {
        font-size: 22px;
        color: white;
        margin: 0 0 10px;
      }
      .footer-brand p {
        font-size: 14px;
        color: rgba(255,255,255,0.6);
        line-height: 1.8;
        margin: 0 0 20px;
      }
      .footer-trust-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .footer-trust-badge {
        background: var(--brand-tint);
        color: var(--brand-muted);
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 20px;
        border: 1px solid var(--brand-border);
      }
      .footer-col h4 {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.4);
        margin: 0 0 18px;
      }
      .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
      }
      .footer-contact-icon {
        width: 36px;
        height: 36px;
        background: var(--brand-shadow-sm);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .footer-contact-label {
        font-size: 11px;
        color: rgba(255,255,255,0.4);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 2px;
      }
      .footer-contact-value {
        font-size: 15px;
        color: white;
        font-weight: 500;
      }
      .footer-contact-value a {
        color: white;
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-contact-value a:hover {
        color: var(--brand-muted);
      }
      .footer-contact-sub {
        font-size: 12px;
        color: rgba(255,255,255,0.45);
        margin-top: 2px;
      }
      .footer-hours-row {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.75);
      }
      .footer-hours-row:last-child {
        border-bottom: none;
      }
      .footer-hours-row .day {
        color: rgba(255,255,255,0.45);
        font-size: 13px;
      }
      .footer-hours-row .time {
        color: white;
        font-weight: 500;
      }
      .footer-hours-row .closed {
        color: rgba(255,255,255,0.3);
        font-weight: normal;
      }
      .footer-bottom {
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 20px;
        text-align: center;
        font-size: 13px;
        color: rgba(255,255,255,0.35);
      }
      .footer-bottom a {
        color: rgba(255,255,255,0.45);
        text-decoration: none;
      }
      .footer-bottom a:hover { color: white; }

      /* ══════════════════════════════
         MOBILE STYLES  (≤ 768px)
      ══════════════════════════════ */
      @media (max-width: 768px) {

        /* Navbar */
        .nav-toggle {
          display: flex;
          width: auto;
          margin-left: auto;
        }
        nav .nav-container {
          flex-wrap: wrap;
        }
        .nav-links {
          display: none;
          flex-direction: column;
          align-items: flex-start;
          width: 100%;
          background: var(--nav-bg);
          padding: 10px 0 16px;
          gap: 2px;
        }
        .nav-links.open {
          display: flex;
        }
        nav a {
          margin-left: 0;
          width: 100%;
          padding: 12px 20px;
          border-radius: 0;
          font-size: 15px;
          border-bottom: 1px solid #222;
        }
        nav a:last-child {
          border-bottom: none;
        }
        .nav-toggle span {
          width: 24px !important;
        }

        /* Hero */
        .hero-slider {
          height: 70vw;        /* taller relative to viewport on phones */
          min-height: 280px;
        }
        .hero-slide {
          background-size: cover; /* fill on small screens */
        }
        .hero-content {
          padding: 16px;
          margin: 0 12px;
        }
        .hero-content h1 {
          font-size: 22px;
        }
        .hero-content p {
          font-size: 14px;
        }
        .hero-content .subtext {
          font-size: 12px;
        }

        /* Floating CTA — hide on mobile (form is easy to reach) */
        .floating-cta { display: none; }

        /* Footer */
        .footer-top {
          grid-template-columns: 1fr;
          gap: 36px;
          padding: 40px 20px 32px;
        }

        /* Testimonials */
        .testimonial-grid { grid-template-columns: 1fr; }

        /* Pricing */
        .pricing-grid { grid-template-columns: 1fr; }
        .membership-wrapper { padding: 32px 20px; }
        .membership-inner { flex-direction: column; gap: 28px; }
        .membership-price { font-size: 42px; }

        /* Dad cards */
        .dad-grid { grid-template-columns: 1fr; }

        .problem-grid {
          grid-template-columns: repeat(5, 1fr);
          gap: 8px;
        }
        .problem-card {
          padding: 12px 6px;
        }
        .problem-card h3 {
          font-size: 11px;
        }

        /* Steps: single column */
        .steps {
          grid-template-columns: 1fr;
        }
        /* Timeline: stack vertically on mobile */
        .timeline {
          flex-direction: column;
          align-items: center;
          gap: 0;
        }
        .timeline-step {
          width: 100%;
          max-width: 320px;
          padding: 0 16px 32px;
        }
        .timeline-step:not(:last-child)::after {
          top: auto;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 3px;
          height: 32px;
          background: linear-gradient(to bottom, var(--brand), var(--brand-light));
        }
        .how-reassurance {
          flex-direction: column;
          gap: 14px;
          align-items: flex-start;
        }

        /* Form */
        form {
          padding: 20px 16px;
        }

        /* Containers */
        .container {
          padding: 30px 16px;
        }

        /* Buttons */
        button {
          width: 100%;
          text-align: center;
        }
        a > button {
          display: block;
        }
      }

      /* ══════════════════════════════
         SMALL PHONES  (≤ 420px)
      ══════════════════════════════ */
      @media (max-width: 420px) {
        .problem-grid {
          grid-template-columns: repeat(5, 1fr);
          gap: 6px;
        }
        .problem-card h3 {
          font-size: 10px;
        }
        .hero-content h1 {
          font-size: 18px;
        }
      }

/* ── SCROLL OFFSET (accounts for sticky navbar) ── */
section[id], div[id], footer[id] {
  scroll-margin-top: 100px;
}

/* Container sections sit flush so need extra offset */
section.container[id] {
  scroll-margin-top: 120px;
}

/* ── THEME VARIABLES ── */
:root {
  --brand:        var(--brand);
  --brand-dark:   var(--brand-dark);
  --brand-light:  var(--brand-light);
  --brand-faint:  var(--brand-faint);
  --nav-bg:       #111;
  --footer-bg:    #0d1117;
}

body.theme-ducks {
  --brand:        #007030;
  --brand-dark:   #005225;
  --brand-light:  #d6ede1;
  --brand-faint:  #edf7f1;
  --nav-bg:       #007030;
  --footer-bg:    #005225;
}

body.theme-beavers {
  --brand:        #dc4405;
  --brand-dark:   #000000;
  --brand-light:  #fde0d0;
  --brand-faint:  #fff0ea;
  --nav-bg:       #000000;
  --footer-bg:    #000000;
}

/* Apply variables throughout */
button                            { background: var(--brand); }
button:hover                      { background: var(--brand-dark); }
nav                               { background: var(--nav-bg); }
footer                            { background: var(--footer-bg); }
.floating-cta a                   { background: var(--brand); }
.floating-cta a:hover             { background: var(--brand-dark); }
.problem-card:hover               { background: var(--brand-light); }
.badge                            { background: var(--brand-light); color: var(--brand); }
.timeline-icon                    { background: var(--brand-light); border-color: var(--brand); }
.timeline-step:hover .timeline-icon { background: var(--brand); }
.timeline-step:not(:last-child)::after { background: linear-gradient(to right, var(--brand), var(--brand-light)); }
.timeline-step-number             { background: var(--brand); }
.how-reassurance                  { background: var(--brand-faint); }
.testimonial-card                 { border-color: var(--brand-light); }
.testimonial-author               { color: var(--brand); }
.testimonial-stars                { color: var(--brand); }
.pricing-section                  { background: var(--brand-faint); }
.pricing-card.popular             { border-color: var(--brand); }
.popular-badge                    { background: var(--brand); }
.pricing-card .price              { color: var(--brand); }
.pricing-card ul li::before       { color: var(--brand); }
.membership-wrapper               { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 60%, var(--brand-light) 100%); }
.dads-section                     { background: var(--brand-faint); }
.dad-card:hover                   { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.dad-card-tagline                 { color: var(--brand); }
.footer-contact-value a:hover     { color: var(--brand-light); }
.footer-trust-badge               { background: rgba(255,255,255,0.1); color: var(--brand-light); border-color: rgba(255,255,255,0.2); }
.footer-contact-icon              { background: rgba(255,255,255,0.1); }
.nav-brand-link                   { color: white !important; }

/* Ducks yellow accent */
body.theme-ducks .testimonial-stars  { color: #FEE11A; }
body.theme-ducks .pricing-card .price { color: var(--brand); }
body.theme-ducks .popular-badge      { background: #FEE11A; color: #007030; }
body.theme-ducks .pricing-card.popular { border-color: #FEE11A; }
body.theme-ducks button              { background: #007030; }
body.theme-ducks button:hover        { background: #FEE11A; color: #007030; }
body.theme-ducks .floating-cta a     { background: #007030; }
body.theme-ducks .floating-cta a:hover { background: #FEE11A; color: #007030; }
body.theme-ducks .timeline-step-number { background: #FEE11A; color: #007030; }
body.theme-ducks .membership-wrapper { background: linear-gradient(135deg, #005225 0%, #007030 60%, #FEE11A 100%); }

/* Beavers orange accent */
body.theme-beavers .testimonial-stars { color: #dc4405; }
body.theme-beavers button             { background: #dc4405; }
body.theme-beavers button:hover       { background: #000000; }
body.theme-beavers .floating-cta a    { background: #dc4405; }
body.theme-beavers .floating-cta a:hover { background: #000000; }
body.theme-beavers .popular-badge     { background: #dc4405; color: white; }
body.theme-beavers .pricing-card.popular { border-color: #dc4405; }
body.theme-beavers .timeline-step-number { background: #dc4405; }
body.theme-beavers .membership-wrapper { background: linear-gradient(135deg, #000000 0%, #dc4405 60%, #ff6a33 100%); }

/* ── THEME SWITCHER ── */
.theme-switcher {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.theme-switcher select {
  background: rgba(255,255,255,0.08);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.theme-switcher select:hover {
  border-color: rgba(255,255,255,0.4);
}