/* rich.css — KHESF family rich layer: reveals, carousels, pop-out doors, depth details. No libraries, CSP 'self'. */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
#bg,.bg-fallback{will-change:transform;transition:opacity 1.6s var(--ease),transform .9s var(--ease)}
/* Scroll-driven reveals (only hidden once rich.js is running, so no-JS still reads) */
.rx [data-reveal]{opacity:0;filter:blur(8px);transform:translateY(18px);transition:opacity .8s var(--ease),filter .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.rx [data-reveal].in{opacity:1;filter:none;transform:none}
/* Depth cards: hairline rotating border, light sweep, tilt, glow */
.card,.slide{position:relative;isolation:isolate;overflow:hidden}
.card::before,.slide::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--spin),transparent 0 70%,color-mix(in srgb,var(--accent) 80%,transparent) 80%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .8s var(--ease);pointer-events:none;z-index:-1}
.card::after,.slide::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 22%,transparent),transparent 40%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;z-index:-1}
.card:hover::before,.card:focus-within::before,.slide.is-active::before{opacity:1;animation:spin 7s linear infinite}
.card:hover::after,.slide:hover::after,.slide.is-active::after{opacity:1}
.card{transition:border-color .6s var(--ease),transform .7s var(--ease),box-shadow .8s var(--ease)}
.card:hover{transform:translateY(-4px) perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 30px color-mix(in srgb,var(--accent) 14%,transparent)}
@keyframes spin{to{--spin:360deg}}
.btn{position:relative;overflow:hidden;min-height:44px;transition:box-shadow .6s var(--ease),background .6s var(--ease),color .6s var(--ease),transform .5s var(--ease)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .9s var(--ease);pointer-events:none}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{left:120%}
.btn:focus-visible,.sl-btn:focus-visible,.sl-dot:focus-visible,summary:focus-visible,.door-x:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
nav.tabs button{min-height:40px}
/* Ad placeholders: OFF until the Founder picks an ad network. To switch back on, set data-ads="on" on <html>
   (build.mjs does this when sites.config.json has "ads": true). display:none leaves no gap. */
html:not([data-ads=on]) .ad-slot{display:none!important}
/* Carousels */
main{grid-template-columns:minmax(0,1fr)}[role=tabpanel]{min-width:0}
.slider{position:relative;margin-top:24px;max-width:960px;container-type:inline-size}
.sl-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100cqw - 8px);gap:16px;scroll-padding-inline:4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;padding:6px 4px 14px;scrollbar-width:none;cursor:grab}
.sl-track::-webkit-scrollbar{display:none}
/* 1 card per view on narrow sliders, 2 from 560 px, 3 from 900 px: whole cards only, never clipped */
@container (min-width:560px){.sl-track{grid-auto-columns:calc((100cqw - 24px) / 2)}}
@container (min-width:900px){.sl-track{grid-auto-columns:calc((100cqw - 40px) / 3)}}.sl-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.sl-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:18px}
.slide{scroll-snap-align:start;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease),border-color .7s var(--ease);display:flex;flex-direction:column;gap:8px;user-select:none}
.rx .slide{opacity:.55;filter:saturate(.7)}
.rx .slide.is-active{opacity:1;transform:none;filter:none;border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.slide h3{margin:0;font-size:18px;letter-spacing:.04em}.slide p{margin:0;color:var(--mute);font-size:14.5px}
.slide .num{font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;line-height:1;color:var(--accent)}
.slide .tag{align-self:flex-start;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);border:1px solid currentColor;border-radius:99px;padding:2px 9px}
.slide .btn{align-self:flex-start;margin-top:auto;padding:10px 16px;font-size:12px}
.sl-ctl{display:flex;align-items:center;gap:10px;margin-top:6px}
.sl-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink);font-size:18px;cursor:pointer;transition:border-color .5s var(--ease),transform .5s var(--ease)}
.sl-btn:hover{border-color:var(--accent);transform:scale(1.06)}.sl-btn:disabled{opacity:.35;cursor:default;transform:none}
.sl-dots{display:flex;gap:2px}
.sl-dot{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.sl-dot::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .5s var(--ease),background .5s var(--ease)}
.sl-dot[aria-current=true]::before{width:24px;background:var(--accent)}
.sl-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Expandable cards */
details.more{margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
details.more summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";margin-left:auto;font-size:18px;transition:transform .5s var(--ease)}
details.more[open] summary::after{transform:rotate(45deg)}
details.more ul{margin:4px 0 6px;padding-left:18px;color:#c9d3da;font-size:14px}
details.more[open] ul{animation:drop .5s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Pop-out doors (native dialog) */
dialog.door{width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 40px);padding:0;border:1px solid var(--line);border-radius:22px;background:#071019;color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--accent) 16%,transparent);overflow:auto}
dialog.door::backdrop{background:rgba(2,5,9,.7);backdrop-filter:blur(6px)}
dialog.door[open]{animation:doorIn .6s var(--ease)}
dialog.door[open]::backdrop{animation:fade .5s var(--ease)}
@keyframes doorIn{from{opacity:0;transform:translateY(24px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.door-pic{height:170px;background:#04080e center/cover no-repeat;position:relative}
.door-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#071019 0%,rgba(7,16,25,0) 70%)}
.door-body{padding:6px 24px 24px}
.door-body h2{font-size:clamp(30px,5vw,42px);margin:0 0 6px}
.door-body .lead{font-size:16px;margin:0 0 10px}
.door-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.door-list li{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(4,8,14,.6);font-size:14.5px}
.door-list li span{margin-left:auto;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);white-space:nowrap}
dialog.door[open] .door-list li{animation:drop .6s var(--ease) both}
dialog.door[open] .door-list li:nth-child(2){animation-delay:.08s}dialog.door[open] .door-list li:nth-child(3){animation-delay:.16s}dialog.door[open] .door-list li:nth-child(4){animation-delay:.24s}dialog.door[open] .door-list li:nth-child(5){animation-delay:.32s}
.door-note{font-size:13px;color:var(--mute);border-left:2px solid var(--accent);padding-left:10px;margin:10px 0 0}
.door-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(4,8,14,.7);color:var(--ink);font-size:20px;cursor:pointer}
.family-doors .slide{min-height:200px}
.family-doors .slide .who{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent2)}
@media (max-width:720px){.door-pic{height:130px}nav.tabs{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}nav.tabs::-webkit-scrollbar{display:none}nav.tabs button{flex:0 0 auto}}
@media (hover:none),(pointer:coarse){.card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.rx [data-reveal]{opacity:1!important;filter:none!important;transform:none!important}.rx .slide{transform:none!important;filter:none!important}.sl-track{scroll-behavior:auto}.card:hover,.btn:hover{transform:none}.card::before,.slide::before{animation:none!important}dialog.door[open],dialog.door[open] .door-list li{animation:none!important}#bg,.bg-fallback{transform:none!important}}
/* Founding-member promo banner (waitlist + SUHUSH pricing). */
.promo{position:relative;isolation:isolate;overflow:hidden;max-width:720px;margin:18px 0 20px;padding:22px 24px 18px;border-radius:22px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent) 0%,var(--glass) 55%,color-mix(in srgb,var(--accent2) 16%,transparent) 100%);box-shadow:0 18px 50px -24px color-mix(in srgb,var(--accent) 70%,transparent)}
.promo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.09) 45%,transparent 60%);transform:translateX(-100%);animation:promoSweep 6s var(--ease) infinite}
.promo::after{content:"";position:absolute;right:-60px;top:-60px;z-index:-1;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%);animation:promoGlow 5s ease-in-out infinite alternate}
.promo-badge{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--obsidian);background:var(--accent);border-radius:999px;padding:5px 12px}
.promo .promo-t{margin:10px 0 6px;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(26px,4.4vw,38px);line-height:1.08;color:var(--ink)}
.promo-t em{font-style:normal;color:var(--accent)}
.promo .promo-sub{margin:0 0 4px;color:var(--ink);font-size:15px}
.promo .cta{margin-top:12px}
.promo .promo-terms{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}
.promo-terms a{color:var(--accent2)}
@keyframes promoSweep{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes promoGlow{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.promo::before,.promo::after{animation:none}}
.promo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;align-items:center}
.promo-body{min-width:0;grid-column:1;grid-row:1}
.promo-medal{grid-column:2;grid-row:1;width:128px;height:128px;filter:drop-shadow(0 10px 24px color-mix(in srgb,var(--accent) 45%,transparent));animation:medalFloat 6s ease-in-out infinite}
.promo .promo-earn{margin:0 0 6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.promo-earn strong{color:var(--accent);font-weight:600}
@keyframes medalFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@media (max-width:560px){.promo{grid-template-columns:minmax(0,1fr)}.promo-medal{grid-column:1;grid-row:1;width:92px;height:92px;justify-self:start}.promo-body{grid-row:2}}
.fm-success{display:flex;align-items:center;gap:14px;margin-top:8px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:16px;background:color-mix(in srgb,var(--accent) 10%,var(--glass));color:var(--ink);animation:drop .6s var(--ease)}
.fm-success img{flex:0 0 auto;width:72px;height:72px}
.fm-success strong{color:var(--accent);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.promo-medal,.fm-success{animation:none}}