/*
 * mystika-mobile-only.css
 * Exported from index.html – contains ONLY @media blocks, in document order.
 * Base styles remain in index.html.
 * Generated June 2026.
 */

/* Hero section – mobile layout (height, object-fit, overlay gradient) */
@media (max-width: 768px) {
      .hero {
        height: 100svh;
        min-height: 600px;
      }
      .hero-bg-img {
        object-fit: cover;
        object-position: center top;
      }
      .hero-overlay {
        background: linear-gradient(to top,
          rgba(0,0,0,0.72) 0%,
          rgba(0,0,0,0.35) 38%,
          transparent 65%
        );
      }
      .hero-content {
        padding: 2.5rem 1.5rem 2.5rem;
      }
      .hero-spacer {
        min-height: 38vh;
      }
      .hero-checks { text-align: left; }
      .hero-question {
        background: none;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: #ffffff;
        background-clip: unset;
        color: #ffffff;
      }
    }

/* Mobile image overrides – for-you and future sections */
@media (max-width: 768px) {
  .for-you-bg {
    background-image: url('images/mobile/03. Lady with Ankh.png') !important;
  }
  .future-visual {
    background-image: url('images/mobile/29. Meet Future You.png');
  }
  .isis-break-bg {
    background-image: url('images/isis-with-golden-wings.jpg') !important;
  }
}

/* Letter section – mobile padding and card padding */
@media (max-width: 768px) {
  .letter-section { padding: 4rem 1rem 5rem; }
  .letter-card { padding: 2.5rem 1.5rem 3rem; }
}

/* Path section – mobile single-column grid */
@media (max-width: 768px) {
  .path-layout { grid-template-columns: 1fr; }
  .path-spacer { min-height: 100vw; background-size: cover; background-position: center; }
  .path-card { padding: 3rem 1.5rem; }
}

/* Path section – tablet portrait single-column grid */
@media (max-width: 1024px) and (orientation: portrait) {
  .path-layout { grid-template-columns: 1fr; }
  .path-spacer { min-height: 100vw; background-size: cover; background-position: center; }
  .path-card { padding: 3rem 2.5rem; }
}

/* NDE (near-death experience) section – mobile padding */
@media (max-width: 768px) {
  .nde-section { padding: 4rem 1rem 5rem; }
  .nde-card { padding: 2.5rem 1.5rem 3rem; }
  .nde-heading { font-size: 2rem; line-height: 1.2; }
}

/* Meet Future You section – mobile single-column grid */
@media (max-width: 768px) {
  .future-grid { grid-template-columns: 1fr; }
  .future-visual { min-height: 280px; padding: 3rem 2rem; }
  .future-text { padding: 3rem 1.5rem; }
}

/* Meet Future You section – tablet portrait single-column grid */
@media (max-width: 1024px) and (orientation: portrait) {
  .future-grid { grid-template-columns: 1fr; }
  .future-visual { min-height: 300px; }
  .future-text { padding: 3rem 2.5rem; }
}

/* Testimonials section – mobile padding and card padding */
@media (max-width: 768px) {
  .testi-card { padding: 2rem 1.5rem; }
  .testi-section { padding: 3rem 1rem 2rem; }
  .testi-heading { font-size: clamp(1.6rem, 5vw, 2.6rem); }
  .testi-sarita img { width: 100%; height: auto; }
  /* Item 1 – space between the two video embeds */
  .testi-video + .testi-video { margin-top: 1.5rem; }
}

/* General layout fixes – mobile section padding and button sizing */
@media (max-width: 768px) {
  /* Hero */
  .hero-bg-img { object-position: center top; }
  .hero-question { font-size: clamp(1rem, 4.5vw, 1.25rem); padding: 0 0.5rem; }
  h1.hero-title, .hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-subhead { font-size: clamp(1rem, 4vw, 1.2rem); }

  /* Global section padding */
  .intro-section { padding: 3rem 1rem; }
  .for-you-section { padding: 3rem 1rem; }
  .for-you-overlay { background: rgba(14,7,2,0.82); }
  .for-you-heading { font-size: 1.4rem; }
  .ideal-section { padding: 3rem 1rem; }
  .disclosure-section { padding: 3rem 1rem; }

  /* Isis visual break – ensure it has visible height */
  .isis-break { min-height: 220px; }

  /* For-You list items */
  .for-you-list li { padding-left: 1rem; }

  /* Button full-width on mobile */
  .btn-framed { padding: 1.1rem 2rem; font-size: 0.78rem; }
}

/* Download / Isis split section – mobile stack */
@media (max-width: 768px) {
  .download-section { flex-direction: column; min-height: auto; }
  .download-img { flex: none; height: 55vw; }
  .download-text { padding: 3rem 1.8rem; }
}

/* Levels section – mobile background and single-column cards */
@media (max-width: 768px) {
  /* Item 2 – white background on levels section */
  .levels-section {
    padding: 1rem 1rem 3rem;
    background: #fff !important;
  }
  .levels-bg { display: none !important; }
  .levels-section::before { background: transparent !important; }
  .levels-header {
    background: transparent;
    border: none;
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
  }
  .levels-title {
    background: linear-gradient(135deg, #7a5210 0%, #c9a227 40%, #e8c96a 60%, #c9a227 80%, #7a5210 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 1.75rem !important;
    margin-bottom: 4.25rem !important;
  }
  .levels-intro { color: #1a0a00; }
  .level-name {
    background: linear-gradient(135deg, #7a5210 0%, #c9a227 40%, #e8c96a 60%, #c9a227 80%, #7a5210 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .level-body { color: #1a0a00; }
  .level-card {
    background: transparent;
    box-shadow: none;
    border: none;
    display: block;
    padding: 1.5rem 0.5rem;
  }
  .levels-list { padding: 0 0.5rem; }
  .level-img { margin: 1rem 0 1.2rem; }
  .four-levels-img {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
  }
}

/* Course structure section – tablet stack (≤860px) */
@media (max-width: 860px) {
  .course-structure-section { padding: 0.5rem 0 6rem; }
  .cs-inner { padding: 0 1.2rem; }
  .cs-weeks { gap: 0; }
  .cs-week-card,
  .cs-week-card.even {
    flex-direction: column;
  }
  .cs-weeks > .cs-week-card + .cs-week-card {
    border-top: 1px solid rgba(201,162,39,0.28);
  }
  .cs-week-img-wrap {
    flex: none;
    width: 100%;
  }
  .cs-week-img-wrap img {
    width: 100%;
    height: auto;
    position: static;
  }
  .cs-week-text {
    padding: 2rem 1.5rem;
  }
}

/* Week-by-week list (Week 1–12) – mobile: centre "Week N" and the guide/title
   line beneath it, with one shared spacing rule instead of per-week overrides */
@media (max-width: 768px) {
  .cs-week-number,
  .cs-week-heading {
    text-align: center;
  }
  .cs-week-number {
    margin-bottom: 0.55rem;
  }
  .cs-week-heading {
    line-height: 1.35;
    font-size: 1.3rem !important;
  }
  /* Trial: split guide name and secret-key title onto their own lines,
     drop the connecting dash, since it's redundant once they're stacked */
  .cs-week-dash {
    display: none;
  }
  .cs-week-name,
  .cs-week-subtitle {
    display: block;
  }
  .cs-week-name {
    margin-bottom: 0.3rem;
  }
}

/* Level 1 section – mobile background and card padding */
@media (max-width: 768px) {
  /* Item 4 – white background on lvl1 section */
  .lvl1-section {
    padding: 3rem 1rem 1rem;
    background: #fff !important;
  }
  .lvl1-bg { display: none !important; }
  .lvl1-card {
    padding: 2.5rem 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    border: none;
  }
  /* Item 5 – square images inside lvl1 */
  .lvl1-img-wrap img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
  }
  .lvl1-img-wrap {
    overflow: hidden;
    margin-bottom: 1.5rem;
  }
  /* Normalise paragraph spacing after the bullet list */
  .lvl1-body { margin-bottom: 0.9rem; }
}

/* Level parallax banners – mobile minimum height */
@media (max-width: 768px) {
  .lvl-banner { min-height: 220px; }
}

/* Level 3 section – tablet card padding (≤900px) */
@media (max-width: 900px) {
  .lvl3-card { padding: 2.5rem 2rem; }
}

/* Level 3 section – mobile background, full-width card, square images */
@media (max-width: 768px) {
  /* Item 6 – white background on lvl3 section, wider text, square images */
  .lvl3-bg { display: none !important; }
  .lvl3-section { background: var(--surface) !important; }
  .lvl3-card {
    background: #fff;
    box-shadow: none;
    border-radius: 0;
    padding: 2rem 0;
    max-width: 100%;
    width: 100%;
  }
  .lvl3-card p,
  .lvl3-items,
  .lvl3-outcomes,
  .lvl3-section-img { max-width: 100%; width: 100%; }
  .lvl3-section-img img,
  .lvl3-overview-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }
  /* Normalise spacing around "Foundations / Fundamentals" item titles */
  .lvl3-item-title { margin-bottom: 0.5rem !important; }
  .lvl3-item { margin-bottom: 0.5rem; }
}

/* Practitioner Pathways – tablet card stack (≤800px) */
@media (max-width: 800px) {
  .prac-card,
  .prac-card--reverse {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .prac-card--reverse .prac-card-text { order: 2; }
  .prac-card--reverse .prac-card-img  { order: 1; }
  .prac-card-img { min-height: 240px; }
  .prac-card-text { padding: 2rem 1.75rem; }
}

/* Practitioner Pathways – mobile CTA text size */
@media (max-width: 768px) {
  /* Item 7 – "these are our main practitioner pathways" bigger */
  .prac-pathways-cta {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    font-weight: 600;
  }
  /* Item 7 – body text/bullets left-align on mobile instead of justify (justify causes
     uneven rivers of whitespace on narrow columns) */
  .prac-card-text p,
  .prac-bullet-list,
  .prac-bullet-list li {
    text-align: left !important;
  }
}

/* Sacred Marketing section – tablet stack (≤860px) */
@media (max-width: 860px) {
  .sacrkt-main-title { font-size: clamp(1.6rem, 5vw, 2.6rem); }
  .sacrkt-light-inner { grid-template-columns: 1fr; min-height: unset; }
  .sacrkt-light-content { padding: 0 1.5rem 2.5rem; }
  .sacrkt-light-img { min-height: 320px; }
  .sacrkt-dark-inner { grid-template-columns: 1fr; min-height: unset; }
  .sacrkt-dark-content { padding: 3rem 1.5rem 2.5rem; }
  .sacrkt-dark-img { min-height: 320px; order: -1; }
  .sacrkt-funnels-full { padding: 2rem 1.5rem; }
  .sacrkt-funnels-full-title { font-size: clamp(1.2rem, 4vw, 1.8rem); }
  .sacrkt-ornament-break { padding: 2rem 1.5rem 1.5rem; }
}

/* Sacred Marketing section – mobile image/content order */
@media (max-width: 768px) {
  /* Item 8 – image between header and body text on mobile */
  /* Within the 1-col grid, image comes before text content */
  .sacrkt-light-img { order: 1; }
  .sacrkt-light-content { order: 2; }
  /* Item 8 – Sacred Funnels title bigger on mobile */
  .sacrkt-funnels-full-title { font-size: clamp(1.2rem, 4vw, 1.8rem); }
  .sacrkt-main-title { font-size: 2rem; }
  /* "The Secrets Of Sacred Marketing" – tighten line-height to match the
     already-correct spacing on "Embrace Sacred Marketing" (.sacrkt-dark-eyebrow) */
  .sacrkt-eyebrow { line-height: 1.2; text-align: center; margin-top: 2.4rem !important; margin-bottom: 2.4rem !important; }
  /* "Embrace Sacred Marketing" – centre on mobile */
  .sacrkt-dark-eyebrow { text-align: center !important; }
}

/* Part-Time to Full-Time section – mobile card bleed (≤800px) */
@media (max-width: 800px) {
  .path-ankh-img {
    margin-left: -3rem;
    margin-right: -3rem;
    width: calc(100% + 6rem);
  }
}

/* Part-Time to Full-Time section – tablet grid collapse (≤800px) */
@media (max-width: 800px) {
  .ptft-inner { grid-template-columns: 1fr; }
  .ptft-spacer { display: none; }
  .ptft-section { padding-top: 3rem; padding-bottom: 2.5rem; }
}

/* Part-Time to Full-Time section – mobile background and text colour */
@media (max-width: 768px) {
  /* Item 9 – white background, dark text on ptft section */
  .ptft-section {
    background: #fff !important;
  }
  .ptft-bg { display: none !important; }
  .ptft-card {
    background: #fff;
    box-shadow: none;
  }
  .ptft-eyebrow {
    background: linear-gradient(110deg, #f0d870 0%, #c9a227 40%, #e8c96a 60%, #c9a227 80%, #f0d870 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  .ptft-body p {
    color: #1a0a00;
  }
  /* "From Part-Time to Full-Time Sustainable Path" over the photo overlay is
     already solid gold (#c9a227, set in index.html for mobile Safari) —
     lighten it slightly on mobile only */
  .ptft-banner-heading {
    color: #d4b452 !important;
    -webkit-text-fill-color: #d4b452 !important;
  }
}

/* Level 4 Transmission section – tablet stack (≤860px) */
@media (max-width: 860px) {
  .lvl4a-section { grid-template-columns: 1fr; }
  .lvl4a-photo { min-height: unset; }
  .lvl4a-content { padding: 3rem 2rem; }
}

/* Level 4 Transmission section – mobile background and text colour */
@media (max-width: 768px) {
  /* Item 10 – white background, dark text, square image on lvl4 section */
  .lvl4a-content {
    background: #fff !important;
  }
  .lvl4a-eyebrow {
    color: var(--gold);
    -webkit-text-fill-color: unset;
    background: none;
  }
  .lvl4a-title {
    color: #1a0a00;
    -webkit-text-fill-color: #1a0a00;
    background: none;
  }
  .lvl4a-body,
  .lvl4a-choices-label,
  .lvl4-choices-label,
  .lvl4-choice-text {
    color: #1a0a00;
    -webkit-text-fill-color: #1a0a00;
  }
  /* Image appears above content (photo is first in HTML – already at top) */
  .lvl4a-photo { order: -1; }
  /* Make the chakra-toning image square */
  .lvl4a-photo {
    min-height: unset;
  }
  .lvl4a-photo img {
    aspect-ratio: unset;
    object-fit: unset;
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Level 4 choice grid – small phones (≤640px) */
@media (max-width: 640px) {
  .lvl4-choices { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Vision of Future You section – mobile card padding (≤800px) */
@media (max-width: 800px) {
  .vfy-card { padding: 2.5rem 1.75rem; }
}

/* Bonuses section – mobile layout, square images, order */
@media (max-width: 768px) {
  .bon-header { padding: 4rem 1.5rem 3rem; }
  .bon-hero { margin-bottom: 3rem; padding: 0 1.5rem; }
  /* Item 11 – bon-hero image square */
  .bon-hero img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
  }
  .bon-list { padding: 0 1.5rem; }
  .bon-row { flex-direction: column; }
  .bon-row--alt { flex-direction: column; }
  /* Item 11 – image before text for all bonus rows */
  .bon-img { order: 1; flex: none; width: 100%; padding: 0; min-height: unset; }
  .bon-row--alt .bon-img { order: 1; }
  .bon-text { order: 2; flex: none; width: 100%; }
  .bon-row--alt .bon-text { order: 2; padding: 2rem 1.5rem; flex: none; width: 100%; }
  .bon-text { padding: 2rem 1.5rem; }
  /* Item 11 – square bonus images */
  .bon-img img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: auto;
  }
  /* Books image: keep contain layout, don't force square */
  .bon-img--books img {
    aspect-ratio: unset;
    object-fit: contain;
  }
}

/* Footer / global – mobile flex-direction, section padding */
@media (max-width: 768px) {
  .pricing-cards { flex-direction: column; align-items: center; }
  .pricing-card { max-width: 100%; width: 100%; }
  .testi2-grid { flex-direction: column; }
  .about-inner { flex-direction: column; }
  .about-img-col { width: 100%; }
  .faq-grid { flex-direction: column; }
  .invest-section, .summary-section { padding: 3rem 1rem; }
  .pricing-section, .testi2-section, .about-section, .faq-section { padding: 3rem 1rem; }
  .plans-grid { grid-template-columns: 1fr 1fr; }
  .eb-banner { padding: 1.25rem 1rem; }
  /* "Testimonials" section heading – bright white on mobile */
  .testi2-heading {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Global small phones (≤480px) – fine-tuning */
@media (max-width: 480px) {
  .plans-grid { grid-template-columns: 1fr; }
}

/* iOS Safari parallax fix – .parallax-bg-layer is forced to
   background-attachment:scroll at 768px and below directly in index.html;
   nothing additional needed here. */

/* Tablet portrait (≤960px) – section padding reductions */
@media (max-width: 960px) {
  /* Padding reductions */
  .intro-section    { padding: 5rem 1.5rem; }
  .letter-section   { padding: 5rem 1.5rem 6rem; }
  .nde-section      { padding: 5rem 1.5rem 6rem; }
  .testi-section    { padding: 5rem 1.5rem 4rem; }
  .invest-section   { padding: 6rem 1.5rem; }
  .summary-section  { padding: 6rem 1.5rem; }

  /* PTFT: collapse the 3fr/2fr grid earlier than the 800px rule
     so it doesn't appear cramped on portrait tablets */
  .ptft-inner  { grid-template-columns: 1fr; }
  .ptft-spacer { display: none; }
  .ptft-section {
    background-position: center center;
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
  }
}

/* Global mobile (≤768px) – remaining section padding reductions */
@media (max-width: 768px) {
  .letter-section  { padding: 3rem 1rem; }
  .nde-section     { padding: 3rem 1rem; }
  .vfy-section     { padding: 3rem 1rem; }
  .bon-section     { padding-bottom: 3rem; }

  /* Issue 4 – summary box: full width + reduced padding */
  .summary-box { width: 92%; margin: 0 auto 2rem; padding: 2rem 1.25rem 1.5rem; }

  /* Issue 5 – footer: reduce large bottom whitespace */
  .site-footer { padding: 3rem 1.5rem; }
  .faq-cta { padding-top: 2.5rem; }
}

/* Global small phones (≤480px) – additional padding fine-tuning */
@media (max-width: 480px) {
  .invest-inner  { padding: 3rem 1.5rem; }
  .lvl4a-content { padding: 2.5rem 1.5rem; }
  .ptft-card     { padding: 2rem 1.2rem; }
  /* Summary image: stop the translateX trick on very
     small screens – just let it fill its container. */
  .summary-img   { width: 100%; }
}

/* Large mobile-only fixes block – hero, intro, letter, path, nde, isis, future, levels, banners */
@media (max-width: 768px) {

  /* ── 1. Hero CTA text sizing & line break ── */
  /* Match earlybird font size to the .hero-subhead reference ("10 months") */
  .hero-earlybird {
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 1.6;
  }
  /* Force "– Until July 1st" onto its own line (it's inside .hero-earlybird as plain text) */
  /* The text is: "Early Bird Enrolment Now Open – Until July 1st"
     We add a <br>-equivalent by targeting the dash via a generated break.
     The em-dash segment is separated with a <span class="hero-earlybird-date">
     if present; otherwise we rely on white-space wrapping.
     The two parts will wrap naturally at narrow width due to the font size above.
  */

  /* ── 2. Intro section: gold background → white, widen text, earlybird line break ── */
  .intro-section {
    background: #fff;
  }
  .intro-bg {
    display: none;
  }
  .intro-inner {
    background: #fff;
    box-shadow: none;
    max-width: 100%;
    padding: 2.5rem 1.2rem;
    border-radius: 0;
  }
  /* "Early Bird Enrolment Open" on its own line, "– Until July 1st" on next */
  .intro-earlybird {
    display: block;
    line-height: 1.7;
  }
  .intro-earlybird-date {
    display: block;
  }

  /* ── 3. Welcome Video heading – bigger + gold foil ── */
  .video-heading {
    font-size: clamp(2rem, 6vw, 2.4rem);
    background: linear-gradient(110deg, #f0d870 0%, #c9a227 40%, #e8c96a 60%, #c9a227 80%, #f0d870 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── 4. Book / mockups image → full frame ── */
  .letter-mockups img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
  }

  /* ── 5. Tantric couple image: show on mobile inside path section ── */
  .path-couple-mobile {
    display: block !important;
    width: 100%;
    height: auto;
    margin: 0 0 1.4rem;
    border-radius: 4px;
  }

  /* ── 6. "Not for beginners" section: arrow alignment + widen text ── */
  /* Fix arrow (tri-icon) alignment so it points to first line of text */
  .for-you-list li {
    align-items: flex-start;
    padding-left: 0;
  }
  /* Widen the for-you lists */
  .for-you-list {
    max-width: 100%;
    padding: 0 0.5rem;
  }
  .ideal-if-list {
    max-width: 100%;
    padding: 0 0.5rem;
  }
  /* Widen the "tired of piecing together" sub-section container */
  .for-you-inner {
    padding: 0 0.5rem;
  }

  /* ── 7. Isis image → square crop on mobile ── */
  /* The main Isis image is in .download-img (isis-raising-osiris.jpg),
     currently set to height: 55vw (landscape). Crop to square. */
  .download-img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .download-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
  }

  /* ── 8. "The day goddess ISIS entered my life" section: widen text ── */
  .isis-section {
    padding: 2.5rem 0.75rem 4rem;
  }
  .isis-inner {
    max-width: 100%;
    padding: 0 0.25rem;
  }

  /* ── 9. Meet Future You: image after heading, before body text ── */
  /* Use display:contents to dissolve .future-text wrapper so its children
     become direct flex children of .future-grid, enabling CSS order. */
  .future-grid {
    display: flex;
    flex-direction: column;
  }
  .future-text {
    display: contents;
    /* Note: display:contents means reveal animation is skipped on mobile
       for this element's box — its children animate individually */
  }
  /* Explicitly ensure child elements appear (not hidden by reveal default) */
  .future-heading,
  .future-text .rule-left,
  .future-body,
  .future-btn-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .future-heading {
    order: 1;
    padding: 4.5rem 1.5rem 3rem;
    font-size: 2rem;
  }
  .future-text .rule-left {
    order: 1;
    padding: 0 1.5rem;
    margin-bottom: 0;
    display: none; /* 12a: hide decorative rule under heading */
  }
  .future-visual {
    order: 2;
    min-height: 320px;
  }
  .future-body {
    order: 3;
    padding: 2rem 1.5rem 0; /* 12c: add top spacing before "Imagine…" */
  }
  .future-btn-wrap {
    order: 4;
    padding: 0 1.5rem 7rem;
  }

  /* ══════════════════════════════════════════
     NEW MOBILE FIXES — added June 2026
  ══════════════════════════════════════════ */

  /* 4 (default hidden – overridden in this block) */
  /* .mobile-ornament-break defaults to display:none above – shown only here */

  /* 1. Hero – vertical image with text overlaid via CSS Grid */
  .hero {
    display: grid;
    height: auto;
    min-height: unset;
    background: #000;
  }
  .hero > picture {
    grid-area: 1 / 1;
    width: 100%;
  }
  .hero-bg-img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
    object-position: unset;
  }
  .hero-overlay,
  #hero-particles {
    display: none;
  }
  .hero-content {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.12) 70%, transparent 100%);
    padding: 1.5rem 1.5rem 3.5rem;
  }
  /* Question bigger at top */
  .hero-question {
    display: block;
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    letter-spacing: 0.03em;
    margin-bottom: 0.6rem;
    line-height: 1.4;
  }
  /* Remove hardcoded <br> inside hero-question on mobile */
  .hero-question br { display: none; }
  /* "Come Discover" sits just below question; auto margin pushes h1 block to the bottom */
  .hero-come-discover {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
    margin-bottom: auto;
  }
  /* Hide rule, spacer, eyebrow */
  .hero-rule,
  .hero-spacer,
  .hero-eyebrow {
    display: none;
  }

  /* 2. Hero bottom block – tighten gaps, push to bottom */
  .hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    line-height: 1.15;
    margin-top: 3rem;
    margin-bottom: 0.2rem;
  }
  .hero-subhead {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    margin-bottom: 0.35rem;
  }
  .hero-date {
    font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
  }
  .hero .btn-framed {
    margin-top: 0;
    margin-bottom: 1.2rem;
  }
  .hero-earlybird {
    font-size: clamp(0.8rem, 3.2vw, 0.9rem);
    margin-top: 0;
    line-height: 1.5;
  }
  /* Intro top image – 16:9, full width, mobile only */
  .intro-top-img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  /* Intro section heading – hide <br> tags, shrink to reflow cleanly, add letter-spacing */
  .intro-heading br { display: none; }
  .intro-heading { font-size: clamp(0.9rem, 3.8vw, 1.1rem); letter-spacing: 0.06em; }
  /* Intro date – shrink so "on" stays with "We Begin Our Journey On" */
  .intro-date {
    font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    letter-spacing: 0.08em;
  }

  /* 3. Early bird text – gold foil on dark hero gradient */
  .hero-earlybird {
    color: #e8c96a !important;
    -webkit-text-fill-color: #e8c96a !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }

  /* 4. Ornamental divider – removed per request */
  .mobile-ornament-break {
    display: none !important;
  }
  /* spacing between intro and video sections */
  .intro-section { padding-bottom: 1.5rem !important; }
  .video-section { padding-top: 4rem !important; }

  /* PLACEHOLDER – keep following rules intact */
  .mobile-ornament-break-UNUSED {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 2rem 1rem;
    gap: 0.75rem;
  }
  .mobile-ornament-break::before,
  .mobile-ornament-break::after {
    content: '';
    flex: 1;
    height: 3px;
    border-radius: 2px;
  }
  .mobile-ornament-break::before {
    background: linear-gradient(90deg, transparent 0%, #c9a227 60%, #e8c96a 100%);
  }
  .mobile-ornament-break::after {
    background: linear-gradient(90deg, #e8c96a 0%, #c9a227 40%, transparent 100%);
  }
  .mob-orn-ankh {
    font-size: 1.6rem;
    background: linear-gradient(110deg, #f0d870 0%, #c9a227 40%, #e8c96a 60%, #c9a227 80%, #f0d870 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
  }

  /* 3. Video heading – ensure text sits above gold gradient, clear text-fill override */
  .video-heading {
    position: relative;
    z-index: 2;
  }

  /* 5. Video section – gold gradient background, more top padding so heading breathes */
  .video-section {
    background: linear-gradient(180deg, #f5e6b0 0%, #fdf6dc 60%, #ffffff 100%);
    padding-top: 3rem;
    padding-bottom: 2rem;
    margin-bottom: 0;
  }

  /* Path section – space between isis-osiris image and the ankh rule below it */
  .path-card .rule {
    margin-top: 2rem;
  }

  /* 4 + 6. Letter section – pull up to close gap after video; remove card, full-width white */
  .letter-section {
    background: #ffffff;
    padding: 2rem 1rem;
    margin-top: 0;
  }
  .letter-bg { display: none !important; }
  .letter-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none;
    padding: 0;
    max-width: 100%;
    width: 100%;
  }
  .letter-questions,
  .letter-key,
  .letter-mystery {
    max-width: 100%;
    width: 100%;
  }
  .dear-text {
    font-family: 'LemonMilk', sans-serif !important;
    font-size: 1.8rem !important;
    background: linear-gradient(110deg, #f0d870 0%, #c9a227 40%, #e8c96a 60%, #c9a227 80%, #f0d870 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Letter card – author name above image on mobile */
  .letter-card {
    display: flex;
    flex-direction: column;
  }
  .letter-author { order: 1; margin-bottom: 1rem; }
  .letter-mockups { order: 2; }
  .letter-dear { order: 3; }
  .letter-questions { order: 4; }
  .letter-key { order: 5; }
  .letter-mystery { order: 6; }

  /* Path section – kill bg image, stack full width */
  .path-section {
    background-image: none !important;
    min-height: unset;
  }
  .path-layout {
    display: block;
  }
  .path-spacer {
    display: none;
  }
  .path-card {
    width: 100%;
    padding: 2.5rem 1.25rem;
  }

  /* 5a. Path section – hide the Ankh-couple image on mobile */
  .path-couple-mobile {
    display: none !important;
  }

  /* 5b. Path section – isis-osiris-relief fills the frame edge to edge */
  .path-isis-relief {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.5rem 0 0;
    border-radius: 0;
  }

  /* 5c. VIP couple – hidden at bottom of path section (removed per request) */
  .path-vip-couple {
    display: none !important;
  }

  /* 8a. "Not for beginners" – gold tint on triangle arrow images */
  .for-you-section .tri-icon {
    filter: sepia(1) saturate(2.5) hue-rotate(5deg) brightness(0.95);
  }

  /* 8b. "Not for beginners" section – centre the ankh in background */
  .for-you-bg {
    background-position: 40% center !important;
  }

  /* 9. NDE section – fully white, no card box */
  .nde-section {
    background: #ffffff !important;
    padding: 2.5rem 1rem !important;
  }
  .nde-bg { display: none !important; }
  .nde-card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* 10. Isis break – square, centered */
  .isis-break {
    min-height: unset;
    height: 100vw;
    max-height: 520px;
  }
  .isis-break-bg { background-position: center center !important; }

  /* 11a. Isis title heading – bigger on mobile */
  .isis-title-heading {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }
  /* 11b. Isis quote – bigger on mobile */
  .isis-bold-line {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
  }

  /* 12b. Future-living – shrink so both lines fit cleanly */
  .future-living {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  /* 13. Top testimonial Sarita image – full width, square */
  .testi-sarita img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  /* ── Banner images: full bleed on mobile ── */
  .lvl1-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lvl1-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .lvl1-card > *:not(.lvl-img-banner):not(.lvl1-img-wrap):not(.keys-relief-img) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lvl1-card .lvl-img-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
  }

  .lvl3-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lvl3-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .lvl3-card > *:not(.lvl-img-banner):not(.lvl3-overview-img) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lvl3-section .lvl-img-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .lvl3-overview-img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Close the cream gap between the end of Level 2 (Integration) text and the
     start of Level 3's image, so cream transitions straight into the photo */
  .lvl2-text-section {
    padding-bottom: 1.25rem !important;
  }
  .lvl3-card {
    padding-top: 0 !important;
    padding-bottom: 3.5rem !important;
  }

  /* Bonus banner title – split "Egyptian / Tantric Secrets / 10-Month / Teacher Training"
     onto four lines on mobile instead of relying on natural text wrap */
  .bon-title-mobile-break {
    display: inline !important;
  }

  .lvl2-text-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lvl2-text-section > *:not(.lvl-img-banner) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lvl2-full-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

}

/* Bonus items – gold-foil label and title bigger/more readable on mobile */
@media (max-width: 768px) {
  .bon-num {
    font-size: clamp(1rem, 2.8vw, 1.15rem) !important;
  }
  .bon-name {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
  }
}