/* =====================================================================
   Soul Full Synthesis — Mobile Overrides
   Shared by every page in /pages. Linked AFTER each page's inline <style>
   so equal-specificity rules here cascade-win.
   Breakpoints:
     - 760px: tablet / large phone
     - 480px: small phone tweaks
   ===================================================================== */

/* Hamburger button + backdrop are injected by nav-mobile.js at any width;
   hide them on desktop. The @media block below re-shows on mobile. */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }
@media (max-width: 760px) {
  .nav-backdrop { display: block; }
}

@media (max-width: 760px) {

  .cohort-callout {
    grid-template-columns: 1fr !important;
  }
  .cohort-callout-img {
    min-height: 260px !important;
    aspect-ratio: 16/10 !important;
    background-image: url('../assets/cohort-hero-mobile.png') !important;
    background-position: center !important;
    margin-bottom: 4px !important;
  }
  .cohort-callout-copy {
    padding: 24px 20px !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }
  .cohort-callout-copy h2 {
    font-size: 24px !important;
  }
  .cohort-callout-copy p {
    font-size: 13.5px !important;
    max-width: none !important;
  }
  .cohort-callout-copy span {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* --------------------------------------------------- WRAP / CONTAINER */
  .wrap { padding: 0 20px !important; }

  /* --------------------------------------------------- TOP NAV (drawer) */
  .topnav { padding: 12px 0 !important; }
  .nav-open .topnav {
    /* Elevate the nav above the backdrop so links inside the drawer are tappable.
       (.topnav creates its own stacking context, so its descendants — including
       the drawer at z-index 220 — would otherwise render under the backdrop.) */
    z-index: 230 !important;
  }
  .topnav .wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    position: relative;
  }
  .topnav-home img { height: 30px !important; }

  /* Hamburger button — injected by nav-mobile.js */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 38px;
    padding: 6px 12px 6px 10px;
    margin: 0;
    background: transparent;
    border: 1px solid var(--shared-hairline-strong);
    border-radius: 4px;
    cursor: pointer;
    z-index: 260;
    position: relative;
    color: var(--sfs-teal-dark);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle::after {
    content: "Menu";
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: inherit;
  }
  .nav-open .nav-toggle {
    border-color: rgba(245,240,232,0.4);
    color: var(--shared-ivory);
    position: fixed;
    top: 14px;
    right: 20px;
    background: rgba(245,240,232,0.08);
  }
  .nav-open .nav-toggle::after { content: "Close"; }
  .nav-toggle .bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
  }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after,
  .nav-toggle .bars > span {
    content: "";
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 220ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .nav-open .nav-toggle .bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle .bars > span { opacity: 0; }
  .nav-open .nav-toggle .bars::after { transform: translateY(-6.5px) rotate(-45deg); }
  /* Legacy <span> children injected by older JS still hidden — we use .bars now */
  .nav-toggle > span:not(.bars) { display: none; }

  /* Drawer panel — instant show/hide for reliability across all browsers */
  .topnav-links {
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 82% !important;
    max-width: 340px !important;
    height: 100dvh !important;
    padding: 96px 28px 40px !important;
    margin: 0 !important;

    background: var(--sfs-teal-dark) !important;
    color: var(--shared-ivory) !important;
    z-index: 220 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    mask-image: none !important;
    -webkit-mask-image: none !important;

    box-shadow: -20px 0 60px rgba(0,0,0,0.25) !important;
  }
  .nav-open .topnav-links {
    display: flex !important;
  }
  .topnav-links a {
    display: block !important;
    width: 100% !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--shared-ivory) !important;
    padding: 18px 0 !important;
    border-top: 1px solid rgba(200,168,130,0.22) !important;
    border-bottom: 0 !important;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    text-decoration: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(196,149,122,0.25);
  }
  .topnav-links a:first-child { border-top: 0 !important; }
  .topnav-links a.current {
    color: var(--shared-gold) !important;
  }
  .topnav-links a::after {
    content: "→";
    float: right;
    font-family: var(--font-ceremonial);
    color: var(--shared-gold);
    opacity: 0.55;
    transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .topnav-links a:hover::after,
  .topnav-links a:active::after { opacity: 1; transform: translateX(3px); }

  /* Backdrop overlay (injected by nav-mobile.js) */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 46, 46, 0.55);
    z-index: 210;
    display: none;
  }
  .nav-open .nav-backdrop {
    display: block;
  }

  /* Prevent body scroll when drawer is open */
  .nav-open body { overflow: hidden !important; }

  /* --------------------------------------------------- BREADCRUMB */
  .crumb { padding: 12px 0 !important; font-size: 9.5px !important; letter-spacing: 0.22em !important; }
  .crumb .sep { margin: 0 8px !important; }

  /* --------------------------------------------------- HERO */
  .hero { padding: 64px 20px 56px !important; }
  .hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.32em !important;
    margin: 0 0 18px !important;
  }
  .hero-wordmark {
    font-size: 30px !important;
    margin-bottom: 18px !important;
  }
  .hero-mark { height: 64px !important; margin-bottom: 20px !important; }
  .hero-title {
    font-size: 38px !important;
    line-height: 1.06 !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 16px !important;
  }
  /* Medicine Mage has all-caps wide-tracked hero title — keep narrower tracking only */
  .hero-divider { margin: 0 auto 20px !important; }
  .hero-sub, .hero-intro {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 auto 28px !important;
    max-width: 100% !important;
  }
  .hero-pill {
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    text-align: center;
  }
  .hero-cta {
    padding: 14px 24px !important;
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
    gap: 10px !important;
  }

  /* --------------------------------------------------- SECTIONS */
  .sec { padding: 56px 0 !important; }
  .sec-head { margin-bottom: 32px !important; }
  .sec-eyebrow { font-size: 10.5px !important; letter-spacing: 0.3em !important; margin: 0 0 14px !important; }
  .sec-title {
    font-size: 30px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    margin: 0 0 16px !important;
  }
  .sec-intro { font-size: 16px !important; line-height: 1.6 !important; }
  .sec-divider { margin-top: 20px !important; }

  /* --------------------------------------------------- GRIDS → 1 COLUMN */
  .who,
  .pillars-grid,
  .integ-concepts,
  .ceremonies,
  .receive,
  .steps,
  .sib-grid,
  .programs,
  .sessions,
  .cer-grid,
  .founder-inner,
  .path-inner,
  .preview-grid,
  .process,
  .tiers,
  .tools,
  .guides,
  .benefits,
  .resources-grid,
  .containers,
  .selfguided,
  .how,
  .solo-card,
  .upgrade {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .who { gap: 28px !important; }
  .founder-inner, .path-inner { gap: 32px !important; }
  .founder-inner { grid-template-areas: "header" "copy" "portrait" !important; row-gap: 8px !important; }
  .founder-title { margin: 0 !important; }
  .founder-header, .founder-title { width: auto !important; height: auto !important; }

  /* --------------------------------------------------- CARDS — reduced padding */
  .pillar,
  .integ-card,
  .ceremony,
  .receive-col,
  .sib,
  .proc-card,
  .tier,
  .tools-col,
  .benefit,
  .program,
  .session,
  .cer-card,
  .solo-card,
  .week-card {
    padding: 26px 22px !important;
  }
  .ceremony { padding: 32px 24px !important; }

  /* --------------------------------------------------- SELF-LED CONTAINER CARDS (offerings + self-led pages) */
  .container-card .container-band,
  .sg-card .sg-band { height: 4px !important; }
  .container-body,
  .sg-body {
    padding: 28px 22px 24px !important;
  }
  .container-eyebrow,
  .sg-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.3em !important;
    margin: 0 0 12px !important;
    /* Force eyebrow to render in one column not wrap awkwardly */
    word-spacing: normal !important;
  }
  .container-name,
  .sg-name {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px !important;
  }
  .container-tag,
  .sg-tag {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 0 0 16px !important;
  }
  .container-desc,
  .sg-desc {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 0 0 18px !important;
  }
  .container-includes-head {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    margin: 0 0 10px !important;
    padding-bottom: 10px !important;
  }
  .container-includes li,
  .sg-includes li {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    padding: 9px 0 9px 22px !important;
  }
  .container-includes,
  .sg-includes {
    margin: 0 0 20px !important;
  }
  .container-foot,
  .sg-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding-top: 18px !important;
  }
  .container-price,
  .sg-price {
    font-size: 32px !important;
    text-align: center;
  }
  .container-cta,
  .sg-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.26em !important;
  }

  /* --------------------------------------------------- HOW IT WORKS cards (self-led) */
  .how-step {
    padding: 24px 22px !important;
  }
  .how-num { font-size: 10px !important; letter-spacing: 0.3em !important; margin: 0 0 10px !important; }
  .how-step h4 { font-size: 19px !important; margin-bottom: 8px !important; }
  .how-step p { font-size: 14px !important; line-height: 1.6 !important; }

  /* --------------------------------------------------- NUMBERED STEP CARDS */
  .step,
  .prep-step {
    grid-template-columns: 44px 1fr !important;
    gap: 16px !important;
    padding: 22px 20px !important;
  }
  .step-num,
  .prep-num {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
  .step h4,
  .prep-step h4 {
    font-size: 19px !important;
    margin-bottom: 6px !important;
  }
  .step p,
  .prep-step p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* --------------------------------------------------- LIST ROWS — stack label+text */
  .practices-list li,
  .arc-row,
  .week {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 18px 20px !important;
  }
  .week { padding: 20px !important; gap: 10px !important; }
  .practice-label,
  .arc-phase { margin-bottom: 4px !important; }

  /* --------------------------------------------------- SACRED SESSIONS .sess (3-col row) */
  .sess {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 28px 22px !important;
    text-align: left !important;
  }
  .sess-glyph { width: 56px; height: auto; }
  .sess-glyph svg { width: 56px; height: 56px; }

  /* --------------------------------------------------- WHO list bullets */
  .who h3 { font-size: 22px !important; line-height: 1.32 !important; margin-bottom: 16px !important; }
  .who p { font-size: 15px !important; }
  .who li { font-size: 14.5px !important; padding-left: 24px !important; }
  .who ul:first-child li:last-child { border-bottom: 1px solid rgba(58,46,42,0.16) !important; }

  /* --------------------------------------------------- PHILOSOPHY (medicine-mage) */
  .phil-intro p,
  .integ-intro p,
  .prep-intro {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  .phil-quote {
    padding: 24px 22px !important;
    margin: 28px 0 !important;
  }
  .phil-quote blockquote { font-size: 18px !important; line-height: 1.5 !important; }
  .pillars-grid { margin-top: 32px !important; }
  .pillar h4 { font-size: 21px !important; }
  .pillar p, .integ-card p { font-size: 14px !important; }

  .practices-head { font-size: 22px !important; margin-bottom: 22px !important; }
  .practices-list { margin-bottom: 36px !important; }

  /* --------------------------------------------------- RESOURCES */
  .resources { padding: 28px 22px !important; }
  .resources h4 { font-size: 19px !important; margin-bottom: 18px !important; }
  .resource-item { gap: 10px !important; }
  .resource-type { width: 56px !important; font-size: 9px !important; letter-spacing: 0.22em !important; }
  .resource-name { font-size: 14px !important; }

  /* --------------------------------------------------- CEREMONIES (medicine-mage) */
  .ceremony-name { font-size: 24px !important; line-height: 1.15 !important; }
  .ceremony-meta { gap: 6px !important; }
  .ceremony-meta span { font-size: 9.5px !important; padding: 3px 10px !important; }
  .ceremony-desc { font-size: 14px !important; }
  .ceremony-cta {
    padding: 12px 22px !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }

  /* --------------------------------------------------- RECEIVE COLUMNS */
  .receive-col h4 { margin-bottom: 18px !important; padding-bottom: 12px !important; }
  .receive-col li { font-size: 13.5px !important; padding: 10px 0 !important; }
  .receive-col li b { font-size: 15px !important; }

  /* --------------------------------------------------- DISCOUNT BLOCK */
  .discount {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 32px 24px !important;
  }
  .discount h3 { font-size: 24px !important; line-height: 1.2 !important; }
  .discount-eye { font-size: 10px !important; letter-spacing: 0.32em !important; }
  .discount p, .discount .note { font-size: 14px !important; }

  /* --------------------------------------------------- TIER / PROGRAM cards */
  .tier h3, .program h3, .tier-name, .program-name { font-size: 22px !important; }
  .tier-desc, .program-desc { font-size: 14px !important; }
  .tier-price, .program-price { font-size: 22px !important; }
  .tier ul, .program ul { font-size: 13.5px !important; }
  .tier-cta, .program-cta, .solo-cta {
    padding: 13px 24px !important;
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
    width: 100%;
    justify-content: center;
  }

  /* solo tier inner (plant-medicine integration) */
  .tier.solo .tier-inner,
  .solo-card .solo-inner,
  .program-inner,
  .session-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 22px !important;
  }

  /* --------------------------------------------------- FINAL CTA */
  .cta-final { padding: 64px 0 !important; }
  .cta-final-eye { font-size: 10.5px !important; letter-spacing: 0.32em !important; margin-bottom: 18px !important; }
  .cta-final-title {
    font-size: 32px !important;
    line-height: 1.18 !important;
    margin: 0 0 18px !important;
  }
  .cta-final-body {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 auto 28px !important;
    padding: 0 4px;
  }
  .cta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100%;
    padding: 0 4px;
  }
  .btn-gold,
  .btn-out {
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.24em !important;
    justify-content: center !important;
    text-align: center;
    gap: 10px !important;
  }

  /* --------------------------------------------------- SIBLINGS */
  .siblings { padding: 56px 0 64px !important; }
  .sib-head { margin-bottom: 28px !important; }
  .sib-head p { font-size: 10.5px !important; letter-spacing: 0.32em !important; }
  .sib-head h3 { font-size: 24px !important; line-height: 1.2 !important; }
  .sib-name { font-size: 21px !important; }
  .sib-sub { font-size: 13.5px !important; }
  .sib { padding: 26px 22px !important; }

  /* --------------------------------------------------- NOTICE BOX */
  .notice-box { padding: 22px 20px !important; }
  .notice-box h4 { font-size: 11px !important; letter-spacing: 0.26em !important; }
  .notice-box p { font-size: 13.5px !important; }

  /* --------------------------------------------------- FOOTER */
  footer { padding: 48px 0 32px !important; }
  footer .wrap { padding: 0 20px !important; }
  footer .ft-wordmark { font-size: 22px !important; }
  footer .ft-tag { font-size: 14.5px !important; margin-bottom: 28px !important; max-width: 100% !important; }
  footer .ft-signoff { font-size: 22px !important; }
  footer .ft-meta, footer .ft-legal {
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    line-height: 1.6;
  }
  footer .ft-meta { word-break: break-word; }

  /* --------------------------------------------------- BIG SCRIPT NAMES (offerings page) */
  /* The huge Cavalliera "Soul Full Brooke" treatment can overflow on mobile */
  [class*="sfb-cursive"],
  [class*="founder-name"],
  [class*="brand-name"] {
    font-size: 48px !important;
    line-height: 1.05 !important;
  }

  /* --------------------------------------------------- SOLO CARD (microdose + integration) */
  .solo-card {
    padding: 28px 22px !important;
  }
  .solo-card .solo-name { font-size: 24px !important; line-height: 1.2 !important; }
  .solo-card .solo-tag { font-size: 14.5px !important; margin-bottom: 14px !important; }
  .solo-card .solo-desc { font-size: 14px !important; line-height: 1.6 !important; }
  .solo-card .solo-price { font-size: 28px !important; padding: 12px 0 !important; }
  .solo-card .solo-cta { padding: 14px 22px !important; font-size: 10.5px !important; letter-spacing: 0.24em !important; width: 100% !important; justify-content: center !important; }

  /* --------------------------------------------------- UPGRADE / CALLOUT (self-led) */
  .upgrade {
    padding: 28px 22px !important;
    align-items: stretch !important;
  }
  .upgrade h3 { font-size: 22px !important; line-height: 1.2 !important; }
  .upgrade p { font-size: 14px !important; line-height: 1.6 !important; }
  .upgrade .upgrade-cta { width: 100% !important; justify-content: center !important; padding: 14px 22px !important; font-size: 10.5px !important; letter-spacing: 0.24em !important; }

  /* --------------------------------------------------- SESS NAME / META (sacred-sessions + offerings) */
  .sess-name { font-size: 22px !important; line-height: 1.2 !important; margin: 0 0 10px !important; }
  .sess.feature .sess-name { font-size: 26px !important; }
  .sess-eyebrow { font-size: 10px !important; letter-spacing: 0.28em !important; }
  .sess-desc { font-size: 14px !important; line-height: 1.65 !important; }
  .sess-tag { font-size: 9.5px !important; padding: 3px 10px !important; }
  .sess-side { width: 100% !important; }
  .sess-meta-block { padding: 12px 14px !important; }
  .sess-meta-value { font-size: 14px !important; }
  .sess-meta-label { font-size: 9px !important; letter-spacing: 0.22em !important; }

  /* --------------------------------------------------- PROC NUMS/NAMES (decorative) */
  .proc-num { font-size: 40px !important; }
  .proc-name { font-size: 19px !important; }
  .proc-desc { font-size: 13.5px !important; line-height: 1.6 !important; }

  /* --------------------------------------------------- INLINE Medicine Mage h2 in offerings */
  .sec-title[style*="font-size: 56px"] { font-size: 30px !important; letter-spacing: 0.08em !important; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px !important; }
  .hero { padding: 56px 16px 48px !important; }
  .hero-title { font-size: 32px !important; }
  .hero-wordmark { font-size: 26px !important; }
  .sec-title { font-size: 26px !important; }
  .cta-final-title { font-size: 26px !important; }
  .sib-head h3 { font-size: 21px !important; }
  .ceremony-name { font-size: 22px !important; }
  .discount h3 { font-size: 22px !important; }
  .who h3 { font-size: 20px !important; }
  .pillar h4, .integ-card h4 { font-size: 19px !important; }
}