/* ============================================================
   LIFEMAX CLUB — the landing page (index.html) only.

   B's composition (Graphite) in A's material (Aurum), on top of ds.css. This
   file adds LAYOUT and composition; every colour, radius, shadow and type
   size comes from a ds.css token. The only raw colours are the black scrims
   that sit on Reo's photographs so white type stays legible — the same kind
   ds.css itself uses on .ph — and they never change with the theme, because
   a photograph does not.

   Load order: ds.css, then this. protocol.css is not loaded here any more.
   ============================================================ */

/* ───────────────────────── nav + hero ───────────────────────── */
.topnav .brand .mark{width:26px;height:26px}
.hero{padding-top:clamp(56px,7vw,92px)}
.hero .cta{margin-top:36px}

/* the player: the members row on top, the briefing under it */
.player{margin-top:52px}
.members{justify-content:space-between}
.m-live{display:flex;align-items:center;gap:16px;flex:1;min-width:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease), visibility 0s linear .6s}
.m-live.is-live{opacity:1;visibility:visible;transition:opacity .6s var(--ease), visibility 0s}
.m-live .meter{min-width:40px}
.m-title{flex:none;white-space:nowrap}

.frame video{z-index:0}
.frame .vignette{z-index:1}
.frame .unmute{position:absolute;z-index:3;top:3.2cqw;right:3.2cqw}
.frame .veil{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border:0;padding:0;background:none;cursor:pointer;color:var(--text)}
.frame .veil-mark{display:grid;place-items:center;width:clamp(56px,9cqw,84px);height:clamp(56px,9cqw,84px);border-radius:50%;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8), 0 0 0 10px rgba(255,255,255,.04);transition:transform .35s var(--spring)}
.frame .veil-mark .ic{--ic:clamp(22px,3.4cqw,32px);margin-left:.12em}
.frame .veil:hover .veil-mark{transform:scale(1.06)}
.frame .veil:focus-visible{outline-offset:-6px;border-radius:inherit}
.frame .ctrls{z-index:3}
.tpill{gap:2px;padding:0 14px 0 3px}
.vbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;padding:0;cursor:pointer;flex:none;color:var(--text);font:700 11.5px/1 var(--font);letter-spacing:.02em}
.tpill .vbtn{width:30px;height:30px;border:0;background:none}
.vbtn .ic{--ic:16px}
.tpill .vbtn .ic{--ic:14px}
.ptime{color:var(--text-2);font-size:13px;font-weight:600}
.ctl-play .ico-pause,.ctl-play.is-playing .ico-play,.ctl-mute .ico-muted,.ctl-mute.is-muted .ico-vol{display:none}
.ctl-play.is-playing .ico-pause,.ctl-mute.is-muted .ico-muted{display:block}
.ctl-cc[aria-pressed="true"]{background:var(--hl);color:var(--on-gold);border-color:transparent}
/* the scrubber: a 3px rail with a 22px hit area, a real slider (player.js) */
.frame .track{position:relative;height:24px;background:none;overflow:visible;cursor:pointer;display:flex;align-items:center;touch-action:none}
.frame .track::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(255,255,255,.22)}
.frame .track > i{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;width:0}
.frame .track:hover::before,.frame .track:focus-visible::before{background:rgba(255,255,255,.32)}
.frame .track:focus-visible{outline-offset:2px;border-radius:6px}
.player-dead{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:18px 20px;font-size:14px;color:var(--text-2);text-align:center}
.player-body:fullscreen{aspect-ratio:auto;width:100%;height:100%}
.player-body:fullscreen video{object-fit:contain}

/* ───────────────────────── section heads ───────────────────────── */
.sec-head.center .lede{margin-top:18px}
.sec-head .aside{margin-bottom:6px}

/* ───────────────────────── pillars ─────────────────────────
   His photographs, one grade (ds .ph). The card is the photograph. */
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcard{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hair);box-shadow:var(--card-shadow);background:var(--surface);isolation:isolate}
.pcard .ph{position:absolute;inset:0;border-radius:inherit}
.pcard{container-type:inline-size}
.pcard .ph::after{background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 34%, rgba(0,0,0,.55) 58%, rgba(0,0,0,.9) 100%)}
.pcard:hover .ph > img,.pcard:hover .ph > picture > img{transform:scale(1.04)}
.pcard .ov{display:flex;flex-direction:column;justify-content:space-between;padding:20px 22px 22px}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-top .mono{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:11px;letter-spacing:.14em;color:#fff;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-shadow:none}
.pc-top .badge{height:26px}
.pc-bot{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.pc-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-bottom:12px}
.pc-ic .ic{--ic:17px}
.pc-bot h3{font-size:clamp(19px, 8.2cqi, 26px);letter-spacing:-.03em;line-height:1.1}
.pc-bot p{margin-top:7px;font-size:15px;line-height:1.42;color:var(--text);opacity:.86;max-width:32ch}
.pc-bot .pc-tag{margin-top:14px;padding-top:12px;border-top:1px solid var(--glass-hair);font-size:10.5px;letter-spacing:.08em;line-height:1.5;opacity:1;color:var(--text-2);max-width:none}
.pc-tag span{white-space:nowrap}
.rail-dots{display:none}

/* the order, as one line of three nodes */
.order{list-style:none;margin:36px 0 0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:10px}
.o-node{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:6px 16px 6px 6px;border-radius:var(--r-pill);background:var(--fill-1);box-shadow:inset 0 0 0 1px var(--hair);font-size:14.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.o-node:not(:has(.well)){padding-left:16px}
.o-node:first-child{color:var(--text)}
.o-node .well{width:28px;height:28px;border-radius:50%}
.o-node .well .ic{--ic:15px}
.o-node .well:not(.gold) .ic{color:var(--text-2)}
.o-line{width:36px;height:1px;background:linear-gradient(90deg, var(--hair-2), var(--tint))}
.pillars-foot{margin:18px auto 0;max-width:62ch;text-align:center;font-size:14px;color:var(--text-3);line-height:1.5}

/* ───────────────────────── how it works (B's bento) ───────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.b-card{grid-column:span 2;display:flex;flex-direction:column;min-height:372px;padding:26px 26px 24px;overflow:hidden}
.b-xp,.b-map{grid-column:span 3}
.step{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fill-2);font-size:13px;font-weight:700;color:var(--text)}
.b-card h3{margin-top:18px;font-size:21px;letter-spacing:-.022em;line-height:1.2}
.b-card > p{margin-top:7px;font-size:15px;line-height:1.45;color:var(--text-2);max-width:46ch}
.b-vis{margin-top:auto;padding-top:24px}

/* 1 — the Foundation */
.f-cover{position:relative;height:150px;border-radius:var(--r-tile);display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(closest-side, var(--glow), transparent) center / 240px 240px no-repeat, var(--surface-2);box-shadow:inset 0 0 0 1px var(--hair)}
.f-cover .mono{position:absolute;left:14px;top:12px;font-size:11px;letter-spacing:.12em;color:var(--text-2)}
.f-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:var(--tint);
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box, var(--gold) border-box;border:2px solid transparent;box-shadow:0 0 44px -10px var(--glow)}
.f-ring .ic{--ic:34px}
.f-meta{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14.5px;font-weight:600}
.f-meta .mono{margin-left:auto}
.chk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--ok);color:var(--on-ok)}
.chk .ic{--ic:12px;stroke-width:2.6}

/* 2 — the pillars */
.tiles6{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.t6{aspect-ratio:1.08;border-radius:var(--r-tile);background:var(--fill-1);box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;justify-content:space-between;padding:12px;min-width:0}
.t6 .ic{--ic:18px;color:var(--text-2)}
.t6 span{font-size:12.5px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.t6 small{display:block;margin-top:2px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.t6.after{background:none;box-shadow:none;border:1px dashed var(--hair-2)}
.t6.after .ic{color:var(--text-3)}
.t6.after span{color:var(--text-2)}

/* 3 — a quiz or a call */
.qz{border-radius:var(--r-tile);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.qz-row{position:relative;display:flex;align-items:center;gap:16px;padding:14px 16px}
.qz-row + .qz-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--hair)}
.qz .ticks{gap:5px;flex:none}
.qz .ticks > i{width:20px}
/* the marked demo: a pass is confirmed (green), a miss failed (red count) */
.qz-row.pass .ticks > i{background:var(--ok)}
.qz-row.pass b{color:var(--ok)}
.qz-row.fail b{color:var(--danger)}
.qz-t{display:flex;flex-direction:column;font-size:13.5px;color:var(--text-2);line-height:1.3;min-width:0}
.qz-t b{font-size:14px;font-weight:700;color:var(--text)}
.mini-call{display:flex;align-items:center;gap:10px;margin-top:10px;padding:6px 14px 6px 6px;border-radius:var(--r-pill);background:var(--fill-1);box-shadow:inset 0 0 0 1px var(--hair);font-size:13.5px;font-weight:600;color:var(--text-2)}
.mini-call img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:40% 30%;flex:none}
.mini-call .ic{--ic:17px;margin-left:auto;color:var(--text-2)}

/* 4 — XP */
.tiers{list-style:none;margin:22px 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tiers li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 12px 11px;border-radius:16px;background:var(--fill-1);box-shadow:inset 0 0 0 1px var(--hair)}
.tiers b{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tiers span{font-size:12.5px;line-height:1.3;color:var(--text-2)}
.tiers .bonus b{width:max-content;max-width:none;background:var(--gold-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.xp-demo{display:flex;align-items:center;gap:18px;margin-top:auto;padding-top:22px;border-top:1px solid var(--hair)}
.xd-ring{--lvl:84px;border-radius:50%}
.xd-ring > b{font-size:28px;letter-spacing:-.045em}
.xd-text{flex:1;min-width:0}
.xd-l{font-size:17px;font-weight:700;letter-spacing:-.015em}
.xd-x{margin-top:2px;font-size:14px;color:var(--text-2)}
.xp-demo .btn{flex:none}
.xd-next{margin-top:10px;min-height:1.45em}

/* 5 — the Life Map (an example, and labelled one) */
.b-map{position:relative}
.map-ex{position:absolute;top:24px;right:24px}
.map-wrap{width:100%;max-width:310px;margin:0 auto}

/* ───────────────────────── the Foundation + the notes ───────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split-text .h2{margin-top:18px}
.split-text .lede{margin-top:22px;max-width:46ch}
.facts{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;max-width:480px}
.facts li{display:flex;gap:14px;font-size:16px;line-height:1.45;color:var(--text-2)}
.facts li b{font-weight:600;color:var(--text)}
.facts .well .ic{color:var(--text-2)}
.split-vis{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
/* an iPhone showing the Lifemax folder: iOS grouped list on the sheet background */
.phone{position:relative;margin:0;width:340px;max-width:100%;padding:14px 16px 48px;border-radius:52px;background:var(--sheet-bg);
  border:1px solid var(--hair-2);box-shadow:inset 0 0 0 6px var(--surface), var(--shadow-pop), 0 0 90px -30px var(--glow)}
.p-status{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 18px;font-size:13.5px;font-weight:700}
.p-island{width:92px;height:26px;border-radius:14px;background:var(--on-gold)}
.p-bat{position:relative;width:23px;height:11px;border-radius:3.5px;box-shadow:inset 0 0 0 1px var(--text-3)}
.p-bat::before{content:"";position:absolute;inset:2px;border-radius:2px;background:var(--text)}
.p-bat::after{content:"";position:absolute;right:-3px;top:3.5px;width:1.5px;height:4px;border-radius:0 1px 1px 0;background:var(--text-3)}
.p-head{display:flex;align-items:center;gap:1px;margin-top:10px;color:var(--tint);font-size:16px}
.p-head .ic{--ic:19px}
.p-title{margin-top:6px;font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.1}
.p-sub{font-size:13px;color:var(--text-2)}
.p-group{display:flex;align-items:center;gap:6px;margin:16px 0 7px 4px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.p-group .ic{--ic:14px;color:var(--text-2)}
.p-list{list-style:none;margin:0;padding:0;border-radius:12px;background:var(--cell);overflow:hidden}
.p-list li{position:relative;padding:9px 14px 10px}
.p-list li + li::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--hair)}
.p-list b{display:block;font-size:15px;font-weight:700;letter-spacing:-.012em;line-height:1.3}
.p-list span{display:block;font-size:13px;line-height:1.35;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-float{position:relative;z-index:2;width:320px;max-width:calc(100% - 16px);margin:-34px 0 0 -190px;padding:16px 18px 17px;border-radius:22px;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);border:1px solid var(--glass-hair);box-shadow:var(--shadow-pop)}
.nf-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.nf-head .well{width:24px;height:24px;border-radius:7px}
.nf-head .well .ic{--ic:14px}
.nf-head .mono{color:var(--text-2)}
.note-float p{font-size:14px;line-height:1.5;color:var(--text-2)}
.note-float b{color:var(--text);font-weight:600}

/* ───────────────────────── membership ───────────────────────── */
.plan > .mono{margin-bottom:12px}
.plan-tag{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-tag .gold-text{font-weight:600}
.plan h3{font-size:24px}
.plan .pdesc{min-height:2.9em}
.plan li b{font-weight:600}
.plan li span{min-width:0}
.plan .btn .price{display:inline;margin:0}
.plan-fine{margin-top:12px;text-align:center;font-size:13.5px;color:var(--text-2)}
.plan-fine a{color:var(--text-2);text-underline-offset:3px}
.plan-fine a:hover{color:var(--text)}
.compare .c-row{font-size:15px}
.compare .c-price{font-weight:600}
.compare .c-row > span:not(:first-child){color:var(--text-2)}
.compare .c-row > .strong{color:var(--text)}
.run-now{max-width:920px;margin:20px auto 0}

/* ───────────────────────── Reo ───────────────────────── */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:64px;align-items:center}
.about-ph{margin:0;aspect-ratio:4/5;border-radius:var(--r-panel);border:1px solid var(--hair-2);box-shadow:var(--shadow-pop), 0 0 90px -30px var(--glow)}
.about-cap{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:22px 24px}
.about-cap b{font-size:20px;letter-spacing:-.02em}
.about-text .h2{margin-top:18px}
.about-rows{margin-top:30px}
.ar{padding:20px 0;border-top:1px solid var(--hair)}
.ar h3{font-size:17px;letter-spacing:-.015em}
.ar p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--text-2);max-width:52ch}
.about-acts{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:26px}
.about-acts .link-btn .ic{--ic:13px}

/* ───────────────────────── calls ───────────────────────── */
.calls{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px}
.call-card{padding:8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.facetime{min-height:390px;border-radius:calc(var(--r-card) - 8px)}
.facetime > img,.facetime > picture > img{object-position:50% 30%}
.ft-ov{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px}
.ft-live{height:28px;padding:0 11px;font-size:12.5px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--hl);box-shadow:0 0 0 3px rgba(var(--glow-rgb),.22)}
.call-body{display:flex;flex-direction:column;padding:22px 18px 16px 16px}
.call-body h3,.sun-card h3{font-size:22px;letter-spacing:-.022em}
.call-body > p,.sun-card > p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--text-2)}
.call-tiers{margin-top:auto;padding-top:20px}
.call-tiers > div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;border-bottom:1px solid var(--hair)}
.call-tiers > div:first-child{border-top:1px solid var(--hair)}
.call-tiers b{font-size:17px}
.call-body .btn{margin-top:18px}
.call-fine{margin-top:10px;text-align:center;text-wrap:balance}
.sun-card{display:flex;flex-direction:column;padding:26px}
.cal-tile{width:92px;display:flex;flex-direction:column;align-items:center;padding:10px 0 12px;margin-bottom:22px;border-radius:20px;background:var(--fill-1);box-shadow:inset 0 0 0 1px var(--hair)}
.cal-m{font-size:10.5px;color:var(--text-2)}
.cal-d{margin-top:2px;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.cal-z{font-size:10px}
.sun-facts{list-style:none;margin:20px 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.sun-facts li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--text-2)}
.sun-facts .ic{--ic:17px;color:var(--text-2)}
.sun-card .btn{margin-top:auto}

/* ───────────────────────── invite ───────────────────────── */
.invite{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;padding:48px;border-radius:var(--r-panel);overflow:hidden}
.invite::before{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(closest-side, var(--glow), transparent);pointer-events:none}
.inv-text,.inv-vis{position:relative}
.h2-sm{font-size:clamp(30px,3.4vw,46px)}
.inv-text .h2{margin-top:18px}
.inv-text .lede{margin-top:18px}
.inv-vis{display:flex;flex-direction:column;align-items:center;min-width:0}
.inv-pair{display:flex;align-items:flex-start;justify-content:center}
.inv-who{display:flex;flex-direction:column;align-items:center;gap:5px;width:112px;text-align:center;font-size:13.5px;font-weight:600}
.inv-who small{font-size:12px;font-weight:500;color:var(--text-3)}
.inv-av{display:block;width:64px;height:64px;margin-bottom:6px}
.inv-av svg{width:64px;height:64px}
.joiner{position:relative;flex:none;width:72px;height:1.5px;margin-top:32px;background:linear-gradient(90deg, var(--hair-2), var(--tint), var(--hair-2))}
.gift{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--on-gold);box-shadow:0 0 0 5px var(--surface), 0 10px 30px -10px var(--glow)}
.gift .ic{--ic:17px}
.inv-link{display:flex;align-items:center;gap:10px;max-width:100%;min-width:0;height:46px;margin-top:28px;padding:0 18px;border-radius:var(--r-pill);background:var(--fill-1);box-shadow:inset 0 0 0 1px var(--hair-2);font-family:var(--mono);font-size:13px;color:var(--text-2)}
.inv-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-link em{font-style:normal;color:var(--text-3)}
.inv-link .ic{--ic:16px;color:var(--text-2)}
.inv-cap{margin-top:10px;text-align:center}

/* ───────────────────────── FAQ ───────────────────────── */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:start}
.faq-wrap .sec-head{display:block;margin-bottom:0;position:sticky;top:100px}
.faq-wrap .faq{max-width:none;margin:0}
.faq-more{margin-top:18px;font-size:15px;color:var(--text-2)}
.faq-more .link-btn{font-size:15px;padding:0}
.faq details > p a{color:var(--tint);text-underline-offset:3px}

/* ───────────────────────── closing + footer ───────────────────────── */
.closing{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(96px,11vw,150px);padding:110px 0 120px;text-align:center;border-top:1px solid var(--hair)}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(42% 62% at 50% 100%, var(--glow), transparent 72%)}
.closing-h{font-size:clamp(40px,6.4vw,86px);line-height:1.02;letter-spacing:-.05em}
.closing .cta{justify-content:center;margin-top:36px}
.closing .cta-note{margin-top:16px}
.footer{margin-top:0}
.f-brand .brand .mark{width:24px;height:24px}

/* ───────────────────────── motion: one moment per section ─────────────────────────
   Reo, 26 Sep: "super clean iOS Apple like". Restraint on the landing: the
   hero arrives once, and every section below has ONE moment, the first time
   it comes into view (motion.js adds .is-in to [data-reveal], once): the
   pillar row settling, the order drawing its line, the Life Map drawing in
   (lifemap.js, by itself), the note landing on the phone, the plans settling
   with one light round the full one, Reo's photograph developing, the invite
   line drawing out to the gift, the closing light coming up. Nothing else
   fades up. The hidden states apply only under html.mo — set before first
   paint when motion is allowed, and taken away again if motion.js never
   arrives — so without JS, or with reduced motion, everything is simply
   there. transform and opacity only. */
@media (prefers-reduced-motion: no-preference){
  /* the hero, once, on load */
  html.mo .hero .display .l1,html.mo .hero .display .l2{animation:lp-lift 860ms var(--spring-soft) backwards}
  html.mo .hero .display .l2{animation-delay:80ms}
  html.mo .hero .cta{animation:lp-rise 800ms var(--spring-soft) 180ms backwards}
  html.mo .hero .player{animation:lp-lift-player 1100ms var(--spring-soft) 200ms backwards}
  html.mo .hero-light{animation:lp-fade 1600ms var(--ease) backwards}

  /* below the fold: nothing shows until its moment */
  html.mo [data-reveal]:not(.is-in){opacity:0}
  html.mo [data-reveal="stagger"]:not(.is-in){opacity:1}
  html.mo [data-reveal="stagger"]:not(.is-in) > *{opacity:0}
  html.mo [data-reveal].is-in{animation:lp-rise 900ms var(--spring-soft) backwards}
  html.mo [data-reveal="stagger"].is-in{animation:none}
  html.mo [data-reveal="stagger"].is-in > *{animation:lp-settle 900ms var(--spring-soft) backwards;animation-delay:calc(var(--i, 0) * 70ms)}

  /* the order: the three nodes arrive and the line draws between them */
  html.mo .order.is-in > .o-node{animation:lp-fade-up 700ms var(--spring-soft) backwards;animation-delay:calc(var(--i, 0) * 110ms)}
  html.mo .order.is-in > .o-line{transform-origin:0 50%;animation:lp-draw 560ms var(--ease) backwards;animation-delay:calc(var(--i, 0) * 110ms)}

  /* the Foundation: the phone rises, then the note lands on it */
  html.mo .split-vis[data-reveal]:not(.is-in){opacity:1}
  html.mo .split-vis[data-reveal]:not(.is-in) > *{opacity:0}
  html.mo .split-vis[data-reveal].is-in{animation:none}
  html.mo .split-vis.is-in .phone{animation:lp-phone 1000ms var(--spring-soft) backwards}
  html.mo .split-vis.is-in .note-float{animation:lp-note 900ms var(--spring) 420ms backwards}

  /* membership: the plans settle, then one light passes round the full one */
  html.mo .plans.is-in .plan-full::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;padding:1.5px;
    background:conic-gradient(from var(--fx-a), transparent 0 70%, var(--g1) 82%, var(--g0) 88%, transparent 96%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    animation:lm-earn 1.8s var(--ease) 800ms both}

  /* Reo's photograph develops: it clears as it settles from a touch larger */
  html.mo .about-ph[data-reveal].is-in{animation:lp-fade 900ms var(--ease) backwards}
  html.mo .about-ph.is-in > img,html.mo .about-ph.is-in > picture > img{animation:lp-develop 1600ms var(--spring-soft) backwards}

  /* the invite: the line draws out, the gift pops, your friend arrives */
  html.mo .inv-vis[data-reveal].is-in{animation:lp-fade 500ms var(--ease) backwards}
  html.mo .inv-vis.is-in .joiner{transform-origin:0 50%;animation:lp-draw 640ms var(--ease) 200ms backwards}
  html.mo .inv-vis.is-in .gift{animation:lp-pop 700ms var(--spring-bounce) 820ms backwards}
  html.mo .inv-vis.is-in .inv-who:last-child .inv-av{animation:lp-pop 640ms var(--spring-bounce) 1000ms backwards}

  /* the closing: the light comes up behind the line */
  html.mo .closing[data-reveal]:not(.is-in){opacity:1}
  html.mo .closing[data-reveal].is-in{animation:none}
  html.mo .closing[data-reveal]:not(.is-in)::before{opacity:0}
  /* hidden until its moment, or it shows, blinks out and then rises */
  html.mo .closing[data-reveal]:not(.is-in) .closing-h{opacity:0}
  html.mo .closing.is-in::before{animation:lp-fade 1600ms var(--ease) backwards}
  html.mo .closing.is-in .closing-h{animation:lp-rise 900ms var(--spring-soft) 120ms backwards}
}
@keyframes lp-rise{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes lp-lift{from{transform:translate3d(0,16px,0)}}
@keyframes lp-lift-player{from{transform:translate3d(0,24px,0) scale(.98)}}
@keyframes lp-fade-up{from{opacity:0;transform:translate3d(0,8px,0)}}
@keyframes lp-settle{from{opacity:0;transform:translate3d(0,28px,0) scale(.965)}}
@keyframes lp-fade{from{opacity:0}}
@keyframes lp-player{from{opacity:0;transform:translate3d(0,28px,0) scale(.975)}}
@keyframes lp-phone{from{opacity:0;transform:translate3d(0,40px,0) scale(.96)}}
@keyframes lp-note{from{opacity:0;transform:translate3d(-24px,22px,0) scale(.94) rotate(-2deg)}}
@keyframes lp-develop{from{opacity:0;transform:scale(1.08)}}
@keyframes lp-draw{from{transform:scaleX(0)}}
@keyframes lp-draw-y{from{transform:scaleY(0)}}
@keyframes lp-pop{from{opacity:0;transform:scale(.4)}}
@media print{ html.mo [data-reveal],html.mo [data-reveal] > *{opacity:1!important;animation:none!important} }

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-card,.b-xp{grid-column:span 1}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-map{grid-column:span 2}
  .calls{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.about,.faq-wrap{grid-template-columns:1fr;gap:44px}
  .faq-wrap .sec-head{position:static}
  .about-ph{max-width:520px}
  .invite{grid-template-columns:1fr;padding:36px}
  .note-float{margin:-44px 0 0 -120px}
}
@media (max-width:640px){
  .hero .cta{margin-top:26px}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%}
  .player{margin-top:28px}
  .members{gap:10px}
  .m-live{gap:10px}
  .m-title{font-size:10.5px}
  .frame .ctrls{gap:6px;left:10px;right:10px;bottom:10px}
  .vbtn{width:30px;height:30px}
  .vbtn .ic{--ic:14px}
  .tpill{height:30px;padding:0 10px 0 1px}
  .tpill .vbtn{width:28px;height:28px}
  .ptime{font-size:11.5px}
  .frame .unmute{top:10px;right:10px;height:30px;font-size:12px;padding:0 11px 0 9px}
  .frame .unmute .ic{--ic:14px}

  /* the pillars become an App Store rail */
  .pgrid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 -16px;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none}
  .pgrid::-webkit-scrollbar{display:none}
  .pcard{scroll-snap-align:start;border-radius:24px}
  .pc-bot h3{font-size:24px}
  .rail-dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
  .rail-dots i{width:6px;height:6px;border-radius:3px;background:var(--fill-3);transition:width .3s var(--ease), background-color .2s}
  .rail-dots i.on{width:18px;background:var(--text)}
  .order{flex-direction:column;align-items:flex-start;margin-top:28px}
  .o-node{white-space:normal;text-align:left}
  .o-line{width:1px;height:14px;margin-left:20px;background:linear-gradient(180deg, var(--hair-2), var(--tint))}
  html.mo .order.is-in > .o-line{transform-origin:50% 0;animation-name:lp-draw-y}
  .pillars-foot{text-align:left;margin-left:0}

  .bento{grid-template-columns:1fr;gap:12px}
  .b-card,.b-xp,.b-map{grid-column:auto;min-height:0;padding:22px 20px 20px;border-radius:24px}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp-demo{gap:14px}
  .xd-ring{--lvl:72px}
  .xd-ring > b{font-size:24px}
  .map-ex{top:20px;right:20px}

  .phone{width:100%;max-width:330px;border-radius:46px}
  .note-float{align-self:stretch;width:auto;max-width:none;margin:-30px 8px 0}

  .plan h3{font-size:22px}
  .compare .c-row{grid-template-columns:minmax(0,1fr) 72px 92px;font-size:14px}

  .about-ph{border-radius:26px}
  .call-card{grid-template-columns:1fr;border-radius:26px}
  .facetime{min-height:0;aspect-ratio:4/5}
  .call-body{padding:16px 12px 8px}
  .sun-card{padding:22px 20px;border-radius:26px}
  .invite{padding:28px 20px;border-radius:26px;gap:28px}
  .inv-who{width:96px}
  .joiner{width:52px}
  .inv-link{width:100%}
  .closing{padding:80px 0 96px}
  .f-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
  .m-title{display:none}
}
/* the silent loop: play/pause alone, a round glass button */
.tpill.solo{padding:0 3px}