/* X Trader site v2 (12 Oct 2026). Loads after site.css on every page with <body class="v2">.
   Carbon hero fading into slate, the 3D mark behind the headline, a floating island nav,
   double-bezel frames for photos. Gold stays for the action and real progress only.
   Motion: one ease-out curve, 14px reveals, nothing moves under reduced motion. */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ground:#15181C;                 /* slate: the page below the hero */
  --core:#1A1D22;                   /* inner core of a framed panel on slate */
  --hair:rgba(216,219,224,.08);
  --nav-h:58px;
}
html{scroll-padding-top:0}
body.v2{background:var(--ground) linear-gradient(180deg,#0C0D0F 0,#111317 360px,var(--ground) 640px) no-repeat}

/* Fine grain over everything: keeps the long dark gradients from banding. */
body.v2::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Nav: one floating pill. Brand, sections, then the island (count + action). ---------- */
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:0;right:0;z-index:30;display:flex;justify-content:center;padding-inline:12px;pointer-events:none}
.nav-pill{pointer-events:auto;position:relative;display:flex;align-items:center;gap:4px;height:var(--nav-h);padding:0 7px 0 20px;border-radius:999px;
  background:rgba(9,10,12,.62);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 20px 44px -16px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:18px;color:var(--frost);text-decoration:none;font:700 .84rem/1 var(--display);letter-spacing:.22em}
.nav-brand img{width:22px;height:22px}
.nav-links{position:relative;display:flex;align-items:center}
.nav-links a{position:relative;z-index:1;display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:999px;color:var(--shadow);font:500 .9rem/1 var(--body);text-decoration:none;white-space:nowrap;transition:color .2s var(--ease-out)}
.nav-links a[aria-current="true"]{color:var(--frost)}
.nav-glide{position:absolute;left:0;top:50%;width:var(--w,0px);height:42px;border-radius:999px;background:rgba(255,255,255,.07);opacity:0;transform:translate(var(--x,0px),-50%);transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .25s var(--ease-out)}
.nav-links.has-active .nav-glide{opacity:1}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--frost)}}

.nav .island{position:static;transform:none;height:44px;margin-left:10px;padding:0 0 0 14px;gap:10px;background:transparent;box-shadow:none}
.nav .island::before{content:"";width:1px;height:22px;margin-right:4px;background:rgba(255,255,255,.1)}
.nav .island:hover{transform:none}
.nav .island:active{transform:scale(.97)}
.nav .island .ring{width:26px;height:26px}
.nav .island-cta{height:44px;padding:0 20px;transition:filter .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav .island:hover .island-cta{filter:brightness(1.07)}}

.nav-toggle{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:4px;border:0;border-radius:50%;background:rgba(255,255,255,.06);cursor:pointer}
.nav-toggle span{position:absolute;left:14px;right:14px;top:calc(50% - .75px);height:1.5px;border-radius:2px;background:var(--frost);transition:transform .3s var(--ease-out)}
.nav-toggle span:first-child{transform:translateY(-3.5px)}
.nav-toggle span:last-child{transform:translateY(3.5px)}
.nav.is-open .nav-toggle span:first-child{transform:rotate(45deg)}
.nav.is-open .nav-toggle span:last-child{transform:rotate(-45deg)}

@media (max-width:819px){
  .nav-pill{width:100%;max-width:560px;padding-left:16px}
  .nav-brand{margin-right:auto}
  .nav-toggle{display:block}
  .nav .island::before,.nav .island-text{display:none}
  .nav .island{margin-left:0;padding-left:0}
  .nav .island-cta{padding:0 16px}
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;padding:8px;border-radius:28px;
    background:rgba(9,10,12,.9);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    box-shadow:0 24px 50px -16px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.07);
    opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top center;
    transition:opacity .2s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}
  .nav.is-open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-out),transform .25s var(--ease-out)}
  .nav-links a{height:56px;padding:0 18px;color:var(--frost);font:600 1.3rem/1 var(--display);letter-spacing:-.01em}
  .nav-links a[aria-current="true"]{background:rgba(255,255,255,.06)}
  .nav-glide{display:none}
}
@media (max-width:439px){.nav-brand span{display:none}}
@media (prefers-reduced-transparency:reduce){.nav-pill,.nav-links{background:#090A0C;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Buttons: the arrow sits in its own circle inside the gold pill ---------- */
.btn.has-orb{gap:16px;padding:0 9px 0 28px}
.btn-orb{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(5,5,6,.1);transition:transform .25s var(--ease-out)}
.btn .btn-orb .icon{width:18px;height:18px}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover .btn-orb{transform:translateX(3px)}}
.quiet{display:inline-flex;align-items:center;min-height:44px;color:var(--platinum);font-weight:500;text-decoration:underline;text-decoration-color:rgba(216,219,224,.3);text-underline-offset:5px;transition:text-decoration-color .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.quiet:hover{text-decoration-color:var(--platinum)}}

/* ---------- Hero: carbon, the mark turning behind a tint, fading into slate ---------- */
.hero2{position:relative;isolation:isolate;display:grid;align-items:center;min-height:100svh;padding:136px 0 128px;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#0C0D0F 0%,#0C0D0F 50%,#111317 78%,var(--ground) 100%)}
@supports (background:linear-gradient(in oklab,red,blue)){
  .hero2{background:linear-gradient(180deg in oklab,#0C0D0F 0%,#0C0D0F 50%,#111317 78%,var(--ground) 100%)}
}
.hero-mark{position:absolute;z-index:-2;left:50%;top:47%;width:min(128vmin,1180px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.44;animation:mark-in 2.2s var(--ease-out) .15s both}
.hero-mark model-viewer{display:block;width:100%;height:100%;pointer-events:none;background:transparent;--poster-color:transparent}
.hero-mark [slot="poster"]{width:100%;height:100%;display:grid;place-items:center}
.hero-mark [slot="poster"] img{width:50%;height:auto}
/* The tint: darkest where the words sit, open at the edges, then the slate fade at the foot. */
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(44% 34% at 50% 50%,rgba(12,13,15,.74) 0%,rgba(12,13,15,.46) 55%,rgba(12,13,15,0) 100%),
  linear-gradient(180deg,rgba(12,13,15,.4) 0%,rgba(12,13,15,0) 26%,rgba(21,24,28,0) 60%,var(--ground) 100%)}
.hero-copy{position:relative;display:grid;justify-items:center}
.hero2 h1{max-width:12.5em;font-size:clamp(2.55rem,5.6vw,4.85rem);line-height:1.02;letter-spacing:-.04em}
.hero2 .lede{max-width:30em;margin-top:26px;text-wrap:pretty}
.hero2 .actions{justify-content:center;margin-top:40px;gap:12px 28px}
.hero-copy>*{animation:rise-in .9s var(--ease-out) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}}
@keyframes mark-in{from{opacity:0;transform:translate(-50%,-50%) scale(.95)}}
.mark-toggle{position:absolute;right:var(--gutter);bottom:28px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--shadow);cursor:pointer;transition:color .2s var(--ease-out),background-color .2s var(--ease-out)}
.mark-toggle .icon{width:16px;height:16px}
.mark-toggle .i-play,.mark-toggle[aria-pressed="true"] .i-pause{display:none}
.mark-toggle[aria-pressed="true"] .i-play{display:block}
@media (hover:hover) and (pointer:fine){.mark-toggle:hover{color:var(--frost);background:rgba(255,255,255,.09)}}
@media (max-width:819px){
  .hero2{padding:120px 0 104px}
  .hero-mark{top:45%;width:156vw}
}

/* ---------- Shared: section rhythm, headings, frames ---------- */
/* A nav jump lands the section heading about 108px from the top, just under the floating nav. */
.v2 main>section:not(.hero2):not(.hero-split){padding-block:clamp(96px,11vw,160px);scroll-margin-top:calc(108px - clamp(96px,11vw,160px))}
/* Landing pages (waitlist, sales): a tighter rhythm, because shorter pages convert better (research/waitlist-research.md) */
.lp main>section:not(.hero2):not(.hero-split){padding-block:clamp(64px,7vw,104px);scroll-margin-top:calc(108px - clamp(64px,7vw,104px))}
.v2 h2{font-size:clamp(2.1rem,3.9vw,3.15rem);line-height:1.06}
.v2 .section-lede{max-width:34em;margin-top:22px;text-wrap:pretty}

/* Double bezel: a hairline tray holding the image, so photos sit like machined plates. */
.bezel{margin:0;padding:6px;border-radius:30px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bezel-core{position:relative;height:100%;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#1C1F25,#17191E);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.bezel-core img{display:block;width:100%;height:100%;object-fit:cover}
/* [PH] frames: empty until Kyle and Muras send the real photos and screenshots. */
.ph{display:grid;place-items:center;padding:24px;text-align:center;color:var(--shadow);font-size:.82rem;line-height:1.5;
  background:url("/assets/sparkle-x.svg") center 38%/40px no-repeat,linear-gradient(180deg,#1C1F25,#17191E)}
.ph span{margin-top:84px;opacity:.85}
.ph:empty{background-position:center,0 0}
.ph-portrait{aspect-ratio:4/5}

/* ---------- Kisah kami: the story beside two offset portraits, then three rules ---------- */
.kami-grid{display:grid;gap:64px}
.kami-story h2{max-width:13em}
.kami-story p{max-width:42ch;margin-top:20px;font-size:1.1rem;text-wrap:pretty}
.kami-story h2+p{margin-top:32px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.person{margin:0}
.person:nth-child(2){margin-top:56px}
.person figcaption{margin-top:16px;padding-inline:6px}
.person b{display:block;font:600 1.25rem/1.2 var(--display);color:var(--frost)}
.person figcaption span{display:block;margin-top:6px;color:var(--shadow);font-size:.94rem;line-height:1.45}
.person figcaption .role{margin-top:4px;color:var(--platinum);font-weight:500;font-size:.88rem;letter-spacing:.02em}
@media (min-width:960px){
  .kami-grid{grid-template-columns:1.05fr .95fr;gap:96px;align-items:center}
  .person:nth-child(2){margin-top:96px}
}
.tenets{list-style:none;margin:clamp(96px,10vw,144px) 0 0;padding:0}
.tenets li{display:grid;gap:10px;padding:32px 0;border-top:1px solid var(--hair)}
.tenets h3{font-size:clamp(1.45rem,2.5vw,2rem);letter-spacing:-.025em}
.tenets p{max-width:44ch;color:var(--shadow);text-wrap:pretty}
@media (min-width:860px){.tenets li{grid-template-columns:1fr 1fr;gap:56px;align-items:baseline;padding:40px 0}}

/* ---------- Bukti: three framed screenshots, then the real numbers ---------- */
.bukti h2{max-width:15em}
.proof{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:56px}
.proof>*{min-width:0}
.proof-a .bezel-core{aspect-ratio:16/10}
.proof-b .bezel-core,.proof-c .bezel-core{aspect-ratio:16/10}
@media (min-width:860px){
  .proof{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:repeat(2,clamp(230px,20vw,300px))}
  .proof-a{grid-row:1/3}
  .proof-a .bezel-core{aspect-ratio:auto;min-height:100%}
  .proof-b .bezel-core,.proof-c .bezel-core{aspect-ratio:auto;min-height:0}
}
.figures{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px;margin:72px 0 0;padding-top:48px;border-top:1px solid var(--hair)}
.figures div{display:flex;flex-direction:column-reverse;gap:10px}
.figures dt{color:var(--shadow);font-size:.95rem}
.figures dd{margin:0;font:700 clamp(2.3rem,4.2vw,3.4rem)/1 var(--display);color:var(--frost);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.figures-note{margin-top:28px;color:var(--shadow);font-size:.85rem}
.proof-cap{padding:12px 12px 8px;color:var(--shadow);font-size:.88rem;line-height:1.45}
.proof-b{display:flex;flex-direction:column}
.proof-b .bezel-core{flex:1}
@media (min-width:860px){.figures{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Kelas: the class as one framed ticket ---------- */
.kelas{position:relative;isolation:isolate}
.kelas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50% 45% at 50% 55%,rgba(216,219,224,.035),rgba(216,219,224,0) 70%)}
.ticket{border-radius:40px;padding:7px}
.ticket-core{display:grid;gap:40px;padding:clamp(28px,5vw,64px);border-radius:33px;background:linear-gradient(180deg,#1B1E23,#16191D)}
.ticket h2{font-size:clamp(2.3rem,4.6vw,3.7rem);letter-spacing:-.035em}
.ticket-main .lede{max-width:30em;margin-top:22px;text-wrap:pretty}
.ticket-sub{margin-top:14px;color:var(--frost);font-weight:500}
.ticket-main .quiet{margin-top:18px}
.ticket-side{display:grid;gap:16px;align-content:start}
.ticket-side .perks{margin:0;padding:18px 20px;gap:12px;font-size:.94rem;background:rgba(255,255,255,.035)}
.ticket-count{color:var(--shadow);font-size:.88rem;text-align:center}
html:not(.has-count) .ticket-count{display:none}
.ticket .rail{margin:0;padding-top:40px;border-top:1px solid var(--hair)}
.v2 .ticket .rail li::before{background:#181B20}
@media (min-width:960px){
  .ticket-core{grid-template-columns:1.3fr .7fr;gap:40px 72px}
  .ticket .rail{grid-column:1/-1}
}

/* ---------- Close ---------- */
.v2 .close h2{max-width:17em;font-size:clamp(2.1rem,4.2vw,3.4rem)}
.v2 .close .actions{margin-top:44px}
.v2 .foot{border-top-color:var(--hair)}

/* ---------- Reveal on scroll (home.js turns it on; without it everything is simply shown) ---------- */
html.reveal-on .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
html.reveal-on .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hero-mark,.hero-copy>*{animation:none}
  .mark-toggle{display:none}
  html.reveal-on .reveal{opacity:1;transform:none}
}

/* ---------- Thank-you and legal pages ---------- */
.v2 .thanks{padding-block:clamp(132px,15vw,176px) 72px}
.v2 .order{background:linear-gradient(180deg,#1B1E23,#16191D);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.05)}
.v2 .rail li::before{background:var(--ground)}
.v2 .legal{padding-block:clamp(132px,15vw,176px) 96px}
.v2 .legal h1{font-size:clamp(2.3rem,5vw,3.2rem)}
.v2 .legal h2{margin:48px 0 12px;font-size:1.35rem;line-height:1.25;letter-spacing:-.01em}
.v2 .legal .lang{border-top-color:var(--hair)}
.nav .island-done{gap:10px;padding:0 6px 0 14px;color:var(--frost)}

/* ---------- Split hero (waitlist, sales): the title beside the turning mark, no background mark ---------- */
.hero-split{position:relative;isolation:isolate;display:grid;align-items:center;min-height:min(100svh,940px);padding:124px 0 88px;
  background:linear-gradient(180deg,#0C0D0F 0%,#0C0D0F 56%,#111317 82%,var(--ground) 100%)}
@supports (background:linear-gradient(in oklab,red,blue)){
  .hero-split{background:linear-gradient(180deg in oklab,#0C0D0F 0%,#0C0D0F 56%,#111317 82%,var(--ground) 100%)}
}
.hero-split .wrap{display:grid;gap:20px;align-items:center}
.hero-split h1{max-width:11.5em;font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-.04em}
.hero-split .lede{max-width:31em;margin-top:22px;text-wrap:pretty}
.hero-split .actions{margin-top:34px;gap:14px 26px}
.split-copy>*{animation:rise-in .9s var(--ease-out) both}
.split-copy>:nth-child(2){animation-delay:.08s}
.split-copy>:nth-child(3){animation-delay:.16s}
.split-copy>:nth-child(4){animation-delay:.22s}
.split-mark{position:relative;order:-1;height:clamp(170px,24svh,260px);animation:split-in 1.6s var(--ease-out) .1s both}
.split-mark::before{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(216,219,224,.06),rgba(216,219,224,0))}
.split-mark model-viewer{display:block;width:100%;height:100%;pointer-events:none;background:transparent;--poster-color:transparent}
.split-mark [slot="poster"]{width:100%;height:100%;display:grid;place-items:center}
.split-mark [slot="poster"] img{width:48%;height:auto}
@keyframes split-in{from{opacity:0;transform:scale(.96)}}
.hero-note{margin-top:22px;color:var(--shadow);font-size:.95rem}
.hero-note b{color:var(--frost);font-variant-numeric:tabular-nums}
@media (min-width:960px){
  .hero-split .wrap{grid-template-columns:1.12fr .88fr;gap:48px}
  .split-mark{order:0;height:min(64vh,580px)}
}
@media (prefers-reduced-motion:reduce){.split-copy>*,.split-mark{animation:none}}

/* ---------- Waitlist and sales: the journey components (entry 67) ---------- */
.v2 .story{max-width:40em}
.v2 .story p{margin-top:18px;font-size:1.1rem;text-wrap:pretty}
.v2 .story h2+p{margin-top:28px}
.v2 .story .turn{margin-top:26px;font:700 clamp(1.35rem,2.4vw,1.75rem)/1.3 var(--display);color:var(--frost);letter-spacing:-.015em}

/* The inner voice: what a bull run sounds like in their head, in order */
.voice{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px;max-width:34rem}
.voice li{display:grid;gap:6px;justify-items:start}
.voice small{padding-left:16px;color:var(--shadow);font-size:.8rem;letter-spacing:.01em}
.voice p{position:relative;padding:14px 18px;border-radius:22px 22px 22px 6px;background:#1D2026;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);color:var(--platinum);font-size:1.02rem;line-height:1.45}
.voice li:last-child p{background:#24272E;color:var(--frost);font-weight:600}
.voice li:nth-child(even){justify-items:end}
.voice li:nth-child(even) small{padding:0 16px 0 0}
.voice li:nth-child(even) p{border-radius:22px 22px 6px 22px}
@media (min-width:860px){.voice-wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.voice{margin-top:0}}

/* One rise, three ways */
.ways{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:0;counter-reset:way}
.ways li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 18px;padding:26px 0;border-top:1px solid var(--hair);counter-increment:way}
.ways li::before{content:counter(way);grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(216,219,224,.22);color:var(--frost);font:600 1rem/1 var(--display)}
.ways h3{font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.015em}
.ways p{color:var(--shadow);max-width:46ch;text-wrap:pretty}
.ways li:last-child h3{color:var(--frost)}
@media (min-width:960px){.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}.plan-grid .ways{margin-top:0}}

/* The worked example, as a framed plate */
.v2 .example{max-width:none;margin:0;padding:clamp(22px,3.5vw,32px);border-radius:24px;background:linear-gradient(180deg,#1C1F25,#17191E);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.v2 .example-tray{margin-top:48px;padding:6px;border-radius:30px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
@media (min-width:960px){.v2 .plan-grid .example-tray{margin-top:0;position:sticky;top:110px}}
.v2 .honest{margin-top:28px;max-width:40em;color:var(--platinum);font-size:1.05rem}

/* The exit, as two written rules */
.rules{display:grid;gap:14px;margin-top:44px}
.rule{padding:6px;border-radius:30px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rule>div{height:100%;padding:clamp(22px,3vw,30px);border-radius:24px;background:linear-gradient(180deg,#1C1F25,#17191E);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rule b{display:block;font:600 1.25rem/1.25 var(--display);color:var(--frost)}
.rule p{margin-top:10px;color:var(--shadow)}
@media (min-width:860px){.rules{grid-template-columns:1fr 1fr}}
.after-rules{margin-top:40px}

/* Founders: the photo beside two short bios */
.founders{display:grid;gap:40px;margin-top:48px;align-items:center}
.founders figure{margin:0}
.founders .bezel-core{aspect-ratio:3/2}
.founders figcaption{margin-top:12px;padding-inline:6px;color:var(--shadow);font-size:.88rem}
.bios{display:grid;gap:28px}
.bio b{display:block;font:600 1.4rem/1.2 var(--display);color:var(--frost)}
.bio .role{display:block;margin-top:4px;color:var(--platinum);font-weight:500;font-size:.9rem}
.bio p{margin-top:10px;color:var(--shadow);max-width:44ch;text-wrap:pretty}
.reach{margin-top:4px;color:var(--frost);font:600 1.05rem/1.4 var(--display)}
@media (min-width:960px){.founders{grid-template-columns:1.1fr .9fr;gap:64px}}

/* Trust: three plain statements in one framed panel */
.trust{margin-top:44px;padding:6px;border-radius:30px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.trust ul{list-style:none;margin:0;padding:clamp(22px,3.5vw,34px);display:grid;gap:22px;border-radius:24px;background:linear-gradient(180deg,#1C1F25,#17191E);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.trust li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px}
.trust li .icon{width:22px;height:22px;margin-top:3px;color:var(--platinum)}
.trust li .icon.x{color:var(--shadow)}
.trust b{display:block;color:var(--frost);font:600 1.1rem/1.35 var(--display)}
.trust span{grid-column:2;color:var(--shadow)}
@media (min-width:960px){.trust ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}}

/* FAQ in the v2 world */
.v2 .faq{max-width:52rem;margin-top:36px}
.v2 .faq details{border-top-color:var(--hair)}
.v2 .faq details:last-child{border-bottom:1px solid var(--hair)}
.v2 .faq summary{min-height:44px;align-items:center}
.v2 .faq details p{color:var(--platinum)}
.v2 .faq-cta{margin-top:40px}
.v2 .section-cta{margin-top:40px}

.done .place{color:var(--frost);font:600 1.1rem/1.4 var(--display)}

/* ---------- Sales page (entry 67) ---------- */
.vsl2{position:relative;padding:124px 0 72px;background:linear-gradient(180deg,#0C0D0F 0%,#0C0D0F 60%,var(--ground) 100%)}
.vsl2 .wrap{display:grid;justify-items:center;text-align:center}
.vsl2 h1{max-width:13em;font-size:clamp(2.3rem,4.8vw,4rem);line-height:1.04;letter-spacing:-.04em}
.vsl2 .lede{max-width:34em;margin:20px auto 0;text-wrap:pretty}
.who{margin-top:16px;color:var(--shadow);font-size:.95rem}
.who b{color:var(--frost);font-weight:600}
.vsl2 .video-tray{width:100%;max-width:980px;margin-top:36px;padding:7px;border-radius:34px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.vsl2 .video{max-width:none;max-height:none;border-radius:28px}
.facts{list-style:none;width:100%;max-width:980px;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.facts li{display:grid;gap:4px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.035);text-align:left}
.facts b{font:700 1.25rem/1.1 var(--display);color:var(--frost);font-variant-numeric:tabular-nums}
.facts span{color:var(--shadow);font-size:.85rem}
@media (min-width:860px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vsl2 .actions{justify-content:center;margin-top:26px}
.step-note{margin-top:12px;color:var(--shadow);font-size:.88rem}

/* Cycle multiples: holding pays less each cycle */
.v2 .cycles{margin-top:40px}

/* Agenda inside a framed plate */
.agenda-tray{margin-top:44px;padding:6px;border-radius:30px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.agenda-tray>div{padding:clamp(22px,3.5vw,34px);border-radius:24px;background:linear-gradient(180deg,#1C1F25,#17191E);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.v2 .agenda{margin:0}

/* Proof row: the champion photo and Muras's account */
.proof2{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:44px}
.proof2>*{min-width:0}
.proof2 .bezel-core{aspect-ratio:3/2}
@media (min-width:860px){.proof2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Offer: what each part does for them, then the price */
.v2 .offer{margin-top:40px}
.price-box{margin-top:44px;padding:7px;border-radius:36px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.price-box>div{display:grid;gap:22px;padding:clamp(24px,4vw,44px);border-radius:29px;background:linear-gradient(180deg,#1C1F25,#16191D);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.price-box .price{font-size:clamp(2.6rem,6vw,3.6rem)}
.price-step{display:grid;gap:8px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.035)}
.price-step p{color:var(--platinum)}
.price-step b{color:var(--frost)}
.v2 .countdown div{background:rgba(255,255,255,.04)}
.pay-note{color:var(--shadow);font-size:.88rem}
@media (min-width:960px){.price-box>div{grid-template-columns:1fr 1fr;align-items:center}.price-box .btn{grid-column:1/-1}}

/* Seats: one framed ring per class */
.v2 .seat{background:linear-gradient(180deg,#1C1F25,#17191E);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

/* No refunds, said as clarity */
.clarity{margin-top:44px;max-width:44rem}
.clarity p{margin-top:12px;color:var(--platinum)}
.clarity ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.clarity li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;color:var(--platinum)}
.clarity li .icon{width:20px;height:20px;margin-top:3px;color:var(--platinum)}

/* Claim form in the v2 world */
.v2 .claim{background:linear-gradient(180deg,#1C1F25,#16191D);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.06)}
.v2 .claim input{border-color:rgba(216,219,224,.16);background:#121418}

/* Mobile buy bar: appears past the video, hides at the claim form */
.buybar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;display:none;align-items:center;gap:12px;padding:7px 7px 7px 18px;border-radius:999px;
  background:rgba(9,10,12,.86);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);transform:translateY(160%);transition:transform .35s var(--ease-out)}
.buybar.show{transform:none}
.bb-text{flex:1;min-width:0;color:var(--platinum);font-size:.84rem;line-height:1.3}
.bb-text b{display:block;color:var(--frost);font:700 1rem/1.2 var(--display)}
.buybar .btn{min-height:48px;padding:0 20px;font-size:.95rem}
@media (max-width:819px){
  .buybar{display:flex}
  .sales .nav .island-cta{display:none}
  .sales .nav .island-text{display:inline;padding-right:12px;font-size:.84rem}
  .sales .nav .island::before{display:none}
}
@media (prefers-reduced-transparency:reduce){.buybar{background:#090A0C;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Copy pass (entry 67): proof under the hero button, the spouse summary ---------- */
.hero-proof{margin-top:10px;color:var(--shadow);font-size:.92rem}
.hero-proof b{color:var(--frost);font-variant-numeric:tabular-nums}
.summary{padding:7px;border-radius:34px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.summary>div{padding:clamp(24px,4vw,44px);border-radius:27px;background:linear-gradient(180deg,#1C1F25,#16191D);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.summary h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.summary .lede{margin-top:8px;color:var(--shadow)}
.summary dl{margin:28px 0 0;display:grid;gap:0}
.summary dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--hair)}
.summary dt{color:var(--frost);font:600 1rem/1.5 var(--display)}
.summary dd{margin:0;color:var(--platinum)}
@media (min-width:860px){.summary dl{grid-template-columns:1fr 1fr;column-gap:48px}}
/* Small phones: keep the hero button inside a 375x667 screen */
@media (max-width:819px){
  .hero-split{padding-top:104px}
  .split-mark{height:clamp(120px,18svh,200px)}
  .vsl2{padding-top:104px}
  .vsl2 h1{font-size:clamp(2rem,8.4vw,2.6rem)}
}
h1 .ln{display:block}

/* Sales page: the price as the one thing under the video (Kyle, entry 68). Date and length are a small line, not panels. */
.offer-strip{width:100%;max-width:980px;margin-top:22px;display:grid;gap:18px;align-items:center;padding:clamp(18px,3vw,24px) clamp(18px,3vw,26px);border-radius:28px;text-align:left;
  background:linear-gradient(180deg,#1C1F25,#16191D);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.06)}
.os-amount{font:700 clamp(2.2rem,4.6vw,2.9rem)/1 var(--display);color:var(--frost);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.os-lock{margin-top:8px;max-width:36em;color:var(--platinum);font-size:.98rem;text-wrap:pretty}
.offer-strip .btn{justify-self:stretch}
.os-details{max-width:980px;margin-top:14px;color:var(--shadow);font-size:.88rem;text-wrap:pretty}
@media (min-width:860px){.offer-strip{grid-template-columns:minmax(0,1fr) auto;gap:32px}.offer-strip .btn{justify-self:end}}
.os-seats{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--frost);font-weight:500;font-size:.95rem}
.os-seats[hidden]{display:none}
.os-seats .ring{width:24px;height:24px}
.os-lock b{color:var(--frost)}
.os-timer{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:10px;color:var(--shadow);font-size:.95rem}
.os-timer .ticker{color:var(--frost);font:600 1.02rem/1.3 var(--display);font-variant-numeric:tabular-nums}

/* ---------- Short waitlist (entry 71): the three reasons to join, and what we share ---------- */
.joins{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.joins li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;color:var(--platinum);font-size:1.02rem;line-height:1.45}
.joins .icon{width:20px;height:20px;margin-top:2px;color:var(--gold)}
.joins b{color:var(--frost);font-weight:600}
.joins-center{max-width:26rem;margin:28px auto 0;text-align:left}
.hero-split .joins+.actions{margin-top:28px}
.share{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;counter-reset:share}
.share li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:20px 0;border-top:1px solid var(--hair);counter-increment:share}
.share li::before{content:counter(share);grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(216,219,224,.22);color:var(--frost);font:600 .95rem/1 var(--display)}
.share b{color:var(--frost);font:600 1.15rem/1.3 var(--display)}
.share span{color:var(--shadow)}
@media (min-width:860px){.share{grid-template-columns:1fr 1fr;column-gap:56px}}
@media (max-width:819px){
  .hero-split{padding-top:96px}
  .split-mark{height:clamp(96px,14svh,170px)}
  .hero-split .lede{margin-top:16px}
  .hero-split .joins{margin-top:16px;gap:8px}
  .hero-split .joins li{font-size:.96rem}
  .hero-split .joins+.actions{margin-top:22px}
}

/* Waitlist: a real countdown to the early-access send, Sat 31 Oct (entry 73) */
.opens{margin-top:22px}
.opens p{margin-bottom:10px;color:var(--shadow);font-size:.9rem}
.opens .countdown{gap:8px}
.opens .countdown div{min-width:62px;padding:10px 6px 9px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.opens .countdown b{font-size:1.5rem;color:var(--frost)}
.opens-center{display:grid;justify-items:center;margin-top:24px}

/* Waitlist is one screen (entry 74): the hero fills the viewport */
.lp main>.hero-split:only-child{min-height:calc(100svh - 120px)}

/* Waitlist hero: the homepage's background mark behind a taller block of copy (entry 76) */
.hero-wl .lede{margin-left:auto;margin-right:auto}
.hero-wl .joins-center{margin-top:24px}
.hero-wl .actions{margin-top:30px}
.hero-wl .hero-note{margin-top:16px}
.hero-wl::before{background:
  radial-gradient(54% 46% at 50% 52%,rgba(12,13,15,.78) 0%,rgba(12,13,15,.5) 55%,rgba(12,13,15,0) 100%),
  linear-gradient(180deg,rgba(12,13,15,.4) 0%,rgba(12,13,15,0) 26%,rgba(21,24,28,0) 60%,var(--ground) 100%)}
@media (max-width:819px){
  .hero-wl{padding:104px 0 88px}
  .hero-wl h1{font-size:clamp(2.3rem,9vw,2.9rem)}
  .hero-wl .joins li{font-size:.96rem}
}

/* Waitlist: the class date on its own line (entry 77) */
.class-date{display:inline-flex;align-items:center;gap:10px;margin:20px auto 0;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:var(--platinum);font-size:1rem}
.class-date .icon{width:20px;height:20px;color:var(--frost)}
.class-date b{color:var(--frost);font:600 1.05rem/1.2 var(--display);letter-spacing:-.005em}
.hero-wl .class-date+.joins{margin-top:22px}

/* Waitlist popup: compact, no ring, no subtitle; fits a phone screen without scrolling (entry 79) */
.v2 .sheet-form{padding:20px 20px 18px}
.v2 .sheet-head{grid-template-columns:minmax(0,1fr) 44px;gap:12px}
.v2 .sheet-head h2{font-size:1.4rem}
.v2 .sheet .perks{margin-top:12px;padding:12px 14px;gap:6px;font-size:.85rem}
.v2 .sheet .fields{gap:10px;margin-top:14px}
.v2 .sheet .field{gap:6px}
.v2 .sheet .fields input{height:48px}
.v2 .sheet .fields .btn{margin-top:6px;min-height:52px}
.v2 .sheet .fine{margin-top:4px;font-size:.74rem;line-height:1.45}
.v2 .sheet .done{padding:16px 4px 4px;gap:10px}
.v2 .sheet .done .icon{width:2.4rem;height:2.4rem}
.v2 .sheet .done h2{font-size:1.4rem}

/* Confirmation state: only the success message and Tutup (Kyle, entry 80) */
.v2 .sheet .sent .sheet-head,.v2 .sheet .sent .perks{display:none}
.v2 .sheet .sent .done{padding-top:8px}

/* ---------- Waitlist cap (entry 83): "Waitlist terhad kepada 500 orang", the full state, icons on the six points ---------- */
.cap-line{margin:24px auto 0;max-width:26rem;color:var(--platinum);font:600 .8rem/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase}
.cap-line b{color:var(--frost);font-weight:700}
.cap-line+.joins,.cap-line+.joins-center{margin-top:12px}
.cap-full{text-transform:none;letter-spacing:0;font:500 1rem/1.5 var(--body)}
.hero-wl .class-date+.cap-line{margin-top:22px}
.ticket-side .cap-line{margin:0 0 -6px;max-width:none;text-align:left}
[data-full-only]{display:none!important}
.wl-full [data-full-only]{display:block!important}
.wl-full [data-open-only]{display:none!important}
.v2 .sheet .perks-full{display:none;margin-top:12px;color:var(--platinum)}
.v2 .sheet .sent .perks-full{display:none!important}
.v2 .sheet .done [data-tier="public"],.v2 .sheet .tier-public .done [data-tier="waitlist"]{display:none}
.v2 .sheet .tier-public .done [data-tier="public"]{display:block}
.test-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--frost);color:var(--frost);font:600 .6rem/1.5 var(--display);letter-spacing:.16em;vertical-align:middle}
.share-icons li::before{content:none;display:none}
.share-ic{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(216,219,224,.22);color:var(--frost)}
.share-ic .icon{width:20px;height:20px}

/* ---------- Waitlist closed (entry 93): from close_at, count.php says closed and site.js adds .wl-closed ---------- */
[data-closed-only]{display:none!important}
.wl-closed [data-closed-only]{display:block!important}
.wl-closed [data-open-only],.wl-closed [data-full-only],.wl-closed .actions,.wl-closed .ticket-side .btn,.wl-closed .island-cta{display:none!important}

/* ---------- Founder portraits (entry 95) and a tighter waitlist (Kyle: sections too far apart) ---------- */
.people-bios{max-width:760px;margin-top:40px;gap:20px}
.people-bios .person:nth-child(2){margin-top:40px}
.people-bios+.reach{margin-top:28px}
.lp .hero-wl{min-height:0;padding:128px 0 40px}
[data-page="waitlist"] main>section:not(.hero2):not(.hero-split){padding-block:clamp(40px,4.5vw,64px);scroll-margin-top:calc(108px - clamp(40px,4.5vw,64px))}
@media (max-width:819px){
  .lp .hero-wl{padding:104px 0 32px}
  .people-bios{gap:14px}
  .people-bios .person:nth-child(2){margin-top:32px}
}