/* =========================================================================
   RESPONSIVE.CSS — universal multi-device perfection layer
   Loads LAST. Additive only. Never overrides brand semantics.
   Targets every viewport: 280px foldables → 4K desktops, all orientations.
   ========================================================================= */

/* -----------------------------------------------------------
   0. Universal overflow + viewport guards
   ----------------------------------------------------------- */
html, body{
  max-width: 100vw;
  overflow-x: clip;          /* preferred over hidden — preserves position:sticky */
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden }
}

/* Use dynamic viewport height everywhere it matters */
body{ min-height: 100svh; min-height: 100dvh }

/* Anything fixed/absolute should never poke outside the viewport */
img, video, svg, picture, iframe, embed, object{
  max-width: 100%;
  height: auto;
}
img, video{ object-fit: cover }

/* Allow native pull-to-refresh — keep default overscroll behavior */
html{ overscroll-behavior-y: auto }

/* -----------------------------------------------------------
   1. Form inputs — 16px minimum on mobile to block iOS auto-zoom
   ----------------------------------------------------------- */
@media (max-width: 860px){
  input, select, textarea{
    font-size: 16px !important;
    max-width: 100%;
  }
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea, select{
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
  }
}

/* -----------------------------------------------------------
   2. Touch targets — universal 44×44 minimum on touch devices
   ----------------------------------------------------------- */
@media (pointer: coarse){
  a, button, summary, [role="button"], .btn, .btn-nav, .btn-primary,
  .btn-secondary, .btn-ghost, .nav-links a, .foot-col a, .faq-q,
  .faq-toc a, .topic, .pm{
    touch-action: manipulation;
  }
  /* Ensure interactive list items have generous tap area.
     Index.html declares .foot-col ul a { min-height:32px } — override
     here so every footer link clears the WCAG 2.5.5 / Apple 44px bar. */
  .foot-col li a, .foot-col ul a, .nav-links a{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Social icons, payment chips, in-line text links inside the footer
     also need a comfortable hitbox on touch. */
  footer .socials a, footer a[href^="mailto:"], footer a[href^="tel:"]{
    min-width: 44px;
    min-height: 44px;
  }
  /* Mobile menu — never let the panel rubber-band the body */
  .mobile-menu{ overscroll-behavior: contain }
}

/* Smooth-out any text selection flash on touch */
@media (pointer: coarse){
  ::selection{ background: rgba(232,155,142,.35); color: var(--ink) }
}

/* -----------------------------------------------------------
   3. Tier 1 — Tiny / foldable closed (≤ 360px)
   Galaxy Fold outer (~280px), iPhone SE 1st gen (320px)
   ----------------------------------------------------------- */
@media (max-width: 360px){
  :root{
    /* Tighter rhythm on the smallest screens */
    --wrap: 100%;
  }
  .wrap{ padding: 0 14px }
  body{ font-size: 15.5px; line-height: 1.55 }

  /* Buttons — keep them readable but never overflow */
  .btn{
    padding: 13px 18px;
    min-height: 46px;
    font-size: .94rem;
    width: auto;
    max-width: 100%;
  }
  .btn-nav{
    padding: 8px 12px;
    min-height: 38px;
    font-size: .78rem;
  }

  /* Hero — prevent text crash */
  .hero h1{
    font-size: clamp(1.85rem, 8.5vw, 2.4rem) !important;
    letter-spacing: -.022em;
  }
  .hero p.lead{ font-size: .95rem }
  .hero .swoop{ white-space: normal }

  /* Sub-page hero */
  .page-hero h1{ font-size: clamp(1.7rem, 8.5vw, 2.4rem) }
  .page-hero .lead{ font-size: .96rem }

  /* Section heads */
  .sec-head h2, h2{ font-size: clamp(1.5rem, 7vw, 2rem) }
  h3{ font-size: clamp(1.05rem, 5vw, 1.2rem) }

  /* Cards on tiny screens — pull padding in */
  .ps-card, .benefit, .step, .t-card, .card, .post-card, .post-card .body{
    padding: 18px 16px;
  }

  /* Hero floating cards — they collide on tiny screens */
  .hero-art .card{
    font-size: .68rem;
    padding: 6px 9px;
    border-radius: 12px;
    max-width: 50%;
  }
  .hero-art .card strong{ font-size: .8rem }
  .hero-art .card-c{ font-size: .92rem; padding: 5px 10px }

  /* Trust row — stack on tiny */
  .trust-row{ font-size: .82rem; gap: 8px }

  /* Sticky buy bar — compact */
  .sticky-buy{
    padding: 9px 10px 9px 12px;
    border-radius: 20px;
  }
  .sticky-buy .sb-pip{ width: 38px; height: 38px }
  .sticky-buy .sb-title{ font-size: .9rem }
  .sticky-buy .sb-price{ font-size: .72rem }
  .sticky-buy .btn{
    padding: 11px 14px;
    min-height: 42px;
    font-size: .88rem;
  }

  /* FAQ — tighter chevron */
  .faq-q{ padding: 16px 2px; font-size: .94rem; gap: 12px }
  .faq-q .pm{ width: 26px; height: 26px }
  .faq-a, .faq-a-inner{ font-size: .9rem }

  /* Promo bar — even smaller */
  .promo{ font-size: .68rem; padding: 6px 10px; letter-spacing: .015em }
}

/* Galaxy Fold outer (≤ 320px) — extreme tightening */
@media (max-width: 320px){
  .wrap{ padding: 0 10px }
  body{ font-size: 15px }
  .btn{ padding: 12px 14px; font-size: .88rem; min-height: 44px }
  .btn-nav{ padding: 7px 10px; font-size: .74rem }
  .hero h1{ font-size: clamp(1.6rem, 8vw, 2rem) !important }
  .hero-art .card{ font-size: .62rem; padding: 5px 7px; max-width: 52% }
  .promo{ display: none }
  .nav-inner{ gap: 6px }
  .brand{ font-size: 1rem }
  .brand .pip-mini{ width: 30px; height: 30px }
}

/* -----------------------------------------------------------
   4. Tier 2-3 — Standard & large phones (361-540px)
   ----------------------------------------------------------- */
@media (min-width: 361px) and (max-width: 540px){
  /* Better hero balance */
  .hero h1{ letter-spacing: -.024em }

  /* Make sure CTAs don't crowd */
  .hero-cta{ width: 100%; max-width: 380px; margin-left: auto; margin-right: auto }
  .hero-cta .btn{ width: 100% }

  /* Stats / counter strip — let numbers breathe */
  .counter-strip, .stat-row{ flex-wrap: wrap; gap: 14px 18px }
}

/* -----------------------------------------------------------
   5. Tablet portrait middle-ground (541-900px)
   This range was thin — fill it in.
   ----------------------------------------------------------- */
@media (min-width: 541px) and (max-width: 900px){
  /* Two-column grids stay two columns at this size */
  .grid-2{ grid-template-columns: 1fr 1fr; gap: 22px }

  /* Card grids — go to 2 columns instead of 1 */
  .ps-grid, .benefits-grid, .topics-grid, .post-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px;
  }

  /* Footer gets a 2-column layout */
  .foot-grid{ grid-template-columns: 1.4fr 1fr; gap: 36px 28px }
  .foot-col:first-child{ grid-column: 1 / -1 }

  /* Hero CTAs stay inline in this range */
  .hero-cta{ flex-direction: row; flex-wrap: wrap }
  .hero-cta .btn{ flex: 1 1 auto; min-width: 180px; max-width: 280px }
}

/* -----------------------------------------------------------
   6. Tablet portrait (768-1024px) — desktop-feel polish
   ----------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px){
  /* Wider section padding */
  section{ padding: clamp(56px, 8vw, 88px) 0 }

  /* Card grids — 3 columns where appropriate */
  .topics-grid{ grid-template-columns: repeat(3, 1fr) }
}

/* Restore hero side-by-side on iPad portrait if there's room */
@media (min-width: 820px) and (max-width: 1024px){
  .hero-grid{
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(24px, 4vw, 44px);
  }
  .hero-copy{ text-align: left }
  .hero-copy .eyebrow{ justify-content: flex-start }
  .hero-copy .eyebrow::before{ display: inline-block }
  .hero-tags, .hero-cta, .trust-row{ justify-content: flex-start }
  .hero-art{ order: 0 }
}

/* -----------------------------------------------------------
   7. Landscape phones — short viewports
   Hero shouldn't dominate when height is tiny.
   ----------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape){
  .hero{ padding: 24px 0 16px }
  .page-hero{ padding: 28px 0 14px }
  .hero h1{ font-size: clamp(1.8rem, 4.5vw, 2.6rem) }
  .hero p.lead{ font-size: .96rem; margin-bottom: 14px }
  .hero-art{ aspect-ratio: 1 / .8; max-width: min(380px, 70vw) }
  .promo{ padding: 5px 12px; font-size: .72rem }
  header.nav{ padding: 6px 0 }
  .sticky-buy{ display: none !important }  /* don't waste landscape space */
}

/* -----------------------------------------------------------
   8. Wider tablet landscape & small desktop (1025-1280px)
   ----------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1280px){
  :root{ --wrap: 1100px }
}

/* -----------------------------------------------------------
   9. Large desktops (≥ 1440px) — let content breathe
   ----------------------------------------------------------- */
@media (min-width: 1440px){
  .hero h1{ font-size: clamp(3rem, 5vw, 5.4rem) }
  body{ font-size: 17.5px }
}

/* Ultra-wide (≥ 1920px) — don't let line lengths run wild */
@media (min-width: 1920px){
  :root{ --wrap: 1240px }
  .prose{ max-width: 760px }
}

/* -----------------------------------------------------------
  10. Long-text safety — narrow screens
   ----------------------------------------------------------- */
@media (max-width: 540px){
  .prose, .post-prose, .faq-a, .faq-a-inner{
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* Long URLs / emails should wrap, not overflow */
  .prose a, .post-prose a{ word-break: break-word }
  /* Tables in policy pages — let them scroll */
  .prose table, .post-prose table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* -----------------------------------------------------------
  11. Sticky elements — safe-area + bottom inset
   ----------------------------------------------------------- */
.sticky-buy{
  bottom: max(14px, var(--safe-b, 0px)) !important;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
}

/* iOS notch awareness for nav */
header.nav{
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* Notch-aware content wrap — corner-to-corner without hiding behind the
   Dynamic Island / notch in landscape. Adds horizontal safe-area on top
   of the existing fluid clamp so content never sits under the cutout. */
.wrap{
  padding-left:  max(clamp(18px, 4vw, 28px), env(safe-area-inset-left));
  padding-right: max(clamp(18px, 4vw, 28px), env(safe-area-inset-right));
}

/* Footer + final-cta safe-bottom guard — the home indicator bar shouldn't
   eat the last interactive row. */
footer{
  padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
}

/* -----------------------------------------------------------
  12. Pointer / device-specific tuning
   ----------------------------------------------------------- */
/* No-hover devices — ensure :active feels alive */
@media (hover: none){
  .btn:active, .btn-primary:active, .btn-nav:active, .btn-secondary:active{
    transform: scale(.97);
    transition: transform .12s ease;
  }
  .ps-card:active, .benefit:active, .t-card:active, .post-card:active, .card:active{
    transform: scale(.985);
    transition: transform .15s ease;
  }
  /* Hide hover-only flourishes that never fire */
  .ps-card::after, .nav-links a::after{ display: none }
}

/* Fine pointer (mouse) — slightly thinner scrollbars look better */
@media (pointer: fine){
  *::-webkit-scrollbar{ width: 12px; height: 12px }
  *::-webkit-scrollbar-track{ background: transparent }
  *::-webkit-scrollbar-thumb{
    background: rgba(31,50,71,.18);
    border-radius: 999px;
    border: 3px solid var(--cream, #FBF8F3);
  }
  *::-webkit-scrollbar-thumb:hover{ background: rgba(31,50,71,.32) }
}

/* -----------------------------------------------------------
  13. High-DPI / retina — sharper image rendering
   ----------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx){
  img:not([src*=".svg"]){
    image-rendering: -webkit-optimize-contrast;
  }
}

/* -----------------------------------------------------------
  14. Reduced data / saved-data
   ----------------------------------------------------------- */
@media (prefers-reduced-data: reduce){
  body::before, body::after{ display: none !important }
  .floaty{ display: none !important }
  *{ animation: none !important }
}

/* -----------------------------------------------------------
  15. High-contrast mode — keep brand visible, lift outlines
   ----------------------------------------------------------- */
@media (prefers-contrast: more){
  .btn-primary, .btn-nav, .btn-secondary{ outline: 2px solid currentColor }
  .nav-links a, .foot-col a{ text-decoration: underline }
  .card, .ps-card, .benefit, .t-card, .post-card{ border: 1.5px solid var(--navy) }
}

/* -----------------------------------------------------------
  16. Forced colors (Windows High Contrast)
   ----------------------------------------------------------- */
@media (forced-colors: active){
  .btn, .btn-primary, .btn-nav, .btn-secondary{
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
  body::before, body::after, .floaty{ display: none }
}

/* -----------------------------------------------------------
  17. Print — clean printable receipts / policies
   ----------------------------------------------------------- */
@media print{
  *{
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: auto !important;
  }
  body::before, body::after, .floaty,
  .promo, header.nav, .sticky-buy, .sticky-spacer,
  .mobile-menu, .mobile-menu-backdrop, .mobile-menu-toggle,
  footer .foot-grid, .final-cta, .ultra-curtain,
  .paw-trail{
    display: none !important;
  }
  .wrap{ max-width: 100% !important; padding: 0 12mm !important }
  h1, h2, h3{ page-break-after: avoid }
  p, li{ page-break-inside: avoid }
  a[href]::after{ content: " (" attr(href) ")"; font-size: .85em; color: #555 !important }
  a[href^="#"]::after, a[href^="javascript:"]::after{ content: "" }
  img{ max-width: 100% !important; page-break-inside: avoid }
  .post-prose, .prose{ font-size: 11pt; line-height: 1.55 }
}

/* -----------------------------------------------------------
  18. Foldable / dual-screen — Surface Duo, Galaxy Z Fold inner
   Only one segment of content uses the fold-aware class.
   ----------------------------------------------------------- */
@media (horizontal-viewport-segments: 2){
  .hero-grid, .grid-2, .foot-grid{
    /* Naturally allow content to span across the fold */
    column-gap: clamp(16px, env(viewport-segment-left 1 0), 32px);
  }
}

/* -----------------------------------------------------------
  19. Reveal animations — never block content if JS fails
   ----------------------------------------------------------- */
@media (scripting: none){
  [data-reveal], [data-ultra-reveal]{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------
  20. Final overflow hardener — common offenders
   ----------------------------------------------------------- */
pre, code{
  max-width: 100%;
  overflow-x: auto;
  word-wrap: normal;
}
.hero-art, .hero, section, footer, header{ max-width: 100vw }

/* Make sure no inline-svg with explicit width breaks the page */
svg[width]{ max-width: 100% }

/* -----------------------------------------------------------
  21. Footer payment icons — universal sizing for ALL pages
   Homepage doesn't load pages.css, so without this the SVGs
   render at default 300×150 and crash the footer layout.
   ----------------------------------------------------------- */
.foot-payment{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.foot-payment > span:first-child,
.foot-payment .pay-label{
  font-size: .82rem;
  color: rgba(251,248,243,.62);
  margin-right: 6px;
  letter-spacing: .01em;
}
.pay-ic{
  display: inline-flex;
  width: 36px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
}
.pay-ic svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
.foot-payment .secure{
  margin-left: 6px;
  font-size: .8rem;
  color: rgba(251,248,243,.6);
  white-space: nowrap;
}

/* Phone — slightly smaller icons, allow wrap */
@media (max-width: 540px){
  .pay-ic{ width: 32px; height: 21px }
  .foot-payment{ gap: 5px }
  .foot-payment > span:first-child,
  .foot-payment .pay-label{ font-size: .78rem; margin-right: 4px }
  .foot-payment .secure{ font-size: .76rem; flex-basis: 100%; margin-left: 0; margin-top: 2px }
}

/* Tiny / Galaxy S9 (360px) — extra-compact icons that fit cleanly */
@media (max-width: 380px){
  .pay-ic{ width: 28px; height: 18px }
  .foot-payment{ gap: 4px }
  .foot-payment > span:first-child,
  .foot-payment .pay-label{
    flex-basis: 100%;
    font-size: .74rem;
    margin: 0 0 4px;
  }
}

/* Foldable closed (≤ 320px) — even tighter */
@media (max-width: 320px){
  .pay-ic{ width: 26px; height: 17px }
  .foot-payment{ gap: 3px }
}

/* -----------------------------------------------------------
  22. Promo bar hardening — solid render on every device
   Some browsers showed a hairline gap at the top — kill it.
   ----------------------------------------------------------- */
.promo{
  background: var(--navy, #1F3247) !important;
  color: var(--cream, #FBF8F3) !important;
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  line-height: 1.35;
  position: relative;
  z-index: 51;
}
/* Eliminate any gap between promo bar and sticky nav */
.promo + header.nav{ margin-top: 0 }
body{ margin-top: 0 !important }

/* Galaxy S9 + similar tall narrow phones — promo height stable */
@media (max-width: 480px){
  .promo{
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top, 8px));
    font-size: .78rem;
    min-height: 0;
  }
}