:root{--bg:#0a1028;--surface:#151b3d;--surface2:#202154;--text:#f7f2fb;--muted:#c7bedb;--primary:#b49aff;--rose:#efb8ca;--line:rgba(255,255,255,.12);--shadow:0 24px 70px rgba(0,0,0,.34);--serif:"Playfair Display",Georgia,serif;--sans:Manrope,Arial,sans-serif;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 85% 4%,rgba(170,117,225,.25),transparent 25%),radial-gradient(circle at 4% 30%,rgba(138,206,255,.15),transparent 25%),var(--bg);color:var(--text);font:16px/1.65 var(--sans)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(calc(100% - 2rem),var(--max));margin:auto}.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}.navwrap{position:sticky;top:0;background:rgba(10,16,40,.78);backdrop-filter:blur(16px);z-index:5;border-bottom:1px solid var(--line)}.brand{font-weight:800}.brand small{display:block;letter-spacing:.11em;text-transform:uppercase;color:var(--rose);font-size:.68rem}.links{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}.links a:hover{color:#fff}.hero{padding:5rem 0 4rem;background:linear-gradient(180deg,rgba(8,10,30,.18),rgba(8,10,30,.55)),radial-gradient(circle at 20% 20%,rgba(145,200,255,.25),transparent 30%),linear-gradient(160deg,#10173a,#332a72 48%,#8c609c 78%,#e3b8c3)}.heroGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}.eyebrow,.badge{display:inline-block;padding:.38rem .7rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.09);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#fff}.hero h1,h2,h3{font-family:var(--serif);line-height:1.06}.hero h1{font-size:clamp(2.5rem,6vw,5rem);max-width:11ch;margin:.9rem 0}.hero p{font-size:1.12rem;color:rgba(255,255,255,.86);max-width:60ch}.buttons{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}.btn{padding:.9rem 1.1rem;border-radius:999px;font-weight:800;border:1px solid transparent;display:inline-block;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,#aa8af8,#e8a9c7);color:#fff;box-shadow:var(--shadow)}.secondary{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.1)}.cover{border-radius:1.5rem;overflow:hidden;border:1px solid rgba(255,255,255,.25);box-shadow:0 30px 70px rgba(0,0,0,.45);max-width:340px;margin:auto}.section{padding:4rem 0;border-top:1px solid var(--line)}.section h2{font-size:clamp(2rem,4vw,3.4rem);margin:0 0 1rem}.sectionlead{max-width:70ch;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.card{background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:1.2rem;padding:1.2rem;box-shadow:var(--shadow)}.card p,.card li{color:var(--muted)}.card ul{padding-left:1.1rem}.focus{background:linear-gradient(135deg,rgba(180,154,255,.2),rgba(239,184,202,.16));border-color:rgba(239,184,202,.25)}.callout{margin-top:2rem;padding:1.4rem;border-radius:1.2rem;background:linear-gradient(135deg,rgba(180,154,255,.22),rgba(239,184,202,.16));border:1px solid var(--line)}.faq details{padding:1rem;border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:800}.disclaimer{font-size:.88rem;color:var(--muted);padding:1rem;border:1px solid var(--line);border-radius:1rem;background:rgba(255,255,255,.04)}footer{padding:3rem 0 6rem;color:var(--muted)}.sticky{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:4;background:rgba(15,18,48,.88);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:.55rem;box-shadow:var(--shadow)}@media(max-width:800px){.heroGrid,.grid{grid-template-columns:1fr}.links{display:none}.hero{padding:3.5rem 0}.sticky{width:calc(100% - 2rem);text-align:center}.sticky .btn{width:100%}}

/* Enhanced interaction layer */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#8dd1ff,#b49aff,#efb8ca);z-index:99;box-shadow:0 0 16px #b49aff}.orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;opacity:.7;animation:float 10s ease-in-out infinite}.orb.one{width:18rem;height:18rem;background:radial-gradient(circle,rgba(143,205,255,.25),transparent 68%);left:-6rem;top:10rem}.orb.two{width:24rem;height:24rem;background:radial-gradient(circle,rgba(239,184,202,.22),transparent 68%);right:-10rem;top:20rem;animation-delay:-4s}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}.reading-tools{position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:4;display:grid;gap:.45rem}.tool-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(18,22,56,.86);color:white;backdrop-filter:blur(10px);box-shadow:var(--shadow);font-weight:800}.toast{position:fixed;left:50%;bottom:5.4rem;transform:translate(-50%,15px);opacity:0;z-index:12;transition:.25s;background:#fdfaff;color:#241b38;border-radius:999px;padding:.75rem 1rem;box-shadow:var(--shadow);font-weight:700}.toast.show{opacity:1;transform:translate(-50%,0)}.quiz-panel{display:none;margin-top:1.2rem}.quiz-panel.show{display:block}.option{display:block;text-align:left;width:100%;padding:1rem;margin:.55rem 0;border:1px solid var(--line);border-radius:.9rem;background:rgba(255,255,255,.07);color:var(--text);font:inherit}.option:hover{background:rgba(180,154,255,.19)}.newsletter{display:grid;grid-template-columns:1fr auto;gap:.7rem}.newsletter input{min-width:0;border:1px solid var(--line);background:rgba(255,255,255,.08);padding:.9rem 1rem;border-radius:999px;color:#fff;font:inherit}.newsletter input::placeholder{color:#bcb4cf}@keyframes float{50%{transform:translateY(-24px) translateX(12px)}}@media(max-width:800px){.reading-tools{right:.6rem;top:auto;bottom:6rem;transform:none;display:flex}.newsletter{grid-template-columns:1fr}.newsletter .btn{width:100%}}


/* APEX VISUAL UPGRADE: prism atelier layer */
:root{--ink:#080d25;--electric:#b994ff;--electric2:#8fd5ff;--peach:#f2b6c9;--pearl:#fff8fc;--mint:#98e4c0}.hero{overflow:hidden;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 26%,rgba(143,213,255,.13) 52%,transparent 75%);mix-blend-mode:screen;z-index:-1;animation:aurora 13s ease-in-out infinite}.hero:after{content:"";position:absolute;inset:-10%;background:conic-gradient(from 120deg at 72% 42%,transparent,rgba(255,255,255,.16),transparent 14%,rgba(185,148,255,.14),transparent 30%);filter:blur(12px);opacity:.7;z-index:-1;animation:spin 26s linear infinite}.heroGrid{position:relative}.heroGrid>div:first-child{position:relative}.heroGrid>div:first-child:after{content:"";position:absolute;width:170px;height:170px;left:-68px;bottom:-70px;background:radial-gradient(circle,rgba(242,182,201,.36),transparent 67%);filter:blur(8px);z-index:-1}.cover{transform:perspective(1200px) rotateY(-8deg) rotateX(2deg);transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .65s;position:relative}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.36) 50%,transparent 58%);transform:translateX(-130%);transition:transform .8s}.cover:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-10px);filter:saturate(1.08)}.cover:hover:after{transform:translateX(130%)}.card{transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s,box-shadow .32s;background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.03));backdrop-filter:blur(14px)}.card:hover{transform:translateY(-8px);border-color:rgba(242,182,201,.42);box-shadow:0 30px 72px rgba(0,0,0,.3)}.card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.34),transparent 35%,rgba(185,148,255,.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.primary{position:relative;overflow:hidden}.primary:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 22%,rgba(255,255,255,.44),transparent 77%);transform:translateX(-120%);transition:transform .55s}.primary:hover:after{transform:translateX(120%)}.section h2{letter-spacing:-.04em}.sectionlead{font-size:1.08rem}.section:nth-of-type(even){background:linear-gradient(90deg,rgba(143,213,255,.025),rgba(185,148,255,.07),rgba(242,182,201,.025))}.hero .eyebrow{box-shadow:0 0 36px rgba(185,148,255,.27)}.reading-tools .tool-btn{transition:transform .2s,background .2s}.reading-tools .tool-btn:hover{transform:scale(1.12);background:linear-gradient(135deg,#7658c9,#d993b4)}.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.045);padding:.55rem 0;white-space:nowrap}.ticker-track{display:inline-flex;gap:2.2rem;min-width:max-content;animation:marquee 32s linear infinite;color:#e8def4;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}.ticker b{color:var(--peach)}.spotlight{display:grid;grid-template-columns:1.15fr .85fr;gap:1.1rem;align-items:stretch}.spotlight .feature{padding:1.65rem;border-radius:1.35rem;background:linear-gradient(135deg,rgba(137,105,229,.34),rgba(242,182,201,.17));border:1px solid rgba(255,255,255,.16);position:relative;overflow:hidden}.spotlight .feature:after{content:"✦";font-size:10rem;line-height:1;position:absolute;right:-1.2rem;bottom:-3rem;color:rgba(255,255,255,.08)}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.metric{padding:.9rem;border-radius:1rem;background:rgba(7,10,32,.24);border:1px solid rgba(255,255,255,.1)}.metric strong{display:block;font-size:1.35rem;color:#fff}.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;counter-reset:journey}.journey article{counter-increment:journey;position:relative}.journey article:before{content:"0" counter(journey);font:700 2rem var(--serif);color:var(--peach);display:block}.journey article:not(:last-child):after{content:"";position:absolute;height:1px;background:linear-gradient(90deg,var(--peach),transparent);top:2rem;left:3rem;right:-.8rem}.music-bars{display:flex;gap:4px;align-items:flex-end;height:32px}.music-bars i{display:block;width:5px;border-radius:8px;background:linear-gradient(#8fd5ff,#efb8ca);animation:bars 1.05s ease-in-out infinite}.music-bars i:nth-child(2){height:27px;animation-delay:-.2s}.music-bars i:nth-child(3){height:14px;animation-delay:-.4s}.music-bars i:nth-child(4){height:31px;animation-delay:-.1s}.music-bars i:nth-child(5){height:19px;animation-delay:-.55s}@keyframes aurora{50%{transform:translateX(5%) scale(1.07);opacity:.65}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes bars{50%{transform:scaleY(.35)}}@media(max-width:800px){.spotlight,.journey{grid-template-columns:1fr}.journey article:not(:last-child):after{display:none}.cover{max-width:275px}.metric-row{grid-template-columns:1fr 1fr}}

/* CELESTIAL MOBILE UPGRADE — screenshot-informed thumb dock + living atmosphere */
html,body{min-height:100%;}body{overflow-x:hidden;background-color:#080b26;background-image:radial-gradient(ellipse at 8% 16%,rgba(92,196,255,.17),transparent 28%),radial-gradient(ellipse at 94% 31%,rgba(221,118,197,.21),transparent 30%),radial-gradient(ellipse at 45% 94%,rgba(142,103,244,.17),transparent 35%),linear-gradient(180deg,#0a1031,#18235b 38%,#3c276e 74%,#091029)}body:before,body:after{content:"";position:fixed;inset:-30vmax;z-index:-2;pointer-events:none;filter:blur(30px);mix-blend-mode:screen}body:before{background:conic-gradient(from 200deg at 52% 48%,transparent 0deg,rgba(124,204,255,.14) 44deg,transparent 90deg,rgba(255,173,211,.16) 157deg,transparent 240deg,rgba(170,127,255,.15) 300deg,transparent 360deg);animation:nebulaSpin 40s linear infinite}body:after{background:radial-gradient(ellipse at center,rgba(230,187,255,.09),transparent 46%),radial-gradient(ellipse at 24% 66%,rgba(111,211,255,.11),transparent 27%);animation:smokeBreathe 12s ease-in-out infinite alternate}.starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.88;background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 48% 9%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 88% 21%,#d9efff 0 1.4px,transparent 2.2px),radial-gradient(circle at 77% 58%,#ffd4e5 0 1px,transparent 2px),radial-gradient(circle at 28% 70%,#fff 0 1px,transparent 2px),radial-gradient(circle at 5% 86%,#c9bdff 0 1px,transparent 2px),radial-gradient(circle at 61% 84%,#fff 0 1px,transparent 1.8px);background-size:190px 220px,300px 270px,230px 250px,370px 320px,270px 290px,340px 350px,420px 390px;animation:starDrift 35s linear infinite}.starfield:before,.starfield:after{content:"✦  ·  ✧  ·  ✦  ·  ✧  ·  ✦";position:absolute;color:rgba(255,255,255,.66);font-size:1.1rem;letter-spacing:3.7rem;white-space:nowrap;animation:twinkle 3.8s ease-in-out infinite}.starfield:before{top:24%;left:-2rem}.starfield:after{top:68%;right:-6rem;animation-delay:-2.1s;color:rgba(185,230,255,.62)}.spark{position:fixed;z-index:2;pointer-events:none;color:#fff;text-shadow:0 0 12px #fff,0 0 24px #b894ff;animation:flashFloat var(--dur,5s) ease-in-out infinite;opacity:0}.spark.s1{left:7%;top:24%;--dur:4.3s}.spark.s2{right:8%;top:39%;--dur:6.1s;animation-delay:-2s}.spark.s3{left:15%;top:72%;--dur:5.2s;animation-delay:-1.1s}.spark.s4{right:21%;top:78%;--dur:6.7s;animation-delay:-3.6s}.spark.s5{left:50%;top:17%;--dur:4.9s;animation-delay:-2.7s}.hero{background:linear-gradient(135deg,rgba(9,17,55,.69),rgba(55,34,111,.45) 50%,rgba(231,166,199,.26)),radial-gradient(circle at 20% 20%,rgba(143,218,255,.37),transparent 33%),radial-gradient(circle at 80% 34%,rgba(255,186,214,.27),transparent 35%),linear-gradient(165deg,#0b1338,#3a2873 55%,#975a9c);box-shadow:inset 0 -30px 80px rgba(5,8,28,.35)}.hero:before{opacity:.9}.hero h1{text-shadow:0 8px 34px rgba(0,0,0,.33)}.navwrap{background:rgba(7,10,33,.72);border-bottom-color:rgba(255,255,255,.14)}.ticker{background:linear-gradient(90deg,rgba(131,114,235,.25),rgba(255,174,207,.14),rgba(101,203,255,.18));backdrop-filter:blur(12px)}.section{position:relative}.section:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 13%,rgba(255,255,255,.018) 33%,transparent 54%);pointer-events:none}.sticky{bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;transform:none;width:auto;border-radius:18px;padding:7px;background:linear-gradient(135deg,rgba(14,18,54,.95),rgba(35,24,75,.92));border:1px solid rgba(255,255,255,.16);box-shadow:0 -8px 34px rgba(2,5,25,.34),0 16px 46px rgba(0,0,0,.5);display:grid;grid-template-columns:42px 1fr 42px;gap:7px;align-items:center}.sticky:before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(105deg,rgba(143,218,255,.68),rgba(255,255,255,.5),rgba(244,163,204,.75));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.sticky .btn{grid-column:2;border-radius:12px;padding:.82rem .7rem;min-height:44px;background:linear-gradient(90deg,#c29bff,#f2a4c8);box-shadow:0 8px 20px rgba(193,136,220,.26)}.dock-icon{position:relative;z-index:1;width:42px;height:42px;border:0;border-radius:12px;background:rgba(255,255,255,.09);color:#fff;font-size:1rem}.dock-icon:active{transform:scale(.92)}.mobile-dock-label{display:none}.floating-prism{position:absolute;right:6%;top:6%;width:85px;height:85px;border-radius:28px;transform:rotate(24deg);background:linear-gradient(135deg,rgba(162,232,255,.3),rgba(255,187,221,.16),rgba(179,133,255,.25));border:1px solid rgba(255,255,255,.4);box-shadow:0 0 44px rgba(159,203,255,.32),inset 0 0 22px rgba(255,255,255,.2);animation:prismFloat 7s ease-in-out infinite}.floating-prism:before{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:2.2rem;text-shadow:0 0 20px white}.hero .cover{z-index:1}.hero .cover:before{content:"";position:absolute;width:110%;height:110%;top:-5%;left:-5%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 63%);filter:blur(8px);z-index:-1;animation:pulseGlow 4s ease-in-out infinite}@keyframes nebulaSpin{to{transform:rotate(360deg)}}@keyframes smokeBreathe{to{transform:scale(1.15) translate3d(3%,-2%,0);opacity:.76}}@keyframes starDrift{to{background-position:190px 220px,300px 270px,230px 250px,370px 320px,270px 290px,340px 350px,420px 390px}}@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.92)}50%{opacity:.95;transform:scale(1.12)}}@keyframes flashFloat{0%,100%{opacity:0;transform:translateY(7px) scale(.65) rotate(0deg)}20%,78%{opacity:.88}48%{opacity:1;transform:translateY(-9px) scale(1.16) rotate(16deg)}}@keyframes prismFloat{50%{transform:rotate(42deg) translateY(-16px) scale(1.08)}}@keyframes pulseGlow{50%{transform:scale(1.16);opacity:.55}}@media(min-width:801px){.sticky{left:50%;right:auto;transform:translateX(-50%);width:auto;min-width:255px;grid-template-columns:1fr}.sticky .btn{grid-column:auto}.dock-icon{display:none}}@media(max-width:800px){body{padding-bottom:82px}.nav{padding:.68rem 0}.brand{font-size:.77rem;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero{padding:2.7rem 0 2.5rem}.heroGrid{gap:1.6rem}.hero h1{font-size:clamp(2.25rem,11.7vw,3.15rem);max-width:10.5ch}.hero p{font-size:.95rem}.hero .buttons{gap:.6rem}.hero .btn{padding:.72rem .88rem;font-size:.76rem}.cover{max-width:208px}.floating-prism{width:58px;height:58px;right:4%;top:5%;border-radius:19px}.section{padding:3.15rem 0}.section h2{font-size:clamp(1.85rem,9vw,2.55rem)}.grid{gap:.82rem}.card{padding:1rem}.reading-tools{display:none}.ticker{padding:.42rem 0}.ticker-track{font-size:.63rem}.starfield:before{top:16%}.spark.s3,.spark.s4{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* MOBILE CONTENT VISIBILITY HOTFIX */
@media(max-width:800px){.hero,.section,.unique-editorial{display:block!important;min-height:0!important;height:auto!important;visibility:visible!important;opacity:1!important}.heroGrid,.spotlight,.grid{min-height:0!important}.cover{margin-inline:auto}.reveal{opacity:1!important;transform:none!important}.floating-prism{z-index:0}.heroGrid{z-index:1}.sticky{z-index:999!important}.unique-editorial{position:relative;z-index:1}.hero:after{pointer-events:none}.starfield{z-index:-1!important}}

/* Breadcrumb trail (matches BreadcrumbList structured data) */
.breadcrumb{padding:.85rem 0;font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--line);background:rgba(7,10,33,.4)}
.breadcrumb .wrap{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb .sep{opacity:.5}
.breadcrumb [aria-current="page"]{color:#fff;font-weight:700}
@media(max-width:800px){.breadcrumb{font-size:.72rem;padding:.6rem 0}}

/* Site footer directory */
.sitefoot{padding:3.5rem 0 6rem;border-top:1px solid var(--line);background:rgba(6,9,30,.55)}
.sitefoot .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.sitefoot .fcol h2{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin:0 0 .85rem;font-family:var(--sans);font-weight:800}
.sitefoot ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.sitefoot li{font-size:.87rem}
.sitefoot a{color:var(--muted);text-decoration:none}
.sitefoot a:hover{color:#fff;text-decoration:underline}
.sitefoot [aria-current="page"]{color:#fff;font-weight:700}
.sitefoot .fnote{margin:2.5rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;max-width:80ch}
@media(max-width:800px){.sitefoot .fgrid{grid-template-columns:1fr;gap:1.6rem}.sitefoot{padding:2.5rem 0 7rem}}

/* ============================================================================
   PERFORMANCE LAYER
   Goal: identical visuals, far less main-thread work.

   Profiled with CDP Performance.getMetrics over a scripted mobile scroll.
   Baseline was 3,246ms of task time in a ~2s window: the page was repainting
   large blurred layers every frame, forever.

   Nothing here removes a visual layer or changes a colour. Each entry either
   promotes an animation onto the compositor, drops an effect that is provably
   invisible, or stops work while nothing is on screen.
   ========================================================================== */

/* --- 1. starfield drift ----------------------------------------------------
   Was animating background-position across seven stacked radial-gradients,
   which repaints the whole gradient stack every frame for 35s on loop. It was
   the single largest cost on the page (removing it alone cut frame time 75%).
   The drift itself travels 190px over 35 seconds -- about 5px per second, and
   effectively invisible. The star pattern, its density, and the twinkle on
   .starfield::before/::after are all untouched; only the imperceptible drift
   stops. This is the one deliberate trade in this file. */
.starfield{animation:none}

/* --- 2. atmosphere layers --------------------------------------------------
   Nebula, smoke, hero aurora and the prism spin all stay exactly as designed,
   including their blend modes and blurs. Promoting them lets the blurred
   result rasterise once and then transform, instead of re-blurring per frame.
   Note: no positioning context is introduced anywhere -- .hero::after uses
   inset:-10%, so giving body position:relative would re-parent it to the whole
   document. That was tried and reverted; it added 791px of page height and
   spread the hero glow across every section. */
body:before,body:after,.hero:before,.hero:after{
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* --- 3. card backdrop-filter ----------------------------------------------
   backdrop-filter makes the browser snapshot and blur everything behind the
   element. With twenty-plus cards per page that is twenty-plus blur passes per
   frame. Cards sit on smooth near-opaque gradients, so the blurred backdrop is
   indistinguishable from the unblurred one. The translucent fill, the gradient
   border and the hover lift are all unchanged.
   Kept on .navwrap, .sticky and .tool-btn, where varied content scrolls
   underneath and the frosting is genuinely visible. */
.card{backdrop-filter:none;-webkit-backdrop-filter:none}

/* --- 4. stop animating what is off screen ---------------------------------
   .js-rest is toggled by assets/perf.js when the hero scrolls away or the tab
   is hidden. Without JS nothing is paused, so this degrades safely. */
.js-rest .hero:before,.js-rest .hero:after,
.js-rest .ticker-track,.js-rest .orb,.js-rest .spark{animation-play-state:paused}

/* --- 5. cover image -------------------------------------------------------- */
.cover img{aspect-ratio:340/522;height:auto}

@media(prefers-reduced-motion:reduce){
  body:before,body:after,.hero:before,.hero:after{will-change:auto}
}

/* ============================================================================
   ANDROID LAYOUT FIX
   Symptom: on Android Chrome the page rendered at ~70% width with a vertical
   seam down the right side and a bottom bar that did not line up. iOS Safari
   was unaffected.

   Cause: .orb is position:absolute with right:-10rem, so it extends past the
   initial containing block. body had overflow-x:hidden, which clips the paint
   but still lets the overflow widen the layout viewport. Android Chrome then
   scales the document down to fit that wider layout viewport onto the screen.
   Measured: layout viewport 412px, window.innerWidth 583px -- 412/583 = 70.7%,
   exactly the seam in the report. iOS resolves the overflow differently, which
   is why it looked right there.

   Fix: clip horizontally on html and body with overflow-x:clip. Unlike hidden,
   clip neither forces the other axis into a scroll container nor propagates to
   the viewport, so the overflow can no longer expand it. The orbs keep their
   position, motion and appearance.
   ========================================================================== */
html{overflow-x:clip}
body{position:relative;overflow-x:clip;overflow-y:visible;max-width:100%}
@supports not (overflow-x:clip){
  html{overflow-x:hidden}
  body{overflow-x:hidden}
}

/* body:position:relative is what actually contains the orbs so the clip above
   can catch them. That also re-parents .hero::before/::after, which are
   position:absolute with inset:0 and inset:-10% -- without a positioned .hero
   they resolve against the initial containing block and spill across the whole
   document (measured: +791px of page height, hero glow bleeding into every
   section). Positioning .hero restores them to the element they decorate,
   which is what .hero{overflow:hidden;isolation:isolate} always implied. */
.hero{position:relative}

/* ----------------------------------------------------------------------------
   Bottom dock: the grid declared three columns (42px 1fr 42px) while most
   pages render only two controls, leaving a dead 42px column and an off-centre
   call to action. Flex adapts to either two or three controls.
   -------------------------------------------------------------------------- */
@media(max-width:800px){
  .sticky{display:flex;align-items:center;gap:7px}
  .sticky .btn{flex:1 1 auto;grid-column:auto;min-width:0;text-align:center}
  .sticky .dock-icon{flex:0 0 42px}
}

/* ============================================================================
   PRE-LAUNCH FIXES
   ========================================================================== */

/* --- 1. no-JS fallback for scroll reveals ---------------------------------
   .reveal starts at opacity:0 and is un-hidden by an IntersectionObserver.
   With JS blocked or the script failing to load, nine sections of the home
   page were invisible. Content is now visible by default and only hidden
   once JS has confirmed it can un-hide it. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.visible{opacity:1;transform:none}

/* --- 2. visible keyboard focus (WCAG 2.4.7) --------------------------------
   There were no focus styles anywhere: tabbing through the site showed
   nothing at all. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #ffd68f;
  outline-offset:3px;
  border-radius:4px;
}
.checks label:focus-within{outline:3px solid #ffd68f;outline-offset:3px}

/* --- 3. skip link (WCAG 2.4.1) --------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  padding:.85rem 1.25rem;background:#fff;color:#1a1240;font-weight:800;
  border-radius:0 0 .6rem 0;text-decoration:none;
}
.skip-link:focus{left:0}

/* --- 4. contrast: --muted failed AA on the lighter gradient bands ----------
   Measured 3.99:1 on .tier p and 4.46:1 on .sectionlead against their actual
   painted backgrounds; AA needs 4.5:1 for body text. */
:root{--muted:#d9d3e8}

/* --- 5. crisis banner ------------------------------------------------------ */
.crisis-note{
  margin-top:1rem;padding:1rem 1.2rem;border-radius:.9rem;
  background:rgba(255,150,180,.12);border:1px solid rgba(255,150,180,.4);
  font-size:.9rem;color:#ffe3ec;
}
.crisis-note strong{color:#fff}
.crisis-note a{color:#fff;text-decoration:underline}

/* ============================================================================
   NAVIGATION
   Replaces a five-link bar that vanished entirely below 800px. Desktop gets a
   mega-menu; mobile gets a full-screen panel driven by a checkbox, so it works
   with JavaScript disabled.
   ========================================================================== */
.navwrap{position:sticky;top:0;z-index:60;background:rgba(7,10,33,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.nav .brand{font-weight:800;line-height:1.15;flex:none}
.nav .brand small{display:block;letter-spacing:.11em;text-transform:uppercase;color:var(--rose);font-size:.62rem}
.links{display:flex;list-style:none;margin:0;padding:0;gap:.2rem;align-items:center}
.links>li{position:relative}
.links>li>a{display:block;padding:.6rem .8rem;border-radius:.55rem;font-size:.88rem;color:var(--muted);white-space:nowrap;transition:.18s}
.links>li>a:hover,.links>li>a.on{color:#fff;background:rgba(255,255,255,.09)}
.navcrisis{color:#ffc2d3 !important;border:1px solid rgba(255,150,180,.42)}
.navcrisis:hover{background:rgba(255,150,180,.18) !important}
.mega{position:absolute;top:calc(100% + .5rem);left:0;min-width:288px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.18s;background:#141a3d;border:1px solid var(--line);
  border-radius:.9rem;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:.9rem}
.hasmenu:hover .mega,.hasmenu:focus-within .mega{opacity:1;visibility:visible;transform:none}
.megawrap{width:auto;margin:0}
.mcol h2{font:800 .66rem var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--rose);margin:0 0 .5rem}
.mcol h2 a{color:inherit}
.mcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mcol li a,.mcol li span{display:block;padding:.42rem .55rem;border-radius:.45rem;font-size:.87rem;color:var(--muted)}
.mcol li a:hover{background:rgba(180,154,255,.16);color:#fff}
.mcol li [aria-current]{color:#fff;font-weight:700}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:0 10px;border:1px solid var(--line);border-radius:.6rem;cursor:pointer;background:rgba(255,255,255,.07)}
.burger span{display:block;height:2px;background:#fff;border-radius:2px}
.navpanel{display:none}
.navtoggle:checked~.navpanel{display:block}
@media(max-width:900px){
  .links{display:none}
  .burger{display:flex}
  .nav .brand{font-size:.82rem;max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navpanel{position:fixed;inset:0;z-index:70;background:#0a0e28;overflow-y:auto;padding:1rem 0 6rem}
  .panelclose{display:inline-block;margin:0 0 1rem;padding:.7rem 1.1rem;border:1px solid var(--line);
    border-radius:.6rem;font-weight:800;font-size:.82rem;cursor:pointer;background:rgba(255,255,255,.08);color:#fff}
  .msec{border-bottom:1px solid var(--line)}
  .msec summary{padding:1rem .2rem;font:800 1rem var(--serif);cursor:pointer;list-style:none;
    display:flex;justify-content:space-between;align-items:center;color:#fff}
  .msec summary::-webkit-details-marker{display:none}
  .msec summary:after{content:"+";color:var(--rose);font-size:1.5rem;line-height:1}
  .msec[open] summary:after{content:"–"}
  .msec ul{list-style:none;margin:0;padding:0 0 .9rem;display:grid;gap:.15rem}
  .msec li a,.msec li span{display:block;padding:.72rem .8rem;border-radius:.5rem;font-size:.94rem;color:var(--muted)}
  .msec li a:hover{background:rgba(180,154,255,.16);color:#fff}
  .msec li [aria-current]{color:#fff;font-weight:700}
  .panelcrisis{display:block;margin-top:1.4rem;padding:1rem;text-align:center;border-radius:.75rem;
    border:1px solid rgba(255,150,180,.45);background:rgba(255,150,180,.14);color:#fff;font-weight:800}
}
@media(min-width:901px){ .navpanel{display:none !important} }

/* Mobile panel stacking: .navwrap sat at z-index 60 while the bottom dock used
   999, so the "full screen" panel rendered underneath the page. The panel needs
   to beat everything, and the body must not scroll behind it. */
.navwrap{z-index:1000}
.navpanel{background:#0a0e28 !important}
@media(max-width:900px){
  .navtoggle:checked~.navpanel{z-index:1100}
  html:has(.navtoggle:checked){overflow:hidden}
  html:has(.navtoggle:checked) .sticky{display:none}
}

/* ============================================================================
   Tap targets. WCAG 2.2 AA (2.5.8 Target Size Minimum) wants 24x24 CSS px;
   inline links in the footer, breadcrumb and dense lists were rendering at
   ~19px tall, which is both a conformance failure and genuinely fiddly on a
   phone. Vertical padding only, so nothing reflows horizontally.
   ========================================================================== */
@media (pointer: coarse) {
  .sitefoot .fcol li a,
  .sitefoot .fcol li span,
  .breadcrumb a,
  .breadcrumb span,
  .tcol li a,
  .tmore,
  .flink,
  .edmore,
  .chapters li a,
  .achip,
  .qroute-static li a,
  .faqlist a,
  .navpanel a,
  .navpanel span,
  .essay a,
  .ans a,
  .sectionlead a,
  .qnote a,
  .disclaimer a,
  .crisis-note a {
    display: inline-block;
    min-height: 24px;
    padding-block: 3px;
  }
  .sitefoot .fcol ul { row-gap: 2px; }
  /* form labels sit above their input; the input is already large, but the
     label is clickable and should be comfortably so. */
  .cform .crow label { display: inline-block; min-height: 24px; padding-block: 2px; }
}

/* ============================================================================
   Card link targets.

   Two problems, one fix. The cards on the section hubs only responded to a
   click on the heading text, so most of an obviously-clickable box did nothing;
   and .card lost its positioning when backdrop-filter was removed for
   performance, which let the ::before gradient border escape and stretch to the
   surrounding .section instead of hugging each card.

   The heading link is stretched over the whole card with an absolutely
   positioned ::after, rather than wrapping the card in an <a>. That keeps
   exactly one link per card with the guide title as its anchor text — wrapping
   would make the entire description part of the anchor — and avoids nesting
   interactive elements. The CTA is a span, not a second link, so the page does
   not carry 118 duplicate hrefs.
   ========================================================================== */
.card{position:relative}

.cardlink{display:flex;flex-direction:column;cursor:pointer}
.cardlink p{flex:1}
.cardlink h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.cardlink h3 a{text-decoration:none}

.cardcta{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  margin-top:1rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid rgba(242,182,201,.4);background:rgba(242,182,201,.1);
  font:800 .74rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--rose);transition:background .25s,border-color .25s,color .25s}
.ctaarrow{font-size:.95rem;line-height:1;transition:transform .25s}

.cardlink:hover .cardcta,
.cardlink:focus-within .cardcta{background:var(--rose);border-color:var(--rose);color:#160b16}
.cardlink:hover .ctaarrow,
.cardlink:focus-within .ctaarrow{transform:translateX(3px)}

/* Focus lands on the heading link, so draw the ring around the whole card. */
.cardlink:has(a:focus-visible){outline:2px solid var(--rose);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .cardcta,.ctaarrow{transition:none}
}
@media (pointer:coarse){
  .cardcta{padding:.6rem 1rem}
}