/* =============================================================
   TULIP AI — mobile.css  (v2.0 — comprehensive sitewide)
   Loaded via head.html on every page.
   Breakpoints:  900px | 768px | 640px | 480px | 380px
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   0.  GLOBAL RESETS & SAFETY NETS
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
  img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
  }
  /* Fix parallax on mobile/iOS Safari */
  .hero-bg, [class*="__bg"], [class*="-bg"] {
    background-attachment: scroll !important;
  }
  /* Touch target minimum size */
  a, button, [role="button"] {
    min-height: 44px;
  }
}

/* ───────────────────────────────────────────────────────────────
   1.  NAVIGATION  (nav.css supplements)
   Updated: 2026-11-03 — cache-bust v3
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Nav bar itself — pinned to top */
  .nav, .tulip-nav {
    padding: 12px 16px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
  }

  /* Hide nav links by default on mobile */
  .nav-links, .tulip-nav-links {
    display: none;
  }

  /* Show hamburger */
  .nav-hamburger, .tulip-nav-hamburger {
    display: flex !important;
    z-index: 10001 !important;
    position: relative !important;
  }

  /* Open menu panel — CRITICAL: fixed fullscreen below nav bar */
  .nav-links.mobile-open, .tulip-nav-links.mobile-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: calc(100vh - 56px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #0e1a2b !important;
    padding: 8px 16px 60px !important;
    gap: 0 !important;
    z-index: 9999 !important;
    border-top: 1px solid rgba(201,165,78,0.2) !important;
    box-sizing: border-box !important;
  }

  /* Force all direct children to full width */
  .nav-links.mobile-open > li,
  .tulip-nav-links.mobile-open > li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
  }

  /* Top-level nav items */
  .nav-links > li > a, .tulip-nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 4px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #F8F9FA !important;
    border-bottom: 1px solid rgba(201,165,78,0.08) !important;
    min-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .nav-links > li:last-child > a, .tulip-nav-links > li:last-child > a {
    border-bottom: none !important;
  }

  /* CTA button */
  .nav-cta, .tulip-nav-cta {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Mega menus: always visible inline on mobile — no hover needed */
  .nav-mega, .tulip-nav-mega {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mega panel container — CRITICAL: no min-width, constrain to parent */
  .mega-panel, .tulip-mega-panel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(26, 35, 50, 0.5) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Mega panel links - tap-friendly */
  .mega-panel a, .tulip-mega-panel a,
  .start-item, .deep-item, .rogue-item {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    background: rgba(201,165,78,0.05) !important;
    margin-bottom: 6px !important;
    font-size: 0.875rem !important;
    color: #CBD5E1 !important;
    text-decoration: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .mega-panel a:hover, .tulip-mega-panel a:hover,
  .mega-panel a:active, .tulip-mega-panel a:active {
    background: rgba(201,165,78,0.12) !important;
    color: #F8F9FA !important;
  }

  /* Mega panel badges and subtitles */
  .mega-badge, .mega-badge-rogue, .mega-subtitle {
    padding: 4px 4px !important;
    font-size: 0.65rem !important;
    box-sizing: border-box !important;
  }

  /* Nav dropdown wrapper */
  .nav-dropdown, .tulip-nav-dropdown {
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Item icons - constrain */
  .start-item-icon, .deep-item-icon, .rogue-item-icon {
    flex-shrink: 0 !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  /* Item text - allow wrapping */
  .start-item div, .deep-item div, .rogue-item div {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .start-item strong, .deep-item strong, .rogue-item strong {
    font-size: 0.85rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .start-item span, .deep-item span, .rogue-item span {
    font-size: 0.7rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Deep item tags */
  .deep-tag {
    font-size: 0.6rem !important;
    white-space: nowrap !important;
  }

  /* Webinar countdown */
  .webinar-countdown {
    font-size: 0.7rem !important;
  }
}

/* 2b. Credibility */
@media (max-width: 768px) {
  .credibility {
    padding: 40px 20px;
  }
  .credibility-stats {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
  .credibility-stat {
    flex: 0 0 calc(50% - 12px);
    text-align: center;
  }
  .stat-divider {
    display: none;
  }
  .logo-section-label {
    font-size: 0.7rem;
    text-align: center;
    padding: 0 20px;
  }
}
@media (max-width: 480px) {
  .credibility-stat {
    flex: 0 0 100%;
  }
  .number {
    font-size: 2rem !important;
  }
  .logo-ticker-wrap {
    overflow: hidden;
  }
  .logo-ticker {
    animation-duration: 20s;
  }
}

/* 2c. Problem section */
@media (max-width: 900px) {
  .problem {
    padding: 60px 20px;
  }
  .problem-inner {
    padding: 60px 20px;
    max-width: 100%;
  }
  .problem-body {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .stat-callout {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .problem {
    padding: 40px 16px;
  }
  .problem-inner {
    padding: 40px 16px;
  }
  .problem-punchline {
    font-size: 1.2rem;
  }
}

/* 2d. Challenge section (home page challenge) */
@media (max-width: 900px) {
  .challenge {
    padding: 60px 20px;
  }
  .challenge-inner {
    padding: 0 0;
    flex-direction: column;
  }
  .challenge-details-bar {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .detail-divider {
    display: none;
  }
  .challenge-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .challenge {
    padding: 40px 16px;
  }
  .challenge-inner {
    padding: 0;
  }
  .challenge-header h2 {
    font-size: 1.6rem;
  }
}

/* 2e. Audience cards */
@media (max-width: 900px) {
  .audience-cards-row {
    flex-direction: column;
    gap: 16px;
  }
  .audience-card {
    width: 100% !important;
  }
  .audience-card-primary-content {
    flex-direction: column;
    gap: 24px;
  }
}

/* 2f. Testimonials */
@media (max-width: 900px) {
  .testimonial-section {
    padding: 60px 20px;
  }
  .testimonial-content {
    flex-direction: column;
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .testimonial-section {
    padding: 40px 16px;
  }
}

/* 2g. Legacy section */
@media (max-width: 900px) {
  .legacy {
    padding: 60px 20px;
  }
  .legacy-inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .legacy-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .legacy-card {
    width: 100% !important;
  }
  .legacy-intro {
    text-align: center;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .legacy {
    padding: 40px 16px;
  }
}

/* 2h. Footer CTA */
@media (max-width: 900px) {
  .footer-cta {
    padding: 70px 20px;
  }
  .footer-cta-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .footer-cta {
    padding: 50px 16px;
  }
}

/* ─────────────────────────────────────────────────────────────
   3.  CHALLENGE PAGE  (/challenge/)
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
  }
  .hero__content {
    padding: 80px 20px 40px;
    max-width: 100%;
  }
  .hero__title {
    font-size: clamp(2rem, 7vw, 3.5rem);
  }
  .hero__cta-group {
    flex-direction: column;
    gap: 12px;
  }
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
  .problem__grid {
    grid-template-columns: 1fr !important;
  }
  .week-card {
    grid-template-columns: 1fr !important;
  }
  .week-card__visual {
    display: none;
  }
  .includes__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
  .audience__columns {
    grid-template-columns: 1fr !important;
  }
  .testimonials__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .about__grid {
    grid-template-columns: 1fr !important;
  }
  .about__portrait {
    max-width: 300px;
    margin: 0 auto;
  }
  .pricing__grid {
    grid-template-columns: 1fr !important;
  }
  .journey-graph__wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 640px) {
  .stats-bar__grid {
    grid-template-columns: 1fr !important;
  }
  .includes__grid {
    grid-template-columns: 1fr !important;
  }
  .testimonials__grid {
    grid-template-columns: 1fr !important;
  }
  .hero__title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
  .section-heading {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .section-subhead {
    font-size: 0.9rem;
  }
  .image-interlude__quote {
    font-size: 1.1rem;
    padding: 0 8px;
  }
  .guarantee__box {
    padding: 24px 16px;
    flex-direction: column;
    text-align: center;
  }
  .faq-item__question {
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  .hero__subtitle {
    font-size: 0.9rem;
  }
  .hero__proof {
    font-size: 0.75rem;
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .weeks__header, .includes__header, .audience__header,
  .testimonials__header, .about__grid, .pricing__header {
    padding: 0 4px;
  }
  .week-card__content {
    padding: 16px;
  }
  .pricing-card {
    padding: 24px 16px;
  }
}

/* ─────────────────────────────────────────────────────────────
   4.  ASSESSMENT PAGE  (/assessment/)
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .quiz-container {
    padding: 90px 16px 40px;
  }
  .question-card {
    padding: 24px 16px;
  }
  .answer-btn {
    padding: 14px 12px;
    font-size: 0.85rem;
  }
  .landing-stats {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .stat-number {
    font-size: 1.5rem;
  }
  .score-circle {
    width: 120px;
    height: 120px;
  }
  .score-number {
    font-size: 2rem;
  }
  .hero-image-wrap {
    border-radius: 12px;
    width: 100%;
  }
  .results-grid, .breakdown-grid {
    grid-template-columns: 1fr !important;
  }
  .result-tier-card {
    padding: 20px 16px;
  }
}
@media (max-width: 480px) {
  .quiz-question {
    font-size: 1.05rem;
  }
  .answer-options {
    gap: 8px;
  }
  .results-cta-buttons {
    flex-direction: column;
    width: 100%;
  }
  .results-cta-buttons a, .results-cta-buttons button {
    width: 100%;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   5.  RESULTS PAGE  (/results/)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .results-hero {
    padding: 80px 20px 40px;
    text-align: center;
  }
  .results-content {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .tier-section {
    padding: 40px 20px;
  }
  .tier-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .tier-card {
    padding: 20px;
  }
}
@media (max-width: 480px) {
  .results-headline {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
  .tier-label {
    font-size: 0.7rem;
  }
  .cta-section {
    flex-direction: column;
    gap: 12px;
  }
  .cta-section a, .cta-section button {
    width: 100%;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   6.  SALES ARCHITECT PAGE  (/sales-architect/)
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-visual, .fan-container {
    max-width: 500px;
    margin: 0 auto;
  }
  .hero-cta-group {
    flex-direction: column;
    gap: 12px;
  }
  .problem-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .journey-phases {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
  .authors-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  .hero-cinematic {
    min-height: 60vh;
  }
  .fan-container {
    width: 280px;
    height: 200px;
  }
  .book-card {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .book-cover {
    max-width: 180px;
    margin: 0 auto;
  }
  .book-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }
  .agents-grid {
    grid-template-columns: 1fr !important;
  }
  .chains-grid {
    grid-template-columns: 1fr !important;
  }
  .journey-phases {
    grid-template-columns: 1fr !important;
  }
  .authors-grid {
    grid-template-columns: 1fr !important;
  }
  .cinematic-image {
    min-height: 50vh;
    object-position: top;
  }
}
@media (max-width: 480px) {
  .hero-headline, .hero__title {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }
  .book-cover-number {
    font-size: 3rem;
  }
  .book-content h3 {
    font-size: 1.2rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   7.  MAKE MORE OFFERS  (/make-more-offers/)
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner, .mechanism-content, .agents-content, .sleep-content {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .hero-stats, .deal-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 768px) {
  .section {
    padding: 60px 20px;
  }
  .problem-grid {
    grid-template-columns: 1fr !important;
  }
  .module-grid {
    grid-template-columns: 1fr !important;
  }
  .audience-grid {
    grid-template-columns: 1fr !important;
  }
  .deal-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
  .sleep-metrics {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .countdown-timer {
    gap: 8px;
  }
  .countdown-number {
    font-size: 2rem;
    min-width: 60px;
  }
  .launch-card {
    padding: 20px 16px;
  }
  .value-row {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .value-total {
    text-align: center;
  }
  .sticky-banner {
    flex-direction: column;
    padding: 12px 16px;
    gap: 12px;
    text-align: center;
  }
  .waitlist-form {
    flex-direction: column;
  }
  .waitlist-form input {
    width: 100%;
  }
  .waitlist-form-row {
    flex-direction: column;
    gap: 12px;
  }
  .img-section img {
    width: 100%;
    height: auto;
  }
  .final-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .hero-stat {
    flex: 0 0 100%;
    text-align: center;
  }
  .countdown-timer {
    gap: 6px;
  }
  .countdown-number {
    font-size: 1.6rem;
    min-width: 50px;
    padding: 8px;
  }
  .hero-stats, .deal-stats, .final-stats {
    grid-template-columns: 1fr !important;
  }
  .wl-modal {
    padding: 24px 16px;
    margin: 0 16px;
  }
  .launch-timer-mini {
    gap: 6px;
  }
  .mini-unit, .mn {
    font-size: 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   8.  BSOMB PAGE  (/bsomb/)
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .problem__grid {
    grid-template-columns: 1fr !important;
  }
  .pillars {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .book-hero__layout {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .book-hero__layout img {
    max-width: 300px;
    margin: 0 auto;
  }
  .chapter-list {
    grid-template-columns: 1fr !important;
  }
  .books-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px;
  }
  .audience__grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .books-grid {
    grid-template-columns: 1fr !important;
  }
  .book-hero__layout {
    padding: 20px 16px;
  }
  .pillars {
    padding: 0 4px;
  }
}
@media (max-width: 480px) {
  .bsomb-hero h1, .book-hero__title {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }
  .chapter-item {
    padding: 16px 12px;
    font-size: 0.9rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   9.  WEBINAR PAGE  (/webinar/)
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .webinar-hero {
    padding: 80px 20px 40px;
    text-align: center;
  }
  .webinar-layout {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .webinar-details {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .webinar-ctas {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .webinar-ctas a, .webinar-ctas button {
    width: 100%;
    max-width: 400px;
    text-align: center;
    justify-content: center;
  }
  .host-section {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .host-image {
    max-width: 200px;
    margin: 0 auto;
  }
  .webinar-topics {
    grid-template-columns: 1fr 1fr !important;
  }
  .countdown-wrap {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .webinar-topics {
    grid-template-columns: 1fr !important;
  }
  .registration-card {
    padding: 24px 16px;
  }
  .registration-form input,
  .registration-form select,
  .registration-form textarea {
    font-size: 16px; /* prevent iOS zoom */
    width: 100%;
  }
}
@media (max-width: 380px) {
  .webinar-hero h1 {
    font-size: 1.6rem;
  }
  .countdown-number {
    font-size: 1.4rem;
    min-width: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────
   10.  WORK WITH DAREN PAGE
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .work-hero {
    padding: 80px 20px 40px;
    text-align: center;
  }
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .process-steps {
    grid-template-columns: 1fr !important;
  }
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
  .booking-section {
    padding: 40px 20px;
  }
}
@media (max-width: 640px) {
  .service-card {
    padding: 24px 16px;
  }
  .process-step {
    flex-direction: column;
    text-align: center;
  }
  .process-number {
    margin: 0 auto 12px;
  }
}

/* ─────────────────────────────────────────────────────────────
   11.  ARCHITECTS PAGE  (/architects/)
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .architects-hero {
    padding: 80px 16px 40px;
  }
  .architects-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .architect-card {
    padding: 20px 16px;
  }
  .architect-image {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    border-radius: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────
   12.  GLOBAL TYPOGRAPHY SCALING
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
    line-height: 1.1;
  }
  h2 {
    font-size: clamp(1.4rem, 5.5vw, 2rem);
    line-height: 1.2;
  }
  h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }
  p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* ─────────────────────────────────────────────────────────────
   13.  FORMS — prevent iOS zoom on focus
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   14.  HOVER STATES — only on true hover-capable devices
───────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    opacity: 0.9;
  }
  .btn-challenge:hover {
    opacity: 0.9;
  }
  .legacy-card:hover {
    transform: translateY(-4px);
  }
  .audience-card:hover {
    transform: translateY(-4px);
  }
  .start-item:hover, .deep-item:hover, .rogue-item:hover {
    background: rgba(255,255,255,0.05);
  }
}

/* ─────────────────────────────────────────────────────────────
   15.  UTILITY OVERRIDES FOR VERY SMALL SCREENS
───────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  body {
    font-size: 14px;
  }
  .btn-primary, .btn-challenge {
    padding: 14px 16px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
  }
  .container, .container--narrow {
    padding-left: 12px;
    padding-right: 12px;
  }
  h1 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  h2 {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }
}