/* ==========================================================================
   JACKSON HOLE SNOW DEVILS — HOME LANDING PAGE
   Recreated from the "Snow Devils Home" design-system reference.
   All units: rem / em / vh / vw / % — never px (0.0625rem = 1px hairline).
   Corners are sharp — border-radius: 0 everywhere.
   Prefix: sd-  ·  Fonts: Outfit (UI/headings) + DM Sans (body)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&family=Outfit:wght@400;500;600;700&display=swap");

/* =============================================================================
   TIER 1 — PRIMITIVES
   ========================================================================== */
.sd-page {
  --sd-red-900: #69180B;
  --sd-red-800: #892312;
  --sd-red-700: #96321b;
  --sd-red-600: #c1121f;   /* BRAND RED */
  --sd-red-500: #E22134;
  --sd-red-400: #FA3044;   /* ENERGY RED */
  --sd-red-300: #ff3d4a;

  --sd-navy-900: #001f2b;
  --sd-navy-700: #003355;  /* BRAND NAVY */
  --sd-navy-500: #33556f;
  --sd-navy-300: #7a94a6;

  --sd-neutral-1000: #08090C;
  --sd-neutral-950:  #0F1114;
  --sd-neutral-900:  #16171C;
  --sd-neutral-850:  #1D1E24;
  --sd-neutral-800:  #282930;
  --sd-neutral-700:  #33343B;
  --sd-neutral-600:  #6c757d;
  --sd-neutral-500:  #797C7F;
  --sd-neutral-400:  #A5A6AA;
  --sd-neutral-300:  #C7C9CA;
  --sd-neutral-250:  #E1E1DD;
  --sd-neutral-200:  #E4E5E6;
  --sd-neutral-150:  #EDECE7;
  --sd-neutral-100:  #F4F2EE;
  --sd-neutral-75:   #F6F4F2;
  --sd-neutral-50:   #f8f9fa;
  --sd-white:        #FFFFFF;

  --sd-cream: #efebdf;

  --sd-font-outfit:  "Outfit", sans-serif;
  --sd-font-dmsans:  "DM Sans", sans-serif;

  --sd-weight-regular: 400;
  --sd-weight-medium:  500;

  --sd-size-3xs: 0.75rem;
  --sd-size-2xs: 0.8125rem;
  --sd-size-xs:  0.875rem;
  --sd-size-sm:  0.9375rem;
  --sd-size-base:1rem;
  --sd-size-md:  1.125rem;
  --sd-size-lg:  1.412rem;
  --sd-size-xl:  1.647rem;
  --sd-size-2xl: 2.059rem;
  --sd-size-3xl: 2.765rem;
  --sd-size-4xl: 3.353rem;
  --sd-size-5xl: 4.5rem;
  --sd-size-6xl: 5.5rem;

  --sd-leading-none:    1;
  --sd-leading-tight:   1.05;
  --sd-leading-snug:    1.2;
  --sd-leading-normal:  1.5;
  --sd-leading-relaxed: 1.65;

  --sd-tracking-tighter: -0.04em;
  --sd-tracking-tight:   -0.03em;
  --sd-tracking-snug:    -0.02em;
  --sd-tracking-normal:   0em;
  --sd-tracking-wide:     0.05em;
  --sd-tracking-wider:    0.15em;

  --sd-space-0:   0;
  --sd-space-1:   0.25rem;
  --sd-space-2:   0.5rem;
  --sd-space-3:   0.75rem;
  --sd-space-4:   1rem;
  --sd-space-5:   1.25rem;
  --sd-space-6:   1.5rem;
  --sd-space-8:   2rem;
  --sd-space-10:  2.5rem;
  --sd-space-12:  3rem;
  --sd-space-16:  4rem;
  --sd-space-20:  5rem;
  --sd-space-25:  6.25rem;
  --sd-space-32:  8rem;

  --sd-radius-none: 0;
  --sd-radius-sm:   0.25rem;
  --sd-radius-full: 62.4375rem;

  --sd-border-hair: 0.0625rem;
  --sd-border-thin: 0.125rem;
  --sd-border-thick:0.25rem;

  --sd-shadow-none: none;
  --sd-shadow-sm:  0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
  --sd-shadow-md:  0 0.75rem 1.75rem rgba(0, 0, 0, 0.08);
  --sd-shadow-lg:  0 1.5rem 3rem rgba(0, 0, 0, 0.40);

  --sd-duration-fast:   0.15s;
  --sd-duration-base:   0.25s;
  --sd-duration-slow:   0.35s;
  --sd-ease:            ease;
  --sd-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

  --sd-container-narrow: 52rem;
  --sd-container-page:   90rem;
  --sd-container-full:  120rem;
  --sd-gutter-sm: 1.25rem;
  --sd-gutter-md: 2.5rem;
  --sd-gutter-lg: 3.75rem;
  --sd-grid-gap:  1.875rem;

  --sd-z-base:     1;
  --sd-z-sticky:   100;
  --sd-z-header:   500;
  --sd-z-overlay:  900;
  --sd-z-modal:    1000;

  /* ---- TIER 2 — SEMANTIC (light scheme default) ---- */
  --sd-color-canvas:        var(--sd-cream);
  --sd-color-surface:       var(--sd-white);
  --sd-color-surface-alt:   var(--sd-neutral-100);
  --sd-color-surface-inverse: var(--sd-neutral-1000);

  --sd-color-text:          var(--sd-navy-700);
  --sd-color-text-muted:    var(--sd-navy-500);
  --sd-color-text-subtle:   var(--sd-navy-300);
  --sd-color-text-inverse:  var(--sd-neutral-200);
  --sd-color-text-on-accent:var(--sd-white);

  --sd-color-accent:        var(--sd-red-600);
  --sd-color-accent-hover:  var(--sd-red-400);
  --sd-color-link:          var(--sd-red-600);
  --sd-color-link-hover:    var(--sd-red-400);
  --sd-color-link-navy:     var(--sd-navy-700);
  --sd-color-link-navy-hover:var(--sd-navy-900);

  --sd-color-border:        var(--sd-neutral-250);
  --sd-color-border-strong: var(--sd-navy-700);
  --sd-color-border-inverse:var(--sd-neutral-800);

  --sd-color-focus:         var(--sd-red-400);

  --sd-font-heading: var(--sd-font-outfit);
  --sd-font-body:    var(--sd-font-dmsans);
  --sd-font-ui:      var(--sd-font-outfit);

  --sd-h1-size: var(--sd-size-4xl);   --sd-h1-leading: var(--sd-leading-tight); --sd-h1-tracking: var(--sd-tracking-tight);
  --sd-h2-size: var(--sd-size-3xl);   --sd-h2-leading: var(--sd-leading-snug);  --sd-h2-tracking: var(--sd-tracking-tight);
  --sd-h3-size: var(--sd-size-2xl);   --sd-h3-leading: var(--sd-leading-snug);  --sd-h3-tracking: var(--sd-tracking-tight);
  --sd-h4-size: var(--sd-size-xl);    --sd-h4-leading: var(--sd-leading-snug);  --sd-h4-tracking: var(--sd-tracking-snug);
  --sd-h5-size: var(--sd-size-lg);    --sd-h5-leading: var(--sd-leading-snug);  --sd-h5-tracking: var(--sd-tracking-snug);
  --sd-h6-size: var(--sd-size-md);    --sd-h6-leading: var(--sd-leading-normal);--sd-h6-tracking: var(--sd-tracking-normal);
  --sd-body-size: var(--sd-size-base);--sd-body-leading: var(--sd-leading-relaxed);

  --sd-display-hero:    clamp(3rem, 8vw, 5.5rem);
  --sd-display-section: clamp(1.75rem, 4vw, 2.75rem);
  --sd-display-sub:     clamp(1rem, 2vw, 1.25rem);
  --sd-eyebrow-size:    clamp(0.75rem, 1.5vw, 0.9375rem);

  /* ---- TIER 3 — COMPONENT ---- */
  --sd-button-primary-bg:        var(--sd-color-accent);
  --sd-button-primary-text:      var(--sd-color-text-on-accent);
  --sd-button-primary-border:    var(--sd-color-accent);
  --sd-button-primary-bg-hover:  var(--sd-white);
  --sd-button-primary-text-hover:var(--sd-color-text);
  --sd-button-radius:            var(--sd-radius-none);
  --sd-button-padding-y:         1.0625rem;
  --sd-button-padding-x:         3.5rem;
  --sd-button-font:              var(--sd-font-ui);
  --sd-button-weight:            var(--sd-weight-medium);
  --sd-button-size:              var(--sd-size-base);

  --sd-input-bg:          transparent;
  --sd-input-text:        var(--sd-color-text);
  --sd-input-border:      var(--sd-border-hair) solid var(--sd-color-border);
  --sd-input-border-focus:var(--sd-color-border-strong);
  --sd-input-radius:      var(--sd-radius-none);
  --sd-input-padding-y:   0.75rem;
  --sd-input-padding-x:   1rem;

  --sd-section-padding-y:      var(--sd-space-20);
  --sd-section-padding-y-lg:   var(--sd-space-25);
}

/* =============================================================================
   DARK SCHEME REMAP
   ========================================================================== */
.sd-page .sd-scheme-dark {
  --sd-color-canvas:        var(--sd-neutral-1000);
  --sd-color-surface:       var(--sd-neutral-850);
  --sd-color-surface-alt:   var(--sd-neutral-950);
  --sd-color-surface-inverse: var(--sd-cream);

  --sd-color-text:          var(--sd-neutral-200);
  --sd-color-text-muted:    var(--sd-neutral-300);
  --sd-color-text-subtle:   var(--sd-neutral-400);
  --sd-color-text-inverse:  var(--sd-navy-700);

  --sd-color-accent:        var(--sd-red-400);
  --sd-color-accent-hover:  var(--sd-red-500);
  --sd-color-link:          var(--sd-red-400);
  --sd-color-link-hover:    var(--sd-red-300);

  --sd-color-border:        var(--sd-neutral-800);
  --sd-color-border-strong: var(--sd-red-400);

  --sd-button-primary-bg-hover:   transparent;
  --sd-button-primary-text-hover: var(--sd-white);
}

@media (prefers-reduced-motion: reduce) {
  .sd-page {
    --sd-duration-fast: 0s;
    --sd-duration-base: 0s;
    --sd-duration-slow: 0s;
  }
}

/* =============================================================================
   RESET / BASE — scoped to .sd-page so the surrounding theme can't bleed in,
   and so this subtree can't leak out to the rest of the site.
   ========================================================================== */
.sd-page, .sd-page *, .sd-page *::before, .sd-page *::after { box-sizing: border-box; }

.sd-page {
  margin: 0;
  font-family: var(--sd-font-body);
  font-weight: var(--sd-weight-regular);
  font-size: var(--sd-body-size);
  line-height: var(--sd-body-leading);
  color: var(--sd-color-text);
  background: var(--sd-color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.sd-page img, .sd-page svg, .sd-page video { display: block; max-width: 100%; }

.sd-page h1, .sd-page h2, .sd-page h3,
.sd-page h4, .sd-page h5, .sd-page h6 {
  font-family: var(--sd-font-heading);
  font-weight: var(--sd-weight-medium);
  color: var(--sd-color-text);
  margin: 0;
  text-wrap: balance;
}
.sd-page h1 { font-size: var(--sd-h1-size); line-height: var(--sd-h1-leading); letter-spacing: var(--sd-h1-tracking); }
.sd-page h2 { font-size: var(--sd-h2-size); line-height: var(--sd-h2-leading); letter-spacing: var(--sd-h2-tracking); }
.sd-page h3 { font-size: var(--sd-h3-size); line-height: var(--sd-h3-leading); letter-spacing: var(--sd-h3-tracking); }
.sd-page h4 { font-size: var(--sd-h4-size); line-height: var(--sd-h4-leading); letter-spacing: var(--sd-h4-tracking); }
.sd-page h5 { font-size: var(--sd-h5-size); line-height: var(--sd-h5-leading); letter-spacing: var(--sd-h5-tracking); }
.sd-page h6 { font-size: var(--sd-h6-size); line-height: var(--sd-h6-leading); letter-spacing: var(--sd-h6-tracking); }

.sd-page p { margin: 0 0 1em; line-height: var(--sd-body-leading); text-wrap: pretty; }
.sd-page p:last-child { margin-bottom: 0; }
.sd-page small { font-size: var(--sd-size-xs); }
.sd-page strong, .sd-page b { font-weight: var(--sd-weight-medium); }

.sd-page a { color: var(--sd-color-link); text-decoration: none; transition: color var(--sd-duration-fast) var(--sd-ease); }
.sd-page a:hover { color: var(--sd-color-link-hover); }

.sd-page ul { margin: 0; padding: 0; }
.sd-page button { font-family: inherit; }

.sd-page ::selection { background: var(--sd-color-accent); color: var(--sd-white); }
.sd-page :focus-visible { outline: var(--sd-border-thin) solid var(--sd-color-focus); outline-offset: 0.125rem; }

/* =============================================================================
   DISPLAY TYPE + EYEBROW + LAYOUT HELPERS
   ========================================================================== */
.sd-page .sd-display-hero {
  font-family: var(--sd-font-heading);
  font-weight: var(--sd-weight-medium);
  font-size: var(--sd-display-hero);
  line-height: var(--sd-leading-tight);
  letter-spacing: var(--sd-tracking-tighter);
  text-wrap: balance;
}
.sd-page .sd-display-section {
  font-family: var(--sd-font-heading);
  font-weight: var(--sd-weight-medium);
  font-size: var(--sd-display-section);
  line-height: var(--sd-leading-snug);
  letter-spacing: var(--sd-tracking-tight);
  text-wrap: balance;
}
.sd-page .sd-display-sub {
  font-family: var(--sd-font-heading);
  font-weight: var(--sd-weight-medium);
  font-size: var(--sd-display-sub);
  line-height: var(--sd-leading-snug);
}

.sd-page .sd-eyebrow {
  font-family: var(--sd-font-ui);
  font-weight: var(--sd-weight-medium);
  font-size: var(--sd-eyebrow-size);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking-wider);
  color: var(--sd-color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-3);
}
.sd-page .sd-eyebrow::before {
  content: "";
  width: 2rem;
  height: var(--sd-border-thin);
  background: currentColor;
}

.sd-page .sd-container { width: 100%; max-width: var(--sd-container-page); margin-inline: auto; padding-inline: var(--sd-gutter-sm); }
.sd-page .sd-container-narrow { max-width: var(--sd-container-narrow); }
@media (min-width: 48em) { .sd-page .sd-container { padding-inline: var(--sd-gutter-md); } }
@media (min-width: 64em) { .sd-page .sd-container { padding-inline: var(--sd-gutter-lg); } }

.sd-page .sd-section { padding-block: var(--sd-section-padding-y); }
@media (min-width: 48em) { .sd-page .sd-section { padding-block: var(--sd-section-padding-y-lg); } }
.sd-page .sd-section-alt { background: var(--sd-color-surface-alt); }

/* =============================================================================
   TAG / CHIP + INPUT
   ========================================================================== */
.sd-page .sd-tag {
  display: inline-flex; align-items: center; gap: var(--sd-space-2);
  font-family: var(--sd-font-ui);
  font-weight: var(--sd-weight-medium);
  font-size: var(--sd-size-3xs);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking-wide);
  padding: var(--sd-space-1) var(--sd-space-3);
  border-radius: var(--sd-radius-none);
}
.sd-page .sd-tag-accent { background: var(--sd-color-accent); color: var(--sd-color-text-on-accent); }
.sd-page .sd-tag-navy { background: var(--sd-navy-700); color: var(--sd-white); }
.sd-page .sd-tag-outline { background: transparent; border: var(--sd-border-hair) solid var(--sd-color-border-strong); color: var(--sd-color-text); }

.sd-page .sd-input {
  font-family: var(--sd-font-body);
  font-size: var(--sd-size-base);
  color: var(--sd-input-text);
  background: var(--sd-input-bg);
  border: var(--sd-input-border);
  border-radius: var(--sd-input-radius);
  padding: var(--sd-input-padding-y) var(--sd-input-padding-x);
  transition: border-color var(--sd-duration-fast) var(--sd-ease);
}
.sd-page .sd-input:focus { outline: none; border-color: var(--sd-input-border-focus); }
.sd-page .sd-input::placeholder { color: var(--sd-color-text-subtle); }

/* =============================================================================
   RESPONSIVE GRID HELPERS
   Columns live here (not inline) so they can collapse on small screens while
   the design keeps its gaps inline.
   ========================================================================== */
.sd-page .sd-g6 { grid-template-columns: repeat(6, 1fr); }
.sd-page .sd-g4 { grid-template-columns: repeat(4, 1fr); }
.sd-page .sd-g3 { grid-template-columns: repeat(3, 1fr); }
.sd-page .sd-g2 { grid-template-columns: 1fr 1fr; }
.sd-page .sd-g-mission { grid-template-columns: 1fr 1fr; }
.sd-page .sd-g-cause { grid-template-columns: 1.1fr 0.9fr; }

@media (max-width: 64em) {
  .sd-page .sd-g6 { grid-template-columns: repeat(3, 1fr); }
  .sd-page .sd-g-cause { grid-template-columns: 1fr; gap: 3rem !important; }
}
@media (max-width: 48em) {
  .sd-page .sd-g4,
  .sd-page .sd-g3,
  .sd-page .sd-g-mission { grid-template-columns: 1fr; gap: 2rem !important; }
  .sd-page .sd-g6 { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   SITE-WIDE CHROME (interior pages)
   The fixed header is injected inside .sd-page.sd-chrome; that wrapper must not
   paint or occupy layout space (all its children are position:fixed).
   ========================================================================== */
.sd-page.sd-chrome { background: transparent; overflow: visible; }
/* Push theme-rendered page content clear of the fixed header. JS refines the
   exact value from the header's measured height; this is the pre-JS fallback.
   The standalone home template has no .page_content_wrap, so it's untouched. */
.page_content_wrap { padding-top: 9.5rem; }
@media (max-width: 64em) { .page_content_wrap { padding-top: 8.5rem; } }

/* =============================================================================
   MEGA-MENU LINK TITLE / DESCRIPTION
   ========================================================================== */
.sd-page .sd-mega-link-title {
  display: block;
  font-family: var(--sd-font-ui); font-weight: 500;
  font-size: .9375rem; color: inherit;
}
.sd-page .sd-mega-link-desc {
  display: block;
  font-size: .75rem; line-height: 1.45;
  color: var(--sd-color-text-subtle);
  margin-top: .1875rem;
}

/* =============================================================================
   HEADER — desktop vs mobile visibility
   ========================================================================== */
.sd-page .sd-mobile-toggle { display: none; }

@media (max-width: 64em) {
  .sd-page .sd-desktop-nav,
  .sd-page .sd-header-ctas,
  .sd-page .sd-subbar-links { display: none !important; }
  .sd-page .sd-mobile-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0;
    background: transparent; border: 0.0625rem solid rgba(255, 255, 255, 0.4);
    color: #fff; cursor: pointer;
  }
  .sd-page.sd-header-solid .sd-mobile-toggle { border-color: var(--sd-color-border); color: var(--sd-color-text); }
  .sd-page .sd-mobile-toggle svg { width: 1.375rem; height: 1.375rem; }
}

/* Mobile flyout menu */
.sd-page .sd-mobile-menu {
  position: fixed; inset: 0; z-index: 480;
  background: var(--sd-color-surface);
  padding: 8rem 1.5rem 2.5rem;
  overflow-y: auto;
  transform: translateY(-100%);
  opacity: 0; visibility: hidden;
  transition: transform var(--sd-duration-slow) var(--sd-ease-out),
              opacity var(--sd-duration-base) var(--sd-ease),
              visibility var(--sd-duration-base) var(--sd-ease);
}
.sd-page .sd-mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.sd-page .sd-mobile-menu a {
  display: block; padding: 0.875rem 0;
  font-family: var(--sd-font-ui); font-weight: 500; font-size: 1.125rem;
  color: var(--sd-color-text); border-bottom: 0.0625rem solid var(--sd-color-border);
}
.sd-page .sd-mobile-menu a.sd-mobile-cta {
  border: 0.0625rem solid var(--sd-color-accent); text-align: center;
  margin-top: 1rem; color: #fff; background: var(--sd-color-accent);
}
.sd-page .sd-mobile-menu a.sd-mobile-cta.is-ghost { background: transparent; color: var(--sd-color-accent); }

/* =============================================================================
   HERO — background video (YouTube), cover-fit
   ========================================================================== */
.sd-page .sd-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #08090c; }
/* !important guards against global `iframe { width:100%; height:auto }` rules
   from the parent theme / page-builder plugins that would otherwise collapse
   the background video into normal flow. */
.sd-page .sd-hero-video iframe {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  width: 100vw !important; height: 56.25vw !important;          /* 16:9 by viewport width */
  min-height: 100vh !important; min-width: 177.78vh !important; /* 16:9 by viewport height — guarantees cover */
  max-width: none !important; max-height: none !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important; pointer-events: none;
}
.sd-page .sd-hero-credit {
  font-family: var(--sd-font-ui);
  font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  background: rgba(8, 9, 12, .4);
  padding: .3125rem .625rem;
  backdrop-filter: blur(.25rem); -webkit-backdrop-filter: blur(.25rem);
}

/* =============================================================================
   SPONSOR LOGO TILES
   ========================================================================== */
.sd-page .sd-sponsor-tile {
  aspect-ratio: 2 / 1; background: var(--sd-color-surface);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; transition: background var(--sd-duration-base) var(--sd-ease);
}
.sd-page a.sd-sponsor-tile:hover { background: var(--sd-color-surface-alt); }
.sd-page .sd-sponsor-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* =============================================================================
   HERO — sizing on small screens
   ========================================================================== */
@media (max-width: 48em) {
  .sd-page .sd-hero-display { font-size: clamp(2.5rem, 12vw, 3.25rem) !important; }
  .sd-page .sd-hero-credit { display: none; } /* keep the small-screen hero uncluttered */
}

/* Countdown boxes shrink on small screens */
@media (max-width: 30em) {
  .sd-page .sd-cd-box { min-width: 3.75rem !important; padding: 0.625rem 0.5rem !important; }
  .sd-page .sd-cd-box .sd-cd-num { font-size: 1.75rem !important; }
}

/* =============================================================================
   RESPONSIVE POLISH — mobile hardening pass
   ========================================================================== */

/* --- Announcement bar: hidden on phones / small tablets to reclaim vertical
       space. The header height auto-recomputes (JS measures .sd-fixedbar). --- */
@media (max-width: 48em) {
  .sd-page .sd-fixedbar > div:first-of-type { display: none; }
}

/* --- Utility bar: with resource links hidden, keep social + Mountain Report
       pinned right instead of collapsing to the left. --- */
@media (max-width: 64em) {
  .sd-page .sd-fixedbar > div:nth-of-type(2) > .sd-container { justify-content: flex-end !important; }
}
/* Smallest screens: drop the FB/IG/YT cluster, keep the Mountain Report button. */
@media (max-width: 26em) {
  .sd-page .sd-fixedbar > div:nth-of-type(2) .sd-container > div > div:first-child { display: none; }
}

/* --- Nav bar: a touch less vertical padding on phones --- */
@media (max-width: 48em) {
  .sd-page .sd-fixedbar header > .sd-container { padding-block: .75rem; }
}

/* --- Mobile flyout menu: dynamic top offset is set in JS; this is the fallback.
       Cap link width and keep tidy on very small screens. --- */
@media (max-width: 48em) {
  .sd-page .sd-mobile-menu { padding-top: 9.5rem; }
}

/* --- Countdown: guarantee all four boxes fit evenly across the smallest phones. --- */
@media (max-width: 30em) {
  .sd-page .sd-hero-countdown { gap: .375rem !important; width: 100%; }
  .sd-page .sd-cd-box { min-width: 0 !important; flex: 1 1 0; padding: .625rem .25rem !important; }
  .sd-page .sd-cd-box .sd-cd-num { font-size: 1.5rem !important; }
}

/* --- Quick-facts strip: swap vertical dividers for horizontal when stacked. --- */
@media (max-width: 48em) {
  .sd-page #hillclimb .sd-g4 > div { border-right: 0 !important; border-bottom: .0625rem solid var(--sd-color-border); }
  .sd-page #hillclimb .sd-g4 > div:last-child { border-bottom: 0; }
}

/* --- The Cause: shrink count-up figures so they never clip in the 2-up grid. --- */
@media (max-width: 40em) {
  .sd-page #cause [data-stat] > div { font-size: 2rem !important; }
}

/* --- Plan tabs: keep both tabs on one row on narrow phones. --- */
@media (max-width: 40em) {
  .sd-page [data-tabbtn] { padding: .875rem .625rem !important; font-size: .75rem !important; letter-spacing: .06em !important; }
}

/* --- Section rhythm: trim generous desktop paddings a little on phones. --- */
@media (max-width: 30em) {
  .sd-page .sd-section { padding-block: 3.75rem; }
}

/* --- Primary/secondary CTA buttons: full-width of their container on phones.
       Targets the design's inline button styling (centered inline-flex) while
       excluding the small square icon buttons (footer socials, report close)
       and the eyebrow labels. --- */
@media (max-width: 48em) {
  .sd-page a[style*="justify-content:center"]:not([style*="width:2.25rem"]),
  .sd-page button[style*="justify-content:center"]:not([style*="width:2.25rem"]),
  .sd-page span[style*="justify-content:center"]:not(.sd-eyebrow) {
    width: 100% !important;
  }
}

/* --- Belt-and-braces: nothing should ever cause a sideways scroll. --- */
.sd-page, .sd-page.sd-chrome { max-width: 100vw; }