/* Base */
    html, body { margin:0; padding:0; }
    body {
      font-family: Arial, sans-serif;
      background: #000;
      color: #000;             /* content containers are white */
      text-align: center;      /* wrapper will reset to left */
    }
    a:link, a:visited { color: blue; }
    a:hover, a:active { color: red; }

    /* Layout wrapper */
    #centerwrapper { width: 975px; margin: 0 auto; text-align: left; }

    /* Blocks */
    .myBoxes {
      padding: 0 10px 10px 10px;
      background: linear-gradient(180deg, #fff 0%, #fdfdfd 75%, #f7f7f7 100%);
      box-shadow: 0 1px 0 rgba(50,50,50,.5);
      border: 1px #CDCDCD solid;
      border-radius: 5px;
    }
    .myBoxesWhiteBackground,
    .myBoxesGrayBackground {
      padding: 10px;
      width: 450px;
      height: 200px;
      box-shadow: 0 1px 0 rgba(50,50,50,.5);
      border: 1px #CDCDCD solid;
      border-radius: 5px;
      background: #fff;
    }
    .myBoxesGrayBackground { background: #f8f8f8; }

    

    /* Typography */
    p {
      margin: 20px 50px;
      text-align: left;
      font-size: 120%;
      line-height: 1.5;
    }
    blockquote {
      margin: 20px 150px;
      text-align: left;
      font-size: 100%;
      line-height: 1.5;
    }
    h2 { color: blue; }
    h4 {
      margin: 20px 50px 0;
      text-align: left;
      font-size: 120%;
      line-height: 1.5;
    }
    .ordered-list-body {
      text-align: left;
      margin: 0 60px 0 100px;
      font-size: 110%;
      line-height: 1.5;
    }
    .read-this-first-block {
      margin: 0 50px;
      padding: 10px 20px;
    }
    .read-this-first-block ol.ordered-list-body { margin-left: 20px; }

    /* Orbs / outline title (Desktop Styles) */
    .outline {
      position: absolute;
      color: black;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: orange;
      font-size: 64px;
      font-family: "Arvo", serif;
      padding-top: 0;
    }
    .orbs {
      font-family: "MagicSpellJFMagicSpellJF";
      font-size: 90px;
      padding-top: 40px;
      letter-spacing: 6px;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 140px;
    }
    .orbs span {
      color: red;
      display: inline;
      text-align: center;
      border-radius: 50%;
      text-shadow: 0 0 30px orange, 1px 1px 30px orange, 2px 2px 30px orange,
                   -1px -1px 30px orange, -2px -2px 30px orange;
      position: absolute;
    }
    .glow {
      opacity: 0;
      font-family: "Arvo", serif;
      font-weight: 300;
      color: orange;
      margin-top: 80px;
      font-size: 40px;
      position: absolute;
      left: 0; right: 0;
      text-align: center;
      width: 100%;
    }

    /* Image left / text right */
    .image-text-container {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .left-image {
      width: 300px;
      margin-left: 100px;
    }
    .right-text { margin-left: 0; }

    /* --- NEW: VIDEO CONTAINER STYLES --- */
    .video-container-fullwidth {
      position: relative;
      z-index: 1;
      width: 1280px;
      left: 50%;
      transform: translateX(-50%);
      margin: 50px 0;
      padding: 0;
      background: #fff;
    }
    .video-container-fullwidth video {
      display: block;
      width: 100%;
      height: auto;
    }

    /* --- SHARED RESPONSIVE STYLES (TABLET & PHONE) --- */
    @media (max-width: 1000px) {
      body { text-align: left; }

      #centerwrapper,
      #nav, #nav1,
      #content, iframe,
      .myBoxesGrayBackground,
      .myBoxesWhiteBackground {
        max-width: 100%;
        width: 100% !important;
      }

      p, blockquote { margin-left: 20px !important; margin-right: 20px !important; }
      img { width: 100%; height: auto; border: 0; }
      
      

      .myBoxesGrayBackground, #content { margin-top: 10px !important; height: auto !important; }
      #centerwrapper { width: 90% !important; margin: 0 auto !important; }

      .myBoxesGrayBackground, .myBoxesWhiteBackground, .myBoxes {
        box-sizing: border-box;
        padding: 10px 15px 15px !important;
        width: 100% !important;
        margin-left: 0 !important;
        height: auto !important;
      }

      #content li { list-style-position: outside; margin-left: 25px !important; }
      
      .image-text-container { 
        display: block !important; 
      }
      .left-image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
        width: 70%;
      }

      .animated-block .top-line + div { margin-bottom: -20px !important; }
      .animated-block-parent { margin-bottom: 20px; }
      
      .read-this-first-block { 
        padding: 10px 15px !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
      }
      .ordered-list-body {
        margin-left: 25px !important;
        margin-right: 10px !important;
      }
      
      /* --- NEW: VIDEO CONTAINER MOBILE STYLES --- */
      .video-container-fullwidth {
        position: static;
        left: auto;
        transform: none;
        width: 100% !important;
        margin: 40px auto !important;
      }

      .orbs { font-size: 8vw; height: 21vw; padding-top: 4vw; }
      .glow { position: relative; font-size: 5vw; margin-top: 0; }
      .outline { font-size: 7vw; }
    }

    /* --- TABLET-SPECIFIC STYLES (e.g., iPad) --- */
    @media (min-width: 768px) and (max-width: 1000px) {
        .glow { top: 5vw; }
        .orbs { margin-top: -30px !important; }
    }

    /* --- PHONE-SPECIFIC STYLES --- */
    @media (max-width: 767px) {
        .glow { top: 16vw; }
        .orbs { margin-top: 40px !important; }
        
        .read-this-first-block { 
            margin-left: 0 !important; 
            margin-right: 0 !important;
        }
        
        .ordered-list-body {
            margin-left: 5px !important;
            padding-left: 25px !important;
            margin-right: 5px !important;
        }
        
        .animated-block-parent { height: 230px !important; }

        .after-chatling-inline-bot ul {
            margin-left: 5px !important;
            margin-right: 15px !important;
            padding-left: 25px !important;
        }

        .after-chatling-inline-bot > div {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
    }

  /* Base layout */
  html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #21252b;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body { padding-bottom: 350px; }

  /* Background canvas (matches <canvas id="magic-dust">) */
  #magic-dust {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
  }

  /* DESKTOP STYLES FOR WIZARD IMAGE CONTAINER */
  #wizard-img-container {
    width: 500px;
    margin: 14px auto 8px;
    position: relative;
    z-index: 2;
    text-align: center;
  }

  /* Chat container */
  #chatbox {
    width: 600px;
    margin: 14px auto;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 3px 12px #bbb3;
    padding: 16px;
    position: relative; /* anchor for voice UI */
    z-index: 1;
  }

  /* Messages */
  #messages {
    height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    word-break: break-word;
    border: 1px solid #eee;
    padding: 10px;
    background: #fafafa;
    margin-bottom: 12px;
  }
  .msg { margin-bottom: 10px; }
  .user { font-weight: bold; color: #2574a9; }
  .bot  { color: #2d3436; }
  .msg p { margin: 6px 0; }
  .msg ul, .msg ol { margin: 6px 0 6px 16px; }
  .msg li { margin-bottom: 4px; }

  /* Input row (desktop: inline; mobile: stacked) */
  #input-row { display: flex; gap: 7px; align-items: center; }
  #input { flex: 1; padding: 8px; font-size: 1em; }
  #send  { padding: 8px 14px; background: #2574a9; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
  #send:disabled { opacity: 0.6; }

  /* Voice button inline (no overlay) */
  #voice-mode-toggle{
    position: static;
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2574a9;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    cursor: pointer;
    font-size: 16px;
  }

  /* Inline Stop button (iOS only) */
  #stop-tts{
    display: none;
    appearance: none;
    border: 1px solid #b91c1c;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 13px;
    min-height: 35px;
    font-weight: 600;
    letter-spacing: 0.1px;
    align-self: flex-end;
    color: #fff;
    background: #dc2626;
    box-shadow: 0 4px 10px rgba(220,38,38,.22);
    cursor: pointer;
  }
  #stop-tts:hover { filter: brightness(1.05); }
  #stop-tts:active { transform: translateY(1px); }
  #stop-tts:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(220,38,38,.4), 0 4px 10px rgba(220,38,38,.22);
  }

  /* Sources list */
  .sources ul { list-style: disc; margin: 0 0 0 22px; padding: 0; }
  .sources a  { color: #2574a9; text-decoration: underline; }

  /* Spinner */
  #chatbox { position: relative; }
  #spinner {
    position: absolute;
    right: 12px;
    bottom: 64px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    will-change: opacity, transform;
    text-align: center;
    transform: none;
  }
  #spinner.show { opacity: 1; }
  #voice-ui:not([hidden]) ~ #spinner { bottom: 128px; }
  #spinner .bubble {
    display: inline-block;
    background: rgba(25,25,35,0.88);
    border-radius: 50%;
    padding: 18px;
    box-shadow: 0 4px 20px #000a;
  }
  @keyframes spin { 100% { transform: rotate(360deg); } }
  #spinner-hat { display: inline-block; animation: spin 1.1s linear infinite; }
  @media (prefers-reduced-motion: reduce) { #spinner-hat { animation: none; } }

  /* Voice UI */
  #voice-ui {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 64px;
    z-index: 6;
    background: rgba(0,0,0,.85);
    color: #fff;
    padding: 14px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(4px);
  }
  #voice-ui[hidden] { display: none !important; }
  #voice-ui #vu {
    width: 10px; height: 10px; border-radius: 50%;
    background: #999; box-shadow: 0 0 12px rgba(255,255,255,.25);
  }
  #voice-stop, #voice-exit {
    border: 1px solid #fff3;
    border-radius: 8px;
    background: #fff1;
    color: #fff;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
  }
  #voice-exit {
    border-color: #fca5a5;
    background: rgba(239, 68, 68, .15);
  }

  /* Mobile tweaks */
  @media (max-width: 700px) {
    #spinner { right: 8px; bottom: 90px; }
    #voice-ui { bottom: 80px; }
    #voice-ui:not([hidden]) ~ #spinner { bottom: 160px; }
    
    #spinner .bubble { padding: 12px; }
    #spinner-hat {
        width: 36px !important;
        height: 36px !important;
    }

    /* --- NEW: GIVE CHATBOX SPACE ON PHONES --- */
    #chatbox {
      width: 95%; /* Reduce width slightly */
      margin-left: auto; /* Center it */
      margin-right: auto;
      padding: 9px;
      box-sizing: border-box;
    }
    
    #messages { height: 40vh; min-height: 120px; max-height: 60vh; font-size: 1em; padding: 8px 2px; }
    
    #wizard-img { max-width: 95vw; width: 99%; }
    
    #wizard-img-container {
      width: 95%; /* Match chatbox width */
      margin-left: auto; /* Center it */
      margin-right: auto;
      margin-top: 16px;
      margin-bottom: 10px;
    }

    /* Stack controls */
    #input-row { flex-direction: column; gap: 7px; }
    #input, #send { width: 100%; font-size: 1.06em; box-sizing: border-box; }
    #voice-mode-toggle { align-self: flex-end; }
    
    .msg.bot img {
        width: 24px !important;
        height: 24px !important;
    }
  }

  /* --- iPad-only tweaks (does not affect Android/Desktop) --- */
  @supports (-webkit-touch-callout: none) {  /* iOS browsers */
    @media (min-device-width: 768px) and (max-device-width: 1366px) and (hover: none) and (pointer: coarse) {
      #send {
        padding: 9px 15px;
        font-size: 1.02em;
        min-height: 39px;
      }
      #stop-tts {
        align-self: center;
        margin-left: 6px;
        display: inline-flex;
        align-items: center;
      }
      .msg.bot img {
        width: 24px !important;
        height: 24px !important;
      }
      
      #spinner .bubble { padding: 12px; }
      #spinner-hat {
        width: 36px !important;
        height: 36px !important;
      }
    }
  }

  /* --- Mode toggle --- */
  .mode-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0 10px;
    flex-wrap: wrap;
  }
  .mode-toggle button {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #0f172a;
    cursor: pointer;
    font-size: 0.95em;
  }
  .mode-toggle button.selected {
    background: #2574a9;
    color: #fff;
    border-color: #2574a9;
  }
  .mode-toggle button[aria-pressed="true"] {
    background: #2574a9;
    color: #fff;
    border-color: #2574a9;
  }

  @media (max-width:700px){
    .mode-toggle { justify-content: space-between; }
  }

/* Force left-aligned chat text (desktop + mobile) */
#chatbox,
#messages,
#messages .msg,
#messages .msg * {
  text-align: left !important;
}

    /* Let the sparkle canvas show through large wrappers */
#content { background: transparent !important; }

    /* Background canvas */
#magic-dust {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;               /* background layer */
  pointer-events: none;
  display: block;
}

/* Main page content above the canvas */
#centerwrapper {
  position: relative;
  z-index: 1;
}

/* If you have any full-width sections OUTSIDE #centerwrapper
   (e.g., header/nav/footer), lift them too. */
header, nav, footer {
  position: relative;
  z-index: 1;
}

    /* Center a fixed-width section on the VIEWPORT, not the 975px column */
.video-centered-on-page {
  position: relative;     /* also lifts above sparkles when combined with z-index */
  z-index: 1;             /* keep it above the background canvas */
  width: 1280px;          /* exact width you want */
  margin-left: calc(50vw - 640px);  /* center on viewport */
  margin-right: calc(50vw - 640px);
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 0;
}

/* keep the video itself tidy */
.video-centered-on-page video {
  display: block;
  width: 1280px;
  height: auto;           /* keeps aspect ratio */
}

    /* Make content boxes exactly 975px total (padding + border included) */
.myBoxesWhiteBackground,
.myBoxesGrayBackground {
  box-sizing: border-box;
  width: 975px;           /* keep them aligned with header/nav/animated block */
  margin-left: auto;      /* ensure centered */
  margin-right: auto;
}

  /* Make the normal chat window taller immediately (viewport-based) */
  #messages { 
    height: 55vh !important; 
    max-height: 70vh; 
  }

  /* Backdrop for modal — dims page behind, no blur */
  #chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* dim the rest of the page */
    z-index: 9998;
    display: none;
  }
  body.modal-open #chat-backdrop {
    display: block;
  }

  /* Modalized chatbox — same white card, just centered and bigger */
  #chatbox.modalized {
    position: fixed;
    z-index: 9999;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 96vw);
    max-height: 92vh;
    margin: 0 !important;
    padding: 16px;

    background: #ffffff;          /* solid white card */
    border-radius: 7px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden;             /* keep internals tidy */
    color: #000000;               /* normal text color */
  }
  
  
  /* Messages area grows inside modal */
  #chatbox.modalized #messages {
    height: calc(92vh - 200px) !important;
    max-height: none;
    background: #ffffff;          /* keep message area white */
  }

  /* Prevent background scrolling while modal is open */
  body.modal-open {
    overflow: hidden;
  }

  /* Mobile tweaks */
  @media (max-width: 700px) {
    #chatbox.modalized {
      top: 4vh;
      width: 96vw;
    }
    #chatbox.modalized #messages {
      height: calc(92vh - 220px) !important;
    }
  }

    /* --- Fade Animations for Modal and Backdrop --- */

/* Backdrop fade */
#chat-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* When modal is open, fade backdrop in */
body.modal-open #chat-backdrop {
  opacity: 1;
}

/* Modal fade */
#chatbox.modalized {
  opacity: 0;
  transform: translateX(-50%) translateY(10px); /* slight downward offset */
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* When active, fade fully in */
body.modal-open #chatbox.modalized {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Fade-out (when modal is closing) handled automatically by transitions
   because you remove modal-open from <body> and modalized from #chatbox */

    /* === Mega menu: constrain to wizard column === */
#mega-menu-wrap {
  width: 975px;
  margin: 0 auto;
  position: relative;
  z-index: 2;                 /* keep above sparkles/canvas */
}

/* Let it go full width on tablet/phone like rest of wizard */
@media (max-width: 1000px) {
  #mega-menu-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* If homepage mega menu assumes wider screens, tighten padding a bit */
#mega-menu-wrap nav a,
#mega-menu-wrap .menu-item > a {
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;        /* prevents ugly wraps in 975px */
}

/* Dropdown panels should align to wizard width */
#mega-menu-wrap .mega-panel,
#mega-menu-wrap .dropdown-panel {
  max-width: 975px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  #mega-menu-wrap .mega-panel,
  #mega-menu-wrap .dropdown-panel {
    max-width: 100% !important;
  }
}

    /* ===== Theme (derived from globals.css) ===== */
    :root{
      /* Core palette approximating your OKLCH choices */
      --background:#ffffff;
      --foreground:#252525;
      --border:#eaeaea;
      --ring:#b5b5b5;

      /* Accents from your intent */
      --primary:#262626;
      --primary-foreground:#fafafa;
      --secondary:#f7f7f7;
      --muted:#f3f3f3;

      /* “Amber” and “gold” highlights used in TremoloMASTER label */
      --amber-300:#fbbf24;
      --orange-500: #ea580c;

      /* Header bar colors (gray-600/700 look) */
      --hdr-bg:#4b5563;      /* gray-600 */
      --hdr-border:#374151;  /* gray-700 */
      --hdr-text:#ffffff;

      /* Xmas button */
      --xmas-bg:#dc2626;       /* red-600 */
      --xmas-bg-hover:#b91c1c; /* red-700 */

      /* Mega styles */
      --mega-bg:#ffffff;
      --mega-border:#f0f0f0;
      --mega-accent:#f59e0b;   /* amber-500 */
    }

    /* ===== Resets / base ===== */
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
  margin:0;
  padding:0;
  background:var(--background);
  color:var(--foreground);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


    /* ===== Header layout ===== */
    .hdr{position:relative;z-index:50;background:#000}
    .hdr-banner{background:#000}
    .hdr-banner-img{display:block;margin:0 auto;max-width:1000px;width:100%;height:auto}

    .hdr-bar{position:sticky;top:0;z-index:40;background:var(--hdr-bg);border-bottom:1px solid var(--hdr-border);box-shadow:0 4px 10px rgba(0,0,0,.25)}
    .hdr-container{max-width:1400px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between}

    /* Desktop nav */
    .nav-desktop{display:none;align-items:center;justify-content:center;width:100%}
    .nav-btn{
      display:flex;align-items:center;gap:8px;
      padding:16px 24px;font-weight:700;font-size:14px;
      color:var(--hdr-text);text-decoration:none;background:transparent;border:none;cursor:pointer;
      border-right:1px solid var(--hdr-border);
    }
    .nav-btn:hover{background:#6b7280}
    /* Keep the trigger label on one line — matches the metronome navbar */
    .nav-btn.-trigger{white-space:nowrap}
    .nav-btn.-trigger .chev{margin-left:2px;font-size:26px;line-height:1;transition:transform .15s ease}
    .nav-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
    .nav-btn.-xmas{background:var(--xmas-bg)}
    .nav-btn.-xmas:hover{background:var(--xmas-bg-hover)}
    /* display:flex/block above would defeat the [hidden] attribute the seasonal
       (Christmas) logic relies on — force hidden to win. */
    .nav-btn[hidden], .m-link[hidden]{display:none !important}

    .ml{margin-left:4px}
    .pill-new{
      margin-left:8px;display:inline-flex;align-items:center;gap:6px;
      padding:2px 6px;border-radius:999px;text-transform:uppercase;
      font-size:10px;font-weight:800;background:var(--amber-300);color:#000
    }
    .highlight-amber{color:var(--amber-300);font-weight:700}
    .highlight-gold{color:var(--gold-500);font-weight:700}

    /* Lucide icon sizing/alignment */
    .icon-16{width:16px;height:16px;display:inline-block;vertical-align:middle}
    .bolt-emoji{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--orange-500)}

    /* Below lg only Home + hamburger are visible: center them as one cluster
       (space-between left them stranded at opposite edges on iPad).
       Desktop keeps its own layout — see the min-width:1024px block. */
    @media (max-width:1023.98px){
      .hdr-container{justify-content:center;gap:20px}
    }

    /* Mobile toggle */
    .nav-mobile-btn{
      display:inline-flex;align-items:center;justify-content:center;
      width:44px;height:44px;border-radius:8px;background:transparent;color:#fff;
      /* Deliberate rounded-rectangle outline — a bordered button reads as
         tappable; three bare lines can pass for decoration */
      border:1.5px solid rgba(255,255,255,.5);
    }
    .nav-mobile-btn:hover{background:#6b7280}
    .nav-mobile-btn .icon-burger{display:block}

    /* Mobile menu */
    /* .nav-mobile sits OUTSIDE .hdr-container, so it needs its own horizontal
       padding (matching the container's 16px) or the links hug the screen edge */
    .nav-mobile{border-top:1px solid var(--hdr-border);padding:12px 16px}
    .m-heading{color:#fde68a;font-weight:800;font-size:14px;margin:12px 0 6px}
    .m-section{border-top:1px solid var(--hdr-border);padding-top:12px;margin-top:12px}
    .m-sec-title{color:#fde68a;font-weight:800;font-size:14px;margin:0 0 8px}
    .m-item{display:block;padding:4px 0 4px 24px;font-size:14px;color:#d1d5db;text-decoration:none}
    .m-item:hover{color:#fff}
    .m-item.-special{color:#fdba74;font-weight:800}
    .m-link{display:block;color:#fff;text-decoration:none;padding:8px 0}
    .m-link:hover{color:#fde68a}
    .m-link.strong{font-weight:700}
    .m-link.-xmas{font-weight:700}

    /* Mega menu */
    .mega{position:absolute;left:0;top:100%;width:100vw;background:var(--mega-bg);border-top:4px solid var(--mega-accent);box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:50}
    .mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:24px;max-width:1400px;margin:0 auto}
    .mega-sec-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:#1f2937;border-bottom:1px solid var(--mega-border);padding-bottom:8px;margin:0 0 12px}
    .mega-link{display:block;text-decoration:none;border-radius:10px;padding:8px}
    .mega-link .title{font-weight:700;color:#1f2937}
    .mega-link .desc{font-size:13px;color:#6b7280;margin-top:4px}
    .mega-link:hover .title{color:#b91c1c}
    .mega-link.-featured{background:linear-gradient(90deg,#faf5ff,#eff6ff);border:1px solid #e9d5ff}
    .mega-link.-featured .title{color:#6b21a8}
    .mega-badge{margin-left:8px;font-size:11px;background:#7c3aed;color:#fff;padding:2px 8px;border-radius:999px}

    /* Backdrop to close mega on outside hover/click */
    .mega-backdrop{position:fixed;inset:0;z-index:30;background:transparent}

    /* ===== Responsive ===== */

    /* The "#mega-menu-wrap nav a{white-space:nowrap}" rule further up (meant for
       the desktop nav buttons) also hits the hamburger-menu links, which breaks
       the tablet 3-column grid: the longest link can't wrap, so its column
       overflows the screen. Mobile-menu links must wrap normally. */
    #mobile-nav a.m-item, #mobile-nav a.m-link{white-space:normal}

    /* Tablet-width hamburger menu: lay the five sections out in three columns
       (desktop-mega feel) instead of one long vertical scroll. The standalone
       links after the sections stay stacked full-width below. Phones keep the
       single column; >=1024px uses the real mega menu. */
    @media (min-width:700px) and (max-width:1023.98px){
      .m-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;align-items:start}
      .m-section{min-width:0}
      /* Tablet has room — larger type for the heading, section titles, and links.
         The standalone .m-link rows below the sections deliberately keep their size. */
      .m-heading{font-size:17px}
      .m-sec-title{font-size:17px}
      .m-item{font-size:16px;padding-top:6px;padding-bottom:6px}
    }

    @media (min-width:1024px){
      .nav-desktop{display:flex}
      .nav-mobile-btn{display:none}
      .nav-mobile{display:none !important}
    }
  

      /* Special styling for AI Classical Guitar Technique Wizard (isSpecial) */
.mega-link.-special .title{
  color:#ea580c;                 /* orange-600 */
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing:1px;
}
.mega-link.-special:hover .title{
  color:#c2410c;                 /* orange-700 */
}

/* === Nav bar TremoloMASTER highlights === */
.nav-btn .highlight-amber {
  color: var(--amber-300);
  font-weight: 700;
}

.nav-btn .highlight-gold {
  color: var(--orange-500);  /* now true orange */
  font-weight: 700;
}
  

/* === WIZARD PAGE: wider mega menu (example width 1200px) === */
#mega-menu-wrap .mega {
  width: 1400px !important;       /* wider than the nav bar */
  max-width: calc(100vw - 40px);  /* safety: never overflow screen */
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}

/* Internal grid: match the new width */
#mega-menu-wrap .mega-grid {
  max-width: 1400px !important;
  margin: 0 auto;
}

/* Mobile: go back to full width */
@media (max-width: 1000px){
  #mega-menu-wrap .mega {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
  }
  #mega-menu-wrap .mega-grid {
    max-width: 100% !important;
  }
}

    /* === FORCE NAV TEXT TO WHITE === */
#mega-menu-wrap .nav-btn,
#mega-menu-wrap .nav-btn:link,
#mega-menu-wrap .nav-btn:visited {
  color: #ffffff !important;
}

/* Christmas, Store, Portal items — ensure white */
#mega-menu-wrap .nav-btn.-xmas,
#mega-menu-wrap .nav-btn.-store,
#mega-menu-wrap .nav-btn.-portal {
  color: #ffffff !important;
}

/* TremoloMASTER tab (preserve amber highlight but make other words white) */
#mega-menu-wrap .nav-btn .highlight-amber {
  color: var(--amber-300) !important;   /* keep the gold color */
}

#mega-menu-wrap .nav-btn .highlight-gold {
  color: var(--orange-500) !important;  /* keep your correct gold/orange */
}

/* Everything else (like “The” and “Wizard”) stays white */
#mega-menu-wrap .nav-btn span,
#mega-menu-wrap .nav-btn strong {
  color: #ffffff !important;
}

/* === HARD OVERRIDE for the NEW badge next to TremoloMASTER Wizard === */
/* Covers both nav badge (.pill-new) and any alt badge class (.mega-badge) */

#mega-menu-wrap .nav-btn .pill-new,
#mega-menu-wrap .nav-btn .mega-badge,
#mega-menu-wrap .pill-new,
#mega-menu-wrap .mega-badge {
  background: var(--amber-300) !important; /* restore bright amber */
  color: #000000 !important;               /* NEW text black */
  border: none !important;
  text-transform: uppercase;
  font-weight: 800 !important;
}

/* If the text is inside a child span, force that too */
#mega-menu-wrap .nav-btn .pill-new *,
#mega-menu-wrap .nav-btn .mega-badge * {
  color: #000000 !important;
}

    /* Reduce bottom space under sticky nav bar */
#mega-menu-wrap .hdr-bar,
.hdr-bar {
  margin-bottom: 4px !important;  /* tighten spacing */
  padding-bottom: 0 !important;
}

/* Pull the animated header upward */
#wizard-img-container {
  margin-top: 8px !important;   /* was ~14–20px */
}

.animated-block-parent,
.orbs {
  margin-top: 0 !important;
}

/* =========================================================
   MOBILE/iPAD WIZARD TITLE SYSTEM
   Desktop = animated text block (.animated-block-parent)
   Phone + iPad (<=1000px) = Sparkle title (#wizard-sparkle)
   ========================================================= */

/* Desktop: sparkle hidden by default */
#wizard-sparkle{
  display:none;
  width:975px;
  margin:12px auto 0;
  text-align:center;
  position:relative;
  z-index:2;
}

/* Phone + iPad: hide animated text, show sparkle */
@media (max-width:1000px){
  .animated-block-parent{ display:none !important; }
  #wizard-sparkle{
    display:block !important;
    width:100% !important;
    margin:12px auto 0 !important;
  }
}

/* =========================================================
   SPARKLE VISUALS (SCOPED to #wizard-sparkle)
   ========================================================= */

#wizard-sparkle .sparkle-container{
  --transition:0.25s;
  --spark:1.8s;
  --active:1;
  background:hsl(260 calc(var(--active)*97%) 6%);
  min-height:300px;
  display:grid;
  place-items:center;
  transition:background var(--transition);
  overflow:hidden;
  position:relative;
}

/* Style BOTH <a> (if you ever switch back) and <div class="sparkle-link"> */
#wizard-sparkle .sparkle-button a,
#wizard-sparkle .sparkle-button .sparkle-link{
  --cut:0.1em;
  --active:1;
  --bg:
    radial-gradient(40% 50% at center 100%,
      hsl(270 calc(var(--active)*97%) 72% / var(--active)),
      transparent),
    radial-gradient(80% 100% at center 120%,
      hsl(260 calc(var(--active)*97%) 70% / var(--active)),
      transparent),
    hsl(260 calc(var(--active)*97%) calc((var(--active)*44%) + 12%));

  background:var(--bg);
  border:0;

  /* Not clickable / not a link */
  cursor:default;
  text-decoration:none !important;
  color:inherit !important;
  pointer-events:none;          /* makes taps do nothing */

  /* Key sizing fixes */
  white-space:normal !important;
  height:auto !important;
  line-height:1.25 !important;
  padding:1.2em 1.3em !important;
  text-align:center !important;
  min-height:96px;

  font-size:2rem;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.25em;
  border-radius:100px;
  position:relative;
  z-index:2;

  box-shadow:
    0 0 calc(var(--active)*3em) calc(var(--active)*1.5em) hsl(260 97% 61% / 0.75),
    0 0.05em 0 0 hsl(260 calc(var(--active)*97%) calc((var(--active)*50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(260 calc(var(--active)*97%) calc(var(--active)*60%)) inset;

  transition:box-shadow var(--transition), scale var(--transition), background var(--transition);
  scale:calc(1 + (var(--active)*0.1));
}

/* If a browser still applies “active” visuals, keep it stable */
#wizard-sparkle .sparkle-button a:active,
#wizard-sparkle .sparkle-button .sparkle-link:active{
  scale:1;
}

/* Text inside bubble */
#wizard-sparkle .sparkle-button .text{
  translate:0 0 !important;
  display:block !important;
  line-height:1.25 !important;
  letter-spacing:0.01ch;
  -webkit-background-clip:text;
  color:gold;
  font-size:130%;
  text-decoration:none !important;
}

/* The little "sparkle stars" to the left:
   force GOLD and override inline black fills */
#wizard-sparkle .sparkle-button .sparkle path{
  color:gold;
  fill:currentColor !important;
  stroke:currentColor !important;
  transform-box:fill-box;
  transform-origin:center;
  animation-delay:calc((var(--transition)*1.5) + (var(--delay)*1s));
  animation-duration:0.6s;
  transition:color var(--transition);
}

/* Optional bounce tuning for the 3 paths (keeps your original feel) */
@keyframes bounce { 35%,65%{ scale:var(--scale); } }
#wizard-sparkle .sparkle-button .sparkle path:nth-of-type(1){ --scale:0.5; --delay:0.1; }
#wizard-sparkle .sparkle-button .sparkle path:nth-of-type(2){ --scale:1.5; --delay:0.2; }
#wizard-sparkle .sparkle-button .sparkle path:nth-of-type(3){ --scale:2.5; --delay:0.35; }

/* Sparkle icon sizing/position */
#wizard-sparkle .sparkle-button svg{
  inline-size:1.25em;
  translate:-25% -5%;
  overflow:visible !important;
}

/* Spark / particles */
#wizard-sparkle .sparkle-button .spark{
  position:absolute;
  inset:0;
  border-radius:100px;
  overflow:hidden;
  -webkit-mask:linear-gradient(white, transparent 50%);
  mask:linear-gradient(white, transparent 50%);
  animation:flip calc(var(--spark)*2) infinite steps(2,end);
}
@keyframes flip{ to{ rotate:360deg; } }

#wizard-sparkle .sparkle-button .spark:before{
  content:"";
  position:absolute;
  width:200%;
  aspect-ratio:1;
  top:0%;
  left:50%;
  translate:-50% -15%;
  opacity:calc(var(--active) + 0.4);
  background:conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  animation:rotate var(--spark) linear infinite both;
}
@keyframes rotate{ to{ transform:rotate(90deg); } }

#wizard-sparkle .sparkle-button .backdrop{
  position:absolute;
  inset:var(--cut);
  background:var(--bg);
  border-radius:100px;
}

#wizard-sparkle .sparkle-button .bodydrop{
  background:hsl(260 calc(var(--active)*97%) 6%);
  position:absolute;
  inset:0;
}

/* Particle pen + particles */
#wizard-sparkle .particle-pen{
  position:absolute;
  aspect-ratio:1;
  top:50%;
  left:50%;
  translate:-50% -50%;
  -webkit-mask:radial-gradient(white, transparent 65%);
  opacity:var(--active,0);
  width:100%;
  height:100%;
}

#wizard-sparkle .particle{
  fill:white;
  width:calc(var(--size,0.25) * 1rem);
  aspect-ratio:1;
  position:absolute;
  top:calc(var(--y) * 1%);
  left:calc(var(--x) * 1%);
  opacity:var(--alpha,1);
  animation:float-out calc(var(--duration,1) * 1s)
            calc(var(--delay) * -1s) infinite linear;
  transform-origin:var(--origin-x,1000%) var(--origin-y,1000%);
}
#wizard-sparkle .particle:nth-of-type(even){ animation-direction:reverse; }
@keyframes float-out{ to{ rotate:360deg; } }

/* =========================================================
   RESPONSIVE SIZE TUNING
   ========================================================= */

/* -------- iPad -------- */
@media (min-width:701px) and (max-width:1000px){
  #wizard-sparkle .sparkle-container{
    min-height:380px !important;
    padding:26px 0 !important;
  }
  #wizard-sparkle .sparkle-button a,
  #wizard-sparkle .sparkle-button .sparkle-link{
    width:min(580px, 92vw) !important;
    min-height:130px !important;
    font-size:22px !important;
    padding:1.3em 1.4em !important;
  }
  #wizard-sparkle .sparkle-button .text{
    font-size:1.3em !important;
  }
}

/* -------- Phones -------- */
@media (max-width:700px){
  #wizard-sparkle .sparkle-container{
    min-height:320px !important;
    padding:20px 0 !important;
  }
  #wizard-sparkle .sparkle-button a,
  #wizard-sparkle .sparkle-button .sparkle-link{
    width:min(280px, 90vw) !important;
    min-height:110px !important;
    font-size:18px !important;
    padding:1.1em 1.2em !important;
  }
  #wizard-sparkle .sparkle-button .text{
    font-size:1.2em !important;
  }
}

/* -------- very small phones -------- */
@media (max-width:550px){
  #wizard-sparkle .sparkle-button a,
  #wizard-sparkle .sparkle-button .sparkle-link{
    width:min(260px, 90vw) !important;
    min-height:100px !important;
    font-size:16px !important;
  }
}

/* =========================================================
   MOBILE NAV COLORS (FINAL, CONSOLIDATED)
   - Links/items = white
   - Section headings = original gold/yellow
   - Tremolo = amber
   - MASTER = orange
   Paste as the VERY LAST CSS block.
   ========================================================= */
@media (max-width: 1024px){

  /* ---- Section headings in hamburger menu ---- */
  #mobile-nav .m-heading,
  #mobile-nav .m-sec-title{
    color: #fde68a !important;   /* restore your original heading color */
  }

  /* ---- All tappable menu items/text ---- */
  #mobile-nav a,
  #mobile-nav a:link,
  #mobile-nav a:visited,
  #mobile-nav a:hover,
  #mobile-nav a:active,
  #mobile-nav .m-item,
  #mobile-nav .m-link{
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* Keep “special” items readable */
  #mobile-nav .m-item.-special,
  #mobile-nav .m-link.-special{
    color: #fdba74 !important;   /* your existing special orange tint */
  }

  /* ---- TremoloMASTER coloring ---- */
  #mobile-nav .highlight-amber{
    color: var(--amber-300) !important;   /* Tremolo */
  }
  #mobile-nav .highlight-gold{
    color: var(--orange-500) !important; /* MASTER */
  }

  /* Make icons follow text color */
  #mobile-nav i[data-lucide],
  #mobile-nav svg{
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  /* ---- Mega dialog links on mobile (if shown) ---- */
  #mega-menu a,
  #mega-menu a:link,
  #mega-menu a:visited,
  #mega-menu a:hover,
  #mega-menu a:active{
    color:#ffffff !important;
    text-decoration:none !important;
  }
}

  /* =======================================================
   Mobile mega menu special item (AI CG Technique Wizard)
   Matches desktop: serif-ish font + orange + lightning bolt
   ======================================================= */
@media (max-width: 1024px){

  /* special mobile link */
  #mobile-nav .m-link.-special{
    color:#ea580c !important;  /* orange-600 */
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    letter-spacing:1px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:6px;
  }

  #mobile-nav .m-link.-special .bolt{
    font-size:1.1em;
    line-height:1;
  }
}

/* Style for the bolt next to special mobile menu item */
#mobile-nav .m-item.-special {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* pushes bolt to the right */
}

#mobile-nav .m-item.-special .bolt {
  margin-left: 6px;
  font-size: 1.1em;
  color: var(--amber-300); /* matches desktop gold tone */
}

    /* MOBILE MENU FIX: keep text + bolt together naturally */
.m-item {
  display: inline-flex !important;   /* keeps text and bolt side-by-side */
  align-items: center !important;
  gap: 0.25em !important;            /* small spacing */
}

/* Bolt styling */
.m-item .bolt {
  display: inline-block;
  margin-left: 0.25em;               /* exactly the spacing you want */
  font-size: 1em;                    /* matches text size */
  transform: translateY(0.5px);      /* optional slight baseline adjustment */
}

/* ===============================================
   TWINKLE — staggered for each gold star
   =============================================== */

@keyframes twinkle {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.85);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px currentColor);
  }
}

/* Apply twinkle */
#wizard-sparkle .sparkle-button .sparkle path {
  color: gold;
  fill: currentColor !important;
  stroke: currentColor !important;
  animation: twinkle 1.5s ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

/* Stagger timing */
#wizard-sparkle .sparkle-button .sparkle path:nth-of-type(1) {
  --twinkle-delay: 0s;
}
#wizard-sparkle .sparkle-button .sparkle path:nth-of-type(2) {
  --twinkle-delay: 0.35s;
}
#wizard-sparkle .sparkle-button .sparkle path:nth-of-type(3) {
  --twinkle-delay: 0.7s;
}