@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600&family=Inter:wght@400;500;600&display=swap');
  :root{--bg:#0f0c08;--ink:#f2ede2;--mut:#a8a08f;--gold:#d4b661;--gold-b:#e8c869;--line:rgba(212,182,97,.16)}
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;animation:pageIn .5s ease both}
  @keyframes pageIn{from{opacity:0}to{opacity:1}}
  @media(prefers-reduced-motion:reduce){body{animation:none}}

  .wrap{max-width:760px;margin:0 auto;padding:0 26px}
  nav{position:sticky;top:0;z-index:115;background:rgba(15,12,8,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  nav .inner{max-width:1120px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between}
  nav .brand{display:flex;align-items:center;gap:0;text-decoration:none;color:var(--ink)}
  nav .brand img{height:54px;width:auto;display:block}
  nav .brand span{font-family:'Bodoni Moda',serif;font-size:1.02rem;letter-spacing:.04em}
  nav .links{display:flex;gap:26px;align-items:center}
  nav .links a{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-decoration:none;transition:.2s}
  nav .links a:hover{color:var(--gold)}
  nav .nav-cta{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.13em;
    text-transform:uppercase;color:#17120a !important;
    background:linear-gradient(180deg,#d4c294 0%,#d4b661 55%,#b3a074 100%);
    border:1px solid rgba(216,199,154,.65);padding:11px 20px;border-radius:3px;
    box-shadow:0 1px 0 rgba(255,248,230,.35) inset,0 3px 10px rgba(0,0,0,.3);
    transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s;white-space:nowrap}
  
  .legal-hero{text-align:center;padding:70px 26px 10px}
  .legal-hero .eyebrow{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
  .legal-hero h1{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(2rem,5vw,3rem)}
  .legal-hero .eff{font-family:'Inter',sans-serif;font-size:12px;color:var(--mut);letter-spacing:.05em;margin-top:12px}
  .legal-body{padding:40px 0 80px}
  .legal-body h2{scroll-margin-top:90px}
  .legal-jump{display:flex;flex-wrap:wrap;gap:8px 10px;margin:32px 0 8px;padding:22px;
    border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.015)}
  .legal-jump a{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.03em;color:var(--mut);
    text-decoration:none;padding:6px 12px;border:1px solid var(--line);border-radius:20px;
    transition:color .2s,border-color .2s;min-height:32px;display:inline-flex;align-items:center}
  .legal-jump a:hover{color:var(--gold);border-color:var(--gold)}
  html.lightmode .legal-jump{background:rgba(20,18,14,.02)}
  html.lightmode .legal-jump a:hover{color:#7D6224;border-color:#7D6224}
  .legal-body h2{font-family:'Bodoni Moda',serif;font-weight:500;font-size:1.4rem;color:var(--gold-b);margin:36px 0 12px}
  .legal-body h3{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:26px 0 8px}
  .legal-body p{color:var(--mut);margin-bottom:14px}
  .legal-body ul{list-style:none;margin:0 0 16px}
  .legal-body li{padding:5px 0 5px 20px;position:relative;color:var(--mut)}
  .legal-body li:before{content:'';position:absolute;left:2px;top:14px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.6}
  .legal-body .intro{color:var(--ink);font-size:1.12rem;margin-bottom:24px}
  footer{border-top:1px solid var(--line);padding:42px 0;text-align:center}
  footer .f-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
  footer .f-links a{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-decoration:none}
  footer .f-links a:hover{color:var(--gold)}
  footer .f-note{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.08em;color:var(--mut)}

  @media(max-width:600px){.wrap{padding:0 20px}body{font-size:18px}}
  @media(max-width:400px){.wrap{padding:0 16px}}

  /* reading progress */
  .read-progress{position:fixed;top:0;left:0;height:2px;width:0%;z-index:60;
    background:linear-gradient(90deg,var(--gold),var(--gold-b));transition:width .1s linear}
  /* back to top */
  .to-top{position:fixed;right:20px;bottom:20px;z-index:55;width:44px;height:44px;border-radius:50%;
    background:rgba(15,12,8,.85);border:1px solid var(--line);color:var(--gold);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:17px;opacity:0;pointer-events:none;
    transition:opacity .3s,transform .3s,border-color .2s;backdrop-filter:blur(6px)}
  .to-top.show{opacity:1;pointer-events:auto}
  .to-top:hover{border-color:var(--gold);transform:translateY(-2px)}
  .compass-needle{width:22px;height:22px;transition:transform .4s cubic-bezier(.4,0,.2,1)}
  .to-top:hover .compass-needle{transform:rotate(0deg)!important}
  .to-top.pulse .compass-needle{animation:compassPulse .5s ease}
  @keyframes compassPulse{0%{transform:scale(1) rotate(0deg)}40%{transform:scale(1.35) rotate(0deg)}100%{transform:scale(1) rotate(0deg)}}
  @media(prefers-reduced-motion:reduce){.read-progress{transition:none}.to-top{transition:none}.compass-needle{transition:none}.to-top.pulse .compass-needle{animation:none}}

  /* ===== TAP TARGET ACCESSIBILITY (mobile) ===== */
  @media(max-width:900px){
    footer a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 10px;
    }
    footer .f-links,
    footer div[style*="display:flex"]{
      gap:8px !important;
      row-gap:0 !important;
    }
    .nav-cta{
      min-height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .toggle button,
    .pay-toggle button,
    button.on,
    button.off{
      min-height:44px;
    }
    a.brand{
      min-width:44px;
      min-height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .modal .m-skip{
      min-height:44px;
      padding:12px 0;
    }
  }

  /* ---------- MOBILE MENU (full-screen overlay) ---------- */
  .burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:0;
    position:relative;z-index:120}
  .burger span{display:block;width:22px;height:1.5px;background:var(--gold);
    transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .2s}
  .burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.on span:nth-child(2){opacity:0}
  .burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .m-menu{position:fixed;inset:0;background:rgba(15,12,8,.985);z-index:110;opacity:0;
    pointer-events:none;transition:opacity .32s;padding:96px 26px 34px;
    display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
  .m-menu.on{opacity:1;pointer-events:auto}
  .m-menu a.m-link{display:block;font-family:'Bodoni Moda',serif;font-size:25px;font-weight:400;
    color:var(--ink);text-decoration:none;padding:15px 0;border-bottom:1px solid var(--line);
    text-align:center;opacity:0;transform:translateY(12px);
    transition:opacity .4s,transform .4s;min-height:44px}
  .m-menu.on a.m-link{opacity:1;transform:none}
  .m-menu.on a.m-link:nth-of-type(1){transition-delay:.06s}
  .m-menu.on a.m-link:nth-of-type(2){transition-delay:.12s}
  .m-menu.on a.m-link:nth-of-type(3){transition-delay:.18s}
  .m-menu.on a.m-link:nth-of-type(4){transition-delay:.24s}
  .m-menu .m-cta{display:flex;align-items:center;justify-content:center;margin-top:22px;
    font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
    color:#17120a;text-decoration:none;background:linear-gradient(180deg,#d4c294 0%,#d4b661 55%,#b3a074 100%);
    padding:17px;border-radius:3px;font-weight:600;min-height:44px;
    opacity:0;transform:translateY(12px);transition:opacity .4s .3s,transform .4s .3s}
  .m-menu.on .m-cta{opacity:1;transform:none}
  .m-soc{display:flex;gap:14px;justify-content:center;margin-top:26px;padding-top:22px;
    border-top:1px solid var(--line)}
  .m-soc a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--gold);text-decoration:none;
    transition:border-color .25s,color .25s}
  .m-soc a:hover{border-color:var(--gold);color:var(--gold-b)}
  .m-soc svg{width:17px;height:17px;fill:currentColor}
  body.menu-open{overflow:hidden}
  @media(max-width:720px){
    .burger{display:flex}
    nav .links{display:none}
  }
  @media(min-width:721px){
    .m-menu{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    .m-menu,.m-menu a.m-link,.m-menu .m-cta,.burger span{transition:none}
  }

  
  /* ---------- DOOR BUTTONS ---------- */
  .btn,.nav-cta,.ed-cta,.m-cta,.m-btn,.readiness{position:relative;display:inline-flex;align-items:center;
    justify-content:center;font-family:'Bodoni Moda',serif!important;font-size:15px!important;
    font-weight:500!important;letter-spacing:.015em!important;text-transform:none!important;
    min-height:46px;padding:13px 30px;border:none;border-radius:3px;cursor:pointer;
    text-decoration:none;overflow:hidden;isolation:isolate;background:#0d0a06;color:#191307;
    transition:color .32s ease;-webkit-tap-highlight-color:transparent;box-shadow:none!important}
  .btn::before,.btn::after,.nav-cta::before,.nav-cta::after,
  .ed-cta::before,.ed-cta::after,.m-cta::before,.m-cta::after,
  .m-btn::before,.m-btn::after,.readiness::before,.readiness::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:100%;z-index:-1;
    background:linear-gradient(103deg,#6f5620 0%,#ac8a32 14%,#d0a945 30%,#fff3c6 46%,
      #fffbe6 50%,#e8c869 56%,#c9a340 72%,#96762a 88%,#6b521d 100%);
    transition:transform .46s cubic-bezier(.4,0,.2,1)}
  .btn::before,.nav-cta::before,.ed-cta::before,.m-cta::before,.m-btn::before,.readiness::before{clip-path:inset(0 48.8% 0 0);transform:translateX(0)}
  .btn::after,.nav-cta::after,.ed-cta::after,.m-cta::after,.m-btn::after,.readiness::after{clip-path:inset(0 0 0 48.8%);transform:translateX(0)}
  .btn:hover::before,.nav-cta:hover::before,.ed-cta:hover::before,.m-cta:hover::before,.m-btn:hover::before,.readiness:hover::before{transform:translateX(-2px)}
  .btn:hover::after,.nav-cta:hover::after,.ed-cta:hover::after,.m-cta:hover::after,.m-btn:hover::after,.readiness:hover::after{transform:translateX(2px)}
  .btn.go::before,.nav-cta.go::before,.ed-cta.go::before,.m-cta.go::before,.m-btn.go::before,.readiness.go::before{transform:translateX(-100%)}
  .btn.go::after,.nav-cta.go::after,.ed-cta.go::after,.m-cta.go::after,.m-btn.go::after,.readiness.go::after{transform:translateX(100%)}
  .btn.go,.nav-cta.go,.ed-cta.go,.m-cta.go,.m-btn.go,.readiness.go{color:#e8c869}
  .nav-cta{min-height:44px;padding:11px 22px}
  @media(prefers-reduced-motion:reduce){
    .btn::before,.btn::after,.nav-cta::before,.nav-cta::after,
    .ed-cta::before,.ed-cta::after,.m-cta::before,.m-cta::after{transition:none}
  }

  
  /* back to top: utility control, gets a quiet metal fill on hover */
  .to-top{position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
  .to-top::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(103deg,#6f5620 0%,#ac8a32 14%,#d0a945 30%,#fff3c6 46%,
      #fffbe6 50%,#e8c869 56%,#c9a340 72%,#96762a 88%,#6b521d 100%);
    opacity:0;transition:opacity .35s}
  .to-top:hover::before{opacity:1}
  .to-top:hover{color:#191307}
  @media(prefers-reduced-motion:reduce){.to-top::before{transition:none}}

  
  /* label must ride above both leaves and stay centred */
  .btn,.nav-cta,.ed-cta,.m-cta,.m-btn,.readiness{text-align:center!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .ed-cta{display:flex!important}

  
  /* menu open: lift the whole nav above the overlay so the burger stays tappable */
  body.menu-open nav{z-index:130!important}
  body.menu-open nav .links{pointer-events:none}
  .m-menu{padding-top:104px}

  
  /* ---------- CONTACT BLOCK ---------- */
  .f-contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;
    margin:0 auto 20px;padding-bottom:20px;border-bottom:1px solid var(--line);max-width:620px}
  .f-contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 4px;
    font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.02em;color:var(--gold);
    text-decoration:none;transition:color .25s}
  .f-contact a:hover{color:#e8c869;text-decoration:underline}
  .f-contact svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
  .f-contact .f-loc{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;
    font-size:13px;color:var(--mut);min-height:44px}
  @media(max-width:560px){.f-contact{flex-direction:column;gap:2px}}

  
  /* ---------- READABILITY: sized for older eyes ---------- */
  /* small UI text carried the most strain, so it gains the most */
  nav .links a{font-size:15px!important;letter-spacing:.05em!important}
  .eyebrow{font-size:13px!important;letter-spacing:.24em!important}
  .f-links a{font-size:13.5px!important}
  .f-note{font-size:12.5px!important;line-height:1.7!important}
  .f-contact a,.f-contact .f-loc{font-size:15px!important}
  .grp li,.tnode .pbody li{font-size:14px!important;line-height:1.68!important}
  .grp-h{font-size:11px!important;letter-spacing:.15em!important}
  .grp-h .cnt{font-size:11px!important}
  .ed-sub{font-size:12.5px!important;letter-spacing:.04em!important}
  .price-lane{font-size:11px!important;letter-spacing:.11em!important}
  .price-was{font-size:13.5px!important}
  .pay-amt{font-size:12.5px!important}
  .toggle button{font-size:12px!important;letter-spacing:.07em!important}
  .tnode .pnum{font-size:11px!important;letter-spacing:.18em!important}
  .tnode .pgap{font-size:14px!important;line-height:1.6!important}
  .m-menu a.m-link{font-size:26px!important}
  .m-cta,.btn,.nav-cta,.ed-cta,.m-btn,.readiness{font-size:17.5px!important}
  nav .links a.nav-cta{font-size:15.5px!important}
  /* body copy: modest lift plus more air between lines */
  body{font-size:19.5px}
  p{line-height:1.75}
  .lead{font-size:1.2rem!important;line-height:1.7!important}
  /* stop long lines: the eye loses its place past ~70 characters */
  p,.lead{max-width:70ch}
  .thread-head p,.pillars-head p,.head p{margin-left:auto;margin-right:auto}
  @media(max-width:560px){
    nav .links a{font-size:13.5px!important}
    .grp li,.tnode .pbody li{font-size:13.5px!important}
  }

  
  /* gold fills always carry dark text */
  .readiness{color:#191307!important}
  .readiness.go{color:#e8c869!important}
  .to-top:hover{color:#191307!important}
  .toggle button.on{color:#191307!important}

  
  
  /* ---- fewer hard rules: let spacing separate sections instead ---- */
  .beat{border-top:none!important}
  .band{border-top:none!important}
  .final{border-top:none!important}
  .f-contact{border-bottom:none!important;padding-bottom:8px}
  footer{border-top:none!important}
  /* keep only the two that mark a genuine change of mode, and soften them
     so they read as a seam rather than a cut */
  .thread-sec{border-bottom:none!important}
  .faq-section{border-top:none!important}
  .thread-sec,.faq-section,footer{position:relative}
  .thread-sec:after,.faq-section:before,footer:before{
    content:"";position:absolute;left:50%;transform:translateX(-50%);
    width:min(340px,72%);height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,182,97,.32),transparent)}
  .thread-sec:after{bottom:0}
  .faq-section:before{top:0}
  footer:before{top:0}
  /* give the sections that lost a rule a little more air so the page still breathes */
  .beat{padding-top:8px}
  .band{padding-top:10px}

  

  
  /* ================= ATMOSPHERE =================
     Three layers, all fixed so they sit behind the page as it scrolls:
     1. depth  - large warm pools that give the black dimension
     2. chart  - a faint ruled grid, like paper under lamplight
     3. grain  - fine tooth so nothing looks digitally flat
     Tuned to be felt rather than noticed. Turn the opacity numbers
     down if it ever competes with the content.
  ================================================ */
  body{position:relative;background-color:#0d0a07}

  /* layer 1: depth */
  body:before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(ellipse 90% 62% at 12% -6%,  rgba(214,172,88,.20), transparent 58%),
      radial-gradient(ellipse 72% 55% at 96% 24%,  rgba(196,158,92,.15), transparent 60%),
      radial-gradient(ellipse 84% 60% at 50% 112%, rgba(184,148,86,.14), transparent 62%),
      radial-gradient(ellipse 60% 44% at 78% 66%,  rgba(212,182,97,.09), transparent 64%);
  }

  /* layer 2: chart ruling, plus a slow drifting warm light */
  .atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .atmos-grid{position:absolute;inset:-10%;
    background-image:
      linear-gradient(rgba(212,182,97,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(212,182,97,.055) 1px, transparent 1px),
      linear-gradient(rgba(212,182,97,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(212,182,97,.028) 1px, transparent 1px);
    background-size:172px 172px,172px 172px,43px 43px,43px 43px;
    -webkit-mask:radial-gradient(ellipse 78% 68% at 50% 42%, #000 12%, transparent 76%);
            mask:radial-gradient(ellipse 78% 68% at 50% 42%, #000 12%, transparent 76%);
    opacity:.85}
  /* a wide, slow band of light crossing the page */
  .atmos-glow{position:absolute;width:150%;height:62%;left:-25%;top:8%;
    background:radial-gradient(ellipse at center, rgba(232,200,105,.11), transparent 66%);
    filter:blur(46px);animation:driftGlow 34s ease-in-out infinite alternate}
  @keyframes driftGlow{
    0%{transform:translate3d(-7%,-4%,0) rotate(-2deg)}
    100%{transform:translate3d(9%,8%,0) rotate(2deg)}}

  /* layer 3: grain */
  body:after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:
      repeating-linear-gradient(0deg,  rgba(255,246,220,.035) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(255,246,220,.022) 0 1px, transparent 1px 4px);
  }

  /* keep real content above all three */
  nav{z-index:115}
  section,footer,main,.wrap,.hero{position:relative;z-index:1}
  .m-menu{z-index:110}
  .asst,.orb-wrap{z-index:200}

  @media(prefers-reduced-motion:reduce){.atmos-glow{animation:none}}
  @media(max-width:560px){
    .atmos-grid{background-size:128px 128px,128px 128px,32px 32px,32px 32px}
  }

  
  /* ---- section seams: a small mark rather than a line ---- */
  .thread-sec:after,.faq-section:before,footer:before{
    background:none!important;height:auto!important;width:auto!important;
    content:"\2726";font-size:11px;color:rgba(212,182,97,.5);
    line-height:1;letter-spacing:0}
  .thread-sec:after{bottom:-6px}
  .faq-section:before{top:-6px}
  footer:before{top:-6px}
  /* faint rules flanking the mark, fading out at both ends */
  .thread-sec:before,.faq-section:after,footer:after{
    content:"";position:absolute;left:50%;transform:translateX(-50%);
    width:min(300px,64%);height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,182,97,.26) 22%,
      transparent 46%,transparent 54%,rgba(212,182,97,.26) 78%,transparent);
    pointer-events:none}
  .thread-sec:before{bottom:0}
  .faq-section:after{top:0}
  footer:after{top:0}

  
/* ============================================================
   THE ORB
   A living mark: breathing, drifting scan lines, orbiting ring,
   specular sweep. Speeds up while thinking.
   ============================================================ */
  .orb-wrap{position:fixed;right:22px;bottom:22px;z-index:2147483001;width:76px;height:76px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;background:none;border:none;padding:0}
  .orb{position:absolute;inset:0;border-radius:50%;
    background:
      radial-gradient(circle at 34% 30%, rgba(255,247,214,1) 0%, rgba(240,212,124,.9) 20%, rgba(212,182,97,.55) 46%, rgba(120,96,44,.9) 74%, rgba(46,36,18,.98) 100%);
    box-shadow:0 0 0 2px rgba(255,238,180,.55), 0 0 0 5px rgba(21,17,11,.9), 0 0 34px rgba(232,200,105,.55), 0 12px 34px rgba(0,0,0,.5)}
  @keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 1px rgba(212,182,97,.34),0 0 22px rgba(212,182,97,.2),0 10px 30px rgba(0,0,0,.55)}
    50%{transform:scale(1.045);box-shadow:0 0 0 1px rgba(212,182,97,.5),0 0 34px rgba(212,182,97,.34),0 10px 30px rgba(0,0,0,.55)}}

  /* holographic scan lines drifting through the sphere */
  .orb-scan{position:absolute;inset:5px;border-radius:50%;overflow:hidden;opacity:.5;
    -webkit-mask:radial-gradient(circle at 50% 50%,#000 58%,transparent 74%);
            mask:radial-gradient(circle at 50% 50%,#000 58%,transparent 74%)}
  .orb-scan:before{content:'';position:absolute;left:-20%;right:-20%;top:-60%;bottom:-60%;
    background:repeating-linear-gradient(0deg,rgba(232,200,105,.5) 0 1px,transparent 1px 5px);
    animation:drift 3.6s linear infinite}
  @keyframes drift{0%{transform:translateY(0)}100%{transform:translateY(5px)}}

  /* specular sheen that rotates like light moving across glass */
  .orb-sheen{position:absolute;inset:0;border-radius:50%;overflow:hidden;
    -webkit-mask:radial-gradient(circle at 50% 50%,#000 60%,transparent 76%);
            mask:radial-gradient(circle at 50% 50%,#000 60%,transparent 76%)}
  .orb-sheen:before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:conic-gradient(from 0deg,transparent 0deg,rgba(255,248,220,.42) 42deg,transparent 96deg,transparent 360deg);
    animation:sweep 6.5s linear infinite}
  @keyframes sweep{to{transform:rotate(360deg)}}

  /* two counter rotating orbit rings */
  .orb-ring{position:absolute;border-radius:50%;border:1px solid rgba(212,182,97,.3);
    animation:spin 9s linear infinite}
  .orb-ring.r1{inset:-5px;border-top-color:rgba(255,243,198,.75);border-bottom-color:transparent}
  .orb-ring.r2{inset:2px;border-left-color:rgba(232,200,105,.6);border-right-color:transparent;
    animation-duration:6s;animation-direction:reverse}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* the premium chat mark, floating inside the sphere */
  .orb-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    animation:bob 4.2s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
  .orb-mark svg{width:31px;height:31px;fill:none;stroke:#fff6da;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 5px rgba(255,243,198,.85)) drop-shadow(0 0 12px rgba(212,182,97,.5))}
  .orb-mark .dot{fill:#fff6da;stroke:none}

  /* thinking: everything quickens */
  .orb-wrap.think .orb{animation-duration:1.1s}
  .orb-wrap.think .orb-sheen:before{animation-duration:1.5s}
  .orb-wrap.think .orb-ring.r1{animation-duration:2.2s}
  .orb-wrap.think .orb-ring.r2{animation-duration:1.6s}
  .orb-wrap.think .orb-scan:before{animation-duration:1.1s}

  /* open: mark becomes a close cross */
  .orb-wrap .m-close{display:none}
  .orb-wrap.open .m-chat{display:none}
  .orb-wrap.open .m-close{display:block}
  .orb-wrap:hover .orb{transform:scale(1.06)}
  .orb-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:50%}

/* ============================================================
   PANEL
   ============================================================ */
  .asst{position:fixed;right:22px;bottom:112px;z-index:2147483000;width:min(392px,calc(100vw - 44px));
    max-height:min(650px,calc(100vh - 150px));background:#15110b;border-radius:7px;
    border:1px solid rgba(212,182,97,.3);box-shadow:0 26px 64px rgba(0,0,0,.66),0 0 40px rgba(212,182,97,.07);
    display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(14px) scale(.97);
    pointer-events:none;transition:opacity .36s cubic-bezier(.4,0,.2,1),transform .36s cubic-bezier(.4,0,.2,1)}
  .asst.on{opacity:1;transform:none;pointer-events:auto}
  .asst-top{background:#15110b;padding:16px 18px;border-bottom:1px solid rgba(212,182,97,.16);
    background:linear-gradient(180deg,#1e1811,#15110b);position:relative;overflow:hidden}
  .asst-top:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,200,105,.6),transparent);
    animation:scanline 3.4s ease-in-out infinite}
  @keyframes scanline{0%,100%{opacity:.25}50%{opacity:.85}}
  .asst-top h3{font-family:'Bodoni Moda',serif;font-size:17px;font-weight:500;color:#e8c869}
  .asst-top p{font-family:'Inter',sans-serif;font-size:12px;color:var(--mut);margin-top:4px;line-height:1.5}
  .asst-body{background:#15110b;flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-height:130px;scroll-behavior:smooth}
  /* breathing room so the newest answer can rise to the top of the view */
  #tail{flex:0 0 auto;height:0;transition:height .18s ease}
  .msg{font-family:'Inter',sans-serif;font-size:14px;line-height:1.65;max-width:88%;padding:11px 14px;
    border-radius:4px;white-space:pre-wrap;animation:rise .32s cubic-bezier(.4,0,.2,1)}
  @keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  .msg.bot{background:#1e1811;color:var(--ink);align-self:flex-start;border-left:2px solid rgba(212,182,97,.5)}
  .msg.you{background:rgba(212,182,97,.14);color:var(--ink);align-self:flex-end}
  .msg.warn{background:#241a10;border-left:2px solid #c98f3f}
  .typing{display:flex;gap:5px;align-self:flex-start;padding:13px 15px;background:#1e1811;
    border-radius:4px;border-left:2px solid rgba(212,182,97,.5)}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.4;
    animation:pulse 1.3s ease-in-out infinite}
  .typing i:nth-child(2){animation-delay:.18s}
  .typing i:nth-child(3){animation-delay:.36s}
  @keyframes pulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
  #panel .chips{background:#15110b;display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;max-width:none;margin:0;width:auto;justify-content:flex-start}
  .chip{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.35;color:#e8c869;background:none;
    border:1px solid rgba(212,182,97,.34);border-radius:100px;padding:9px 14px;min-height:44px;
    cursor:pointer;transition:background .25s,border-color .25s;text-align:left}
  .chip:hover{background:rgba(212,182,97,.12);border-color:rgba(212,182,97,.6)}
  .askrow{background:#15110b;display:flex;gap:8px;padding:0 14px 12px}
  .askrow input{flex:1;font-family:'Inter',sans-serif;font-size:15px;background:#1c1710;
    border:1px solid rgba(212,182,97,.22);border-radius:3px;color:var(--ink);padding:12px;min-height:46px}
  .askrow input:focus{outline:none;border-color:rgba(212,182,97,.6)}
  .asksend{font-family:'Bodoni Moda',serif;font-size:15px;color:#191307;border:none;border-radius:3px;
    padding:0 18px;min-height:46px;cursor:pointer;
    background:linear-gradient(103deg,#ac8a32,#d0a945 30%,#fff3c6 50%,#e8c869 62%,#96762a)}
  .asst-note{background:#15110b;font-family:'Inter',sans-serif;font-size:11px;color:#8d8676;line-height:1.6;
    padding:11px 18px 12px;border-top:1px solid rgba(212,182,97,.1);
    display:flex;flex-direction:column;gap:2px}
  .asst-note .note-line{display:block}
  .asst-note .note-mail{align-self:flex-start;display:inline-flex;align-items:center;
    min-height:46px;color:#c9ad63;text-decoration:underline;text-underline-offset:2px;
    font-size:11.5px;margin-top:-2px}
  .asst-note a{color:#c9ad63;text-decoration:underline;text-underline-offset:2px}
  /* the tap target comes from padding, not a tall line box */
  .asst-note a{padding:2px 1px}
  .form-row{display:flex;flex-direction:column;gap:9px;padding:0 18px 14px}
  .form-row input,.form-row textarea{font-family:'Inter',sans-serif;font-size:15px;background:#1c1710;
    border:1px solid rgba(212,182,97,.22);border-radius:3px;color:var(--ink);padding:12px;min-height:46px}
  .form-row textarea{min-height:84px;resize:vertical}
  .form-row label{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
  .fallback{font-family:'Inter',sans-serif;font-size:12px;color:var(--mut);line-height:1.7;padding:0 18px 14px}
  .fallback a{color:#e8c869}
  @media(max-width:560px){.asst{right:12px;left:12px;width:auto;bottom:96px;max-height:min(64vh,470px)}.orb-wrap{right:16px;bottom:16px}}
  @media(prefers-reduced-motion:reduce){
    .orb,.orb-scan:before,.orb-sheen:before,.orb-ring,.orb-mark,.asst-top:after,.typing i,.msg{animation:none!important}
    .asst{transition:none}
  }

  /* ---- mobile: use the real visible height, not the reported one ---- */
  @media(max-width:560px){
    .asst{
      right:10px;left:10px;width:auto;
      bottom:88px;
      top:auto;
      max-height:min(64dvh,470px);
      max-height:min(64vh,470px);
    }
    @supports (height: 100dvh){
      .asst{max-height:min(64dvh,470px)}
    }
    /* the chat area gets priority over everything else */
    .asst-body{min-height:120px}
    /* chips scroll sideways instead of stacking five rows deep */
    #panel .chips{background:#15110b;flex-wrap:nowrap;overflow-x:auto;padding-bottom:12px;max-width:none;margin:0;width:auto;justify-content:flex-start;
      scrollbar-width:none;-webkit-overflow-scrolling:touch}
    #panel .chips::-webkit-scrollbar{display:none}
    #panel .chip{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:9px 13px}
    /* trim the chrome so the conversation gets the room */
    .asst-top{background:#15110b;padding:12px 16px}
    .asst-top h3{font-size:15.5px}
    .asst-top p{font-size:11px;margin-top:2px}
    .asst-note{background:#15110b;padding:8px 16px 10px;font-size:10.5px;line-height:1.5}
    .asst-note .note-mail{min-height:46px;font-size:11px}
    .askrow{background:#15110b;padding:0 12px 10px}
    .askrow input{min-height:44px;font-size:16px}
    .asksend{min-height:44px;padding:0 15px;font-size:14px}
    .orb-wrap{right:14px;bottom:14px;width:64px;height:64px}
    .orb-mark svg{width:26px;height:26px}
  }
  @media(max-width:560px) and (max-height:700px){
    /* short phones: claw back more */
    .asst{bottom:80px;max-height:min(68dvh,430px)}
    .asst-body{min-height:100px}
    .asst-top p{display:none}
  }

  
  /* chips sit in a fixed rail so the panel never reflows underneath them */
  #panel .chips{min-height:62px;align-items:center;max-width:none;margin:0;width:auto}
  @media(max-width:560px){#panel .chips{min-height:58px;max-width:none;margin:0;width:auto}}
  #panel .chip{height:44px;display:inline-flex;align-items:center}

  /* ---------- voice controls ---------- */
  .voice-row{background:#15110b;display:flex;align-items:center;gap:6px;padding:0 14px 8px}
  .vbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:46px;padding:0 14px;border-radius:100px;cursor:pointer;
    background:none;border:1px solid rgba(212,182,97,.28);
    font-family:'Inter',sans-serif;font-size:11.5px;color:#c9ad63;
    transition:background .22s,border-color .22s,color .22s}
  .vbtn:hover{background:rgba(212,182,97,.1);border-color:rgba(212,182,97,.5)}
  .vbtn.on{background:rgba(212,182,97,.17);border-color:rgba(212,182,97,.62);color:#e8c869}
  .vbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  .vbtn.listening{border-color:#e8c869;animation:micPulse 1.2s ease-in-out infinite}
  @keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,200,105,.4)}
    50%{box-shadow:0 0 0 5px rgba(232,200,105,0)}}
  .vbtn[hidden]{display:none}
  @media(prefers-reduced-motion:reduce){.vbtn.listening{animation:none}}

  
  /* visible close control in the panel header */
  .asst-top{position:relative;padding-right:62px}
  .asst-x{position:absolute;top:50%;right:12px;transform:translateY(-50%);
    width:46px;height:46px;min-width:46px;min-height:46px;box-sizing:border-box;border-radius:50%;cursor:pointer;
    background:rgba(212,182,97,.1);border:1px solid rgba(212,182,97,.4);
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .2s,border-color .2s}
  .asst-x:hover{background:rgba(212,182,97,.22);border-color:rgba(212,182,97,.7)}
  .asst-x svg{width:16px;height:16px;stroke:#E8CE7C;stroke-width:2;
    stroke-linecap:round;fill:none}
  
  .orb-wrap:not(.open) .orb{animation:orbPulse 3.6s ease-in-out infinite}
  @keyframes orbPulse{0%,100%{box-shadow:0 0 0 2px rgba(255,238,180,.55),0 0 0 5px rgba(21,17,11,.9),0 0 34px rgba(232,200,105,.55),0 12px 34px rgba(0,0,0,.5)}
    50%{box-shadow:0 0 0 2px rgba(255,238,180,.85),0 0 0 5px rgba(21,17,11,.9),0 0 52px rgba(232,200,105,.85),0 12px 34px rgba(0,0,0,.5)}}
  @media(prefers-reduced-motion:reduce){.orb-wrap:not(.open) .orb{animation:none}}
  
  /* ================= LIGHT MODE (opt-in, dark is canonical) ================= */
  .mode-btn{width:44px;height:44px;min-width:44px;border-radius:50%;cursor:pointer;
    background:none;border:1px solid rgba(212,182,97,.34);display:inline-flex;
    align-items:center;justify-content:center;flex:0 0 auto;
    transition:background .2s,border-color .2s}
  .mode-btn:hover{background:rgba(212,182,97,.12);border-color:rgba(212,182,97,.6)}
  .mode-btn svg{width:17px;height:17px;stroke:var(--gold);stroke-width:1.7;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .mode-btn .ic-moon{display:none}
  html.lightmode .mode-btn .ic-sun{display:none}
  html.lightmode .mode-btn .ic-moon{display:block}

  html.lightmode .beat, html.lightmode .band:not(.thread-sec),
  html.lightmode .faq-section, html.lightmode .dodont, html.lightmode .mission,
  html.lightmode .story, html.lightmode .faq-cta, html.lightmode .what,
  html.lightmode .free-resource, html.lightmode .editions-section,
  html.lightmode .closer, html.lightmode .pillars-section,
  html.lightmode .booking, html.lightmode .next, html.lightmode .legal-body{
    background:#F2EDE2}
  html.lightmode :is(.beat,.band:not(.thread-sec),.faq-section,.dodont,.mission,.story,.faq-cta,.what,.free-resource,.editions-section,.closer,.pillars-section,.booking,.next,.legal-body)
    :is(h1,h2,h3,h4,.q,summary,strong){color:#181410}
  html.lightmode :is(.beat,.band:not(.thread-sec),.faq-section,.dodont,.mission,.story,.faq-cta,.what,.free-resource,.editions-section,.closer,.pillars-section,.booking,.next,.legal-body)
    :is(p,li,.a,.faq-a,td,.lead){color:#3A3529}
  html.lightmode :is(.beat,.band:not(.thread-sec),.faq-section,.dodont,.mission,.story,.faq-cta,.what,.free-resource,.editions-section,.closer,.pillars-section,.booking,.next,.legal-body)
    :is(.eyebrow,.faq-cat){color:#7D6224}
  html.lightmode :is(.beat,.band:not(.thread-sec),.faq-section,.legal-body) a:not(.btn){color:#7D6224}
  html.lightmode .faq-item{border-color:rgba(125,98,36,.22)}
  html.lightmode .quote{background:#FAF6EC;border-color:rgba(125,98,36,.22)}
  html.lightmode .quote p{color:#2C2820}
  html.lightmode .quote .who{color:#5C5648}
  /* dark cards (editions, metallic) keep their own colors on the cream */
  
  /* ---- light mode: hard overrides for stubborn elements ---- */
  html.lightmode .btn-gold{background:linear-gradient(180deg,#d4c294 0%,#d4b661 55%,#b3a074 100%) !important;
    color:#17120a !important;border:1px solid rgba(125,98,36,.55) !important}
  html.lightmode :is(.beat,.band:not(.thread-sec),.faq-section,.dodont,.mission,.story,.faq-cta,.what,.free-resource,.closer,.pillars-section,.booking,.next,.legal-body)
    .btn:not(.btn-gold){color:#181410 !important;border:1px solid #7D6224 !important;background:transparent}
  html.lightmode .pillars-section > .wrap > :is(h2,h3,p){color:#181410}
  html.lightmode .pillars-section .pillar :is(li,p,h3,h4){color:#F2EDE2 !important}
  html.lightmode .editions-section .ed{background:#171310 !important}
  html.lightmode .editions-section .ed :is(li,p,h3,h4,.desc){color:inherit}
  html.lightmode :is(.booking,.next) :is(h3,h4){color:#181410 !important}
  html.lightmode :is(.booking,.next) p{color:#3A3529 !important}
  html.lightmode :is(.what,.free-resource) p{color:#3A3529 !important}
  html.lightmode :is(.what,.free-resource) :is(h2,h3,h4){color:#181410 !important}
  
  /* ---- light mode: card surfaces lighten with their sections ---- */
  html.lightmode :is(.what,.free-resource) .card{background:#FAF6EC;border-color:rgba(125,98,36,.22)}
  html.lightmode :is(.next,.booking) .step{background:#FAF6EC;border-color:rgba(125,98,36,.22)}
  html.lightmode .closer .readiness{color:#7D6224 !important;border-color:#7D6224 !important;background:transparent}