/**
 * Sanctum marketing site — mobile-only overrides.
 * All rules are scoped to max-width media queries so desktop layout is unchanged.
 */

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  /*
   * Homepage (index only — has #sticky-cta): stretch content to the viewport width.
   * Fixes centered “widget column”, horizontal overflow from 100vw full-bleed, and iOS zoom-out.
   */
  html:has(#sticky-cta),
  body:has(#sticky-cta) {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
  }

  body:has(#sticky-cta) .footer-wrap {
    max-width: 100% !important;
    padding-inline: max(1px, env(safe-area-inset-left), env(safe-area-inset-right));
    box-sizing: border-box;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: stretch;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    text-align: center;
    justify-items: center;
  }

  body:has(#sticky-cta) .page {
    align-items: stretch !important;
    width: 100%;
    max-width: 100%;
    /* ~full-bleed; safe-area insets only where the notch/home indicator needs them */
    padding-left: max(1px, env(safe-area-inset-left));
    padding-right: max(1px, env(safe-area-inset-right));
    gap: 10px !important;
    box-sizing: border-box;
  }

  body:has(#sticky-cta) .page > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  body:has(#sticky-cta) .hero--statement .inner {
    max-width: 100% !important;
  }

  /* Decorative hero orb — removes huge empty band between hero copy and chips on phone */
  body:has(#sticky-cta) .hero-art-wrap {
    display: none !important;
  }

  /* Pull chip strip up under hero text (desktop relies on negative margins + art height) */
  body:has(#sticky-cta) .page > .chips-background {
    margin-top: -8px !important;
  }

  body:has(#sticky-cta) .section,
  body:has(#sticky-cta) #science.science {
    max-width: 100% !important;
  }

  body:has(#sticky-cta) #science.science {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(1px, env(safe-area-inset-left)) !important;
    padding-right: max(1px, env(safe-area-inset-right)) !important;
  }

  body:has(#sticky-cta) .reviews-head,
  body:has(#sticky-cta) .reviews-track,
  body:has(#sticky-cta) .reviews-nav,
  body:has(#sticky-cta) .reviews-dots {
    max-width: 100% !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:has(#sticky-cta) .reviews-head {
    padding-inline: max(1px, env(safe-area-inset-left)) max(1px, env(safe-area-inset-right)) !important;
  }

  body:has(#sticky-cta) .reviews-track {
    padding-inline: max(1px, env(safe-area-inset-left)) max(1px, env(safe-area-inset-right)) !important;
  }

  body:has(#sticky-cta) .reviews-nav,
  body:has(#sticky-cta) .reviews-dots {
    padding-inline: max(1px, env(safe-area-inset-left)) max(1px, env(safe-area-inset-right)) !important;
  }

  body:has(#sticky-cta) .chips-rail {
    max-width: 100% !important;
    width: 100%;
  }

  /* Full-bleed signup: drop 100vw margins that cause horizontal scroll on iPhone */
  body:has(#sticky-cta) #signup.panel.full-bleed {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(1px, env(safe-area-inset-left)) !important;
    padding-right: max(1px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
    overflow-x: clip;
    overflow-y: clip; /* contain band glow so it does not paint over the footer */
    /* Less bottom padding — index adds huge vertical padding + footer “compensation” padding */
    padding-top: clamp(28px, 7vw, 44px) !important;
    padding-bottom: clamp(12px, 4vw, 22px) !important;
  }

  body:has(#sticky-cta) #signup .btn,
  body:has(#sticky-cta) #signup .cta-primary {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  /*
   * Mode carousel: slides narrower than the viewport so one card fits comfortably
   * and neighbors peek — reads as a carousel instead of full-bleed panels.
   */
  body:has(#sticky-cta) .modes-track {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    scroll-padding-inline: max(10px, env(safe-area-inset-left, 0px));
    gap: 12px !important;
    grid-auto-columns: min(88vw, 1120px) !important;
  }

  body:has(#sticky-cta) section.modes-rail,
  body:has(#sticky-cta) #modesRail.modes-rail {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }

  /*
   * Rail UI: index uses width:min(540px,88vw) on .rail-segments — with two arrows and
   * flex gaps the row is wider than the viewport; the third pill clips. Fit the whole
   * control inside the screen and let the three segments share the remaining width.
   */
  body:has(#sticky-cta) .modes-rail {
    gap: clamp(8px, 2vw, 12px) !important;
    padding-inline: max(2px, env(safe-area-inset-left)) max(2px, env(safe-area-inset-right));
    justify-content: center;
  }

  body:has(#sticky-cta) .modes-rail .rail-segments {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: calc(
      100vw - 96px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    );
    gap: clamp(6px, 2vw, 12px) !important;
  }

  body:has(#sticky-cta) .modes-rail .rail-segment {
    flex: 1 1 0;
    min-width: 0;
  }

  body:has(#sticky-cta) .modes-rail .rail-arrow {
    flex: 0 0 auto;
    width: 36px !important;
    height: 36px !important;
  }

  body:has(#sticky-cta) .modes-rail .rail-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }

  body:has(#sticky-cta) .site-footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /*
     * Index pulls the footer under the signup band (negative margin) and masks the top
     * of the footer — on narrow screens the logo reads as “clipped” by the CTA. Use a
     * small positive gap and drop the mask so the wordmark stays fully opaque.
     */
    margin-top: 12px !important;
    padding-top: clamp(24px, 5vw, 40px) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body:has(#sticky-cta) #signup.panel.full-bleed::after {
    bottom: -24px !important;
    height: 72px !important;
    opacity: 0.65 !important;
  }

  /* Company links only — don’t apply column flex to .footer-col--apps or it overrides row+badges */
  body:has(#sticky-cta) nav.footer-col:not(.footer-col--apps) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  body:has(#sticky-cta) nav.footer-col.footer-col--apps {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px 12px !important;
    width: 100%;
    max-width: min(22rem, 100%);
    margin-inline: auto;
  }

  body:has(#sticky-cta) nav.footer-col.footer-col--apps .badge {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Footer: stack on phone, align store badges, comfortable rhythm */
  body:has(#sticky-cta) .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center; /* center logo + avoid column-flex stretch squashing the image */
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  body:has(#sticky-cta) .footer-brand .footer-logo {
    width: auto !important;
    height: 28px !important;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
  }

  body:has(#sticky-cta) .footer-brand .made {
    margin: 0;
    max-width: 22rem;
    line-height: 1.5;
    align-self: center;
    width: 100%;
    text-align: center;
  }

  body:has(#sticky-cta) .footer-col h4 {
    margin: 0 0 12px;
    width: 100%;
    text-align: center;
  }

  body:has(#sticky-cta) .footer-link {
    margin: 0.45em 0;
    text-align: center;
  }

  body:has(#sticky-cta) .footer-link:first-of-type {
    margin-top: 0;
  }

  body:has(#sticky-cta) .footer-col--apps h4 {
    flex: 1 0 100%;
    margin-bottom: 4px;
    text-align: center;
  }

  body:has(#sticky-cta) .footer-social {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    gap: 12px;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    display: flex !important;
  }

  /* --- Landing (index) hero --- */
  .hero--statement .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    min-height: unset !important;
    padding: clamp(10px, 3vw, 18px) max(1px, env(safe-area-inset-left)) clamp(10px, 3vw, 18px)
      max(1px, env(safe-area-inset-right));
  }

  body:has(#sticky-cta) .hero--statement .inner {
    justify-content: center;
  }

  .hero--statement .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body:has(#sticky-cta) .hero--statement .brand {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  .hero--statement .top-cta {
    flex: 1 1 auto;
    font-size: 13px !important;
    padding: 10px 14px !important;
    min-height: 40px;
    white-space: normal;
    text-align: center;
    max-width: none;
  }

  /* Duplicate CTA — hero already has primary “Try Sanctum” buttons below */
  body:has(#sticky-cta) .hero--statement .top-cta {
    display: none !important;
  }

  .hero-lead {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .hero-title {
    white-space: normal !important;
    font-size: clamp(28px, 9vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 clamp(16px, 3vh, 28px) !important;
  }

  /*
   * Homepage hero: keep the full headline on one line — fluid type + tight tracking.
   * Beats index @media (max-width:640px) .hero-title { white-space: normal } via #sticky-cta.
   */
  body:has(#sticky-cta) .hero-title {
    white-space: nowrap !important;
    /* Stronger fluid scale — “peace” is the longest swap; still safe ~320px with tight tracking */
    font-size: clamp(14px, calc(0.28rem + 6.35vw), 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.062em !important;
    word-spacing: -0.025em;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-eyebrow.badge {
    font-size: 13px !important;
    padding: 7px 12px !important;
    margin: clamp(12px, 2vh, 20px) 0 clamp(16px, 2.5vh, 24px) !important;
  }

  .hero-sub {
    margin: 0 0 clamp(20px, 3vh, 32px) !important;
    font-size: clamp(16px, 4.2vw, 20px) !important;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px !important;
    margin-top: clamp(14px, 4vh, 36px) !important;
  }

  .hero-ctas .btn {
    width: 100%;
    text-align: center;
    font-size: 18px !important;
    padding: 16px 20px !important;
  }

  .hero-ctas .btn.btn-outline {
    font-size: 16px !important;
    padding: 14px 18px !important;
  }

  /* Hero proof line — single row on phone (avoid awkward wrap) */
  #hero-proof.meta-row {
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 0 !important;
    font-size: clamp(8px, 2.35vw, 11px) !important;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-top: clamp(16px, 4vh, 24px) !important;
    padding-inline: 2px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #hero-proof.meta-row::-webkit-scrollbar {
    display: none;
  }

  #hero-proof.meta-row .meta-dot::before {
    margin: 0 3px !important;
    opacity: 0.65;
  }

  .meta-row:not(#hero-proof) {
    font-size: 15px;
    gap: 10px 14px;
  }

  .hero-art-wrap {
    flex: 1 1 100%;
    width: 100%;
    min-height: 200px !important;
    height: auto !important;
  }

  .hero-art {
    width: min(88vw, 420px) !important;
  }

  /* Chips rail: touch scroll, hide arrow chrome */
  .chips-rail .chip-arrow {
    display: none !important;
  }

  .chips-rail {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .chips-window {
    mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      #000 18px,
      #000 calc(100% - 18px),
      rgba(0, 0, 0, 0) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      #000 18px,
      #000 calc(100% - 18px),
      rgba(0, 0, 0, 0) 100%
    ) !important;
  }

  /* Reviews */
  .r-card {
    flex: 0 0 88% !important;
    min-height: unset;
    padding: clamp(14px, 4vw, 22px) !important;
  }

  .r-quote {
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Benefits: kill desktop nudge / overflow */
  #benefits .device,
  #benefits .text {
    transform: none !important;
  }

  #benefits .device {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Modes carousel (homepage uses body:has rules above for column width) */
  .modes-track {
    padding-bottom: 12px !important;
  }

  .mode-card {
    height: auto !important;
    min-height: min(520px, 92vh) !important;
    flex-direction: column !important;
    gap: clamp(16px, 3vw, 24px) !important;
    padding: clamp(18px, 4vw, 28px) !important;
  }

  /* Homepage modes only: flat scale so slides stay legible + swipe hint stays obvious */
  body:has(#sticky-cta) .mode-card {
    transform: scale(1) !important;
    filter: none !important;
  }

  body:has(#sticky-cta) .mode-card.is-prev,
  body:has(#sticky-cta) .mode-card.is-next,
  body:has(#sticky-cta) .mode-card.is-active,
  body:has(#sticky-cta) .mode-card.is-transitioning {
    transform: scale(1) !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .mode-left,
  .mode-right {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100%;
  }

  .mode-right {
    justify-content: center;
  }

  .mode-illus {
    width: min(72vw, 360px) !important;
    max-width: 100%;
  }

  /* Science section: remove tall empty rows */
  #science .science-row,
  #science .science-row.reverse {
    min-height: unset !important;
  }

  .science-row,
  .science-row.reverse {
    min-height: unset !important;
  }

  /* Compare table */
  .compare::before {
    content: "Swipe to compare →";
    display: block;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 10px;
    font-weight: 600;
  }

  .compare-head .cell,
  .compare-row .cell {
    padding: 12px 6px !important;
  }

  .compare-head .cell {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body:has(#sticky-cta) #compare-title {
    padding-inline: max(1px, env(safe-area-inset-left)) max(1px, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  body:has(#sticky-cta) .compare {
    padding-inline: max(1px, env(safe-area-inset-left)) max(1px, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* Sticky bottom CTA + page clearance */
  #sticky-cta.sticky-cta {
    left: 0;
    right: 0;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding-left: max(1px, env(safe-area-inset-left));
    padding-right: max(1px, env(safe-area-inset-right));
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #sticky-cta.sticky-cta .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 15px !important;
    padding: 14px 16px !important;
    line-height: 1.2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Landing page only — room for sticky CTA */
  body:has(#sticky-cta) .page {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Paywall / legal pages use .page without sticky bar */
  body:not(:has(#sticky-cta)) .page {
    padding-bottom: max(36px, calc(28px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Community waitlist */
  body:has(.page-container) {
    padding: 12px !important;
  }

  .page-container {
    gap: clamp(16px, 4vw, 24px);
  }

  .form-card {
    padding: clamp(18px, 4vw, 28px) !important;
  }

  /* Privacy policy (main.wrap) */
  main.wrap {
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  .footer-wrap {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }

  .footer-social {
    justify-content: center !important;
  }

  .hero--statement .top-cta {
    font-size: 12px !important;
  }

  .mode-card {
    min-height: min(480px, 88vh) !important;
  }
}

/* Membership / early-membership paywall pages */
@media (max-width: 768px) {
  .page .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .plan {
    min-height: 52px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .plan .radio {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .plan .radio::after {
    width: 14px !important;
    height: 14px !important;
  }

  .headline h1 {
    font-size: clamp(24px, 7vw, 40px) !important;
  }

  .cta .btn,
  .cta button[type="submit"],
  section.cta .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}