:root{
  --midnight:#0B1430; --deep:#13204A; --twilight:#2A3F7A; --dusk:#4F6BB0;
  --sky:#A9C6EE; --mist:#C9D7EE; --star:#F7F5EE; --palegold:#F3DFA2;
  --gold:#E6B94F; --ember:#B9862A;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:400;font-size:1.05rem;line-height:1.7;color:var(--star);
  background:radial-gradient(1200px 700px at 70% -10%,var(--glow1) 0%,transparent 60%),
             radial-gradient(900px 600px at 0% 30%,var(--glow2) 0%,transparent 55%),
             linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 60%,var(--bg-bot) 100%);
  background-color:var(--bg-top);min-height:100vh}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
a{color:var(--sky)} a:hover{color:var(--palegold)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:.01em;line-height:1.15;margin:.2em 0 .5em}
h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:300}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:1.5rem}
p{margin:.4em 0 1em;color:var(--mist)}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.demo-banner{background:var(--banner-bg);border-bottom:1px solid var(--banner-line);color:var(--banner-ink);
  text-align:center;font-size:.85rem;padding:.4rem 1rem}
header.site{position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);background:var(--header-bg);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.8rem;padding-bottom:.8rem;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:1.5rem;color:var(--star);text-decoration:none;display:flex;align-items:center;gap:.55rem}
.brand svg{width:30px;height:30px}
.brand small{display:block;font-family:var(--sans);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
nav.main{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.95rem}
nav.main a{color:var(--mist);text-decoration:none;padding:.2rem 0;border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--hover);border-bottom-color:var(--gold-line)}
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.98rem;border-radius:999px;padding:.72rem 1.4rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.25s}
.btn-gold{background:linear-gradient(180deg,#f0c968,var(--gold));color:var(--midnight);box-shadow:0 0 22px rgba(230,185,79,.35)}
.btn-gold:hover{color:var(--midnight);box-shadow:0 0 34px rgba(243,223,162,.55)}
.btn-ghost{background:transparent;color:var(--star);border-color:var(--ghost-line)}
.btn-ghost:hover{border-color:var(--gold-line);color:var(--hover)}
.btn small{font-weight:400;opacity:.75}
.demo-tag{display:inline-block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;background:var(--tag-bg);
  color:var(--tag-ink);border:1px dashed var(--tag-line);border-radius:6px;padding:.05rem .4rem;margin-left:.4rem;vertical-align:middle}
.hero{padding:5.5rem 0 4rem;text-align:center}
.hero .eyebrow,.eyebrow{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.hero p.lead{font-size:1.2rem;max-width:640px;margin:0 auto 2rem;color:var(--mist)}
.hero .ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.glow-text{text-shadow:var(--glow-shadow)}
section{padding:3.5rem 0}
.divider{display:block;margin:0 auto;width:min(520px,80%);height:40px;opacity:var(--divider-op)}
.grid{display:grid;gap:1.3rem}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:linear-gradient(180deg,var(--card1),var(--card2));border:1px solid var(--card-line);
  border-radius:20px;padding:1.6rem;box-shadow:var(--card-shadow)}
.card h3{margin-top:0}
.card .icon{width:44px;height:44px;margin-bottom:.4rem}
.center{text-align:center}
.muted{color:var(--muted);opacity:var(--muted-op);font-size:.92rem}
.pill{display:inline-block;font-size:.75rem;border:1px solid var(--ghost-line);border-radius:999px;padding:.1rem .6rem;color:var(--sky);margin:.1rem .2rem .1rem 0}
/* pricing */
.toggle{display:inline-flex;background:var(--surface);border:1px solid var(--surface-line);border-radius:999px;padding:.25rem;margin:1rem auto 2rem}
.toggle button{background:none;border:0;color:var(--mist);font:inherit;padding:.45rem 1.1rem;border-radius:999px;cursor:pointer}
.toggle button.on{background:var(--gold);color:var(--midnight);font-weight:600}
.tier{position:relative;display:flex;flex-direction:column}
.tier.featured{border-color:rgba(230,185,79,.6);box-shadow:0 0 45px rgba(230,185,79,.18)}
.tier .badge{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--midnight);font-size:.75rem;font-weight:600;
  padding:.15rem .8rem;border-radius:999px;letter-spacing:.06em}
.price{font-family:var(--serif);font-size:3rem;color:var(--star);line-height:1}
.price span{font-family:var(--sans);font-size:1rem;color:var(--mist)}
.tier ul{list-style:none;padding:0;margin:1rem 0 1.5rem;flex:1}
.tier li{padding:.35rem 0 .35rem 1.6rem;position:relative;color:var(--mist);font-size:.97rem}
.tier li::before{content:"✦";position:absolute;left:0;color:var(--gold-deco)}
/* forms */
form.signup{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;max-width:560px;margin:1rem auto}
form.signup input{flex:1 1 260px;padding:.8rem 1.1rem;border-radius:999px;border:1px solid var(--ghost-line);background:var(--field-bg);color:var(--star);font:inherit}
form.signup input::placeholder{color:var(--muted);opacity:.8}
form.signup input:focus{outline:2px solid var(--gold);outline-offset:2px}
/* star ladder */
.ladder{max-width:760px;margin:0 auto}
.ladder svg{width:100%;height:auto}
.module{margin:2.2rem 0}
.module h3 .count{font-family:var(--sans);font-size:.8rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-left:.6rem}
.levels{display:flex;flex-wrap:wrap;gap:.6rem}
.level{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--surface-line);border-radius:999px;padding:.35rem .9rem .35rem .5rem;font-size:.95rem}
.level i{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 0 10px currentColor}
/* tracks / lessons */
.track{display:grid;grid-template-columns:52px 1fr auto;gap:1rem;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.track:last-child{border-bottom:0}
.track .star{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(243,223,162,.35),transparent 70%)}
.track h4{margin:0;font-size:1.25rem}
.track .meta{font-size:.85rem;color:var(--sky)}
.track .actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.track .actions .btn{padding:.45rem .9rem;font-size:.85rem}
.locked{opacity:.55}
@media (max-width:640px){.track{grid-template-columns:40px 1fr}.track .actions{grid-column:1/-1;justify-content:flex-start}}
.player{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--gold-line);border-radius:18px;padding:1rem 1.2rem}
.player audio{flex:1 1 260px;min-width:220px}
details{background:var(--card2);border:1px solid var(--card-line);border-radius:14px;padding:1rem 1.2rem;margin:.7rem 0}
details summary{cursor:pointer;font-family:var(--serif);font-size:1.3rem;color:var(--star)}
.notice{border-left:3px solid var(--gold-deco);background:var(--notice-bg);padding:1rem 1.2rem;border-radius:0 12px 12px 0;color:var(--mist)}
.sidebar-layout{display:grid;grid-template-columns:220px 1fr;gap:2rem}
.sidebar a{display:block;padding:.45rem .8rem;border-radius:10px;color:var(--mist);text-decoration:none}
.sidebar a[aria-current=page],.sidebar a:hover{background:var(--sidebar-hl,rgba(169,198,238,.1));color:var(--hover)}
/* Grid/flex children may shrink below their content's min-content width, so long lines and players can't push the page wider than the screen. */
.sidebar-layout>*,.track>*{min-width:0}
.track h4,.track .meta{overflow-wrap:anywhere}
.player audio{min-width:min(220px,100%);max-width:100%}
/* Tablet two-column (iPad portrait 768-834px): narrower sidebar, smaller links. Phones (<700px) stack. */
@media (min-width:700px) and (max-width:1023px){.sidebar-layout{grid-template-columns:180px minmax(0,1fr);gap:1.25rem}.sidebar a{font-size:.95rem;padding:.4rem .65rem}.sidebar .eyebrow{letter-spacing:.12em;white-space:nowrap}}
@media (max-width:699px){.sidebar-layout{grid-template-columns:1fr}}
/* Member sidebar follows the scroll on two-column widths (700px+). Clears the sticky header; --qc-header-h is set by js/main.js. Stacked (<700px) stays static. */
@media (min-width:700px){.sidebar-layout>.sidebar{position:sticky;top:calc(var(--qc-header-h,171px) + 1rem);align-self:start;max-height:calc(100vh - var(--qc-header-h,171px) - 2rem);max-height:calc(100dvh - var(--qc-header-h,171px) - 2rem);overflow-y:auto;overscroll-behavior:contain}}
footer.site{border-top:1px solid var(--line);background:var(--footer-bg);padding:2.5rem 0;margin-top:3rem;font-size:.88rem;color:var(--mist)}
footer.site .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
footer.site a{color:var(--mist)}
/* Twinkle: soft, slow opacity pulse. js/main.js adds .twinkle to decorative stars site-wide
   (logo, dividers, ladder, level dots, glyphs) and gives each its own --tw-dur (3-7s) and --tw-delay
   so they never pulse in unison. Off under prefers-reduced-motion. */
@keyframes twinkle{0%,100%{opacity:var(--tw-min,.5)}50%{opacity:1}}
.twinkle{animation:twinkle var(--tw-dur,4.6s) ease-in-out var(--tw-delay,0s) infinite both}
.tw-glyph{display:inline-block}
.tier li::before{animation:twinkle 5.2s ease-in-out infinite both;--tw-min:.55}
.tier li:nth-child(2)::before{animation-duration:6.4s;animation-delay:-2.1s}
.tier li:nth-child(3)::before{animation-duration:3.9s;animation-delay:-1.3s}
.tier li:nth-child(4)::before{animation-duration:6.9s;animation-delay:-4.6s}
.tier li:nth-child(5)::before{animation-duration:4.6s;animation-delay:-3.2s}
.tier li:nth-child(6)::before{animation-duration:5.8s;animation-delay:-.7s}
.tier:nth-child(2) li::before{animation-delay:-3.7s}.tier:nth-child(3) li::before{animation-delay:-5.1s}
@media (prefers-reduced-motion:reduce){.twinkle,.tier li::before{animation:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ================================================================
   Tone system: dark-to-light progression across the public pages.
   <body data-tone="1"> (Home, darkest midnight) ... "10" (Disclaimer, near-white).
   Path: midnight blue -> lighter blues -> teals -> aqua -> soft whites, gold throughout.
   Defaults below = tone 1 (also used by member pages, which carry no data-tone).
   ================================================================ */
:root{
  --bg-top:#0B1430; --bg-mid:#0e1a3d; --bg-bot:#0B1430; --glow1:#1d2f66; --glow2:#16265a;
  --accent:#E6B94F; --hover:#F3DFA2; --gold-deco:#E6B94F; --gold-line:rgba(230,185,79,.38);
  --muted:var(--mist); --muted-op:.85;
  --card1:rgba(19,32,74,.82); --card2:rgba(19,32,74,.6); --card-line:rgba(169,198,238,.16); --card-shadow:0 10px 40px rgba(0,0,0,.25);
  --surface:rgba(11,20,48,.7); --surface-line:rgba(169,198,238,.2); --field-bg:rgba(11,20,48,.7);
  --line:rgba(169,198,238,.12); --ghost-line:rgba(169,198,238,.45);
  --header-bg:rgba(11,20,48,.72); --footer-bg:transparent;
  --banner-bg:rgba(230,185,79,.14); --banner-line:rgba(230,185,79,.35); --banner-ink:#F3DFA2;
  --tag-bg:rgba(230,185,79,.18); --tag-ink:#F3DFA2; --tag-line:rgba(230,185,79,.6);
  --notice-bg:rgba(230,185,79,.08); --glow-shadow:0 0 28px rgba(169,198,238,.35); --divider-op:.6;
  --band1:rgba(19,32,74,.75); --band2:rgba(10,18,46,.6); --band-line:rgba(232,196,106,.35); --band-glow:0 0 50px rgba(232,196,106,.08);
  --path-stroke:#e8c46a; --path-op:.32;
  /* starfield (read by js/main.js): rgb triplets gold;blue;white, gold share, alpha scale, glow */
  --stars-gold:243,223,162; --stars-blue:169,198,238; --stars-white:247,245,238; --stars-goldshare:.12; --stars-alpha:1;
}
/* 2 Meditations: deep navy */
[data-tone="2"]{--bg-top:#112553;--bg-mid:#13295c;--bg-bot:#0f2150;--glow1:#25407f;--glow2:#1b3170;
  --card1:rgba(22,40,90,.82);--card2:rgba(22,40,90,.6);--header-bg:rgba(15,32,78,.74)}
/* 3 How it works: twilight blue */
[data-tone="3"]{--bg-top:#173a74;--bg-mid:#1a427f;--bg-bot:#15366c;--glow1:#2d58a3;--glow2:#22498c;
  --card1:rgba(18,42,88,.8);--card2:rgba(18,42,88,.6);--card-line:rgba(169,198,238,.2);--surface:rgba(14,34,74,.7);--field-bg:rgba(14,34,74,.7);
  --header-bg:rgba(20,50,100,.74);--line:rgba(169,198,238,.16);--band1:rgba(18,42,88,.8);--band2:rgba(14,32,72,.65)}
/* 4 Levels: ocean blue, first hint of teal */
[data-tone="4"]{--bg-top:#14507a;--bg-mid:#155a82;--bg-bot:#124870;--glow1:#2276a0;--glow2:#1b6690;
  --card1:rgba(10,52,84,.8);--card2:rgba(10,52,84,.58);--card-line:rgba(169,214,238,.22);--surface:rgba(8,44,72,.7);--field-bg:rgba(8,44,72,.7);
  --header-bg:rgba(16,64,98,.76);--line:rgba(169,214,238,.18);--band1:rgba(10,52,84,.82);--band2:rgba(8,42,70,.66);
  --stars-blue:178,222,240}
/* 5 Library: deep teal */
[data-tone="5"]{--mist:#d4e9ee;--muted:#d4e9ee;--sky:#a9e0ef;--bg-top:#0f5f68;--bg-mid:#106a71;--bg-bot:#0d5660;--glow1:#1a8890;--glow2:#15787f;
  --card1:rgba(6,62,70,.8);--card2:rgba(6,62,70,.58);--card-line:rgba(170,230,230,.22);--surface:rgba(5,52,60,.72);--surface-line:rgba(170,230,230,.24);--field-bg:rgba(5,52,60,.72);
  --header-bg:rgba(12,82,90,.76);--line:rgba(170,230,230,.18);--ghost-line:rgba(190,236,236,.5);
  --band1:rgba(6,62,70,.82);--band2:rgba(5,50,58,.66);--muted-op:.92;
  --stars-blue:170,232,230;--stars-goldshare:.18;--stars-alpha:.85}
/* 6 Pricing: mid teal (last page with light text) */
[data-tone="6"]{--star:#ffffff;--mist:#eef8f7;--muted:#eef8f7;--sky:#d2f2fb;--accent:#fbe6a6;--hover:#fff1c4;
  --bg-top:#136a6a;--bg-mid:#167574;--bg-bot:#126565;--glow1:#25948f;--glow2:#1f8682;
  --card1:rgba(6,66,68,.78);--card2:rgba(6,66,68,.6);--card-line:rgba(190,240,236,.26);--surface:rgba(4,56,58,.72);--surface-line:rgba(190,240,236,.28);--field-bg:rgba(4,56,58,.72);
  --header-bg:rgba(14,90,90,.78);--line:rgba(190,240,236,.2);--ghost-line:rgba(210,244,240,.6);
  --band1:rgba(6,66,68,.82);--band2:rgba(4,54,56,.68);--band-line:rgba(243,223,162,.5);--muted-op:1;
  --banner-bg:rgba(4,50,52,.45);--banner-ink:#fbe6a6;--tag-ink:#fff1c4;
  --stars-blue:200,244,238;--stars-goldshare:.25;--stars-alpha:.75}

/* 7-10: light pages, deep-navy text, deeper golds */
[data-tone="7"],[data-tone="8"],[data-tone="9"],[data-tone="10"]{
  --star:#0b1430;--mist:#1c2b4d;--sky:#0d4f7a;--muted:#2c3d62;--muted-op:1;
  --accent:#6e4c0c;--hover:#6e4c0c;--gold-deco:#b8892b;--gold-line:rgba(184,137,43,.55);--palegold:#8a6116;
  --card-line:rgba(11,20,48,.12);--card-shadow:0 10px 34px rgba(11,40,60,.10);
  --surface:rgba(255,255,255,.6);--surface-line:rgba(11,20,48,.14);--field-bg:#ffffff;
  --line:rgba(11,20,48,.12);--ghost-line:rgba(11,20,48,.35);
  --header-bg:rgba(255,255,255,.62);--footer-bg:rgba(255,255,255,.28);
  --banner-bg:rgba(184,137,43,.16);--banner-line:rgba(184,137,43,.45);--banner-ink:#5c3f08;
  --tag-bg:rgba(184,137,43,.14);--tag-ink:#6e4c0c;--tag-line:rgba(138,97,22,.6);
  --notice-bg:rgba(184,137,43,.10);--glow-shadow:none;--divider-op:.85;
  --band-line:rgba(184,137,43,.5);--band-glow:0 0 50px rgba(184,137,43,.16);
  --path-stroke:#b8892b;--path-op:.7;
  --stars-gold:184,137,43;--stars-blue:70,110,150;--stars-white:120,150,180;--stars-goldshare:.4}
/* 7 Newsletter: soft aqua */
[data-tone="7"]{--bg-top:#93d6cf;--bg-mid:#a2ddd6;--bg-bot:#8dd1ca;--glow1:#c8f1ec;--glow2:#b3e8e1;
  --card1:rgba(255,255,255,.5);--card2:rgba(255,255,255,.36);--header-bg:rgba(220,246,242,.7);
  --band1:rgba(255,255,255,.55);--band2:rgba(255,246,222,.45);--stars-alpha:.45}
/* 8 FAQ: pale aqua mist */
[data-tone="8"]{--bg-top:#c4e9e3;--bg-mid:#d2efea;--bg-bot:#bfe5df;--glow1:#ecfaf7;--glow2:#dcf4f0;
  --card1:rgba(255,255,255,.66);--card2:rgba(255,255,255,.5);--band1:rgba(255,255,255,.7);--band2:rgba(255,246,222,.55);--stars-alpha:.38}
/* 9 About: soft white, teal-tinted, warming toward gold */
[data-tone="9"]{--bg-top:#e8f5f2;--bg-mid:#f1f8f4;--bg-bot:#e6f2ee;--glow1:#fff5dc;--glow2:#f4fbf9;
  --card1:rgba(255,255,255,.85);--card2:rgba(255,255,255,.7);--card-line:rgba(184,137,43,.26);
  --band1:rgba(255,253,245,.92);--band2:rgba(255,244,214,.75);--stars-alpha:.32;--stars-goldshare:.55}
/* 10 Disclaimer: lightest, near-white with a faint gold tint */
[data-tone="10"]{--bg-top:#fbf8ee;--bg-mid:#fdfbf5;--bg-bot:#f7f2e2;--glow1:#fff1cc;--glow2:#ffffff;
  --card1:rgba(255,255,255,.92);--card2:rgba(255,253,247,.82);--card-line:rgba(184,137,43,.32);--header-bg:rgba(255,253,246,.75);
  --band1:rgba(255,252,240,.95);--band2:rgba(255,240,200,.7);--band-line:rgba(184,137,43,.6);--stars-alpha:.3;--stars-goldshare:.65}

/* light pages: adapt hard-coded inline-SVG colours (logo, dividers, icons, ladder) */
[data-tone="7"] svg [fill="#F7F5EE" i],[data-tone="8"] svg [fill="#F7F5EE" i],[data-tone="9"] svg [fill="#F7F5EE" i],[data-tone="10"] svg [fill="#F7F5EE" i]{fill:#2a3f7a}
[data-tone="7"] svg [fill="#F3DFA2" i],[data-tone="8"] svg [fill="#F3DFA2" i],[data-tone="9"] svg [fill="#F3DFA2" i],[data-tone="10"] svg [fill="#F3DFA2" i]{fill:#c99a3a}
[data-tone="7"] svg [fill="#E6B94F" i],[data-tone="8"] svg [fill="#E6B94F" i],[data-tone="9"] svg [fill="#E6B94F" i],[data-tone="10"] svg [fill="#E6B94F" i]{fill:#b8892b}
[data-tone="7"] svg [stroke="#A9C6EE" i],[data-tone="8"] svg [stroke="#A9C6EE" i],[data-tone="9"] svg [stroke="#A9C6EE" i],[data-tone="10"] svg [stroke="#A9C6EE" i]{stroke:#4F6BB0}
[data-tone="7"] svg [stroke="#F7F5EE" i],[data-tone="8"] svg [stroke="#F7F5EE" i],[data-tone="9"] svg [stroke="#F7F5EE" i],[data-tone="10"] svg [stroke="#F7F5EE" i]{stroke:#2a3f7a}
[data-tone="7"] svg [stroke="#F3DFA2" i],[data-tone="8"] svg [stroke="#F3DFA2" i],[data-tone="9"] svg [stroke="#F3DFA2" i],[data-tone="10"] svg [stroke="#F3DFA2" i]{stroke:#b8892b}
[data-tone="7"] svg text[fill="#A9C6EE" i],[data-tone="8"] svg text[fill="#A9C6EE" i],[data-tone="9"] svg text[fill="#A9C6EE" i],[data-tone="10"] svg text[fill="#A9C6EE" i]{fill:#0d4f7a}
[data-tone="7"] .btn-gold,[data-tone="8"] .btn-gold,[data-tone="9"] .btn-gold,[data-tone="10"] .btn-gold{box-shadow:0 2px 14px rgba(184,137,43,.35)}

/* Meditations flow band (drawn by tools/med_path.js, embedded in meditations.html): a wispy pale-gold haze across
   the top of each card, above the cards but click-through; no hard core line; light drifts slowly; static under reduced motion. */
#path{z-index:2;pointer-events:none}
#path *{pointer-events:none}
#path .flow-cloud,#path .flow-haze,#path .flow-wisp,#path .flow-drift{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* v7 (local): band 1.25x wider, opacities x1.15 then x1.5, warm tint ~18% toward #F7D96B; see-through edges, soft centre */
#path .flow-mist{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:var(--flow-warm,#FEEDC3);stroke-opacity:.047;stroke-width:110}
#path .flow-cloud{stroke:var(--flow-warm,#FEEDC3);stroke-opacity:.06;stroke-width:62}
#path .flow-tight .flow-mist{stroke-width:65}#path .flow-tight .flow-cloud{stroke-width:42}
#path .flow-haze{stroke:var(--flow-gold,#F4DE98);stroke-opacity:.108;stroke-width:20}
#path .flow-wisp{stroke:var(--flow-warm,#FEEDC3);stroke-opacity:.216;stroke-width:3}
#path .flow-wisp2{stroke:var(--flow-warm,#FEEDC3);stroke-opacity:.108;stroke-width:2.5}
#path .flow-drift{stroke:var(--flow-warm,#FEEDC3);stroke-opacity:.151;stroke-width:6.25;stroke-dasharray:120 360;animation:flow-drift 18s linear infinite}
#path .flow-arrow{fill:none;stroke:var(--flow-ink,#F3DFA2);stroke-opacity:.2625;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#path .flow-down{stroke-opacity:.35}
#path .flow-dir{fill:none;stroke:var(--flow-arrow,#FCE7AB);stroke-opacity:.72;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes flow-drift{to{stroke-dashoffset:-480}}
/* starter arrowhead: same layered mist/haze treatment and v7 colours as the band, see-through edges */
#path .sa-mist{fill:var(--flow-warm,#FEEDC3);fill-opacity:.16;stroke:var(--flow-warm,#FEEDC3);stroke-opacity:.1;stroke-width:10;stroke-linejoin:round}
#path .sa-haze{fill:var(--flow-gold,#F4DE98);fill-opacity:.2}
#path .sa-core{fill:var(--flow-warm,#FEEDC3);fill-opacity:.24}
/* end-of-path starburst: soft rays round a glowing centre, slow gentle pulse like the star twinkle */
#path .flow-ray{fill:var(--flow-star,#FEEDC3);fill-opacity:.42}
#path .flow-star-core{fill:var(--flow-star,#FEEDC3);fill-opacity:.7}
#path .flow-star-pulse{transform-box:fill-box;transform-origin:center;animation:flow-star 5.4s ease-in-out infinite}
@keyframes flow-star{0%,100%{opacity:.78;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){#path .flow-drift{animation:none;display:none}#path .flow-star-pulse{animation:none}}

/* Subscribe band (injected by tools/add_subscribe.py) */
.sub-band{padding-top:1rem}
.sub-band-inner{max-width:760px;margin:0 auto;text-align:center;padding:2.2rem 1.6rem;border:1px solid var(--band-line);border-radius:22px;
  background:linear-gradient(180deg,var(--band1),var(--band2));box-shadow:var(--band-glow)}
.sub-eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:var(--accent);margin:0 0 .5rem}
.sub-band h2{margin:0 0 .5rem}
.sub-band .sub-lead{margin:0 auto 1.3rem;max-width:520px}
.sub-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;align-items:center}
.sub-next{font-size:.95rem}
.sub-alt{margin:.8rem 0 0;font-size:.85rem}
.sub-alt a{color:var(--sky)}
.sub-research{margin:1.1rem 0 0;font-size:.8rem;color:var(--muted);opacity:var(--muted-op)}
.sub-research a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--gold-line);text-underline-offset:3px}
.sub-research a:hover{color:var(--hover)}
/* "demo" tag sitting on a gold button: dark ink so it stays legible on every tone */
.btn-gold .demo-tag{color:#3a2a06;border-color:rgba(11,20,48,.4);background:rgba(255,255,255,.22)}

/* How it works: published quotes about binaural meditation in general (not member testimonials) */
.testimonials{padding-top:2.5rem}
.testimonials .t-note{font-size:.85rem;margin:.2rem auto 1.4rem;max-width:560px}
.t-card{margin:0;display:flex;flex-direction:column;justify-content:space-between;border-top:2px solid var(--gold-deco)}
.t-card blockquote{margin:0}
.t-card blockquote p{font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--star);margin:0 0 1rem}
.t-card figcaption{font-size:.85rem;color:var(--mist)}
.t-card figcaption a{color:var(--accent)}
/* placeholder cards (if ever used): easy to find and remove */
.placeholder-testimonial{border-style:dashed}

/* how-it-works disclaimer notice: calm card, subtle gold left rule */
.notice-wrap{padding-top:1.2rem;padding-bottom:0}
.notice-card{max-width:820px;margin:0 auto;border-left:3px solid var(--gold-line,rgba(230,185,79,.45));padding:1.5rem 1.7rem}
.notice-card h2{font-size:1.45rem;margin:0 0 .8rem}
.notice-card p{font-size:.95rem;line-height:1.65;margin:0 0 .75rem;overflow-wrap:anywhere}
.notice-card p:last-child{margin-bottom:0}
@media (max-width:600px){.notice-card{padding:1.2rem 1.1rem}.notice-card h2{font-size:1.25rem}}
/* Main nav: Meditations dropdown (Twelve Binaural / Twelve Guided). Hover + focus-within; inline on small/touch screens. */
nav.main .nav-group{position:relative;display:inline-flex}
nav.main .nav-group>a::after{content:"";display:inline-block;width:0;height:0;margin-left:.35rem;vertical-align:.18em;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.7}
nav.main .nav-sub{position:absolute;top:calc(100% + .45rem);left:-1rem;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  min-width:15.5rem;padding:.8rem 1rem;background:linear-gradient(var(--header-bg),var(--header-bg)),var(--bg-mid);border:1px solid var(--card-line);
  border-radius:14px;box-shadow:var(--card-shadow);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s,transform .18s,visibility 0s .18s}
nav.main .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
nav.main .nav-group:hover .nav-sub,nav.main .nav-group:focus-within .nav-sub{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
nav.main .nav-sub a{white-space:nowrap}
nav.main a[aria-current=true]{color:var(--hover);border-bottom-color:var(--gold-line)}
@media (max-width:760px),(hover:none){
  nav.main .nav-group,nav.main .nav-sub{display:contents;visibility:visible;opacity:1;transform:none}
  nav.main .nav-group>a::after{display:none}
  nav.main .nav-sub::before{display:none}
  nav.main .nav-sub a{font-size:.86rem;opacity:.9}
  nav.main .nav-sub a::before{content:"\203A\00a0";opacity:.6}
}
details.qc-lesson{scroll-margin-top:calc(var(--qc-header-h,171px) + 1rem)}