/* V3 Elemental Investor: the Gabriel homepage on the investor site's system.
   Dark first (abyss), with one light breath (the gap) and one light decision chapter (membership + FAQ).
   Geist + JetBrains Mono, the Elemental palette, jade #93bba9 as the intelligence accent, emerald #365e4c for text on light.
   One smoky glass, one device spec, one material kit. */

:root{
  --obsidian:#181d20; --abyss:#111518; --deep:#0c1012; --pearl:#f0f3f1; --silver:#b7c1c1; --dim:#8f9b9c;
  --line:#2c3437; --line2:#485456; --jade:#93bba9;
  --chalk:#f0f2f0; --paper:#fafafa; --ink:#252a2b; --ash:#626b6c; --rule:#c8cece; --soft:#dfe5e3; --emerald:#365e4c;
  --glass:rgba(240,243,241,.08); --glass-edge:rgba(240,243,241,.14);
  --sans:'Geist','Helvetica Neue',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(20px,5vw,64px);
  --fs-12:12px; --fs-13:13px; --fs-15:15px; --fs-17:17px; --fs-lead:clamp(19px,1.5vw,22px); --fs-h3:clamp(21px,1.8vw,26px); --fs-h2:clamp(34px,4.2vw,52px); --fs-h1:clamp(44px,5.4vw,64px); --space:clamp(96px,11vw,168px); --wide:1312px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--abyss);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--abyss);color:var(--pearl);font-family:var(--sans);font-size:var(--fs-17);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:4px}
.chalk :focus-visible{outline-color:var(--emerald)}
.skip{position:absolute;left:12px;top:12px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--pearl);color:var(--obsidian);font-size:var(--fs-15);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}
.frame{width:100%;max-width:calc(var(--wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column}
.sec{padding-block:var(--space)}
.abyss{background:var(--abyss);color:var(--pearl)}
.chalk{background:var(--chalk);color:var(--ink)}

/* ---------- Type ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--fs-12);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.chalk .eyebrow{color:var(--emerald)}
.h1{font-size:var(--fs-h1);font-weight:300;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.h2{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
.statement{font-size:var(--fs-h1);font-weight:300;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--silver);max-width:34em;text-wrap:pretty}
.chalk .lead{color:var(--ash)}
.small{font-size:var(--fs-13);line-height:1.5;color:var(--dim)}
.fine{font-size:var(--fs-13);line-height:1.6;color:var(--dim);max-width:62em}
.chalk .fine{color:var(--ash)}
.fine a{color:inherit;text-underline-offset:3px}
.sec-head{gap:22px;max-width:860px}

/* ---------- Buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:500 15px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease-out),color .2s,border-color .2s,transform .2s var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn-light{background:var(--pearl);color:var(--obsidian)}
.btn-light:hover{background:#fff}
.btn-glass{background:var(--glass);border-color:var(--glass-edge);color:var(--pearl);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-glass:hover{border-color:rgba(240,243,241,.4)}
.btn-dark{background:var(--obsidian);color:var(--pearl)}
.btn-dark:hover{background:#000}
.btn-ghost{border-color:var(--rule);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- Header: smoky glass, the page moving behind it ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);color:var(--pearl)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--ease-out),background .35s;
  background:linear-gradient(180deg,rgba(17,21,24,.72),rgba(17,21,24,.5));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(240,243,241,.10)}
.nav.scrolled::before{opacity:1}
.nav[data-over=light]::before{background:linear-gradient(180deg,rgba(17,21,24,.86),rgba(17,21,24,.74))}
.nav-row{display:flex;align-items:center;gap:24px;height:68px}/* menu links sit with the logo, buttons take the right edge (Tyler 10/5) */
.mark{display:block;padding:15px 0}
.mark img{height:15px;width:auto}
.links{display:flex;gap:30px;margin-left:clamp(16px,1.7vw,24px)}
.links a,.menu{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:14px 0;color:var(--silver);transition:color .2s}
.links a:hover,.links a.on{color:var(--pearl)}
.nav-cta{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin-left:auto}
.nav-login{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--silver);white-space:nowrap;transition:color .2s}
.nav-login:hover{color:var(--pearl)}
.nav:not(.scrolled) .links a:not(.on),.nav:not(.scrolled) .nav-login,.nav:not(.scrolled) .menu{color:rgba(240,243,241,.9)}
.nav-login .short{display:none}
.btn-nav{height:44px;padding:0 18px;font-size:var(--fs-15)}
.btn-nav .short{display:none}
.menu{display:none;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;padding:0 2px}
.rail{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:.7}
.rail span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--jade)}
.sheet{position:fixed;inset:0;z-index:35;background:rgba(12,16,18,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:var(--pearl);padding-top:calc(88px + env(safe-area-inset-top,0px));overflow:auto}
.sheet-in{display:flex;flex-direction:column;gap:6px}
.sheet-in>a{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.03em;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
.sheet-actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.sheet-actions .btn{width:100%;height:54px}
.sheet-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin-top:18px}
.sheet-more a{display:flex;align-items:center;min-height:48px;font-size:var(--fs-17);color:var(--silver);text-decoration:none;border-bottom:1px solid var(--line)}
.sheet-more a:hover{color:var(--pearl)}
.links a[aria-current=page],.foot nav a[aria-current=page],.foot-legal a[aria-current=page]{color:var(--pearl)}
.sheet-in a[aria-current=page]:not(.btn){color:var(--jade)}
body.sheet-open{overflow:hidden}
@media (max-width:1060px){.links{display:none}.menu{display:inline-flex;align-items:center;justify-content:center}.nav-login .long{display:none}.nav-login .short{display:inline}}
@media (max-width:760px){.nav-login{display:none}}/* phones: logo, Join, Menu; Member login lives in the menu (Tyler 10/6) */
@media (max-width:520px){.btn-nav{height:44px;padding:0 16px}.btn-nav .long{display:none}.btn-nav .short{display:inline}}
@media (max-width:760px){.btn-nav{transition:opacity .3s,transform .3s}body.sticky-on .btn-nav{opacity:0;transform:translateY(-6px);pointer-events:none}}

/* ---------- 1. Hero ---------- */
.hero{position:relative;overflow:hidden;min-height:max(640px,100svh);display:flex;align-items:flex-end;background:#56708a}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 38%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.18) 9%,rgba(12,16,18,0) 18%),linear-gradient(90deg,rgba(14,18,21,.66) 0%,rgba(14,18,21,.40) 34%,rgba(14,18,21,.06) 62%,rgba(14,18,21,0) 100%),linear-gradient(0deg,rgba(17,21,24,.62) 0%,rgba(17,21,24,0) 38%)}
.hero-in{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-top:140px;padding-bottom:clamp(56px,7vw,96px)}
.hero-copy{gap:26px;max-width:640px}
.hero .lead{color:var(--pearl);max-width:31em}
.hero-hsa{display:inline-flex;align-items:center;gap:8px;width:fit-content;min-height:44px;margin-block:-6px;font-size:var(--fs-15);color:var(--pearl);text-decoration:none}
.hero-hsa svg{flex:none;width:18px;height:18px;padding:2px;border-radius:50%;background:var(--jade);color:var(--obsidian)}
.hero-hsa:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px) and (max-height:700px){.hero-in{padding-top:92px;padding-bottom:26px}.hero-copy{gap:16px}}
.hero-note{font-size:var(--fs-15);line-height:1.6;color:rgba(240,243,241,.8)}
.film-pill{display:inline-flex;align-items:center;gap:12px;flex:none;height:52px;padding:0 20px 0 6px;border-radius:999px;border:1px solid rgba(240,243,241,.28);background:rgba(240,243,241,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--pearl);cursor:pointer;transition:background .3s var(--ease-out),transform .3s var(--ease-out)}
.film-pill:hover{background:rgba(240,243,241,.2);transform:scale(1.03)}
.film-pill .ring{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pearl);color:var(--obsidian)}
.film-pill .ring svg{width:14px;height:14px;margin-left:2px}
.fp-t{font-size:var(--fs-15);font-weight:500}
.fp-d{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;color:var(--silver)}
@media (max-width:760px){
  /* Option B (Tyler 9/30): the photo is a band, the headline sits on its darkened edge, the rest reads on solid dark. */
  .hero{display:block;min-height:0;background:var(--abyss)}
  .hero-bg{position:relative;inset:auto;display:block;overflow:hidden;height:60svh;min-height:420px}
  .hero-bg img{object-position:50% 10%}
  .hero-shade{bottom:auto;height:60svh;min-height:420px;background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,0) 16%,rgba(17,21,24,0) 46%,rgba(17,21,24,.82) 80%,#111518 100%)}
  .hero-in{flex-direction:column;align-items:flex-start;gap:22px;margin-top:-132px;padding-top:0;padding-bottom:48px}
  .hero-copy{gap:20px}
  .hero .lead{font-size:var(--fs-lead)}
  .film-pill{height:48px}
  .hero .actions{flex-direction:column;align-items:stretch;gap:4px}
  .hero .actions .btn-light{height:54px}
  .hero .actions .btn-glass{align-self:flex-start;height:44px;padding:0;border-color:transparent;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(240,243,241,.45)}
}

/* Short phones (SE and smaller): a shorter band, the photo nudged so her face clears the headline and Join stays on screen. */
@media (max-width:760px) and (max-height:700px){.hero-bg,.hero-shade{height:52svh;min-height:300px}.hero-bg img{object-position:50% 22%}}

/* ---------- 2. Where your benefits can take you ---------- */
.logos{border-top:1px solid rgba(240,243,241,.06);border-bottom:1px solid rgba(240,243,241,.06);background:var(--abyss)}
.logos-in{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:34px}
.logos .eyebrow{flex:none;color:var(--dim)}
.marquee{flex:1;min-width:0;max-width:900px}
.logo-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px)}
.marquee.glide{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee.glide .logo-row{display:flex;justify-content:flex-start;gap:0;width:max-content;animation:logos 44s linear infinite}
.marquee.glide .logo-row li{flex:none;margin-right:clamp(48px,5vw,76px)}
.marquee.glide:hover .logo-row{animation-play-state:paused}
@keyframes logos{to{transform:translateX(-50%)}}
.logo-row img{width:auto;filter:brightness(0) invert(1);opacity:.5;transition:opacity .3s}
.logo-row li:hover img{opacity:.85}
.lg-lifetime{height:13px}.lg-prenuvo{height:21px}.lg-thorne{height:12px}.lg-oura{height:16px}.lg-eight{height:19px}.lg-hyperice{height:15px}.lg-neko{height:13px}
@media (max-width:1000px){.logos-in{flex-direction:column;align-items:flex-start;gap:22px}.marquee{max-width:none;width:100%}}
@media (max-width:600px){.logo-row{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;row-gap:24px}}

/* ---------- 3. The gap: light sweeps across the sentence ---------- */
.gap{padding-block:var(--space)}
.gap-in{gap:28px;max-width:1120px}
.sweep{--p:-12%;background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) calc(var(--p) - 9%),var(--emerald) var(--p),rgba(37,42,43,.15) calc(var(--p) + 9%),rgba(37,42,43,.15) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cite{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}

/* ---------- One device spec: every phone on the page ---------- */
.dev{position:relative;width:min(100%,300px);border-radius:44px;padding:9px;background:#0b0e10;box-shadow:0 0 0 2px #7d8789,inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px rgba(0,0,0,.45)}
.dev img,.dev video{width:100%;border-radius:36px;background:var(--obsidian)}

/* ---------- 4. How it works: three steps, each with one quiet visual ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(56px,6vw,88px)}
.step{display:flex;flex-direction:column;gap:10px}
.vis{position:relative;margin:0 0 22px;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--deep) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(240,243,241,.07);container-type:inline-size;isolation:isolate}
.g-a{background-image:url(/site/elemental-home-v4-investor/assets/how/slate-a.webp)}
.g-b{background-image:url(/site/elemental-home-v4-investor/assets/how/slate-b.webp)}
/* 01: the plan and its balance, lifted out of the app */
.vis-plan{display:grid;place-items:center}
.plan-ui{display:flex;flex-direction:column;gap:4cqi;width:76cqi}
.seg{display:grid;grid-template-columns:repeat(3,1fr);padding:1.1cqi;border-radius:999px;background:rgba(12,16,18,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(240,243,241,.14)}
.seg span{position:relative;z-index:0;padding:2.3cqi 0;text-align:center;font-size:max(12px,3.3cqi);line-height:1;color:rgba(240,243,241,.6)}
.seg .on{color:#111518;font-weight:500}
.seg .on::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--pearl)}
.bal{padding:5.4cqi 5.6cqi 5.8cqi;border-radius:5cqi;background:linear-gradient(135deg,#2a3235 0%,#1b2023 46%,#232a2d 70%,#171b1d 100%);box-shadow:inset 0 0 0 1px rgba(240,243,241,.12),0 5cqi 12cqi rgba(0,0,0,.45)}
.bal-l{font-family:var(--mono);font-weight:500;font-size:max(10px,2.5cqi);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.bal-n{margin-top:3.4cqi;font-size:13.5cqi;font-weight:300;letter-spacing:-.045em;line-height:1;color:var(--pearl);font-variant-numeric:tabular-nums}
.bal-s{margin-top:2.2cqi;font-size:max(12px,3.4cqi);color:var(--silver)}
/* 02: a person, with the app's confirmations */
.vis-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uis{position:absolute;z-index:1;left:5cqi;top:5.5cqi;display:flex;flex-direction:column;align-items:flex-start;gap:2.4cqi}
.ui{display:flex;align-items:center;gap:2.8cqi;padding:2.6cqi 3cqi 2.6cqi 2.6cqi;border-radius:4.4cqi;background:rgba(12,16,18,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:inset 0 0 0 1px rgba(240,243,241,.16),0 3cqi 8cqi rgba(0,0,0,.25);color:var(--pearl)}
.ui-i{flex:none;display:grid;place-items:center;width:9cqi;height:9cqi;border-radius:2.8cqi;background:rgba(240,243,241,.1)}
.ui-i svg{width:4.8cqi;height:4.8cqi}
.ui-t{display:flex;flex-direction:column;gap:.5cqi;min-width:0;padding-right:1cqi}
.ui-t b{font-size:max(12px,3.6cqi);font-weight:500;letter-spacing:-.01em;line-height:1.25;white-space:nowrap}
.ui-t small{font-size:max(11px,2.9cqi);color:var(--silver);line-height:1.3;white-space:nowrap}
.ui-k{flex:none;display:grid;place-items:center;width:5.6cqi;height:5.6cqi;border-radius:50%;background:var(--jade);color:var(--obsidian)}
.ui-k svg{width:3.8cqi;height:3.8cqi}
/* 03: the one phone, with the payout landing on it */
.vis-dev{--ph-top:9cqi}
.vis-phone{position:absolute;left:18cqi;top:var(--ph-top);width:64cqi}
.ph{padding:.55cqi;border-radius:10.6cqi;background:linear-gradient(150deg,#a3adaf 0%,#4d5659 20%,#2b3134 48%,#5e686b 76%,#2a3033 100%);box-shadow:0 6cqi 14cqi rgba(0,0,0,.55),0 1cqi 2cqi rgba(0,0,0,.4);-webkit-mask-image:linear-gradient(to bottom,#000 var(--f1,80%),transparent var(--f2,94%));mask-image:linear-gradient(to bottom,#000 var(--f1,80%),transparent var(--f2,94%))}
.bz{padding:1.5cqi;border-radius:10.05cqi;background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.scr{position:relative;border-radius:8.6cqi;overflow:hidden;background:#1a1e21}
.scr::before{content:"";position:absolute;left:50%;top:1.5cqi;width:18cqi;height:5.2cqi;margin-left:-9cqi;border-radius:3cqi;background:#000}
.scr img{display:block;width:100%;height:auto}
.sb{display:flex;align-items:center;justify-content:space-between;height:8.2cqi;padding:0 5.4cqi 0 7cqi;color:var(--pearl)}
.sb b{font-size:2.8cqi;font-weight:600;letter-spacing:.01em}
.sb svg{width:9.6cqi;height:auto}
.ui-paid{position:absolute;z-index:1;left:-12cqi;right:2.4cqi;top:36.6cqi}
.ui-paid .ui-t{flex:1}
.ui-paid{background:rgba(22,27,30,.92)}
.step-n{font-size:var(--fs-h3);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--jade);font-variant-numeric:tabular-nums}
.step h3{margin-top:10px;font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.step-p{font-size:var(--fs-17);color:var(--silver);max-width:24em;text-wrap:pretty}
.chalk .step-n{color:var(--emerald)}
.chalk .step h3{color:var(--ink)}
.chalk .step-p,.chalk .how-note{color:var(--ash)}
.chalk .vis{box-shadow:0 24px 48px -28px rgba(17,21,24,.55)}
.vis-cap{position:absolute;right:3.4cqi;bottom:5cqi;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-weight:500;font-size:max(10px,2.4cqi);letter-spacing:.12em;text-transform:uppercase;color:rgba(240,243,241,.55)}
/* Two sections of the same tone never meet on whitespace alone: a full-bleed rule marks the chapter */
section[data-tone=dark]:not(.photo):not(.logos)+section[data-tone=dark]:not(.photo),section[data-tone=dark]:not(.photo):not(.logos)+section[hidden]+section[data-tone=dark]:not(.photo){border-top:1px solid rgba(240,243,241,.09)}
section[data-tone=light]+section[data-tone=light],section[data-tone=light]+section[hidden]+section[data-tone=light]{border-top:1px solid rgba(37,42,43,.12)}
.nw{white-space:nowrap}
.how-note{margin-top:28px;font-size:var(--fs-13);color:var(--dim)}
.alongside{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:14px 48px;align-items:baseline;margin-top:clamp(72px,8vw,112px)}
.alongside p:last-child{font-size:var(--fs-17);color:var(--silver)}
.alongside a{color:var(--pearl);text-underline-offset:4px;text-decoration-color:rgba(240,243,241,.35)}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:56px}.vis{max-width:560px}.alongside{grid-template-columns:1fr}}
@media (max-width:760px){
  .steps{gap:44px}
  .step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:baseline}
  .vis{grid-column:1/-1;aspect-ratio:4/3;margin-bottom:10px}
  .vis-photo img{object-position:50% 0}
  .step-n{font-size:var(--fs-h3)}
  .step h3{margin-top:0}
  .step-p{grid-column:2}
  .vis-dev{--ph-top:-8cqi;--f1:78%;--f2:86%}
  .ui-paid{top:36cqi}
}

/* ---------- 5. The money comes back ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:center}
.month-copy{gap:26px}
.receipts{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rtotal{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-15);color:var(--silver)}
.rtotal b{font-weight:300;font-size:var(--fs-h2);color:var(--pearl);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.receipt{position:relative;min-height:80px;padding:14px 16px;border-radius:18px;border:1px solid rgba(240,243,241,.1);background:rgba(240,243,241,.03);transition:border-color .3s var(--ease-out),background .3s var(--ease-out)}
.receipt .rn{display:block;font-size:var(--fs-15);padding-right:52px}
.receipt .ra{position:absolute;top:14px;right:16px;font-size:var(--fs-15);color:var(--dim);font-variant-numeric:tabular-nums}
.receipt .rs{display:block;margin-top:8px;font-size:var(--fs-13);color:var(--dim)}
.receipt .rs::before{content:"Submitted"}
.receipt.paid{border-style:solid;border-color:rgba(147,187,169,.7);background:rgba(147,187,169,.1);animation:stamp .5s var(--ease-out)}
.receipt.paid .ra{color:var(--pearl)}
.receipt.paid .rs::before{content:"Paid back ✓";color:var(--jade)}
@keyframes stamp{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
.portrait{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:18px;background:var(--obsidian)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.toast{position:absolute;left:18px;right:18px;bottom:18px;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(17,21,24,.62);border:1px solid rgba(240,243,241,.14);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.toast.on{opacity:1;transform:none}
.receipts .toast{position:relative;left:auto;right:auto;bottom:auto;margin-top:4px}
.toast-orb{flex:0 0 36px;height:36px;border-radius:10px;background:var(--deep);display:grid;place-items:center;overflow:hidden}
.toast-orb img{width:32px;height:32px}
.toast-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.toast-top{display:flex;justify-content:space-between;font-size:var(--fs-13);color:var(--silver)}
.toast-top b{font-weight:500;color:var(--pearl)}
.toast-top i{font-style:normal;color:var(--dim)}
.toast-t{font-size:var(--fs-15);color:var(--pearl)}
.toast-s{font-size:var(--fs-13);color:var(--silver)}
.month .portrait img{object-position:50% 50%}
@media (max-width:860px){.split{grid-template-columns:1fr}.month .portrait{order:-1;aspect-ratio:4/3}.month .portrait img{object-position:50% 14%}}
@media (max-width:520px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.rhead{flex-direction:column;align-items:flex-start;gap:4px}.rhead .eyebrow,.rtotal{white-space:nowrap}.receipt .rn{padding-right:0}.receipt .ra{position:static;display:block;margin-top:4px}}
@media (min-width:861px) and (max-width:1140px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}/* three across is too narrow here: "Advanced" ran into "$349" */

/* ---------- 7. Categories ---------- */
.plan-strip{margin-top:clamp(64px,7vw,104px);padding-top:32px;border-top:1px solid var(--line)}
.ps-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.ps-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 22px;border-radius:18px;border:1px solid var(--line);background:rgba(240,243,241,.03);color:var(--pearl);text-decoration:none;transition:border-color .2s,background .2s}
.ps-list a:hover{border-color:rgba(240,243,241,.32);background:rgba(240,243,241,.06)}
.ps-n{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.ps-p{font-size:var(--fs-h3);font-weight:300;letter-spacing:-.02em}
.ps-p i{font-style:normal;font-size:var(--fs-15);color:var(--dim);margin-left:6px}
.ps-b{font-size:var(--fs-15);color:var(--silver)}
.ps-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;font-size:var(--fs-15);color:var(--pearl);text-underline-offset:4px}
@media (max-width:900px){.ps-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tiles{display:grid;grid-template-columns:2fr repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(48px,5vw,72px)}
.tile-flag .tile-img img{aspect-ratio:8/5;object-position:50% 45%}
.tile{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--pearl)}
.tile-img{display:block;overflow:hidden;border-radius:18px;box-shadow:0 0 0 1px rgba(240,243,241,.06)}
.tile-img img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:brightness(.84) saturate(.9) contrast(1.04);transition:filter .6s var(--ease-out),transform 1.2s var(--ease-out)}
.tile:hover .tile-img img{filter:none;transform:scale(1.03)}
.tile-t{font-size:var(--fs-15);color:var(--silver);letter-spacing:-.01em;transition:color .3s}
.tile:hover .tile-t{color:var(--pearl)}
.care-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.care-foot p{font-size:var(--fs-lead);color:var(--silver);max-width:34em}
.care-foot b{font-weight:400;color:var(--pearl)}
.care .fine{margin-top:28px}
/* Category index rail: the categories beyond the five photos */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cat-index{position:relative;display:flex;align-items:stretch;justify-content:space-between;margin-top:40px}
.cat-index::before,.cat-index::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(28,33,34,.12);transform-origin:left}
.cat-index::before{top:0}.cat-index::after{bottom:0}
.cat-index a{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 2px;color:var(--ink);text-decoration:none}
.ci-n{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.08em;color:var(--emerald)}
.ci-t{font-size:var(--fs-15);font-weight:500;letter-spacing:-.01em;transition:color .18s}
.ci-c{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);color:#6b7370}
.cat-index a:not(.ci-all)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--emerald);transform:scaleX(0);transform-origin:left;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.cat-index a:hover::after,.cat-index a:focus-visible::after{transform:scaleX(1)}
.cat-index a:hover .ci-t{color:var(--emerald)}
.cat-index .ci-all{color:var(--emerald)}
.ci-arrow{display:inline-block;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.ci-all:hover .ci-arrow,.ci-all:focus-visible .ci-arrow{transform:translateX(4px)}
.cat-index.rv{animation:none}
.cat-index.rv::before,.cat-index.rv::after{animation:ruleDraw .6s var(--ease-out) both}
.cat-index.rv a{animation:rise .6s var(--ease-out) both;animation-delay:calc(150ms + var(--k) * 50ms)}
@keyframes ruleDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .cat-index{flex-direction:column;margin-top:28px}
  .cat-index::after{display:none}
  .cat-index a{min-height:52px;border-bottom:1px solid rgba(28,33,34,.12)}
  .cat-index a:not(.ci-all)::after{display:none}
  .ci-c,.ci-all .ci-arrow{margin-left:auto}
}
@media (max-width:1100px) and (min-width:761px){
  .cat-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .cat-index::after{display:none}
  .cat-index a{border-bottom:1px solid rgba(28,33,34,.12)}
  .cat-index a:not(.ci-all)::after{display:none}
  .ci-c,.ci-all .ci-arrow{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.cat-index.rv::before,.cat-index.rv::after,.cat-index.rv a{animation:none}}

.chalk .tile{color:var(--ink)}
.chalk .tile-img{box-shadow:none}
.chalk .tile-img img{filter:saturate(.95)}
.chalk .tile-t{color:var(--ink)}
.chalk .tile:hover .tile-t{color:var(--emerald)}
/* The 275+ section (Tyler 10/6): no 01-04 grid; one bold "275+ categories" button beside the heading, to Explore care */
.care .care-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.care .care-head .sec-head{flex:1 1 auto;min-width:0}
.care .care-cta{flex:none;margin-bottom:2px}
.cats-all{height:56px;padding:0 26px 0 28px;font-size:var(--fs-17);gap:12px}
.cats-all .cats-arrow{display:inline-block;transition:transform .18s var(--ease-out)}
.cats-all:hover .cats-arrow,.cats-all:focus-visible .cats-arrow{transform:translateX(4px)}
@media (max-width:900px){.care .care-head{flex-direction:column;align-items:flex-start;gap:24px}}
@media (prefers-reduced-motion:reduce){.cats-all .cats-arrow{transition:none}}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.tile-flag{grid-column:1/-1}.tile-flag .tile-img img{aspect-ratio:21/9}}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.tile-flag .tile-img img{aspect-ratio:16/10}}
@media (max-width:760px){.care-foot{flex-direction:column;align-items:stretch}.care-foot .btn{width:100%;height:54px}}

/* ---------- 7. The demo: the intelligence enters the phone ---------- */
.demo{position:relative;background:var(--abyss)}
.demo-stage{position:relative;padding-block:var(--space)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,112px);align-items:center}
.demo-copy{gap:24px}
.beats{margin-top:6px}
.beats li{border-top:1px solid var(--line)}
.beats .beat{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:baseline;width:100%;padding:15px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.beats li:last-child{border-bottom:1px solid var(--line)}
.beats b{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:color .4s}
.beats span{font-size:var(--fs-17);color:var(--dim);transition:color .4s}
.beats li.on b{color:var(--jade)}
.beats li.on span{color:var(--pearl)}
.beats li.done span{color:var(--silver)}
.demo-dev{display:flex;flex-direction:column;align-items:center;gap:24px}
.dev-live{width:min(100%,340px);aspect-ratio:786/1704;padding:9px}
@media (min-width:961px){.dev-live{width:auto;height:min(74vh,700px)}}
.dev-live video{height:100%;object-fit:cover;background:var(--paper);filter:brightness(.93) saturate(.96)}
.replay{position:absolute;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(24,29,32,.2);background:rgba(250,250,250,.9);color:var(--obsidian);display:grid;place-items:center;cursor:pointer}
.replay svg{width:18px;height:18px}
@media (max-width:960px){.dev-live .replay{top:auto;right:0;bottom:-56px;width:auto;height:44px;padding:0 16px 0 12px;gap:8px;display:inline-flex;border-radius:999px;background:transparent;border:1px solid var(--line2);color:var(--pearl);font:500 var(--fs-15)/1 var(--sans)}.dev-live .replay::after{content:"Replay"}.dev-live .replay[hidden]{display:none}.demo-tag{padding-right:120px}}
.demo-tag{font-size:var(--fs-13);color:var(--dim);text-align:center}
.orb-fly{position:absolute;left:0;top:0;width:380px;aspect-ratio:1;pointer-events:none;opacity:0;will-change:transform,opacity;z-index:2}
.orb-fly video{width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 56%,transparent 100%);mask-image:radial-gradient(closest-side,#000 56%,transparent 100%)}
/* desktop with motion: the section pins while the orb lands and the demo plays */
.demo.pinned{height:230vh}
.demo.pinned .demo-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-block:0;overflow:hidden}
.demo.pinned .demo-grid{width:100%}
@media (max-width:960px){.demo-grid{display:flex;flex-direction:column;align-items:stretch;gap:22px}.demo-copy{display:contents}.demo-copy>.eyebrow{order:1}.demo-copy>.h2{order:2}.demo-copy>.lead{order:3}.demo-dev{order:4;margin-block:14px 6px}.beats{order:5}.demo-copy>.actions{order:6}.dev-live{width:min(86vw,360px)}.orb-fly{display:none}}

/* ---------- 8. The whole thing ---------- */
.whole-grid{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:stretch;margin-top:clamp(48px,5vw,80px)}
.pyr{position:relative;width:100%;aspect-ratio:1/.86}
.band{position:absolute;left:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.b3{top:0;height:30%;clip-path:polygon(50% 0,65% 100%,35% 100%);background:rgba(240,243,241,.14)}
.b2{top:32%;height:32%;clip-path:polygon(34% 0,66% 0,82% 100%,18% 100%);background:rgba(240,243,241,.07)}
.b1{top:66%;height:34%;clip-path:polygon(17% 0,83% 0,100% 100%,0 100%);background:var(--jade);padding-top:2%}
.apex-orb{position:absolute;left:50%;top:60%;width:15%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 12px rgba(147,187,169,.35))}
.b2 .bl{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;line-height:1.8;text-transform:uppercase;color:var(--pearl)}
.b2 .bl-short{display:none}
.b1 b{font-weight:400;font-size:var(--fs-h3);letter-spacing:-.02em;color:var(--obsidian);line-height:1.1}
.b1 span{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--obsidian);margin-top:6px}
.piece{position:absolute;left:0;top:0;display:none;padding:8px 14px;border:1px solid rgba(240,243,241,.16);border-radius:999px;background:rgba(17,21,24,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:var(--fs-13);line-height:1.2;color:var(--silver);white-space:nowrap;pointer-events:none}
.pyr.on .piece{display:block}
.chalk .b3{background:var(--obsidian)}
.chalk .b2{background:#3b4548}
.chalk .piece{background:#fff;border-color:rgba(37,42,43,.14);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 20px -12px rgba(17,21,24,.4)}
.chalk .apex-orb{filter:none}
.chalk .lg{border-left-color:var(--rule)}
.chalk .lg1{border-left-color:var(--emerald)}
.chalk .tn{color:var(--ash)}
.chalk .lg1 .tn{color:var(--emerald)}
.chalk .lg p:last-child{color:var(--ash)}
.tiers{position:relative}
.lg{position:absolute;left:0;right:0;transform:translateY(-50%);gap:6px;padding-left:22px;border-left:1px solid var(--line2)}
.lg3{top:18%}.lg2{top:48%}.lg1{top:83%;border-left:2px solid var(--jade)}
.tn{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lg1 .tn{color:var(--jade)}
.lg h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.lg p:last-child{font-size:var(--fs-17);color:var(--silver);line-height:1.5}
@media (max-width:1000px){
  .whole-grid{grid-template-columns:1fr;row-gap:36px}
  .pyr{max-width:440px;justify-self:center}
  .tiers{display:flex;flex-direction:column;gap:22px}
  .lg{position:static;transform:none}
  .b2 .bl-full{display:none}.b2 .bl-short{display:block}
}
@media (max-width:520px){.b1 span,.b2 .bl{font-size:var(--fs-12);letter-spacing:.08em}}

/* ---------- 9. Stories (creator reel, placeholder) ---------- */
.placeholder-note{align-self:flex-start;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:6px 12px;border:1px dashed var(--line2);border-radius:999px}
.reel{overflow:hidden;margin-top:clamp(40px,5vw,64px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.reel-track{display:flex;gap:14px;padding-right:14px;width:max-content}
.reel.glide .reel-track{animation:reel 90s linear infinite}
.reel.glide:hover .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
.rc{position:relative;flex:0 0 clamp(170px,15vw,220px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--deep);border:1px solid rgba(240,243,241,.12)}
.rc img{width:100%;height:100%;object-fit:cover}
.rc .rb{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:4px;z-index:1}
.rc .rb i{flex:1;height:2px;border-radius:2px;background:rgba(240,243,241,.35)}
.rc .rb i:first-child{background:rgba(240,243,241,.9)}
.rc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,18,.4),rgba(12,16,18,0) 22%);pointer-events:none}
@media (hover:none){
  .reel{-webkit-mask-image:none;mask-image:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .reel::-webkit-scrollbar{display:none}
  .reel-track{padding-inline:var(--gutter)}
  .rc{flex-basis:min(62vw,260px);scroll-snap-align:center}
}

/* ---------- 4. The film ---------- */
.film-box{position:relative;display:block;width:100%;margin-top:clamp(40px,5vw,64px);padding:0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--deep);cursor:pointer}
.film-box img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.film-box:hover img{transform:scale(1.02)}
.mission .sec-head{max-width:880px}
.beliefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(48px,5vw,72px);padding-top:32px;border-top:1px solid var(--line)}
.belief{gap:10px}
.belief h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.belief p{font-size:var(--fs-17);color:var(--silver);max-width:30em}
.mission{padding-block:clamp(88px,9vw,136px)}
.mission .ps-more{margin-top:18px}
@media (max-width:760px){.beliefs{grid-template-columns:1fr}}
.chalk .film-box{border-color:transparent;box-shadow:0 36px 72px -40px rgba(17,21,24,.6)}
.film-box .film-pill{position:absolute;left:clamp(16px,3%,36px);bottom:clamp(16px,3%,36px)}
.film-box:hover .film-pill{background:rgba(240,243,241,.22)}
@media (max-width:760px) and (orientation:portrait){.film-box{aspect-ratio:4/5}}

/* ---------- 11. Membership (light decision chapter) ---------- */
.pl{margin-top:clamp(56px,6vw,88px)}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.pl-family{font-size:var(--fs-15);color:var(--ash)}
.pl-family b{font-weight:500;color:var(--ink)}
.pl-switch{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--paper);border:1px solid var(--rule)}
.pl-knob{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--obsidian);transition:transform .3s var(--ease-out),width .3s var(--ease-out)}
.pl-switch button{position:relative;z-index:1;height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--ash);font:500 15px/1 var(--sans);cursor:pointer;transition:color .3s}
.pl-switch button[aria-pressed=true]{color:var(--pearl)}
.pl-switch:not(.knob-on) button[aria-pressed=true]{background:var(--obsidian)}
.pl-tabs{display:none}
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pl-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--paper);border:1px solid rgba(200,206,206,.8);color:var(--ink)}
.pl-crown{position:relative;isolation:isolate;overflow:hidden;height:132px;padding:20px 24px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--pearl);background:#0d1416}
.pl-crown::before{content:"";position:absolute;inset:0;z-index:-2;background:url('/site/elemental-home-v4-investor/assets/metal.webp') center/cover;filter:saturate(.4) contrast(1.25) brightness(.5)}
.pl-crown::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tint)}
.pl-rec{position:absolute;top:18px;right:18px;padding:7px 11px;border-radius:999px;background:rgba(240,243,241,.14);border:1px solid rgba(240,243,241,.26);font-size:var(--fs-12);font-weight:500;line-height:1;color:var(--pearl)}
.pl-emerald .pl-crown{--tint:linear-gradient(110deg,#0b2a22d9,#1f4a3c80 55%,#0b2a22cc)}
.pl-sapphire .pl-crown{--tint:linear-gradient(110deg,#0c1d2cd9,#24425a80 55%,#0c1d2ccc)}
.pl-onyx .pl-crown{--tint:linear-gradient(110deg,#050808e6,#20282a8c 55%,#050808d9)}
.pl-plus .pl-crown{color:#1f2526;--tint:linear-gradient(110deg,#eef1efd9,#c9d0cd99 50%,#f3f5f4d9)}
.pl-plus .pl-crown::before{filter:saturate(0) contrast(.9) brightness(1.35)}
/* Light on metal: one soft band glides along the grain (v3-shared/metal.js adds .lit and the .metal-light layer) */
.pl-crown.lit::before{background-size:200% auto;background-position:0 50%}
.metal-light{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('/site/elemental-home-v4-investor/assets/metal.webp') 0 50%/200% auto;filter:grayscale(1) brightness(1.8) contrast(1.15);mix-blend-mode:screen;opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--lx,72%) - 32%),rgba(0,0,0,.4) calc(var(--lx,72%) - 14%),#000 var(--lx,72%),rgba(0,0,0,.4) calc(var(--lx,72%) + 14%),transparent calc(var(--lx,72%) + 32%));
  mask-image:linear-gradient(90deg,transparent calc(var(--lx,72%) - 32%),rgba(0,0,0,.4) calc(var(--lx,72%) - 14%),#000 var(--lx,72%),rgba(0,0,0,.4) calc(var(--lx,72%) + 14%),transparent calc(var(--lx,72%) + 32%))}
.pl-plus .metal-light{opacity:.5}
.pl-crown.lit .pl-name,.pl-crown.lit .pl-cap{position:relative;z-index:1}
.pl-crown.lit .pl-mark,.pl-crown.lit .pl-rec{z-index:1}
.pl-mark{position:absolute;top:18px;left:24px;font-size:var(--fs-12);font-weight:500;letter-spacing:.16em;opacity:.85}
.pl-name{font-size:var(--fs-h3);font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.pl-cap{font-size:var(--fs-13);margin-top:8px;opacity:.82}
.pl-main{display:flex;flex-direction:column;gap:12px;padding:24px 24px 0}
.pl-story{font-size:var(--fs-15);color:var(--ash);min-height:3em}
.pl-price{display:flex;align-items:baseline;gap:8px}
.pl-price b{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pl-price span{font-size:var(--fs-15);color:var(--ash)}
.pl-who{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.pl-fee{font-size:var(--fs-13);color:var(--ash)}
.pl-fee b{font-weight:400;color:inherit}
.pl-budget{margin-top:6px;padding:16px 18px;border-radius:12px;background:var(--chalk)}
.pl-budget-label{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.pl-budget-num{margin-top:6px;font-size:var(--fs-15);color:var(--ash)}
.pl-budget-num b{font-size:var(--fs-h3);font-weight:300;letter-spacing:-.03em;color:var(--emerald);margin-inline:4px;font-variant-numeric:tabular-nums}
.pl-budget-note{margin-top:4px;font-size:var(--fs-13);color:var(--ash)}
.pl-btn{margin-top:8px;width:100%}
.pl-term{font-size:var(--fs-13);color:var(--ash);text-align:center}
.pl-list{padding:22px 24px 26px;margin-top:22px;border-top:1px solid var(--rule)}
.pl-list summary{display:none}
.pl-list-label{font-size:var(--fs-13);color:var(--ink);margin-bottom:10px}
.pl-list li,.pl-plus-list li{position:relative;padding-left:24px;font-size:var(--fs-15);line-height:1.5;color:var(--ash);margin-top:6px}
.pl-list li::before,.pl-plus-list li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);transform:rotate(-45deg)}
.pl-plus{display:grid;grid-template-columns:220px minmax(0,1.2fr) minmax(0,1fr);align-items:stretch;margin-top:16px}
.pl-plus .pl-crown{height:auto}
.pl-plus .pl-main{padding:26px 28px}
.pl-plus .pl-story{min-height:0}
.pl-plus-side{display:flex;flex-direction:column;gap:12px;padding:26px 28px;border-left:1px solid var(--rule)}
.pl-plus-side .pl-btn{margin-top:auto}
/* Gabriel Plus: its own chapter under the budget cards; the silver card is an object, the copy stays short */
.plus-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head visual" "cats cats" "body body";column-gap:clamp(40px,6vw,112px);row-gap:clamp(40px,4.5vw,64px);align-items:center;margin-top:clamp(72px,8vw,112px);padding-top:clamp(56px,6vw,88px);border:0;border-top:1px solid var(--rule);border-radius:0;background:none;overflow:visible;color:inherit}
.plus-head{grid-area:head;display:flex;flex-direction:column;gap:16px}
.plus-t{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
.plus-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ash);max-width:30em;text-wrap:pretty}
.plus-visual{grid-area:visual;display:flex;justify-content:center}
.plus-tie{font-size:var(--fs-15);color:var(--ink)}
.plus-tie{line-height:1.6}
.plus-tie a{display:inline-block;padding:10px 0;margin:-10px 0 -10px 4px;color:var(--emerald);text-underline-offset:4px;white-space:nowrap}
.abyss .plus-tie{color:var(--pearl)}.abyss .plus-tie a{color:var(--jade)}
/* the home drops the category row (its categories section sits above), so its grid has no cats row */
.plus-ch:not(:has(.plus-cats)){grid-template-areas:"head visual" "body body"}
.plus-card.pl-crown{width:min(100%,440px);height:auto;aspect-ratio:1.586;border-radius:20px;padding:26px 30px;color:#1f2526;--tint:linear-gradient(110deg,#eef1efd9,#c9d0cd99 50%,#f3f5f4d9);box-shadow:0 40px 80px -40px rgba(17,21,24,.55),0 2px 8px rgba(17,21,24,.10)}
.plus-card.pl-crown::before{filter:saturate(0) contrast(.9) brightness(1.35)}
.plus-card .pl-mark{top:24px;left:30px}
.plus-card .pl-name{font-size:clamp(26px,2.4vw,34px);letter-spacing:.2em}
.plus-card .pl-cap{font-size:var(--fs-15);margin-top:10px}
.plus-card .metal-light{opacity:.5}
/* the categories that sell it */
.plus-cats{grid-area:cats;display:flex;flex-direction:column;gap:18px}
.plus-cats-k{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.plus-cat-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.plus-cat-row li{display:flex;flex-direction:column;gap:10px}
.plus-cat-img{display:block;overflow:hidden;border-radius:12px;aspect-ratio:4/5;background:var(--soft)}
.plus-cat-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.plus-cat-t{font-size:var(--fs-15);line-height:1.3;color:var(--ink)}
.plus-cats-more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-15);color:var(--ink);text-underline-offset:4px}
/* price and action beside the services */
.plus-body{grid-area:body;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,112px);row-gap:24px;align-items:start;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--rule)}
.plus-buy{display:flex;flex-direction:column;gap:10px}
.plus-list{display:flex;flex-direction:column;gap:12px;margin:6px 0 0}
.chalk .plus-list li{position:relative;padding-left:26px;font-size:var(--fs-17);line-height:1.5;color:var(--ash)}
.chalk .plus-list li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);transform:rotate(-45deg)}
.plus-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:12px}
.plus-actions .btn{height:52px;padding:0 30px}
.plus-actions .pl-term{text-align:left}
@media (max-width:1100px){.plus-cat-row{grid-template-columns:repeat(3,minmax(0,1fr))}.plus-cat-img{aspect-ratio:4/3}}
@media (max-width:860px){
  .plus-ch{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "cats" "body";row-gap:32px}
  .plus-ch:not(:has(.plus-cats)){grid-template-areas:"head" "visual" "body"}
  .plus-visual{justify-content:flex-start}
  .plus-card.pl-crown{width:min(100%,380px)}
  .plus-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .plus-cat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .plus-actions{flex-direction:column;align-items:stretch}.plus-actions .btn{width:100%;height:54px}.plus-actions .pl-term{text-align:center}
  .plus-body{display:flex;flex-direction:column;align-items:stretch}
  .plus-list{order:-1}
}
.fine-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-size:var(--fs-15);color:var(--ink);text-underline-offset:4px}
.pvb-link{margin-top:14px}
.pvb-link+.help-row{margin-top:22px}
.help-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px;padding:26px 28px;border-radius:18px;border:1px solid rgba(200,206,206,.8);background:var(--paper)}
.help-t{font-size:var(--fs-lead);font-weight:400;letter-spacing:-.02em}
.help-s{font-size:var(--fs-15);color:var(--ash);margin-top:4px}
.plans .fine{margin-top:26px}
@media (max-width:1100px) and (min-width:761px){.pl-grid{grid-template-columns:1fr;max-width:600px}.pl-plus{grid-template-columns:1fr;max-width:600px}.pl-plus .pl-crown{height:132px}.pl-plus-side{border-left:0;border-top:1px solid var(--rule)}}
@media (max-width:760px){
  .pl-top{flex-direction:column;align-items:stretch}
  .pl-switch{display:flex}.pl-switch button{flex:1;padding:0 6px}
  .pl-tabs{display:flex;gap:0;margin:6px 0 16px;border-bottom:1px solid var(--rule)}
  .pl-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:58px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--ash);font:500 15px/1 var(--sans);cursor:pointer}
  .tt-p{font-family:var(--mono);font-size:var(--fs-12);font-weight:500;letter-spacing:.04em}
  .pl-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
  .pl-grid{display:block}
  .pl-grid .pl-card{display:none}
  .pl-grid .pl-card.is-on{display:flex}
  .pl-story{min-height:0}
  .pl-list summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;cursor:pointer;list-style:none;font-size:var(--fs-15);color:var(--ink)}
  .pl-list summary::-webkit-details-marker{display:none}
  .pl-list summary::after{content:"+";font-size:20px;color:var(--ash)}
  .pl-list[open] summary::after{content:"–"}
  .pl-list{padding:12px 24px 18px;margin-top:18px}
  .pl-plus{grid-template-columns:1fr}.pl-plus .pl-crown{height:112px}
  .pl-plus-side{border-left:0;border-top:1px solid var(--rule)}
  .help-row .actions,.help-row .btn{width:100%}
}

/* ---------- 12. FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,112px);align-items:start}
.faq-head{gap:22px;position:sticky;top:120px}
.qa details{border-top:1px solid var(--rule)}
.qa details:last-child{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;min-height:48px;font-size:var(--fs-lead);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:0 0 12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .3s var(--ease-out)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 40px 26px 0;font-size:var(--fs-17);color:var(--ash);max-width:40em}
.qa details a{color:var(--ink);text-underline-offset:3px}
.abyss .qa details{border-top-color:var(--line)}
.abyss .qa details:last-child{border-bottom-color:var(--line)}
.abyss .qa summary::after{background:linear-gradient(var(--pearl),var(--pearl)) center/12px 1.5px no-repeat,linear-gradient(var(--pearl),var(--pearl)) center/1.5px 12px no-repeat}
.abyss .qa details p{color:var(--silver)}
.abyss .qa details a{color:var(--pearl)}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-head{position:static}}

/* ---------- 13. Close ---------- */
.photo{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(600px,92vh,960px);background:var(--deep);color:var(--pearl)}
.photo-bg{position:absolute;inset:0}
.photo-bg img{width:100%;height:100%;object-fit:cover}
.photo-shade{position:absolute;inset:0}
.photo-in{position:relative;padding-block:var(--space)}
.photo-copy{gap:24px;max-width:640px}
.close .photo-bg img{object-position:55% 40%}
.close .photo-shade{background:linear-gradient(90deg,rgba(14,18,21,.72) 0%,rgba(14,18,21,.36) 45%,rgba(14,18,21,0) 72%),linear-gradient(0deg,rgba(14,18,21,.55) 0%,rgba(14,18,21,0) 40%)}
.close-line{max-width:12em}
.close-note{font-size:var(--fs-15);color:rgba(240,243,241,.8)}
@media (max-width:760px){
  .close .photo-shade{background:linear-gradient(0deg,rgba(12,16,18,.94) 0%,rgba(12,16,18,.74) 48%,rgba(12,16,18,.1) 80%)}
  .close-actions{flex-direction:column;align-items:stretch}
  .close-actions .btn-light{height:54px}
  .close-actions .btn-glass{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;height:44px;text-decoration:underline;text-underline-offset:4px}
}

/* ---------- Footer ---------- */
.foot{background:var(--abyss);color:var(--silver);border-top:1px solid rgba(240,243,241,.06);padding-block:clamp(64px,7vw,104px) calc(36px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot-brand img{height:18px;width:auto}
.foot-brand p{font-size:var(--fs-15);color:var(--dim)}
.foot nav{display:flex;flex-direction:column;gap:10px}
.foot-h{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.foot nav a{font-size:var(--fs-15);color:var(--silver);text-decoration:none;width:fit-content}
.foot nav a:hover{color:var(--pearl)}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,6vw,88px);padding-top:24px;border-top:1px solid var(--line);font-size:var(--fs-13);color:var(--dim)}
.foot-legal{display:flex;flex-wrap:wrap;gap:0 22px}
.foot-legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--dim);text-decoration:none}
.foot-legal a:hover{color:var(--pearl)}
/* the Sound switch: interface sounds and phone haptics on or off (shared/feel.js, Tyler 10/5) */
.foot-sound{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--dim);cursor:pointer}
.foot-sound svg{flex:none;width:16px;height:16px}
.foot-sound:hover{color:var(--pearl)}
.foot-sound-state{color:var(--silver)}
.foot-sound[aria-pressed=false] .fs-wave{opacity:.25}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .foot-brand{grid-column:1/-1}
  .foot nav{gap:0}
  .foot nav a{display:flex;align-items:center;min-height:44px;width:100%;border-bottom:1px solid var(--line)}
  .foot{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Phones: sticky join ---------- */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 20px;border-radius:999px;background:rgba(17,21,24,.72);border:1px solid rgba(240,243,241,.14);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 12px 32px rgba(0,0,0,.35);transform:translateY(140%);opacity:0;transition:transform .45s var(--ease-out),opacity .45s var(--ease-out)}
  .sticky-cta.on{transform:none;opacity:1}
  .sc-t{display:flex;flex-direction:column;gap:2px;line-height:1.2}
  .sc-t b{font-size:var(--fs-15);font-weight:500;color:var(--pearl)}
  .sc-t span{font-size:var(--fs-12);color:rgba(240,243,241,.8)}/* pearl at 80%: stays above 4.5:1 when the glass bar sits over a light chapter (was silver, 4.1:1) */
  .sticky-cta .btn{height:48px}
}

/* ---------- Film player ---------- */
.player{width:min(1200px,94vw);padding:0;border:0;border-radius:18px;background:#000;color:var(--pearl);overflow:hidden}
.player::backdrop{background:rgba(8,10,12,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.player video{width:100%;aspect-ratio:16/9;background:#000}
.player.tall{width:min(440px,92vw)}
.player.tall video{aspect-ratio:9/16;max-height:86vh}
.player-x{position:absolute;right:12px;top:12px;z-index:2;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(240,243,241,.3);background:rgba(17,21,24,.6);font:500 15px/1 var(--sans);cursor:pointer}

/* Talk dialog in the new type */
.talk-dialog,.talk-dialog *{font-family:var(--sans)}

/* ---------- Motion ---------- */
.rv{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms)}
.rise{animation:rise 1.1s var(--ease-out) both;animation-delay:calc(200ms + var(--i,0) * 110ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.words .w{opacity:.18;transition:opacity .2s linear}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .drift img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes drift{from{transform:translateY(-4%) scale(1.1)}to{transform:translateY(4%) scale(1.1)}}
  }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .vis-phone{animation:phoneUp linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes phoneUp{from{translate:0 18cqi}to{translate:0 0}}
  }
}
.vis.pre .ui,.vis.pre .seg .on::before{opacity:0}
.vis.pre .seg .on{color:rgba(240,243,241,.6)}
.vis.go .ui{animation:uiIn .8s var(--ease-out) .35s both}
.vis.go .ui+.ui{animation-delay:.75s}
.vis.go .ui-paid{animation-delay:1.1s}
.vis.go .seg .on::before{animation:pillIn .5s var(--ease-out) .15s both}
.vis.go .seg .on{animation:onInk .3s linear .3s both}
@keyframes pillIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes onInk{from{color:rgba(240,243,241,.6)}to{color:#111518}}
@keyframes uiIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rise,.receipt.paid,.vis.go .ui,.vis.go .seg .on,.vis.go .seg .on::before{animation:none}
  .words .w{opacity:1}
  .reel.glide .reel-track,.marquee.glide .logo-row{animation:none}
  .sweep{--p:130%!important}
}

/* Home pricing (section.plans): arrow links are never underlined (Tyler, 10/4); the arrow nudges on hover. Its four
   arrow links. Moved here from pricing-mock.css on 10/6, when the mockup styles became preview-only, so this ships. */
.plans .fine-link,.plans .plus-tie a,.plans .free-rung-more{text-decoration:none}
.plans .fine-link>span,.plans .plus-tie a>span,.plans .free-rung-more>span{display:inline-block;transition:transform .18s var(--ease-out)}
.plans .fine-link:hover>span,.plans .plus-tie a:hover>span,.plans .free-rung-more:hover>span{transform:translateX(4px)}

/* ---------- Close: the mission over the last photo (Tyler 10/6 late), then the last ask and a link to the Mission page ---------- */
.close .close-k{margin:0}
.close .close-lead{max-width:34em;margin:0;color:rgba(240,243,241,.86)}
.close .close-more{align-self:center;margin-left:10px;color:rgba(240,243,241,.92);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.close .close-more:hover{color:#fff}
@media (max-width:760px){.close .close-more{flex-basis:100%;margin:4px 0 0}}

/* ---------- An example month (Tyler 10/6 late): the boxed cards stamp "Paid back" as you scroll; the total sits under them ---------- */
.receipts .rfoot{justify-content:flex-end;margin-top:4px}
@media (max-width:520px){.receipts .rfoot{flex-direction:row;align-items:baseline;justify-content:flex-end}}