/* ========================= 0) CSS Variables ========================= */
:root{
  --page-max: 1100px;
  --pad: clamp(16px, 3vw, 28px);
  --bg-darken: 0.18;     /* overlay strength (0 transparent – 1 solid) */
  --panel-bg: 0.35;      /* panel background opacity */
  --radius: 16px;
  --accent: #b882ff;
  --accent-soft: #815ed9;
  --accent-glow: #d9a1ff;
  --title-color: #6f4fd2;
  --hero-title-color: #4b3aa6;
  --text-primary: #2d1b47;
  --muted: rgba(73, 55, 112, 0.7);
  --border: rgba(168, 135, 232, 0.08);
  --bg-base: #fefbfd;
  --bg-gradient-top: #fff9f4;
  --bg-gradient-mid: #f7f0ff;
  --bg-gradient-bottom: #f0ecff;
  --bg-mid: #f5f1ff;
  --bg-glow: #ede6ff;
  --panel-surface: rgba(255, 255, 255, 0.06);
  --panel-light: rgba(255, 255, 255, 0.1);
  --panel-alpha: 0.18; /* softer glass */
  --panel-blur: 22px; /* softer diffusion */
  --toggle-w: 52px;
}

html {
  overflow-y: scroll;
  /* Force a scrollbar slot to keep widths consistent between pages with/without overflow */
}


/* ========================= 1) Base / Typography ========================= */
    
/* Reset-ish */
    * { 
      box-sizing: border-box; 
    }
    
    html, body { 
      height: 100%; 
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.55;
      color: var(--text-primary);
      background: var(--bg-base);
    }

    header{
      display:flex;
      justify-content:space-between;
      padding:1rem 2rem;
      max-width:1100px;
      margin:auto;
      position:relative;
      z-index:5;
    }

    h1 {
      font-size: 2.5em;
    }

    h3{
      font-size: 1rem;
    }

    .brand{
      font-family: Cinzel, serif;
      color: #6f4fd2;
      text-decoration:none;
      letter-spacing:.1em;
      font-size: 60px;
      font-weight: 800;}

    .munz-logo {
      width: 330px;
      height: auto;
      max-width: 100%;
    }

    .custom-link {
      text-decoration: none;
    }

    .custom-link:hover {
      text-decoration: underline;
    }

    #links .custom-link{
      color: var(--title-color);
      text-decoration: none;
    }
    #links .custom-link:hover,
    #links .custom-link:focus{
      text-decoration: none;
    }

    .custom-link:visited,
    .custom-link:link{
      color: var(--title-color);
    }

    .testimonial-text{
      font-style: normal;
    }

    .links-list .custom-link{
      display:block;
      margin-bottom:8px;
    }
    .links-list .custom-link:last-child{
      margin-bottom:0;
    }

    a{
      color: var(--title-color);
      transition: color 0.2s ease, opacity 0.2s ease;
    }

    a:hover,
    a:focus{
      color: var(--accent-soft);
    }

    nav a{
      color: rgba(55, 27, 97, 0.82);
      margin-left:1rem;
      text-decoration:none;
      font-weight:500;
      white-space: nowrap;}

    nav a:hover,
    nav a:focus{
      color: var(--accent);
    }

    /* ==== Full-bleed background via a fixed pseudo element (works on iOS) ==== */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background-color: #f3f3f3;
      background-image:
        radial-gradient(90% 70% at 60% 40%, rgba(120, 120, 120, 0.15) 0%, rgba(120, 120, 120, 0.06) 35%, rgba(255, 255, 255, 0) 65%);
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      transform: translateZ(0); /* hint for mobile compositing */
    }

    /* Overlay to ensure text contrast */
    body::after{
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background: transparent;
      pointer-events: none;
    }


    /* Accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      body::before { background-attachment: scroll; }
    }

/* ========================= 5) Hero ========================= */
    .hero{
      text-align:center;
      padding:4rem 1rem 2rem;
      margin:0 auto 1rem;
      position:relative;
      overflow:hidden;
      background-image:url("images/spiral.avif");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    }
    .hero h1{font-family: Cinzel, serif;font-size:2.5rem;margin:0 0 1rem;position:relative;z-index:2;color:var(--hero-title-color);}
    .hero-byline{
      margin: 0.5rem auto calc(0.75rem + 10px);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--hero-title-color);
      max-width: 600px;
      text-align: center;
    }
    .hero-description{color:rgba(73,55,112,0.66);max-width:600px;margin:0 auto;position:relative;z-index:2;text-align:center}
    .cta{
      display:flex;
      justify-content: center; /* horizontal centering */
      width: max-content;  /* shrink to the content (like inline) */
      align-items: center;  /* vertical centering if multiple lines */
      margin:15px auto;
      padding:15px 4rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
      color:#fff;
      text-decoration:none;
      font-weight:600;
      position:relative;
      z-index:2;
      box-shadow: 0 10px 30px rgba(111, 88, 177, 0.22);
    }
    .hero-subtext {
      margin: 1rem auto 0;
      color: rgba(73,55,112,0.66);
      max-width: 600px;
      position: relative;
      z-index: 2;
      text-align: center;
      font-style: italic;
    }

    .hero-prompts {
      max-width: 1100px;
      margin: 1rem auto 2rem;
      padding: 0 1rem;
      position: relative;
    }
    .hero-prompts__cloud {
      position: relative;
      min-height: 180px;
    }
    .hero-prompt {
      position: absolute;
      font-weight: 700;
      color: black;
      opacity: 0.6;
      font-size: 1.1rem;
      text-align: center;
      transition: opacity 0.3s ease;
      --prompt-rot: 0deg;
    }
    .hero-prompt--1 {
      top: 10;
      left: 0;
      right: 0;
      margin: 0 auto;
      position: relative;
      transform: none;
      font-size: 1.8rem;
    }
    .hero-prompt--1 { color: #6c54d8; opacity: 1; }
    .hero-prompt--2 { top: 30px; left: 38%; transform: rotate(-6deg); --prompt-rot: -6deg; }   /* Maux du dos */
    .hero-prompt--3 { top: 40px; right: 22%; transform: rotate(-9deg); --prompt-rot: -9deg; }  /* Trouble du sommeil */
    .hero-prompt--4 { top: 90px; left: 19%; transform: rotate(0deg); --prompt-rot: 0deg; }  /* Troubles digestifs */
    .hero-prompt--5 { top: 90px; right: 30%; transform: rotate(18deg); --prompt-rot: 18deg; }  /* Beaucoup de stress */
    .hero-prompt--6 { top: 110px; left: 31%; transform: rotate(-25deg); --prompt-rot: -25deg; } /* Tensions chroniques */
    .hero-prompt--7 { top: 120px; right: 16%; transform: rotate(-18deg); --prompt-rot: -18deg; }  /* Mobilité réduite */
    .hero-prompts__subtitle {
      margin: 1.5rem auto 0;
      max-width: 900px;
      text-align: center;
      font-weight: 700;
      color: #6c54d8;
      font-size: 1.4rem;
    }

    /* Prompt cloud animation (removable) */
    .hero-prompt--highlight {
      animation: heroPromptPulse 6s ease-in-out forwards;
      z-index: 3;
    }
    @keyframes heroPromptPulse {
      0% { transform: scale(1) rotate(var(--prompt-rot, 0deg)); opacity: 0.6; }
      50% { transform: scale(1.4) rotate(var(--prompt-rot, 0deg)); opacity: 1; }
      100% { transform: scale(1) rotate(var(--prompt-rot, 0deg)); opacity: 0.6; }
    }

    @media (max-width: 768px) {
      .hero-prompts__cloud {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
      }
      .hero-prompt {
        position: static;
        transform: none;
      }
      .hero-prompt--1 {
        font-size: 1.4rem;
      }
      .hero-prompts__subtitle {
        font-size: 1.4rem;
        margin-top: 1.5rem;
      }
    }

    .cta:hover{
      background: linear-gradient(135deg, var(--accent-glow) 0%, var(--accent) 100%);
      box-shadow: 0 14px 32px rgba(149, 119, 211, 0.26);
    }

    section{
      max-width:1100px;
      margin:1rem auto;
      padding:0.5rem 2rem;
      border-top:1px solid rgba(168,135,232,0.12);
      position:relative;
      z-index:2;
    }
    #register.register-section{
      text-align: center;
      border-top: none;
    }
    #register .register-message{
      margin: 0 auto 1rem;
      padding-top: 50px !important;
      font-size: 1.15rem !important;
      font-weight: 600;
      color: var(--hero-title-color);
      max-width: 600px;
      text-align: center;
    }
    .hero{
      border-top:none;
    }

    #munz-photo img{
      width:100%;
      max-width:800px;
      height:auto;
      display:block;
      margin:0 auto;
    }

    #genesis .genesis-photo{
      width:clamp(240px, 36vw, 410px);
      max-width:48%;
      height:auto;
      float:right;
      margin:0 0 0 24px;
      border-radius:18px;
    }
    #citlali_munz .citlali-munz-photo{
      width:clamp(240px, 36vw, 290px);
      max-width:48%;
      height:auto;
      float:right;
      margin:0 0 0 24px;
      border-radius:18px;
    }
    #genesis .munz-genesis-photo{
      width:clamp(240px, 36vw, 410px);
      max-width:48%;
      height:auto;
      float:left;
      margin:0 24px 0 0;
      border-radius:18px;
    }
    #method_fascia_title .fascia-photo{
      width:clamp(220px, 32vw, 320px);
      max-width:45%;
      height:auto;
      float:right;
      margin:0 0 0 24px;
      border-radius:18px;
    }
    #munz_what .munz-what-photo{
      width:clamp(240px, 36vw, 400px);
      max-width:48%;
      height:auto;
      float:left;
      margin:0 24px 0 0;
      border-radius:18px;
    }
    #benefits .munz-benefits-photo{
      width:clamp(240px, 36vw, 360px);
      max-width:48%;
      height:auto;
      float:right;
      margin:0 0 0 24px;
      border-radius:18px;
    }
    #method_flow .munz-method-photo{
      width:clamp(240px, 36vw, 360px);
      max-width:48%;
      height:auto;
      float:left;
      margin:0 24px 0 0;
      border-radius:18px;
    }
    #method .munz-rediscover-photo{
      width:clamp(144px, 21.6vw, 216px);
      max-width:29%;
      height:auto;
      float:right;
      margin:0 0 0 24px;
      border-radius:18px;
    }
    #target .munz-target-photo{
      width:clamp(240px, 36vw, 360px);
      max-width:48%;
      height:auto;
      float:right;
      margin:0 0 20px 24px;
      border-radius:18px;
    }
    #target .target-photo{
      width:clamp(220px, 32vw, 320px);
      max-width:45%;
      height:auto;
      float:left;
      margin:0 24px 0 0;
    }
    #accompagnement .accompagnement-photo{
      width:clamp(240px, 36vw, 360px);
      max-width:48%;
      height:auto;
      float:left;
      margin:0 24px 0 0;
      border-radius:18px;
    }
@media (max-width: 640px){
      #method .method-photo,
      #citlali_munz .citlali-munz-photo,
      #method_fascia_title .fascia-photo,
      #munz_what .munz-what-photo,
      #benefits .munz-benefits-photo,
      #method_flow .munz-method-photo,
      #target .munz-target-photo,
      #accompagnement .accompagnement-photo,
      #method .munz-rediscover-photo,
      #genesis .munz-genesis-photo{
        float:none;
        display:block;
        max-width:100%;
        margin:0 auto 1.25rem;
      }
      #target .target-photo{
        float:none;
        display:block;
        max-width:100%;
        margin:0 auto 1.25rem;
      }
    }

    h2{
      font-family:Cinzel, serif;
      color:var(--title-color);
    }


    footer{
      text-align:center;
      padding:2rem;
      color:rgba(55,27,97,0.62);
      position:relative;
      z-index:2;}
    .footer-contact{
      text-align: center;
    }
    .footer-contact__link{
      color: var(--accent);
      display: inline-block;
    }
      

/* ========================= 7) Instructor / Bio ========================= */
    .instructor-row{display:grid;grid-template-columns: 192px 1fr;gap: 1rem;align-items:start;max-width: 900px;margin: 1rem 0 0;}

    .mini-portrait{
      width:192px;
      height:192px;
      border-radius: 18px;
      background: var(--bg-mid);
      border:1px solid var(--border);
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      overflow:hidden;
      grid-area: img;
    }

    .instructor-photo {
      float: left;
      margin: 0 70px 70px 0;
    }

    .instructor-intro{font-size:1.05rem;}
    /* Site-wide paragraph formatting */
    p{
      margin: 0;
    }
    /* p + p{margin-top: 1.65em;} */


/* ========================= 6) Panels / Readability ========================= */
    .panel{
      background: rgba(255,255,255,0.98);
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: 0 18px 40px rgba(111, 88, 177, 0.05);
      color: #000;
      border-radius: 26px;padding: 1.25rem 1.5rem;
      max-width: 70ch;/* comfy line length */
      margin: 0 auto;/* center the block */
      text-align: left;
      overflow: hidden;
      /* readable paragraphs */
    }

    .text-block{
      background: rgba(255,255,255,0.98);
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: 0 20px 40px rgba(111, 88, 177, 0.05);
      color: #000;
      border-radius: 28px;padding: 1.25rem 1.5rem;
      display: flow-root;
      max-width: 1100ch;/* comfy line length */
      margin: 0 auto;/* center the block */
      text-align: left;
      /* readable paragraphs */
    }
    .text-block p{
      text-align: left;
      text-justify: auto;
    }
    .flow-recommendations-link {
      margin-top: 0.75rem;
    }
    /* Lighter variant if you want a brighter card */
    .panel--light{background: linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(247,236,255,0.1) 100%);border-color: rgba(168,135,232,0.12);border-radius:26px;}

    /* Make list text & bullets stand out in .text-block */
    .text-block ul {
      color: #000;
      list-style-position: inside;
      padding-left: 1rem;
    }

    .text-block ul li {
      margin: 0.4em 0;
      line-height: 1.6;
    }

    .text-block ul li::marker {
      color: var(--accent);
    }

    .text-block a:not(.cta),
    .panel a:not(.cta),
    .text-block ul li a:not(.cta) {
      color: #000;
      text-decoration: underline;
      font-weight: 500;
    }

    .text-block a:not(.cta):visited,
    .panel a:not(.cta):visited,
    .text-block ul li a:not(.cta):visited {
      color: #000;
    }

    .text-block a:not(.cta):hover,
    .text-block a:not(.cta):focus,
    .panel a:not(.cta):hover,
    .panel a:not(.cta):focus,
    .text-block ul li a:not(.cta):hover,
    .text-block ul li a:not(.cta):focus {
      color: #000;
      text-decoration: none;
    }

    /* Golden nuggets list uses nugget icon bullets */
    .golden-nuggets {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .golden-nuggets li {
      position: relative;
      padding-left: 1.8rem;
      margin: 0.4em 0;
      line-height: 1.6;
    }

    .golden-nuggets li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.15em;
      width: 1.2rem;
      height: 1.2rem;
      background: url("images/nugget.avif") no-repeat center/contain;
    }

    .online-sparkles {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .online-sparkles li {
      position: relative;
      padding-left: 1.8rem;
      margin: 0.4em 0;
      line-height: 1.6;
    }

    .online-sparkles li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.15em;
      width: 1.2rem;
      height: 1.2rem;
      background-color: #d7a63f;
      -webkit-mask: url("images/sparkle.svg") no-repeat center/contain;
      mask: url("images/sparkle.svg") no-repeat center/contain;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .sticky-nav .site-header {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: transparent;
      border-bottom: none;
    }

    .sticky-nav {
      padding-top: calc(var(--nav-height, 96px) + 10px);
    }

    .sticky-nav .nav-clip {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: calc(var(--nav-height, 96px) + 10px);
      z-index: 999;
      pointer-events: none;
      background-color: #f3f3f3;
      background-image:
        radial-gradient(90% 70% at 60% 40%, rgba(120, 120, 120, 0.15) 0%, rgba(120, 120, 120, 0.06) 35%, rgba(255, 255, 255, 0) 65%);
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .sticky-nav .nav-clip::after {
      content: "";
      position: absolute;
      inset: 0;
      background: transparent;
    }

    .sticky-nav main section:first-of-type {
      border-top: none;
      margin-top: 0;
    }

    #benefits h2 {
      position: relative;
      display: inline-block;
      padding-right: calc(50px + 3.8em);
    }

    #benefits h2::after {
      content: "";
      position: absolute;
      right: -0.8em;
      top: 50%;
      width: 3.8em;
      height: 2em;
      transform: translateY(-50%);
      background: url("images/nuggets.avif") no-repeat center/contain;
      pointer-events: none;
    }

    @media (max-width: 640px) {
      #benefits h2 {
        padding-right: calc(25px + 3.8em);
      }
    }


/* ========================= Modal ========================= */
    .modal-overlay{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(39, 20, 67, 0.68);
      backdrop-filter: blur(10px);
      z-index: 1200;
    }

    .modal-overlay[data-visible="true"]{
      display: flex;
    }

/* ==== Header & brand sizing ==== */
/* Desktop / base: nav inline on the right */

/* ========================= 2) Header / Brand / Nav (Desktop base) ========================= */
.site-header {display: flex;align-items: center;gap: clamp(8px, 2vw, 16px);padding: 12px 16px;position: relative;}

.header-actions {display: flex;align-items: center;gap: clamp(8px, 2vw, 16px);margin-left: auto;}

.site-header .brand {font-family: Cinzel, serif;font-weight: 600;letter-spacing: .08em;text-decoration: none;white-space: nowrap;/* never wrap the word CITLALI JIM */
  overflow: hidden;/* prevent spillover */
  text-overflow: ellipsis;flex: 1 1 auto;/* take remaining space */
  max-width: calc(100% - var(--toggle-w) - 12px);}

/* Horizontal nav by default */
.site-header .site-nav {display: flex;align-items: center;gap: clamp(8px, 2vw, 20px);
  position: static;/* ensure it’s not absolutely positioned on desktop */
  flex-direction: row;}

.site-header .site-nav a {display: inline-block;padding: 6px 8px;}



.language-switcher {position: absolute;top: clamp(10px, 1.8vw, 22px);right: clamp(12px, 4vw, 28px);z-index: 22;display: inline-flex;align-items: center;margin: 0;}

.language-switcher__select {appearance: none;-webkit-appearance: none;-moz-appearance: none;background-color: rgba(255,255,255,0.65);background-image: none;color: var(--text-primary);border: 1px solid rgba(140,104,208,0.22);border-radius: 999px;padding: 2px 8px;font-size: 0.72rem;line-height: 1;text-transform: uppercase;letter-spacing: 0.14em;font-weight: 600;cursor: pointer;box-shadow: 0 4px 16px rgba(111,88,177,0.18);-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);min-width: 2.6ch;text-align: center;}

.language-switcher__select::-ms-expand {display: none;}

.language-switcher__select:focus {outline: 2px solid var(--accent);outline-offset: 2px;color: var(--text-primary);}

@media (max-width: 520px) {
  .language-switcher {top: 8px;right: 12px;}
  .language-switcher__select {padding: 1px 6px;font-size: 0.68rem;letter-spacing: 0.12em;}
}

/* Mobile toggle is hidden on wide screens */

/* ========================= 3) Menu Toggle (base styles) ========================= */
.nav-toggle {/* kill native styling that creates the thin line */
  appearance: none;-webkit-appearance: none;border: 0 !important;box-shadow: none !important;background: transparent;/* layout the bars as a vertical stack */
  /*display: inline-flex !important;*/
  flex-direction: column;/* prevents margin-collapsing weirdness */
  justify-content: center;align-items: center;gap: 6px;/* spacing between bars */

  width: 44px;height: 44px;padding: 0;cursor: pointer;/* ensure bars are visible against your dark header */
  color: var(--title-color);position: relative;z-index: 20;}

.nav-toggle__bar {width: 70%;height: 2px;background: currentColor;/* inherits .nav-toggle color */
  border-radius: 1px;/* no margins;we use gap on the parent */
  margin: 0;}

/* nice keyboard focus without bringing back borders */
.nav-toggle:focus-visible {outline: 2px solid var(--accent);outline-offset: 2px;}

/* If any global reset targets buttons, this keeps ours clean */
button.nav-toggle::-moz-focus-inner {border: 0;}

/* ====== Collapse nav on narrow screens ====== */

/* ========================= 4) Mobile Behavior (≤900px) ========================= */
@media (max-width: 1000px) {
  .nav-toggle {display: inline-flex;align-items: center;justify-content: center;}

  /* brand must leave room for the toggle on the right */
  .site-header .brand {max-width: calc(100% - var(--toggle-w) - 16px);}

  .site-header .site-nav a {padding: 10px 12px;white-space: nowrap;}

  /* when open */
  .site-header.nav-open .site-nav {opacity: 1;transform: scale(1) translateY(0);pointer-events: auto;}

  /* Turn the nav into a flyout that opens to the RIGHT of the title */
  .site-header .site-nav {position: absolute;top: 100%;right: 0;flex-direction: column;align-items: stretch;gap: 0;background: rgba(255,255,255,0.92);backdrop-filter: blur(18px);border-radius: 16px;padding: 10px;min-width: 220px;box-shadow: 0 16px 40px rgba(111, 88, 177, 0.18);/* closed by default */
    transform-origin: top right;transform: scale(.98) translateY(-4px);opacity: 0;pointer-events: none;transition: opacity .18s ease, transform .18s ease;}
}

/* ====== Citlali section: stack photo above text on narrow screens ====== */
.instructor-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(14px, 2vw, 24px) clamp(16px, 3vw, 32px);
  align-items: start;
  grid-template-areas: "img text";
}

.text-wrap-image {
  float: left;
  margin: 100px;
}

.panel {grid-area: text;}

@media (max-width: 720px) {
  .instructor-row {grid-template-columns: 1fr;grid-template-areas:
      "img"
      "text";}
  .mini-portrait {margin: 0 auto 12px;}
}

/* (Optional) reduce oversized hero text on very small screens */
@media (max-width: 420px) {
  .hero h1 {font-size: clamp(20px, 8vw, 28px);}
}

/* Align Citlali photo top with the first line of text (only in 2-column layout) */
@media (min-width: 721px) {
  #instructor .instructor-row {
    /* reuse the same padding value the panel already uses */
    --bio-pad: clamp(14px, 3vw, 22px);
  }
  #instructor .instructor-row .panel {
    /* keep existing look; just express it via the variable so we can share it */
    padding: var(--bio-pad);
  }
  #instructor .instructor-row .mini-portrait {
    /* drop the image by the same amount so its top lines up with the text top */
    margin-top: var(--bio-pad);
  }
}

/* Base: style the button but DO NOT set display here */
.nav-toggle {appearance: none;-webkit-appearance: none;border: 0;background: transparent;box-shadow: none;flex-direction: column;justify-content: center;align-items: center;gap: 6px;width: 44px;height: 44px;padding: 0;color: var(--title-color);position: relative;z-index: 20;}
.nav-toggle__bar {width:70%;height:2px;background: currentColor;border-radius:1px;}

/* Hidden on desktop by default */
.nav-toggle {display: none;}

/* Show only on narrow screens */
/* @media (max-width: 900px) {
  .nav-toggle {display: inline-flex;}
} */

/* === Brand: only shrink after it would exceed 90% of the viewport === */

/* Approximate text length factor for "CITLALI JIM" with current letter-spacing.
   Smaller value => bigger computed size; larger => smaller.
   8.8 works well for CINZEL caps + ~0.08–0.10em letter-spacing. */
:root {--brand-length: 8.8;}

/* One rule for all widths (no media query):
   - Use a big desktop target (var(--brand-max)).
   - If that would be wider than 90vw, smoothly scale down.
*/
.site-header .brand {--brand-max: 64px;/* your desired desktop size */
  font-size: clamp(
    28px,                                 /* never go below this */
    min(var(--brand-max), calc(90vw / var(--brand-length))),
    96px                                  /* upper ceiling if you bump --brand-max later */
  );

  /* keep your existing other props (nowrap, overflow, etc.) */
}

.allow-whitespace {
  white-space: pre-wrap;
}


/* Optional: on very small devices you can tighten slightly */
@media (max-width: 380px) {
  .site-header .brand {font-size: clamp(24px, calc(90vw / var(--brand-length)), var(--brand-max));}
}

@media (min-width: 1001px) {
  .site-header .site-nav {position: static !important;flex-direction: row !important;opacity: 1 !important;pointer-events: auto !important;transform: none !important;}
}

/* Base layout */
.site-header {display:flex;align-items:center;gap: clamp(8px,2vw,16px);}
.brand-wrap {flex:1 1 auto;min-width:0;}   /* lets the nav live on the right */
.header-actions {display:flex;align-items:center;gap: clamp(8px,2vw,16px);margin-left:auto;}
.site-header .site-nav {display:flex;align-items:center;gap: clamp(8px,2vw,20px);position:static;flex-direction:row;flex-wrap:nowrap;}

/* Brand sizing (keep your “shrink only after 90%” logic) */
:root {--brand-length: 8.8;}
.site-header .brand {--brand-max: 52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: clamp(26px, min(var(--brand-max), calc(90vw / var(--brand-length))), 80px);}
@media (min-width:901px){ .site-header .brand {max-width:none;} }

/* Toggle visibility: hidden on desktop, shown on narrow */
.nav-toggle {display:none;}
@media (max-width:1000px){ .nav-toggle {display:inline-flex;} }

/* Mobile flyout ONLY in the media query */
@media (max-width:1000px){
  .site-header .site-nav{position:absolute;top:100%;right:0;flex-direction:column;align-items:stretch;gap:0;background: rgba(255,255,255,.92);backdrop-filter: blur(18px);border-radius:16px;padding:10px;min-width:220px;box-shadow:0 16px 40px rgba(111,88,177,.18);transform-origin: top right;transform: scale(.98) translateY(-4px);opacity:0;pointer-events:none;transition: opacity .18s ease, transform .18s ease;}
  .site-header.nav-open .site-nav{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
  .site-header .site-nav.client-nav a{
    background: transparent;
    border: 0;
    box-shadow: none;
    color: rgba(55, 27, 97, 0.82);
    padding: 10px 12px;
    border-radius: 0;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
    text-align: left;
  }
  .site-header .site-nav.client-nav a:hover,
  .site-header .site-nav.client-nav a:focus{
    color: var(--accent);
    background: transparent;
  }
}

/* Citlali bio: left-align on small screens */
@media (max-width: 720px) {
  .text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .instructor-photo {
    float: none;
    margin: 0 0 1rem 0;
  }

  .instructor-bio-text {
    text-align: left;
    text-justify: auto;
    hyphens: auto;
  }

}

/************* GENERAL SITE STYLING ************/

body.client {
  background: #f6f1f6;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f1022;
}

/* Use .client-page on layouts that should not be centered (e.g., dashboard/profile) */
body.client.client-page {
  display: block;
  align-items: initial;
  justify-content: initial;
}

h1.client {
  margin-top: 0;
  font-size: 1.5rem;
}

label.client {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

input.client[type="email"],
input.client[type="password"],
input.client[type="text"],
select.client {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d5c4d8;
  font-size: 1rem;
  margin-bottom: 16px;
}

.password-meter {
  margin-top: 6px;
  margin-bottom: 16px;
}

.password-meter__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #5a3f5f;
  margin-bottom: 6px;
}

.password-meter__track {
  height: 6px;
  background: rgba(102, 1, 104, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.password-meter__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #a64fb0;
  transition: width 0.2s ease, background 0.2s ease;
}

.password-meter[data-strength="weak"] .password-meter__fill {
  width: 33%;
  background: #d9534f;
}

.password-meter[data-strength="ok"] .password-meter__fill {
  width: 66%;
  background: #f0ad4e;
}

.password-meter[data-strength="strong"] .password-meter__fill {
  width: 100%;
  background: #5cb85c;
}

.client-button {
  background: #660168;
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  color: #660168;
  border: 1px solid rgba(102, 1, 104, 0.35);
}

.dashboard-return {
  gap: 0.5rem;
}

.dashboard-return__icon {
  display: none;
  align-items: center;
  justify-content: center;
}

.dashboard-return__icon svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 640px) {
  .dashboard-return {
    width: 40px;
    height: 40px;
    padding: 0;
    min-width: 40px;
    border-radius: 50%;
  }

  .dashboard-return__text {
    display: none;
  }

  .dashboard-return__icon {
    display: inline-flex;
  }
}

.btn-secondary {
  background: #f2eafd;
  color: #5f3a9c;
  border: 1px solid rgba(102, 1, 104, 0.35);
}

.btn-inverted {
  background: #fff;
  color: #660168;
  border: 1px solid rgba(102, 1, 104, 0.4);
  box-shadow: 0 6px 16px rgba(102, 1, 104, 0.12);
}

.client-button[disabled] {
  cursor: default;
  opacity: 0.6;
}

.client-button:hover {
  background: #880188;
}

.btn-inverted:hover,
.package-btn:focus {
  background: rgba(102, 1, 104, 0.08);
}

.btn-outline:hover{
  color:white;
}

.btn-inverted.is-disabled,
.btn-inverted.is-disabled:hover,
.btn-inverted.is-disabled:focus {
  opacity: 0.5;
  pointer-events: none;
  background: #fff;
}

.btn-secondary {
  background: #f2eafd;
  color: #5f3a9c;
  border: 1px solid rgba(102, 1, 104, 0.35);
}

.btn-secondary:hover {
  color: #fff;
}

.client-link {
  color: #660168;
  text-decoration: none;
  font-weight: 600;
}

.client-auth-card {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(31, 16, 34, 0.12);
  width: min(420px, 90vw);
}

.client-error {
  background: #fdeaea;
  border: 1px solid #f3c0c0;
  color: #7c1f1f;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.client-success {
  background: #edf9f1;
  border: 1px solid #b8e5c9;
  color: #1c6837;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.client-helper-text {
  margin-top: 16px;
  font-size: 0.95rem;
}

.client-header {
  padding: 24px 32px;
}

.client-header__inner {
  width: min(1100px, 96vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.client-header .brand {
  font-family: Cinzel, serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: #6f4fd2;
  --brand-length: 8.8;
  --brand-max: 52px;
  font-size: clamp(26px, min(var(--brand-max), calc(90vw / var(--brand-length))), 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-main {
  flex: 1;
  width: min(1100px, 96vw);
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.client-main > .card,
.client-main > .alerts {
  width: min(980px, 100%);
}

.card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(31, 16, 34, 0.12);
  padding: 20px 28px 28px;
  font-size: 1rem;
  color: #584a66;
  line-height: 1.55;
}
.card > :first-child {
  margin-top: 0;
}
.card > :last-child {
  margin-bottom: 0;
  line-height: 1.6;
  color: #5f4a73;
}
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
  margin-top: 0;
}
.card p {
  margin: 0 0 1rem;
}
.recommendations-title {
  margin: 0 0 0.35rem;
}
.recommendations-title--secondary {
  font-family: Cinzel, serif;
  color: var(--title-color);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.recommendations-list li {
  margin-block: 0.75rem;
}
.conditions-card {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(31, 16, 34, 0.12);
  width: min(720px, 95vw);
  max-height: 90vh;
  overflow: auto;
  margin: 0 auto;
}
.conditions-card p {
  margin-block: 18px;
}
.conditions-card ul,
.conditions-card ol {
  padding-left: 20px;
  line-height: 1.6;
}
.conditions-card ul li,
.conditions-card ol li {
  margin-block: 10px;
}
.conditions-card img {
  display: block;
  width: 50%;
  max-width: 100%;
  margin: 16px auto;
}
.conditions-reco-photo {
  display: block;
  width: 50%;
  max-width: 100%;
  margin: 16px auto;
  padding-block: 10px;
}
.conditions-recording {
  text-align: center;
}
.policy-link {
  text-align: center;
  margin-top: 20px;
}
.policy-link a {
  color: #660168;
  font-weight: 600;
  text-decoration: none;
}
.policy-link a:hover {
  text-decoration: underline;
}

.card-text {
  margin: 0;
}

.card-subtitle {
  font-weight: 600;
  color: #3c235a;
}

.pricing-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .pricing-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pricing-card__grid {
    grid-template-columns: 1fr;
  }
}
.pricing-card__item {
  border: 1px solid rgba(102, 1, 104, 0.12);
  border-radius: 16px;
  padding: 18px;
  background: #fff7ff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
}

.pricing-card__price {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #3c235a;
}
.pricing-card__price--muted {
  color: #9b8aa8;
  font-weight: 500;
  font-size: 1rem;
}

@media (max-width: 1024px) {
  .client-header__inner,
  .client-main {
    width: min(960px, 96vw);
  }
  .client-main > .card,
  .client-main > .alerts {
    width: min(920px, 100%);
  }
}
@media (max-width: 860px) {
  .client-header {
    padding: 18px 20px;
  }
  .client-header__inner,
  .client-main {
    width: 100%;
  }
  .client-main {
    padding: 0 18px 40px;
    margin: 0 auto;
  }
  .client-main > .card,
  .client-main > .alerts {
    width: 100%;
  }
}
.dashboard-section-title {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #4b2b80;
}
.dashboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard-list__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboard-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(111, 79, 210, 0.18);
  background: #f9f6ff;
  position: relative;
}
.dashboard-item__heading {
  font-weight: 600;
  font-size: 1rem;
  color: #3c235a;
}
.dashboard-item__subheader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.dashboard-item_title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #3c235a;
  margin: 0;
}
.dashboard-packages-expired {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(102, 1, 104, 0.12);
}    
.dashboard-packages-remaining__count {
  font-size: 1.4rem;
  color: #660168;
}
.dashboard-item_text {
  font-size: 0.9rem;
  color: #6d5a87;
}
.dashboard-item_text ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dashboard-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dashboard-badge--float {
  position: absolute;
  top: 10px;
  right: 12px;
}
.dashboard-badge--registered {
  background: #6f4fd2;
  color: #fff;
}
.dashboard-badge--pending {
  background: #fff3e3;
  color: #a65b08;
}
.dashboard-badge--confirmed {
  background: #e5f8ee;
  color: #1e7b4c;
}
.dashboard-badge--expired {
  background: #f2f2f7;
  color: #5c5a66;
}
.dashboard-badge--consumed {
  background: #e7f1ff;
  color: #1f5f99;
}
.dashboard-badge--late {
  background: rgba(234, 130, 38, 0.15);
  color: #a34905;
}
.packages-list__toggle {
  border: none;
  background: none;
  color: #660168;
  font-size: 2rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  position: relative;
  top: -2px;
}
.packages-list__toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

.alerts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.alert {
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.alert--error {
  background: #fdeaea;
  color: #7c1f1f;
  border: 1px solid #f3c0c0;
}
.alert--success {
  background: #edf5ff;
  color: #1c4170;
  border: 1px solid #d0e3ff;
}
.registered-item__message {
  font-size: 0.9rem;
  color: #5d4a73;
}
.registered-item__message--pending {
  color: #a65b08;
  font-weight: 600;
}
.registered-item__message--package {
  color: #3c235a;
}
.history-table-wrapper {
  margin-top: 16px;
  overflow-x: auto;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: #5f4a73;
  min-width: 520px;
}
.history-table th,
.history-table td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid rgba(111, 79, 210, 0.18);
  vertical-align: top;
}
.history-table thead th {
  font-weight: 600;
  font-size: 0.9rem;
  color: #3c235a;
  background: #f4efff;
}
.history-table tbody tr:last-child td {
  border-bottom: none;
}
.history-table__class {
  font-weight: 600;
  color: #3c235a;
}
.history-table__muted {
  color: #9a8cb5;
}
.tablist {
  display: flex;
  gap: 6px;
  padding: 0 6px;
  margin: 0 0 0;
  border-bottom: 1px solid rgba(111, 88, 177, 0.24);
}
.tablist__button {
  border: 1px solid rgba(111, 88, 177, 0.24);
  border-bottom: none;
  background: rgba(111, 88, 177, 0.08);
  color: #4b2b80;
  padding: 10px 16px;
  border-radius: 12px 12px 0 0;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  top: 1px;
}
.tablist__button:hover,
.tablist__button:focus {
  color: #31133a;
  text-decoration: underline;
  text-decoration-color: rgba(111, 88, 177, 0.6);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  outline: none;
}
.tablist__button.is-active {
  background: #fff;
  color: #2d1b47;
  border-color: rgba(111, 88, 177, 0.3);
  box-shadow: 0 -1px 0 #fff;
  transform: translateY(0);
}
.tab-panel {
  display: none;
  border: 1px solid rgba(111, 88, 177, 0.24);
  border-radius: 0 14px 14px 14px;
  padding: 16px 12px 8px;
  background: #fff;
  margin-top: -1px;
}
.tab-panel.is-active {
  display: block;
}

/* wrapper for cancel buttons */
.dashboard-item__actions {
  margin-top: 8px;
  display: inline-flex;
  gap: 10px;
}
.registered-item__notice {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
/* Area appears if no active or pending package */
.packages-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.packages-empty p {
  margin: 0;
}
/* Wrapper for the two CTA buttons */
.dashboard-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.dashboard-actions .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  width: auto;
  min-width: 0;
}
.payment-option-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2100;
}
.payment-option-modal.is-visible {
  display: flex;
}
.payment-option-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 16, 34, 0.55);
}
.payment-option-modal__dialog {
  position: relative;
  background: #fff;
  color: #1f1022;
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(31, 16, 34, 0.28);
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1;
}
.payment-option-modal__title {
  margin: 0;
  font-size: 1.35rem;
}
.payment-option-modal__hint {
  margin: 0;
  color: #5d4a73;
  font-size: 0.95rem;
}
.payment-option-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 500px) {
  .payment-option-modal__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}
.payment-option-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #8f7cab;
  cursor: pointer;
}
.payment-option-modal__close:hover,
.payment-option-modal__close:focus {
  color: #660168;
}
body.payment-option-open {
  overflow: hidden;
}
.cancel-warning-modal[hidden] {
  display: none;
}
.cancel-warning-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(31, 16, 34, 0.6);
  z-index: 1100;
}
.cancel-warning-modal__dialog {
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 48px rgba(31, 16, 34, 0.22);
  color: #1f1022;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cancel-warning-modal__title {
  margin: 0;
  font-size: 1.25rem;
}
.cancel-warning-modal__message {
  margin: 0;
  line-height: 1.5;
}
.cancel-warning-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.cancel-warning-open {
  overflow: hidden;
}

/*  Package Info Page  */

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-header h1 {
  line-height: 1.2;
}
.info-header p {
  margin: 0;
}
.info-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.info-list__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(102, 1, 104, 0.12);
  color: #660168;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.discount-box {
  border: 1px dashed rgba(102, 1, 104, 0.35);
  border-radius: 12px;
  padding: 12px;
  background: rgba(102, 1, 104, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.discount-box label {
  font-weight: 700;
  color: #4f2f76;
}
.discount-inputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.discount-inputs input[type="text"] {
  flex: 1;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(102, 1, 104, 0.35);
  font-size: 1rem;
}
.discount-note {
  color: #5f4a73;
  font-size: 0.95rem;
}
.discount-applied {
  color: #1e7b47;
  font-weight: 700;
}