/* EndoAI HoloSphere — the homepage's connected 3D journey.
   Requires living.css and living-pages.css. The WebGL world sits in a sticky
   layer behind the chapters; chapters pass pointer events through their empty
   space so the world can be turned, and every panel stays readable on its own. */

body[data-page="home"]{background:#081512}
/* Dark glass header on the homepage */
body[data-page="home"] .site-header{background:rgba(8,22,19,.74);border-bottom-color:rgba(245,241,232,.08);color:var(--on-dark)}
body[data-page="home"] .site-header :focus-visible{outline-color:var(--focus-dark)}
body[data-page="home"] .site-header .brand{color:var(--on-dark)}
body[data-page="home"] .primary-nav a{color:var(--on-dark-soft)}
body[data-page="home"] .primary-nav a:hover,body[data-page="home"] .primary-nav a[aria-current="page"]{color:var(--mint)}
body[data-page="home"] .primary-nav a[aria-current="page"]::after{background:var(--mint)}
body[data-page="home"] .header-actions .motion-toggle{border-color:var(--line-dark);color:var(--on-dark-soft)}
body[data-page="home"] .header-actions .motion-toggle:hover{background:rgba(245,241,232,.08)}
body[data-page="home"] .mobile-menu summary{border-color:var(--line-dark);color:var(--on-dark)}
body[data-page="home"] .btn-download{background:var(--mint);color:var(--emerald)}
body[data-page="home"] .btn-download:hover{background:#95e2b8}
/* Home: the menu is a dark glass sheet that matches the header. It is fully
   opaque on purpose: inside the blurred header it cannot blur the page (the
   header is its backdrop root), and the hero must never show through links. */
body[data-page="home"] .mobile-menu nav{color:var(--on-dark);background:var(--glass-sheen),#0A1C18;border-color:rgba(245,241,232,.14);box-shadow:var(--glass-rim),var(--glass-drop)}
body[data-page="home"] .mobile-menu nav a{color:var(--on-dark)}
body[data-page="home"] .mobile-menu nav a:hover,body[data-page="home"] .mobile-menu nav a[aria-current="page"]{background:rgba(121,215,163,.12);color:var(--mint)}
body[data-page="home"] .mobile-menu .menu-motion{border-color:var(--line-dark);color:var(--on-dark-soft)}
body[data-page="home"] .mobile-menu nav :focus-visible{outline-color:var(--focus-dark)}

.holo{position:relative;overflow-x:clip;background:radial-gradient(110% 60% at 78% 4%,rgba(26,75,68,.6),transparent 62%),radial-gradient(80% 50% at 0% 38%,rgba(19,45,39,.85),transparent 70%),radial-gradient(70% 40% at 90% 70%,rgba(197,160,89,.05),transparent 70%),linear-gradient(180deg,#0b1d18 0%,#0a1a16 45%,#081512 100%)}

/* The sticky world layer */
.holo-layer{position:sticky;top:0;z-index:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;overflow:hidden;pointer-events:none}
.holo-layer canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity 1.6s var(--ease)}
.holo-layer canvas:active{cursor:grabbing}
.holo.is-live .holo-layer canvas{opacity:1}
.holo.is-static .holo-layer canvas{display:none}
.holo-fallback{position:absolute;left:69%;top:52%;width:min(70vh,44vw);height:auto;transform:translate(-50%,-50%);opacity:.92;transition:opacity 1.4s var(--ease);pointer-events:none}
.holo.is-live .holo-fallback{opacity:0}
.holo.is-static:not([data-holo-stage="sphere"]) .holo-fallback{opacity:.22}

/* Chapter navigation (desktop) */
.holo-nav{position:absolute;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);pointer-events:auto;z-index:3}
.holo-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.holo-nav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;min-width:44px;padding:0 6px;text-decoration:none;color:var(--on-dark-mute);font-size:.76rem;font-weight:500;letter-spacing:.04em}
.holo-nav-label{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease);white-space:nowrap}
.holo-nav a:hover .holo-nav-label,.holo-nav a:focus-visible .holo-nav-label,.holo-nav a[aria-current] .holo-nav-label{opacity:1;transform:none}
.holo-nav a[aria-current]{color:var(--mint)}
.holo-nav-dot{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;transition:transform .3s var(--ease),background-color .3s,box-shadow .3s}
.holo-nav a[aria-current] .holo-nav-dot{background:var(--mint);transform:scale(1.25);box-shadow:0 0 0 4px rgba(121,215,163,.16)}
.holo-nav a.is-found .holo-nav-dot{box-shadow:0 0 0 3px rgba(197,160,89,.35),0 0 14px rgba(197,160,89,.65);border-color:var(--gold)}

/* View controls */
.holo-tools{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vw,28px);display:flex;gap:6px;pointer-events:auto;z-index:3}
.holo-tool{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:14px;border:1px solid rgba(155,232,189,.2);background:rgba(8,22,19,.66);color:var(--on-dark);cursor:pointer;font-size:.8rem;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.holo-tool:hover{border-color:var(--mint);color:var(--mint)}
.holo-tool svg{width:18px;height:18px}
.holo.is-static .holo-tools,.holo.is-static .holo-markers{display:none}

/* Numbered markers over the anatomy schematic */
.holo-markers{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.holo-markers.is-on{opacity:1}
.holo-marker{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:0;display:grid;place-items:center;font:700 .8rem/1 var(--sans);color:var(--emerald);background:rgba(245,241,232,.92);box-shadow:0 0 0 2px rgba(8,22,19,.55),0 0 18px rgba(121,215,163,.35);cursor:pointer;will-change:transform}
.holo-markers.is-on .holo-marker{pointer-events:auto}
.holo-marker[aria-pressed="true"]{background:var(--mint);box-shadow:0 0 0 2px rgba(8,22,19,.55),0 0 0 6px rgba(121,215,163,.3),0 0 26px rgba(121,215,163,.7)}

/* Chapters */
.holo-chapter{position:relative;z-index:1;pointer-events:none;padding-block:clamp(72px,13vh,150px)}
.holo-panel,.holo-copy,.holo-app-head,.holo-app .showcase,.holo-get,.holo-app-grid,.holo-caption{pointer-events:auto}
.holo-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:start}
.holo-chapter:not(.holo-hero){min-height:100vh;min-height:100svh}
.holo-space{min-height:40vh;position:relative}
.holo-stack{display:grid;gap:14px;pointer-events:none}
.holo-window{display:none}

/* Holographic glass panel with a light-catching edge */
.holo-panel{position:relative;padding:clamp(24px,3vw,42px);border-radius:30px;background:linear-gradient(165deg,rgba(15,38,33,.9),rgba(8,22,19,.86));border:1px solid rgba(155,232,189,.12);box-shadow:0 1px 0 rgba(245,241,232,.06) inset,0 60px 100px -70px rgba(0,0,0,.85)}
.holo-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(155,232,189,.55),rgba(155,232,189,.06) 28%,transparent 60%,rgba(197,160,89,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
@media (min-width:900px) and (hover:hover){.holo-panel{background:linear-gradient(165deg,rgba(15,38,33,.78),rgba(8,22,19,.7));backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%)}}
.holo-panel>.lead{margin-top:16px}
.holo-panel h3{color:var(--on-dark)}
.holo-panel-wide{padding:clamp(24px,3vw,44px)}

/* Hero */
.holo-hero{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));display:grid;align-content:center;padding-block:clamp(36px,7vh,88px) 40px}
.holo-hero .hero-copy h1{font-size:clamp(2.8rem,1.9rem + 4vw,5.8rem)}
.holo-begin{display:inline-flex;align-items:center;gap:14px;margin-top:30px;min-height:44px;color:var(--on-dark-soft);font-size:.9rem;text-decoration:none}
.holo-begin:hover{color:var(--mint)}
.holo-begin-line{width:42px;height:1px;background:linear-gradient(90deg,var(--mint),transparent);position:relative}
.holo-begin-line::after{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
[data-motion="on"] .holo-begin-line::after{animation:holo-travel 2.8s var(--ease) infinite}
@keyframes holo-travel{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:37px;opacity:0}}
.holo-hero .holo-space{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}
.holo-hint{font-size:.78rem;color:var(--on-dark-mute);letter-spacing:.02em;text-align:center}
.holo.is-static .holo-hint{display:none}
.for-touch{display:none}
@media (pointer:coarse){.for-touch{display:inline}.for-fine{display:none}}
.holo-caption{margin-top:28px;font-size:.78rem;color:var(--on-dark-mute)!important;max-width:var(--max);text-shadow:0 1px 10px rgba(8,21,18,.95),0 0 2px rgba(8,21,18,.9)}
.holo-hint{text-shadow:0 1px 10px rgba(8,21,18,.95)}
.holo-hero .btn-secondary{background:rgba(8,21,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.holo-hero .btn-secondary:hover{background:rgba(20,48,42,.75)}

/* Understand: data plates */
.data-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.data-plate{position:relative;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(160deg,rgba(121,215,163,.09),rgba(121,215,163,.02));border:1px solid rgba(155,232,189,.16);display:flex;flex-direction:column;gap:8px}
.data-plate .stat-value{font-size:clamp(1.5rem,1.2rem + 1vw,2.15rem);color:var(--mint)}
.data-plate p:not(.stat-value){font-size:.86rem;line-height:1.5}
.data-plate .source{margin-top:auto;font-size:.72rem}
@media (max-width:640px){.data-plates{grid-template-columns:1fr}}
.holo .symptom-list li{background:rgba(245,241,232,.05);border-color:var(--line-dark);color:var(--on-dark);min-height:50px}
.holo .symptom-list li::before{background:var(--mint);box-shadow:0 0 8px rgba(121,215,163,.6)}
.holo .symptom-list{margin:16px 0}

/* Anatomy chips and text */
.region-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.region-chip .num{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ivory);color:var(--emerald);font-weight:700;font-size:.72rem}
.region-chip .swatch{width:10px;height:10px;border-radius:3px;margin-left:2px}
.region-info{margin-top:16px;min-height:132px;padding:18px 20px;border-radius:20px;background:rgba(245,241,232,.04);border:1px solid var(--line-dark)}
.region-info h3{font-size:var(--step-1);margin-bottom:8px}
.region-info p{font-size:.94rem}
.region-placeholder{color:var(--on-dark-mute)!important}
.holo .notice-bar{margin-top:20px}

/* Constellation controls */
.holo-controls{display:grid;gap:12px;margin-top:22px;padding:18px;border-radius:20px;background:rgba(245,241,232,.03);border:1px solid var(--line-dark)}
.day-readout{min-height:3.2em;font-size:.92rem;color:var(--on-dark)!important;font-variant-numeric:tabular-nums}
.cat-chips .chip{min-height:44px;font-size:.82rem;padding:0 12px}
.cat-mark{flex:none;width:12px;height:12px;display:inline-block}
.cat-circle{border-radius:50%;background:#79D7A3}
.cat-square{border-radius:2px;background:#F5F1E8}
.cat-triangle{background:#C5A059;clip-path:polygon(50% 0,100% 100%,0 100%)}
.cat-diamond{background:#E8A783;transform:rotate(45deg) scale(.82)}
.cat-ring{border-radius:50%;border:3px solid #B8A3DC}
.cat-bar{width:5px;border-radius:3px;background:#E58F8F}
.holo .cat-chips .chip[aria-pressed="true"]{background:rgba(245,241,232,.1);border-color:rgba(245,241,232,.45);color:var(--on-dark)}
.holo .cat-chips .chip[aria-pressed="false"]{color:var(--on-dark-mute);border-style:dashed}
.chip[aria-pressed="false"] .cat-mark{opacity:.3}
.layer-set{border:0;margin:4px 0 0;padding:0;display:grid;gap:0}
.layer-set .check{font-size:.86rem;color:var(--on-dark-soft)}
.btn-small{min-height:44px;padding:0 18px;font-size:.88rem}
.holo-controls .btn-small{justify-self:start}

/* Story and reflection */
.story{margin-top:18px;padding:20px;border-radius:20px;background:rgba(121,215,163,.06);border:1px solid rgba(155,232,189,.2);display:grid;gap:10px}
.story h3{font-size:var(--step-2)}
.story h3:focus{outline:none}
.reflect{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-dark)}
.reflect fieldset{border:0;padding:0;margin:14px 0 0;display:grid;gap:8px}
.reflect legend{font:500 var(--step-1)/1.35 var(--serif);color:var(--on-dark);margin-bottom:12px}
.holo .check-option{background:rgba(245,241,232,.05);border-color:var(--line-dark);color:var(--on-dark)}
.holo .check-option input{accent-color:var(--mint)}
.holo .check-option:has(input:checked){border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset}
.holo .check-feedback{background:rgba(245,241,232,.05);border-left-color:var(--mint);color:var(--on-dark)!important}

/* Lab */
.lab-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px}
.lab-panel{display:grid;gap:14px}
.lab-panel[hidden]{display:none}
.lab-panel .h3{font-size:var(--step-2)}
.lab-readout{padding:14px 16px;border-radius:16px;background:rgba(121,215,163,.07);border:1px solid rgba(155,232,189,.18);font-size:.9rem;display:grid;gap:8px;color:var(--on-dark)!important}
.lab-readout p{color:var(--on-dark)!important}
.lab-readout:empty{display:none}
.lab-where{font-size:.88rem}
.lab-where .tag{margin-right:6px;vertical-align:1px}
.lab-static-note{display:none}
.holo.is-static .lab-static-note{display:block;color:#E3C88C!important}

/* Discovery feedback */
.activity-status{margin-top:12px;font-size:.88rem;color:var(--on-dark-mute)!important}
.activity-status:empty{display:none}
.activity-status.is-found{color:#E3C88C!important}
.knowledge-card{margin-top:14px;border-radius:18px;border:1px solid var(--line-dark);background:rgba(245,241,232,.03);transition:border-color .6s,box-shadow .6s,background-color .6s}
.knowledge-card>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;font-weight:600;font-size:.9rem;color:var(--on-dark)}
.knowledge-card>summary::-webkit-details-marker{display:none}
.knowledge-card>summary::after{content:"+";margin-left:auto;color:var(--mint);font-size:1.1rem}
.knowledge-card[open]>summary::after{content:"–"}
.knowledge-card>p,.knowledge-card>.source{padding:0 18px}
.knowledge-card>p{padding-bottom:6px;font-size:.92rem}
.knowledge-card>.source{padding-bottom:16px;margin-top:4px}
.kc-star{flex:none;width:14px;height:14px;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);background:var(--on-dark-mute);transition:background-color .6s,filter .6s}
.knowledge-card.is-found{border-color:rgba(197,160,89,.6);background:rgba(197,160,89,.07);box-shadow:0 0 0 1px rgba(197,160,89,.2),0 0 40px -12px rgba(197,160,89,.55)}
.knowledge-card.is-found .kc-star{background:var(--gold);filter:drop-shadow(0 0 6px rgba(197,160,89,.9))}

/* Everyday moments on dark glass */
.holo .moment p{color:var(--on-dark-soft)}
.holo .moment h3{color:var(--on-dark)}
.holo .moments:focus-visible{outline-color:var(--focus-dark)}
.holo .photo{background:#10241f;box-shadow:0 0 0 1px rgba(155,232,189,.12)}
.holo-wide .section-head{margin-bottom:28px}

/* Stage E — Enter EndoAI */
.holo-app{padding-bottom:clamp(64px,9vw,120px)}
.holo-app-head{max-width:760px;margin-bottom:28px}
.holo-app-head .lead{margin-top:16px}
.holo-app .showcase{--tilt-x:0deg;--tilt-y:0deg;padding:clamp(20px,3vw,36px);border-radius:32px;background:linear-gradient(165deg,rgba(15,38,33,.55),rgba(8,22,19,.35));border:1px solid rgba(155,232,189,.1)}
.holo-app .showcase-panel{grid-template-columns:minmax(220px,380px) minmax(0,1fr)}
.holo-app .showcase-panel .phone{max-width:340px;transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(calc(var(--tilt-y) + 7deg)) rotateZ(-1deg);transition:transform .7s var(--ease);box-shadow:0 70px 120px -60px rgba(0,0,0,.9),0 0 0 1px rgba(155,232,189,.2) inset,0 0 80px -20px rgba(121,215,163,.35)}
.holo-app .showcase-panel .phone::after{content:"";position:absolute;inset:10px;border-radius:26px;background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 28%,transparent 72%,rgba(121,215,163,.1));pointer-events:none}
.holo-app .showcase-copy p{color:var(--on-dark-soft)}
.holo-app .phone-illustration{background:linear-gradient(160deg,#F5F1E8,#EDE6D6)}
[data-motion="off"] .holo-app .showcase-panel .phone{transform:none}
@media (max-width:760px){.holo-app .showcase-panel{grid-template-columns:1fr}.holo-app .showcase-panel .phone{max-width:250px;transform:none}}
.holo-get{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:22px;padding:22px clamp(20px,3vw,32px);border-radius:24px;background:linear-gradient(120deg,rgba(121,215,163,.14),rgba(197,160,89,.08));border:1px solid rgba(155,232,189,.25)}
.holo-get .eyebrow{margin-bottom:6px}
.holo-get .h3{color:var(--on-dark)}
.holo-app-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,3vw,32px);margin-top:clamp(28px,4vw,48px);align-items:start}
@media (max-width:1000px){.holo-app-grid{grid-template-columns:1fr}}
.holo .journey{margin-top:0}
.holo .journey-steps button{border-color:var(--line-dark);color:var(--on-dark)}
.holo .journey-steps button[aria-current="step"]{background:rgba(121,215,163,.14);border-color:var(--mint);color:var(--mint)}
.holo .journey-body{background:rgba(245,241,232,.04);border-color:var(--line-dark)}
.holo .journey-note{background:rgba(121,215,163,.1);color:var(--on-dark)}
.holo .journey-note strong{color:var(--on-dark)}
.holo .summary-card,.holo .summary-tile{background:rgba(245,241,232,.05);border-color:var(--line-dark)}
.holo .summary-tile span{color:var(--on-dark-mute)}
.holo .summary-card li,.holo .journey-body li{color:var(--on-dark-soft)}
.holo .js-day{stroke:rgba(245,241,232,.3)}
.holo .js-dot,.holo .js-label{fill:var(--on-dark-mute)}
.holo .muted{color:var(--on-dark-mute)}
.holo .chip[aria-pressed="true"] .glyph{color:var(--emerald)}
.prep-items{border:0;padding:0;margin:14px 0 18px;display:grid;gap:2px}
.prep-items .check{align-items:flex-start;font-size:.9rem;color:var(--on-dark-soft);padding:6px 0}
.prep-items .check input{margin-top:2px;flex:none}
.prep-card{margin-top:16px;padding:18px 20px;border-radius:18px;background:rgba(121,215,163,.07);border:1px solid rgba(155,232,189,.22);display:grid;gap:10px}
.prep-card:focus{outline:none;box-shadow:0 0 0 2px var(--focus-dark)}
.prep-open{font:italic 400 var(--step-1)/1.4 var(--serif);color:var(--on-dark)!important}

/* After the journey: trust and download in the same world */
.holo-after{background:radial-gradient(80% 60% at 15% 0%,rgba(26,75,68,.45),transparent 60%),linear-gradient(180deg,#081512 0%,#0b1d18 100%)}
.holo-after+.holo-after{border-top:1px solid var(--line-dark)}
.scene-dark .trust-detail p{color:var(--on-dark-soft)}
.scene-dark ul.ticks li::before{background:rgba(121,215,163,.14);box-shadow:inset 0 0 0 5px var(--mint)}
.scene-dark ul.crosses li::before{background:transparent;box-shadow:inset 0 0 0 2px var(--on-dark-mute)}
.scene-dark .card-glass h3{color:var(--on-dark)}
.closing .closing-grid{align-items:start}
.discovery-map{position:relative;padding:clamp(22px,3vw,32px);border-radius:28px;background:linear-gradient(165deg,rgba(15,38,33,.85),rgba(8,22,19,.8));border:1px solid rgba(155,232,189,.14)}
.dmap{width:100%;max-width:380px;height:auto;margin:6px auto 12px}
.dmap-edge{stroke:rgba(245,241,232,.14);stroke-width:1.5;fill:none;stroke-dasharray:3 5;transition:stroke .8s}
.dmap-edge.is-found{stroke:rgba(197,160,89,.85);stroke-dasharray:none;filter:drop-shadow(0 0 4px rgba(197,160,89,.6))}
.dmap-node{fill:#0b1d18;stroke:rgba(245,241,232,.4);stroke-width:1.5;transition:fill .8s,stroke .8s}
.dmap-node.is-found{fill:var(--gold);stroke:#F3DFA9;filter:drop-shadow(0 0 8px rgba(197,160,89,.85))}
.dmap-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:2px;font-size:.9rem}
.dmap-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--line-dark)}
.dmap-list a{color:var(--on-dark);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.dmap-list span{font-size:.78rem;color:var(--on-dark-mute)}
.explore-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin-top:clamp(36px,5vw,64px)}
.explore-row a{display:grid;gap:10px;justify-items:start;padding:18px 20px;border-radius:20px;border:1px solid var(--line-dark);background:rgba(245,241,232,.03);text-decoration:none;color:var(--on-dark);min-height:44px;transition:border-color .3s,transform .4s var(--ease)}
.explore-row a:hover{border-color:var(--mint);transform:translateY(-3px)}
.explore-row strong{font:500 var(--step-1)/1.2 var(--serif)}

/* Phones and narrow tablets: the world rises to the top of the screen and
   each chapter's panel scrolls up over it. */
@media (max-width:899px){
  .holo-grid{grid-template-columns:1fr}
  .holo-space{display:none}
  /* A see-through window between explanation and controls, so the object
     stays in view above the controls being used. */
  .holo-window{display:block;height:44vh;height:44svh}
  .holo-chapter{padding-block:0 clamp(48px,8vh,80px)}
  .holo-chapter:not(.holo-hero):not(.holo-app){padding-top:50vh;padding-top:50svh;min-height:auto}
  .holo-wide{padding-top:30vh!important}
  .holo-panel{background:linear-gradient(165deg,rgba(13,33,29,.94),rgba(8,22,19,.93));padding:22px 18px 26px;border-radius:24px}
  .holo-nav{display:none}
  .holo-tools{bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);right:12px}
  .holo-tool-text{font-size:.74rem;padding:0 9px}
  .holo-fallback{left:58%;top:86%;width:min(92vw,48vh)}
  .holo:not([data-holo-stage="sphere"]) .holo-fallback{top:26%;left:50%}
  .holo-hero{min-height:auto;padding-block:clamp(28px,6vh,56px) 36px;align-content:start}
  .holo-hero .hero-copy{position:relative}
  .holo-hero .hero-copy::before{content:"";position:absolute;inset:-24px -16px -10px -16px;background:radial-gradient(90% 70% at 30% 50%,rgba(8,21,18,.72),transparent 75%);z-index:-1;pointer-events:none}
  .holo-hint{position:static;display:block;margin-top:18px}
  .holo-hero .holo-space{display:block;min-height:0}
  .holo-app{padding-top:clamp(48px,10vh,96px)}
}
@media (max-width:520px){
  .holo-hero .hero-copy h1{font-size:clamp(2.45rem,10.5vw,3.2rem)}
  .holo-hero .lead{font-size:1.04rem}
  .holo-begin{font-size:.84rem}
}
/* Small phones (320–380 px): keep the headline, the main action and both real
   store badges in the first screen. Badges sit side by side at a legible size
   (the Apple badge stays above Apple's 40 px minimum height); on short screens
   the tagline moves after the store links rather than disappearing. */
@media (max-width:380px){
  .holo-hero{padding-block:18px 28px}
  .holo-hero .eyebrow{margin-bottom:0}
  .holo-hero .hero-copy h1{font-size:2.15rem;margin-top:8px}
  .holo-hero .lead{font-size:.96rem;line-height:1.55;margin-top:12px}
  .holo-hero .hero-actions{margin-top:16px;gap:8px}
  .holo-hero .hero-actions .btn{min-height:46px;padding:0 18px}
  .holo-hero .hero-stores{margin-top:12px}
  .holo-hero .store-links{gap:8px;flex-wrap:nowrap}
  .holo-hero .store-links a{min-height:48px}
  .holo-hero .store-links img.badge-apple{width:120px;height:40px}
  .holo-hero .store-links img.badge-google{width:136px;height:52px}
}
@media (max-width:380px) and (max-height:700px){
  .holo-hero .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
  .holo-hero .hero-tagline{order:1;margin-top:18px}
  .holo-hero .holo-begin,.holo-hero .section-audio{order:2}
}
@media print{.holo-layer{display:none}.holo-panel{background:#fff;color:#000}}
/* Premium pass: glass rim on the home header, legible hero lines over the
   sphere on phones, and calm solid surfaces when transparency is reduced. */
body[data-page="home"] .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(121,215,163,.35) 30%,rgba(245,241,232,.22) 55%,rgba(197,160,89,.28) 78%,transparent)}
@media (max-width:900px){
  .holo-hero .hero-tagline,.holo-hero .availability,.holo-begin{text-shadow:0 1px 12px rgba(8,21,18,.95),0 0 3px rgba(8,21,18,.9)}
}
@media (prefers-reduced-transparency:reduce){
  body[data-page="home"] .site-header{background:#0A1C18;-webkit-backdrop-filter:none;backdrop-filter:none}
  body[data-page="home"] .mobile-menu nav{background:#0E2621;-webkit-backdrop-filter:none;backdrop-filter:none}
  .holo-panel,.holo-tool,.holo-hero .btn-secondary{background:#0E2621!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (forced-colors:active){body[data-page="home"] .site-header::after{display:none}}
/* Stage E feature-arc and reveal rules live in holo-app.css, linked just
   before the app chapter so they never delay the first paint. */
/* Atmospheres: the light around the world changes with each stage (weights
   from atmosphereWeights in js/holo/stages.js; opacity only, compositor-cheap).
   Without WebGL or JavaScript the HoloSphere's own light stays on. */
.holo-atmos{position:absolute;inset:0;pointer-events:none}
.holo-atmos .atm{position:absolute;inset:0;opacity:0;will-change:opacity}
.holo-atmos .atm-sphere{opacity:1;background:radial-gradient(60% 55% at 72% 46%,rgba(26,92,78,.5),transparent 70%),radial-gradient(30% 24% at 82% 18%,rgba(197,160,89,.09),transparent 70%)}
.holo-atmos .atm-biology{background:radial-gradient(52% 50% at 70% 48%,rgba(121,215,163,.2),transparent 68%),radial-gradient(70% 45% at 40% 100%,rgba(197,160,89,.11),transparent 70%)}
.holo-atmos .atm-constellation{background:radial-gradient(75% 70% at 62% 45%,transparent 35%,rgba(3,10,8,.72) 100%),radial-gradient(circle at center,rgba(155,232,189,.14) 0 1px,transparent 1.5px) 0 0/34px 34px;-webkit-mask-image:radial-gradient(70% 70% at 62% 45%,#000 30%,transparent 85%);mask-image:radial-gradient(70% 70% at 62% 45%,#000 30%,transparent 85%)}
.holo-atmos .atm-discovery{background:radial-gradient(60% 70% at 24% 50%,rgba(22,64,56,.55),transparent 70%),radial-gradient(45% 45% at 72% 58%,rgba(95,211,184,.15),transparent 70%)}
.holo-atmos .atm-app{background:radial-gradient(42% 52% at 30% 62%,rgba(121,215,163,.24),transparent 70%),radial-gradient(70% 50% at 50% 0%,rgba(26,75,68,.38),transparent 70%)}
@media (max-width:900px){
  .holo-atmos .atm-sphere{background:radial-gradient(90% 45% at 50% 92%,rgba(26,92,78,.45),transparent 70%)}
  .holo-atmos .atm-biology,.holo-atmos .atm-discovery,.holo-atmos .atm-app{background-position:center}
}
@media (forced-colors:active){.holo-atmos{display:none}}
/* Short landscape phones: the lead wraps before it reaches the sphere's ring. */
@media (max-height:520px) and (min-aspect-ratio:21/20){.holo-hero .hero-copy .lead{max-width:70vw}}