/* ============================================================
   sp.css — Superpower-grammar homepage for curí (preview layer)
   Measured from superpower.com 2026-09-12: grotesk at weight 400,
   h1 56 / h2 37.5 (chapters) 45 (bands) / h3 30 / body 15–17,
   ink #18181B, white body, #fafafa band, pill buttons 47px,
   inset media cards r20, dark glass pill nav with centred logo,
   pinned chapters with a device in the middle and a side index.
   curí keeps its own ink/sand palette; no new hues.
   ============================================================ */
:root{--sp-ink:#18181B;--sp-grey:#6B6B6B;--sp-grey-2:#9A9A9A;--sp-band:#F7F5F3;--sp-line:#E8E5E2;--sp-r:20px;--sp-gut:8px;--glass:rgba(30,30,30,.58);--glass-lt:rgba(255,255,255,.12);--sp-font:"Inter","IBM Plex Sans",system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body.sp{background:#fff;color:var(--sp-ink);font-family:var(--sp-font);font-size:15px;line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
.sp h1,.sp h2,.sp h3,.sp h4{font-family:var(--sp-font);font-weight:400;color:var(--sp-ink);letter-spacing:-.022em;text-wrap:balance;margin:0}
.sp .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sp .wrap-w{max-width:1320px;margin:0 auto;padding:0 20px}
.sp p{margin:0}
.sp-h1{font-size:56px;line-height:1;letter-spacing:-.02em}
.sp-h2{font-size:45px;line-height:1.2}
.sp-h2s{font-size:37.5px;line-height:1.2}
.sp-h3{font-size:30px;line-height:1.25;letter-spacing:-.02em}
.sp-lede{font-size:17px;line-height:1.4;color:var(--sp-grey);letter-spacing:-.01em}
.sp-small{font-size:15px;line-height:1.5;color:var(--sp-grey)}
@media(max-width:700px){.sp-h1{font-size:40px}.sp-h2{font-size:32px}.sp-h2s{font-size:30px}.sp-h3{font-size:24px}}

/* ---------- buttons ---------- */
.b-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:47px;padding:0 19px;border-radius:999px;font-size:15px;font-weight:400;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;transition:background .2s,color .2s}
.b-white{background:#fff;color:var(--sp-ink)}.b-white:hover{background:#F1EDEA}
.b-glass{background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.b-glass:hover{background:rgba(255,255,255,.18)}
.b-ink{background:#000;color:#fff}.b-ink:hover{background:#2a2a2a}
.b-line{background:#fff;color:var(--sp-ink);border:1px solid var(--sp-line)}.b-line:hover{border-color:var(--sp-ink)}
.b-pill:focus-visible{outline:2px solid var(--sp-ink);outline-offset:3px}
.mcard .b-pill:focus-visible{outline-color:#fff}

/* ---------- nav ---------- */
.spnav{position:fixed;top:18px;left:0;right:0;z-index:100;display:flex;justify-content:center;gap:10px;pointer-events:none}
.spnav-in{pointer-events:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:52px;padding:0 8px 0 24px;border-radius:999px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font-size:14px;min-width:840px}
.spnav-in .links{display:flex;gap:22px}
.spnav-in .links a,.spnav-in .right a{color:#fff;text-decoration:none;opacity:.92}
.spnav-in .links a:hover{opacity:1}
.spnav-in .logo{font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:-.03em;color:#fff;text-decoration:none}
.spnav-in .right{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.spnav-in .cta{background:#fff;color:var(--sp-ink)!important;height:38px;padding:0 19px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;opacity:1!important}
.spnav-dots{pointer-events:auto;width:52px;height:52px;border-radius:50%;border:0;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.spnav-dots i{display:grid;grid-template-columns:repeat(3,4px);gap:3px}
.spnav-dots i b{width:4px;height:4px;border-radius:50%;background:#fff;display:block}
.spnav-menu{position:fixed;top:82px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 24px));z-index:99;background:rgba(24,24,27,.96);backdrop-filter:blur(20px);border-radius:18px;padding:12px 20px;display:none}
.spnav-menu.open{display:block}
.spnav-menu a{display:block;color:#fff;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px}
.spnav-menu a:last-child{border:0}
@media(max-width:960px){.spnav{top:12px;padding:0 12px;justify-content:space-between}.spnav-in{min-width:0;grid-template-columns:auto 1fr auto;padding:0 6px 0 18px;height:48px;gap:12px}.spnav-in .links,.spnav-in .right .join{display:none}.spnav-in .logo{order:-1}.spnav-dots{width:48px;height:48px}}

/* ---------- media card ---------- */
.mcard{position:relative;margin:var(--sp-gut);border-radius:var(--sp-r);overflow:hidden;background:#111;color:#fff;min-height:calc(100svh - 16px)}
.mcard>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard>.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.42) 100%)}
.mcard>.in{position:relative;z-index:2;height:100%;min-height:inherit;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 60px 60px}
.mcard h1,.mcard h2,.mcard h3,.mcard p{color:#fff}
@media(max-width:700px){.mcard>.in{padding:100px 20px 28px}}

/* ---------- hero ---------- */
.sp-hero .in{justify-content:flex-end}
.sp-hero .check{display:inline-flex;align-items:center;gap:8px;font-size:14px;margin-bottom:22px}
.sp-hero .check::before{content:"✓";font-size:12px}
.sp-hero h1{max-width:11ch;margin-bottom:14px}
.sp-hero .lede{font-size:15px;line-height:1.5;max-width:52ch;margin-bottom:34px}
.sp-hero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:110px}
.sp-facts{display:flex;flex-wrap:wrap}
.sp-facts div{padding-right:24px;margin-right:24px;border-right:1px solid rgba(255,255,255,.28);font-size:15px}
.sp-facts div:last-child{border:0}
.sp-facts b{display:block;font-weight:500}
.sp-facts span{color:rgba(255,255,255,.72)}
@media(max-width:700px){.sp-hero .ctas{margin-bottom:40px}.sp-facts{flex-direction:column;gap:10px}.sp-facts div{border:0;padding:0;margin:0}}

/* ---------- credentials row (their logo row) ---------- */
.sp-creds{padding:60px 0 0;text-align:center}
.sp-creds .lab{display:inline-flex;align-items:center;gap:12px;font-size:15px;color:var(--sp-ink)}
.sp-creds .lab i{display:inline-flex}
.sp-creds .lab i b{width:30px;height:30px;border-radius:50%;background:var(--sand-2);border:2px solid #fff;margin-left:-8px;display:block;overflow:hidden}
.sp-creds .lab i b:first-child{margin-left:0}
.sp-creds .lab i b img{width:100%;height:100%;object-fit:cover;display:block}
.sp-creds .marks{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;margin-top:34px;color:var(--sp-grey-2);font-size:19px;letter-spacing:-.01em}
.sp-creds .marks span small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

/* ---------- how it works ---------- */
.sp-how{padding:110px 0 100px}
.sp-how h2{text-align:center;margin-bottom:8px}
.sp-how .sub{text-align:center;margin-bottom:56px}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media(max-width:1000px){.how-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.how-grid{grid-template-columns:1fr}}
.how figure{margin:0;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;background:var(--sand-2)}
.how figure img{width:100%;height:100%;object-fit:cover;display:block}
.how .n{position:absolute;top:14px;left:14px;width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.28);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;z-index:3}
.how h3{font-size:24px;margin:26px 0 8px;letter-spacing:-.02em}
.how p{color:var(--sp-grey);font-size:15px;line-height:1.45;padding-right:20px}
.uicard{position:absolute;left:14px;right:14px;background:rgba(24,24,27,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:12px;padding:14px 16px;color:#fff;font-size:13px;line-height:1.35;z-index:2}
.uicard.mid{top:50%;transform:translateY(-50%)}
.uicard.bot{bottom:14px}
.uicard b{display:block;font-weight:500;font-size:15px}
.uicard small{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-top:4px}
.uicard .row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid rgba(255,255,255,.14)}
.uicard .row:first-child{border-top:0}
.uicard .ok{color:#BFE3C8}
.uicard .withico{display:flex;align-items:center;gap:12px}
.uicard .ico{display:inline-flex;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14);align-items:center;justify-content:center;flex:none;font-size:14px}
.phone-lite{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:68%;background:#fff;border-radius:26px 26px 0 0;padding:14px 16px 0;color:var(--sp-ink);box-shadow:0 20px 50px rgba(0,0,0,.18);font-size:11px;z-index:2}
.phone-lite .sb{display:flex;justify-content:space-between;font-size:10px;color:#111;margin-bottom:14px}
.phone-lite h5{margin:0;font-size:15px;font-weight:500}
.phone-lite .sub2{font-size:10px;color:#777;margin-bottom:8px}
.phone-lite .li{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:10.5px;color:#333}
.phone-lite .li i{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-style:normal;flex:none}
.phone-lite .li .a{color:#2E8B57}.phone-lite .li .b{color:#C9A227}.phone-lite .li .c{color:#C0504D}
.phone-lite .scores{display:flex;gap:26px;margin-top:8px;padding-bottom:8px}
.phone-lite .scores b{font-size:16px;font-weight:500;display:block}
.phone-lite .scores small{font-size:9px;color:#777}
.retest{position:absolute;inset:0;z-index:2}
.retest svg{width:100%;height:100%;display:block}

/* ---------- chapters ---------- */
.sp-chapters{position:relative;height:calc(4 * 100svh + 60svh)}
.sp-stage{position:sticky;top:0;height:100svh}
.chap{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.chap.on{opacity:1;pointer-events:auto}
.chap .mcard{min-height:calc(100svh - 16px);height:calc(100svh - 16px);margin:var(--sp-gut)}
.chap .mcard>.in{padding:0}
.chap .copy{max-width:420px;position:absolute;left:60px;top:44%;transform:translateY(-50%)}
.chap h2{margin-bottom:14px;max-width:12ch}
.chap .lede{font-size:17px;line-height:1.4;color:rgba(255,255,255,.95)}
.chap .faq{position:absolute;left:60px;bottom:60px;width:450px;display:flex;flex-direction:column;gap:8px}
.faq details{background:rgba(20,20,20,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:8px;padding:0 11px 0 19px;border:0;margin:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px;font-size:15px;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"!important;width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none;transform:none!important;color:#fff}
.faq details[open] summary::after{content:"–"!important}
.faq details p,.faq details[open] p{margin:0 0 16px;font-size:14px;line-height:1.5;color:#fff!important;opacity:.9;max-width:50ch}
.faq details::before,.faq details::after{display:none}
.faq summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sp-index{position:absolute;right:60px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:12px;text-align:right}
.sp-index button{background:none;border:0;color:rgba(255,255,255,.5);font-size:17px;font-family:var(--sp-font);cursor:pointer;display:flex;gap:16px;justify-content:flex-end;align-items:baseline;padding:4px 0;transition:color .3s;position:relative;letter-spacing:-.01em}
.sp-index button i{font-style:normal;font-size:15px;min-width:24px;text-align:left}
.sp-index button.on{color:#fff}
.sp-index button.on::before{content:"";position:absolute;left:-28px;top:6px;bottom:6px;width:1px;background:#fff}
.sp-index button:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
/* device in the middle */
.dev{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.tablet{width:min(640px,54vw);aspect-ratio:1.35;background:#0b0b0b;border-radius:26px;padding:14px;transform:rotate(-6deg)}
.tablet .scr{background:#fff;border-radius:14px;height:100%;overflow:hidden;color:var(--sp-ink);font-size:11px;display:grid;grid-template-columns:150px 1fr}
.tablet .side{border-right:1px solid #eee;padding:14px 12px}
.tablet .side .lg{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:-.03em;margin-bottom:12px}
.tablet .side .tab{display:flex;gap:8px;margin-bottom:12px;font-size:10px;color:#888}
.tablet .side .tab b{color:var(--sp-ink);font-weight:500}
.tablet .side .it{display:flex;align-items:center;gap:7px;padding:5px 0;font-size:10px;color:#444}
.tablet .side .it i{width:12px;height:12px;border-radius:50%;border:1.5px solid #2E8B57;display:inline-block;flex:none}
.tablet .side .it i.o{border-color:#C9A227}
.tablet .main{padding:14px 16px}
.tablet .main .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tablet .main .top b{font-size:13px;font-weight:500}
.tablet .grade{width:34px;height:34px;border-radius:50%;border:2px solid #2E8B57;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#2E8B57}
.tablet table{width:100%;border-collapse:collapse;font-size:10px;margin-top:6px}
.tablet th{text-align:left;font-weight:400;color:#999;font-size:9px;padding:4px 0;border-bottom:1px solid #eee}
.tablet td{padding:6px 0;border-bottom:1px solid #f1f1f1;color:#333}
.tablet td.st{color:#2E8B57}
.tablet td.st.o{color:#C9A227}
.tablet td.sp{font-family:var(--mono);font-size:9.5px}
.tablet td svg{width:70px;height:16px;display:block}
.phone{width:min(300px,64vw);aspect-ratio:.49;background:#0b0b0b;border-radius:44px;padding:10px;position:relative}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:92px;height:26px;background:#0b0b0b;border-radius:14px;z-index:2}
.phone .scr{background:#fff;border-radius:36px;height:100%;overflow:hidden;color:var(--sp-ink);padding:52px 16px 16px;font-size:11px}
.phone .sb{position:absolute;top:22px;left:32px;right:32px;display:flex;justify-content:space-between;font-size:11px;color:#111;z-index:3}
.phone h5{margin:0 0 4px;font-size:16px;font-weight:500;letter-spacing:-.02em}
.phone .sub{font-size:10.5px;color:#777;margin-bottom:12px}
.phone .card{background:#F7F5F3;border-radius:12px;padding:12px;margin-bottom:10px}
.phone .card .k{font-size:9.5px;color:#999;letter-spacing:.04em;text-transform:uppercase}
.phone .card .v{font-size:26px;letter-spacing:-.03em;line-height:1.05;margin:4px 0}
.phone .card .v small{font-size:11px;color:#777;letter-spacing:0}
.phone .bar{display:flex;align-items:center;gap:8px;font-size:10px;color:#444;padding:5px 0}
.phone .bar span:first-child{width:78px;flex:none}
.phone .bar em{flex:1;height:6px;border-radius:3px;background:#E8E5E2;position:relative;font-style:normal}
.phone .bar em b{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--sp-ink)}
.phone .bar em b.lft{right:50%}.phone .bar em b.rgt{left:50%}
.phone .bar i{width:34px;text-align:right;font-style:normal;font-family:var(--mono);font-size:9px;color:#666}
.phone .pill-hi{display:inline-block;font-size:9.5px;color:#B0433A;background:#FBE9E7;border-radius:999px;padding:3px 8px;margin-bottom:8px}
.phone .row{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid #eee;font-size:10.5px}
.phone .row .ok{color:#2E8B57}
.phone .btn{display:block;text-align:center;background:var(--sp-ink);color:#fff;border-radius:999px;padding:10px;font-size:11px;margin-top:8px}
.phone .ring{width:120px;height:120px;border-radius:50%;margin:6px auto 8px;background:conic-gradient(var(--sp-ink) 0 331deg,#E8E5E2 331deg 360deg);display:flex;align-items:center;justify-content:center}
.phone .ring div{width:96px;height:96px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.phone .ring b{font-size:30px;font-weight:400;letter-spacing:-.03em;line-height:1}
.phone .ring small{font-size:9px;color:#777}
.phone .diary{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:6px 0 10px}
.phone .diary span{aspect-ratio:1;border-radius:6px;background:#E8E5E2;display:flex;align-items:center;justify-content:center;font-size:8px;color:#666}
.phone .diary span.d{background:var(--sp-ink);color:#fff}
@media(max-width:1100px){.sp-index{display:none}.chap .faq{width:min(450px,calc(100% - 40px))}.dev{left:auto;right:40px;transform:translateY(-50%) scale(.85);transform-origin:right center}}
@media(max-width:900px){.sp-chapters{height:auto}.sp-stage{position:static;height:auto}.chap{position:relative;opacity:1;pointer-events:auto}.chap .mcard{min-height:0;height:auto}.chap .mcard>.in{padding:70px 20px 24px;display:block}.chap .copy{position:static;transform:none;max-width:none;margin-bottom:22px}.chap .faq{position:static;width:100%;margin-top:22px}.dev{position:static;transform:none;margin:0 auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));width:fit-content}.tablet{width:min(560px,100%);transform:none}.phone{width:min(260px,70vw)}}
.no-js .sp-chapters{height:auto}.no-js .sp-stage{position:static;height:auto}.no-js .chap{position:relative;opacity:1}

/* ---------- features table ("what could cost") ---------- */
.sp-feat{padding:110px 0}
.sp-feat .k{text-align:center;font-size:17px;color:var(--sp-ink);margin-bottom:22px}
.sp-feat h2{text-align:center;margin:0 auto 40px;max-width:18ch}
.ftable{max-width:600px;margin:0 auto}
.ftable .r{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;padding:11px 12px;border-radius:6px;font-size:16px;line-height:1.3}
.ftable .r:nth-child(odd){background:var(--sp-band)}
.ftable .r span:last-child{color:var(--sp-grey)}
.sp-feat .act{text-align:center;margin-top:36px}
@media(max-width:600px){.ftable .r{grid-template-columns:1fr;gap:2px}}

/* ---------- people ---------- */
.sp-people{padding:20px 0 110px}
.sp-people h2{max-width:16ch;margin-bottom:56px}
.people{display:grid;grid-template-columns:repeat(2,1fr)}
.person{display:grid;grid-template-columns:200px 1fr;gap:34px;padding:0 40px 0 0;border-right:1px solid var(--sp-line);margin-right:40px}
.person:last-child{border:0;margin:0}
.person figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:1;background:var(--sand-2)}
.person figure img{width:100%;height:100%;object-fit:cover;display:block}
.person .org{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-grey-2);margin:6px 0 22px}
.person h3{font-size:16px;font-weight:500;letter-spacing:-.01em;margin-bottom:4px}
.person .role{font-size:13px;color:var(--sp-grey);margin-bottom:22px;line-height:1.4}
.person .bio{font-size:13px;line-height:1.5;color:var(--sp-ink);margin-bottom:14px}
.person a{font-size:13px;color:var(--sp-ink)}
@media(max-width:900px){.people{grid-template-columns:1fr;gap:40px}.person{border:0;margin:0;padding:0}}
@media(max-width:600px){.person{grid-template-columns:1fr}.person figure{max-width:220px}}

/* ---------- notes band (their testimonials) ---------- */
.sp-notes{background:var(--sp-band);padding:112px 0}
.sp-notes .rate{font-size:15px;margin-bottom:22px}
.sp-notes h2{max-width:14ch;margin-bottom:22px}
.sp-notes .lede{max-width:56ch;margin-bottom:50px}
.notes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.notes::-webkit-scrollbar{display:none}
.note{flex:0 0 min(645px,84vw);scroll-snap-align:start;padding-right:40px;margin-right:40px;border-right:1px solid var(--sp-line);text-decoration:none;color:inherit}
.note figure{margin:0 0 30px;border-radius:12px;overflow:hidden;aspect-ratio:1.6;background:var(--sand-2)}
.note figure img{width:100%;height:100%;object-fit:cover;display:block}
.note .who{font-size:15px;margin-bottom:12px;color:var(--sp-ink)}
.note .q{font-size:17px;line-height:1.4;color:var(--sp-ink);margin-bottom:12px;letter-spacing:-.01em}
.note .out{font-size:15px;color:var(--sp-grey)}
.notes-bar{display:flex;align-items:center;gap:8px;margin-top:44px}
.notes-bar span{height:2px;background:var(--sp-line);flex:0 0 50px;border-radius:2px;transition:flex-basis .3s,background .3s}
.notes-bar span.on{flex-basis:400px;background:var(--sp-ink)}
.notes-bar i{font-style:normal;font-size:13px;color:var(--sp-grey);margin-left:12px}

/* ---------- outcomes rail (their media rail) ---------- */
.sp-rail{padding:110px 0 100px}
.sp-rail h2{max-width:14ch;margin-bottom:56px}
.rail{display:flex;gap:14px;overflow-x:auto;padding:0 20px 6px;scrollbar-width:none;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
.rail .t{flex:0 0 234px;aspect-ratio:.76;border-radius:14px;overflow:hidden;position:relative;background:var(--sand-2);scroll-snap-align:start}
.rail .t img{width:100%;height:100%;object-fit:cover;display:block}
.rail .t span{position:absolute;left:14px;bottom:14px;right:14px;color:#fff;font-size:15px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.rail .t.txt{background:var(--sp-band);color:var(--sp-ink);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:15px;line-height:1.4}

/* ---------- program block (their membership) ---------- */
.sp-program{padding:20px 0 110px}
.prog{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:960px){.prog{grid-template-columns:1fr;gap:40px}}
.prog .media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:.94;background:var(--sand-2)}
.prog .media img{width:100%;height:100%;object-fit:cover;display:block}
.prog .media .ov{position:absolute;left:24px;right:24px;top:28px;color:#fff}
.prog .media .ov .k{font-size:22px;opacity:.9}
.prog .media .ov .v{font-size:64px;letter-spacing:-.04em;line-height:1;margin-top:2px}
.prog .media .ov .v small{font-size:20px;letter-spacing:0;opacity:.85;margin-left:6px}
.prog .media .band{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;background:linear-gradient(180deg,rgba(24,24,27,0),rgba(24,24,27,.86) 30%);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.prog .media .band b{font-size:28px;font-weight:400;display:block;letter-spacing:-.02em}
.prog .media .band span{font-size:15px;opacity:.85}
.prog .media .band .seal{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.5;opacity:.9}
.thumbs{display:flex;gap:8px;margin-top:12px}
.thumbs button{width:88px;height:88px;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--sand-2);cursor:pointer;flex:none}
.thumbs button.on{border-color:var(--sp-ink)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.prog .meta{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--sp-grey);margin-bottom:24px}
.prog .meta i{display:inline-flex}
.prog .meta i b{width:26px;height:26px;border-radius:50%;background:var(--sand-2);border:2px solid #fff;margin-left:-8px;display:block;overflow:hidden}
.prog .meta i b:first-child{margin-left:0}
.prog .meta i b img{width:100%;height:100%;object-fit:cover}
.prog h2{margin-bottom:22px}
.prog .lede{margin-bottom:34px}
.prog .price{font-size:44px;letter-spacing:-.03em;line-height:1;margin-bottom:26px}
.prog .price small{font-size:14px;letter-spacing:0;color:var(--sp-grey);margin-left:8px}
.checks{list-style:none;margin:0 0 26px;padding:0}
.checks li{display:flex;align-items:center;gap:12px;font-size:16px;padding:7px 0}
.checks li::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--sp-ink);color:#fff;font-size:10px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bigbtn{position:relative;display:flex;justify-content:center;align-items:center;height:56px;border-radius:999px;background:#000;color:#fff;text-decoration:none;font-size:17px}
.bigbtn .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--taupe-dk);color:#fff;font-size:12px;padding:5px 12px;border-radius:999px;white-space:nowrap}
.prog .row-meta{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:14px;margin:22px 0 10px}
.prog .row-meta span::before{content:"✓ ";font-size:12px}
.prog .fine{text-align:center;font-size:13px;color:var(--sp-grey-2);line-height:1.5;margin-bottom:26px}
.trio{background:var(--sp-band);border-radius:14px;padding:24px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}
.trio b{font-size:28px;font-weight:400;letter-spacing:-.02em;display:block;margin-bottom:6px}
.trio span{font-size:13px;color:var(--sp-grey);line-height:1.4}
.trio .src{grid-column:1/-1;font-size:13px;color:var(--sp-grey-2)}
@media(max-width:600px){.trio{grid-template-columns:1fr}}
.qa details{border-top:1px solid var(--sp-line);padding:0;background:none;margin:0}
.qa details:last-child{border-bottom:1px solid var(--sp-line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px 0;font-size:17px;letter-spacing:-.01em;color:var(--sp-ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"!important;font-size:22px;font-weight:300;color:var(--sp-ink);transform:none!important;background:none;width:auto;height:auto}
.qa details[open] summary::after{content:"–"!important}
.qa details p{padding:0 0 22px;font-size:15px;line-height:1.55;color:var(--sp-grey)!important;max-width:60ch;margin:0}
.qa details::before,.qa details::after{display:none}
.qa summary:focus-visible{outline:2px solid var(--sp-ink);outline-offset:2px}

/* ---------- CTA card ---------- */
.sp-cta .in{justify-content:center}
.sp-cta .rate{font-size:13px;margin-bottom:26px}
.sp-cta h2{max-width:12ch;margin-bottom:22px}
.sp-cta .marks{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;margin-bottom:26px}
.sp-cta .marks span::before{content:"✓ ";font-size:11px}
.sp-cta .ctas{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- footer card ---------- */
.sp-foot{margin:var(--sp-gut);border-radius:var(--sp-r);background:#fff;padding:90px 60px 60px;border:1px solid var(--sp-line);color:var(--sp-ink)}
.sp-foot .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.sp-foot .logo{font-family:var(--sans);font-size:26px;font-weight:700;letter-spacing:-.03em;margin-bottom:14px}
.sp-foot .lead{font-size:13px;color:var(--sp-grey);max-width:44ch;line-height:1.5;margin-bottom:22px}
.sp-foot .lead b{color:var(--sp-ink);font-weight:400}
.sp-foot .cta{display:flex;gap:8px;max-width:420px}
.sp-foot h4{font-size:14px;color:var(--sp-grey-2);font-weight:400;margin-bottom:10px}
.sp-foot .col a{display:block;color:var(--sp-ink);text-decoration:none;font-size:15px;padding:7px 0}
.sp-foot .col a:hover{text-decoration:underline}
.sp-foot .col .sp2{margin-top:22px}
.sp-foot .bottom{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--sp-line);margin-top:60px;padding-top:26px;font-size:13px;color:var(--sp-grey)}
.sp-foot .bottom a{color:var(--sp-grey);text-decoration:none;margin-right:26px}
.sp-foot .bottom a:hover{text-decoration:underline}
.sp-foot .legal{max-width:70ch;line-height:1.55;margin-top:22px;font-size:12.5px;color:var(--sp-grey-2)}
@media(max-width:960px){.sp-foot{padding:56px 24px 40px}.sp-foot .grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sp-foot .grid{grid-template-columns:1fr}}

/* v2 fixes after render review */
.faq summary,.qa summary{font-weight:400}
.dev{left:57%}
.tablet{width:min(600px,46vw)}
.chap .copy{max-width:380px;z-index:3}
.prog .price{font-size:34px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rail{padding-left:max(20px,calc((100vw - 1160px)/2));padding-right:20px}
@media(max-width:900px){.dev{width:100%}.tablet{width:100%;transform:none}.phone{margin:0 auto}}
@media(max-width:600px){.tablet{aspect-ratio:1.1}.tablet .scr{grid-template-columns:1fr}.tablet .side{display:none}.tablet table{font-size:9px}.tablet th:nth-child(2),.tablet td:nth-child(2){display:none}}
.notes{display:flex;max-width:100%;overflow-x:auto}
.note{flex:0 0 auto;width:min(645px,84vw);box-sizing:border-box}
.sp .wrap>*{min-width:0}
.notes-bar{overflow:hidden;max-width:100%}
.notes-bar span{flex:0 1 50px;min-width:12px}
.notes-bar span.on{flex:1 1 400px}
.prog>div{min-width:0}
.thumbs{overflow-x:auto;max-width:100%;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
@media(max-width:600px){.thumbs button{width:64px;height:64px}}
.sp-foot .cta{flex-wrap:wrap}
.sp-foot .grid>*{min-width:0}

/* ---------- homepage v3 additions (stat panel, what to expect, chips) ---------- */
.sp-stats .in{justify-content:center;padding:100px 60px 60px}
.stat{margin:0 0 30px;max-width:460px}
.stat b{display:block;font-size:clamp(56px,7vw,104px);font-weight:400;letter-spacing:-.045em;line-height:.92;color:#fff}
.stat b small{font-size:.42em;vertical-align:baseline;margin-left:2px;letter-spacing:-.02em}
.stat span{display:block;font-size:clamp(18px,1.6vw,24px);line-height:1.3;color:rgba(255,255,255,.92);margin-top:6px}
.sp-stats .src{font-size:14px;color:rgba(255,255,255,.72);max-width:60ch;line-height:1.45;margin-top:10px}
@media(max-width:700px){.sp-stats .in{padding:80px 20px 36px}}
.sp-expect{padding:110px 0 80px;background:#EFECE8}
.sp-expect h2{text-align:center;margin:0 auto 56px;max-width:14ch}
.xt{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
@media(max-width:800px){.xt{grid-template-columns:1fr}}
.xt .xt-pill{display:inline-block;background:#fff;border:1px solid #DDD8D3;border-radius:999px;padding:10px 24px;font-size:22px;color:var(--sp-ink)}
.xt .when{text-align:center;position:relative}
.xt .when::after{content:"";position:absolute;top:50%;left:calc(50% + 90px);right:calc(-50% + 90px);height:1px;background:#D9D4CF}
.xt .col:last-child .when::after{display:none}
@media(max-width:800px){.xt .when::after{display:none}}
.xt .col p{text-align:center;color:var(--sp-grey);font-size:17px;line-height:1.45;margin:18px auto 22px;max-width:30ch}
.xt figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:.78;position:relative;background:#8A4A1C}
.xt figure img{width:100%;height:100%;object-fit:cover;display:block}
.xt .ui{position:absolute;left:14px;right:14px;top:22px;color:#fff}
.xt .ui.rows{display:flex;flex-direction:column;gap:8px}
.xt .ui.rows .row{display:flex;justify-content:space-between;align-items:center;background:rgba(24,24,27,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:10px;padding:10px 14px;font-size:14px;border:0}
.xt .ui.rows .row b{display:block;font-weight:500;font-size:15px}
.xt .ui.rows .row small{display:block;font-size:14px;color:rgba(255,255,255,.68)}
.xt .ui.rows .ok::before,.xt .ui.rows .warn::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#3FAE6A;margin-right:8px;vertical-align:middle}
.xt .ui.rows .warn::before{background:#D9A21B}
.xt .ui .k{font-size:18px;color:rgba(255,255,255,.88)}
.xt .ui .v{font-size:clamp(40px,4vw,64px);letter-spacing:-.04em;line-height:1;margin:6px 0 4px;color:#fff}
.xt .ui .v small{font-size:15px;letter-spacing:0;color:rgba(255,255,255,.8);margin-left:6px}
.xt .ui svg{display:block;width:100%;height:auto;margin-top:14px;background:rgba(24,24,27,.5);border-radius:10px;padding:10px}
.sp-expect .fn{margin:28px 0 0;text-align:center;font-size:14px;color:var(--sp-grey)}
.sp-chips .in{justify-content:space-between;padding:100px 60px 56px}
.sp-chips h2{text-align:center;margin:0 auto;max-width:14ch;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:980px;margin:0 auto}
.chips span{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:12px 20px 12px 12px;font-size:17px;color:#fff}
.chips span::before{content:"✓";width:26px;height:26px;border-radius:50%;background:#fff;color:var(--sp-ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.chips span.more::before{display:none}
.chips span.more{background:rgba(24,24,27,.6);padding-left:20px}
@media(max-width:700px){.sp-chips .in{padding:80px 20px 28px}.chips span{font-size:15px;padding:10px 16px 10px 10px}}
/* chapter tints for the generated frames */
.chap[data-i="1"] .veil{background:linear-gradient(90deg,rgba(70,35,10,.75),rgba(70,35,10,.15) 50%,rgba(70,35,10,.05))}
.chap[data-i="2"] .veil{background:linear-gradient(90deg,rgba(60,25,10,.75),rgba(60,25,10,.15) 50%,rgba(60,25,10,.1))}
.chap[data-i="3"] .veil{background:linear-gradient(90deg,rgba(60,30,5,.72),rgba(60,30,5,.15) 50%,rgba(60,30,5,.05))}
.chap[data-i="0"] .veil{background:linear-gradient(90deg,rgba(40,30,20,.72),rgba(40,30,20,.1) 45%,rgba(40,30,20,0))}
.sp-hero>.veil{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.45) 100%)}
/* 14px floor on production text (device mocks are decorative) */
.uicard,.uicard small,.person .org,.person .role,.person .bio,.person a,.sp-cta .rate,.sp-cta .marks,.sp-foot .lead,.sp-foot .bottom,.sp-foot .legal,.trio span,.trio .src,.prog .fine,.bigbtn .badge,.notes-bar i,.sp-creds .marks span small,.prog .row-meta,.sp-hero .check{font-size:14px}
.phone,.phone-lite{pointer-events:none}
.chap[data-i="0"] .copy{max-width:330px}
.chap[data-i="0"] .mcard>.bg{object-position:62% 50%}
/* v3.1: no brown casts — neutral legibility gradients only */
.chap[data-i="0"] .veil{background:linear-gradient(90deg,rgba(20,20,22,.62),rgba(20,20,22,.08) 45%,rgba(20,20,22,0))}
.chap[data-i="1"] .veil{background:linear-gradient(90deg,rgba(20,20,22,.6),rgba(20,20,22,.12) 50%,rgba(20,20,22,.05))}
.chap[data-i="2"] .veil{background:linear-gradient(90deg,rgba(20,30,25,.62),rgba(20,30,25,.12) 50%,rgba(20,30,25,.05))}
.chap[data-i="3"] .veil{background:linear-gradient(90deg,rgba(10,25,45,.6),rgba(10,25,45,.12) 50%,rgba(10,25,45,.05))}
.chap[data-i="2"] .dev{left:52%}
.xt figure{background:#F1EDEA}
.xt .ui.dk .k,.xt .ui.dk .v,.xt .ui.dk .v small{color:var(--sp-ink)}
.xt .ui.dk .v small{color:#555}
.xt .ui.dk svg{background:rgba(255,255,255,.6)}
.xt .ui.dk{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border-radius:12px;padding:14px;left:14px;right:14px;top:14px}
.sp-chips .chips span{background:rgba(255,255,255,.78);color:var(--sp-ink);backdrop-filter:blur(8px)}
.sp-chips .chips span::before{background:var(--sp-ink);color:#fff}
.sp-chips .chips span.more{background:rgba(24,24,27,.85);color:#fff}
.how figure{background:#EEE}
.xt .ui.dk .v small{display:block;font-size:14px;margin:4px 0 0}
/* ---- v3.2 (Namrata 2026-09-12): keep the screens and info cards, but no screen, card or copy over a face; copy never over the tablet ---- */
.chap[data-i="0"] .mcard>.bg{object-position:0% 50%}
.chap[data-i="0"] .copy{max-width:320px}
.chap[data-i="2"] .phone{width:min(280px,64vw)}
.chap[data-i="1"] .dev{left:48%}
.chap[data-i="2"] .dev{left:48%}
.chap[data-i="3"] .dev{left:53%}
@media(max-width:1300px){.chap .copy{max-width:340px;top:38%}.chap[data-i="0"] .copy{max-width:280px}.chap .faq{width:380px}.chap[data-i="0"] .faq{width:290px}}
@media(max-width:1300px) and (max-height:760px){.chap[data-i="0"] .faq details:nth-of-type(3){display:none}}
/* stat panel: numbers in a row along the bottom, faces stay lit */
.sp-stats .in{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 32px;align-content:end;padding:120px 60px 52px}
.sp-stats .stat{margin:0;max-width:none}
.sp-stats .stat b{font-size:clamp(48px,5.6vw,84px)}
.sp-stats .stat span{font-size:clamp(16px,1.3vw,20px);max-width:22ch}
.sp-stats .src{grid-column:1/-1;margin-top:4px}
.sp-stats>.veil{background:linear-gradient(180deg,rgba(10,25,50,.06) 0%,rgba(10,25,50,.16) 45%,rgba(10,25,50,.84) 100%)!important}
@media(max-width:700px){.sp-stats .in{grid-template-columns:1fr;gap:14px;padding:80px 20px 32px}}
/* what to expect, Day 1: rows sit under the face */
.xt .ui.rows{top:auto;bottom:14px}
.xt .ui.rows .row{padding:9px 14px}
/* how it works: compact card under the face; chart in the lower part of the frame */
.uicard.compact{padding:12px 14px}
.uicard.compact .row{padding:5px 0}
.uicard.compact .ico{width:28px;height:28px;font-size:13px}
.how .retest{top:36%;padding:0 10px 6px}
/* below 1100px the chapters leave the pinned stage: photo on top, copy and device on a tinted panel below */
@media(max-width:1100px){
  .sp-chapters{height:auto}.sp-stage{position:static;height:auto}
  .chap{position:relative;opacity:1;pointer-events:auto;inset:auto;transition:none}
  .chap .mcard{min-height:0;height:auto;display:block}
  .chap .mcard>.bg{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
  .chap .mcard>.veil{display:none}
  .chap .mcard>.in{position:static;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:24px 32px;align-items:center;padding:40px 40px 44px}
  .chap .copy,.chap .faq{position:static;transform:none;width:auto;max-width:none;margin:0;z-index:auto;grid-column:1}
  .chap .copy{grid-row:1}.chap .faq{grid-row:2}
  .chap .dev{position:static;transform:none;grid-column:2;grid-row:1/3;width:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
  .chap .lede{color:rgba(255,255,255,.88)}
  .chap[data-i="0"] .mcard{background:#17181A}.chap[data-i="1"] .mcard{background:#2A1F14}.chap[data-i="2"] .mcard{background:#1B2A22}.chap[data-i="3"] .mcard{background:#0F2236}
}
@media(max-width:700px){
  .chap .mcard>.bg{aspect-ratio:4/3}
  .chap .mcard>.in{grid-template-columns:1fr;padding:30px 20px 32px}
  .chap .copy,.chap .faq,.chap .dev{grid-column:1;grid-row:auto}
  .chap .dev{margin:0 auto}
}

/* ---- v3.3 (Namrata 2026-09-12): faded dark shade on the right so the chapter index reads over bright photo areas ---- */
@media(min-width:1101px){
  .chap .mcard>.veil::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(14,14,17,.7) 0%,rgba(14,14,17,.5) 14%,rgba(14,14,17,.22) 28%,rgba(14,14,17,0) 44%)}
  .sp-index button{text-shadow:0 1px 14px rgba(0,0,0,.45)}
}
/* ---- v3.4 (Namrata 2026-09-12): the phone mocks become small frosted mobile-shaped panels that sit in the photograph, consistent with the FAQ and info cards ---- */
.dev{filter:drop-shadow(0 18px 36px rgba(0,0,0,.28))}
.phone,.chap[data-i="2"] .phone{width:min(264px,64vw);aspect-ratio:auto;background:rgba(18,18,21,.56);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:0;color:#fff}
.phone::before{display:none}
.phone .sb{display:none}
.phone .scr{background:transparent;border-radius:0;height:auto;overflow:visible;color:#fff;padding:22px 20px 20px;font-size:12px}
.phone h5{font-size:17px;color:#fff}
.phone .sub{font-size:12px;color:rgba(255,255,255,.66);margin-bottom:14px}
.phone .card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);margin-bottom:10px;padding:12px 13px}
.phone .card .k{font-size:10.5px;color:rgba(255,255,255,.58)}
.phone .card .v{color:#fff}
.phone .card .v small{color:rgba(255,255,255,.7);font-size:11.5px}
.phone .bar{font-size:11.5px;color:rgba(255,255,255,.88);padding:6px 0}
.phone .bar em{background:rgba(255,255,255,.18)}
.phone .bar em b{background:#fff}
.phone .bar i{color:rgba(255,255,255,.7);font-size:10px}
.phone .pill-hi{color:#FFD2CA;background:rgba(255,120,100,.22);font-size:10.5px}
.phone .row{border-top-color:rgba(255,255,255,.12);font-size:11.5px;color:rgba(255,255,255,.9)}
.phone .row .ok{color:#BFE3C8}
.phone .btn{background:#fff;color:var(--sp-ink);font-size:12px;padding:11px}
.phone .ring{width:118px;height:118px;position:relative;background:none}
.phone .ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px));mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px))}
.phone .ring div{background:transparent;width:94px;height:94px;position:relative}
.phone .ring b{color:#fff}
.phone .ring small{color:rgba(255,255,255,.7);font-size:10px}
.phone .diary span{background:rgba(255,255,255,.16);color:rgba(255,255,255,.7);font-size:10px}
.phone .diary span.d{background:#fff;color:var(--sp-ink)}

.phone .bar{font-size:11px}
.phone .bar span:first-child{width:92px}
/* ---- v3.5 (Namrata 2026-09-12): the glass panel holds one position and size across chapters 02–04 so the sequence reads as one screen updating ---- */
.chap[data-i] .dev{left:48%;top:50%}
.phone .scr{display:flex;flex-direction:column;min-height:511px}
.phone .foot{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px;color:rgba(255,255,255,.62)}
.phone .foot .wm{font-weight:700;font-size:14px;letter-spacing:-.04em;color:#fff}
@media(max-width:1100px){.phone .scr{min-height:0}}
.phone .scr{min-height:548px}
.phone .scr>.pill-hi{align-self:flex-start}
.phone .card .note{font-size:11px;color:rgba(255,255,255,.62);margin:-2px 0 6px}
@media(max-width:1100px){.phone .scr{min-height:0}}

/* ---- v3.6 (Namrata 2026-09-12): the homepage uses the site-wide nav and footer; match their type and gutters to every other page ---- */
body.sp nav,body.sp footer{font-family:var(--body);letter-spacing:0}
body.sp nav{color:var(--ink)}
body.sp nav .wrap,body.sp footer .wrap{padding:0 24px}
/* ---- v3.7 (Namrata 2026-09-12): no photograph appears twice on the homepage ---- */
.how .retest{top:50%}
/* ---- v3.8 (Namrata 2026-09-12): hero copy must read over the bright footage at every frame ---- */
.sp-hero>.veil{background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.74) 100%)}
.sp-hero>.bg{object-position:0% 50%}
.sp-hero .hero-panel{align-self:flex-start;max-width:min(600px,35vw);padding:30px 34px 30px;border-radius:24px;background:rgba(18,18,21,.74);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);border:1px solid rgba(255,255,255,.14);margin-bottom:40px}
.sp-hero .hero-panel .ctas{margin-bottom:0}
.sp-hero .check{color:#fff}
.sp-facts span{color:rgba(255,255,255,.9)}
@media(max-width:700px){
  .sp-hero{display:flex;flex-direction:column;min-height:0;background:#141416}
  .sp-hero>.bg{position:static;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%}
  .sp-hero>.veil{display:none}
  .sp-hero .in{position:static;height:auto;min-height:0;padding:28px 20px 30px}
  .sp-hero .hero-panel{display:block;max-width:none;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin-bottom:26px}
  .sp-hero .hero-panel .ctas{margin-bottom:0}
}
/* ---- v3.10 (Namrata 2026-09-12): card 4 chart sits on a calm dark surface; the runner moved to the program block ---- */
.how .retest{top:30%}
.how .retest text{font-size:13px}

.how figure:has(.retest) img{transform:scale(1.3);transform-origin:100% 100%}
/* ---- v3.11 (Namrata 2026-09-12): Day 1 scopes as pills along the bottom edge so the splash photo stays visible ---- */
.xt .ui.pills{top:auto;bottom:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:5px}
.xt .ui.pills span{display:inline-flex;align-items:center;gap:5px;background:rgba(24,24,27,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 9px;font-size:12px;line-height:1.2;color:#fff;white-space:nowrap}
.xt .ui.pills span::before{content:"✓";font-size:11px;color:#BFE3C8}
.how figure:has(.retest) img{transform:none}
.xt .ui.pills span.more::before{content:"";display:none}
.xt .ui.pills span.more{background:rgba(255,255,255,.9);color:var(--sp-ink);border-color:transparent}
/* ---- v3.12 (Namrata 2026-09-12): Month 2 info becomes a compact translucent strip at the foot of the frame so the blue cloud stays visible ---- */
.xt .ui.dk{top:auto;bottom:12px;left:12px;right:12px;display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:4px 12px;align-items:end;padding:12px 14px;background:rgba(255,255,255,.5);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);border:1px solid rgba(255,255,255,.55);border-radius:14px}
.xt .ui.dk .k{grid-column:1/-1;font-size:13px;color:#333}
.xt .ui.dk .v{font-size:40px;margin:0;line-height:1;letter-spacing:-.04em}
.xt .ui.dk .v em{font-style:normal;font-size:20px;letter-spacing:0;margin-left:1px}
.xt .ui.dk .v small{display:block;font-size:13px;line-height:1.25;margin:4px 0 0;color:#444;max-width:20ch}
.xt .ui.dk svg{width:168px;height:auto;margin:0;padding:6px 6px 2px;background:rgba(255,255,255,.55);border-radius:8px}
.xt .ui.dk svg text{font-size:16px}
/* ---- v3.13 (Namrata 2026-09-12): no box behind the hero copy; a soft dark gradient on the copy side does the work, she stays lit ---- */
.sp-hero .hero-panel{background:none;border:0;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;max-width:600px;margin-bottom:44px}
.sp-hero>.veil{background:linear-gradient(90deg,rgba(12,12,14,.82) 0%,rgba(12,12,14,.8) 34%,rgba(12,12,14,.5) 41%,rgba(12,12,14,.2) 47%,rgba(12,12,14,0) 54%),linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.74) 100%)}
.sp-hero .check,.sp-hero h1,.sp-hero .lede{text-shadow:0 1px 18px rgba(0,0,0,.35)}
@media(max-width:1300px){
  .sp-hero h1{font-size:48px}
  .sp-hero .lede{max-width:40ch}
  .sp-hero>.veil{background:linear-gradient(90deg,rgba(12,12,14,.82) 0%,rgba(12,12,14,.8) 30%,rgba(12,12,14,.45) 37%,rgba(12,12,14,.15) 43%,rgba(12,12,14,0) 49%),linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.74) 100%)}
}
/* ---- v3.14 (Namrata 2026-09-12): what-to-expect figures share one baseline whatever the caption length ---- */
.xt .col{display:flex;flex-direction:column}
.xt .col p{flex:1 0 auto}
.xt figure{flex:none}
/* ---- v3.15 (Namrata 2026-09-12): enrichments from the Superpower/Oura references — stat headline with tiles, three-column scopes block, belief statement ---- */
.serif{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
/* stat panel */
.sp-stats .in{display:grid;grid-template-columns:minmax(0,1fr) 264px;grid-template-rows:auto 1fr auto;gap:24px 40px;align-content:stretch;padding:84px 60px 48px}
.sp-stats .head{grid-column:1;grid-row:1;max-width:13ch;font-size:clamp(36px,4vw,58px);line-height:1.06;letter-spacing:-.03em;color:#fff;margin:0;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.sp-stats .head b{font-weight:400}
.sp-stats .tiles{grid-column:2;grid-row:1/3;align-self:center;display:flex;flex-direction:column;gap:12px}
.sp-stats .tile{position:relative;background:rgba(255,255,255,.14);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:18px 18px 16px;color:#fff}
.sp-stats .tile svg{position:absolute;right:14px;top:14px;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.sp-stats .tile b{display:block;font-size:44px;line-height:1;font-weight:400;letter-spacing:-.04em}
.sp-stats .tile b small{font-size:.5em;letter-spacing:0;margin-left:1px}
.sp-stats .tile span{display:block;font-size:14px;line-height:1.3;margin-top:8px;color:rgba(255,255,255,.88);max-width:20ch}
.sp-stats .src{grid-column:1;grid-row:3;align-self:end;max-width:46ch;margin:0}
.sp-stats>.veil{background:linear-gradient(90deg,rgba(10,25,50,.55) 0%,rgba(10,25,50,.15) 40%,rgba(10,25,50,.05) 70%,rgba(10,25,50,.5) 100%),linear-gradient(180deg,rgba(10,25,50,.2) 0%,rgba(10,25,50,0) 40%,rgba(10,25,50,.7) 100%)!important}
@media(max-width:900px){.sp-stats .in{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:70px 20px 30px}.sp-stats .head{max-width:none}.sp-stats .tiles{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap}.sp-stats .tile{flex:1 1 150px}.sp-stats .src{grid-row:3}}
/* scopes block */
.sp-scopes{padding:110px 0 90px;background:#fff}
.sp-scopes .shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px}
.sp-scopes .shead h2{margin:0;max-width:14ch}
.sp-scopes .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sp-scopes .scope{display:flex;flex-direction:column;min-width:0}
.sp-scopes .num{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--sp-grey);margin:0 0 14px}
.sp-scopes h3{font-size:24px;letter-spacing:-.02em;line-height:1.2;margin:0 0 10px;max-width:16ch}
.sp-scopes .copy{flex:1 0 auto;font-size:15px;line-height:1.5;color:var(--sp-grey);margin:0 0 22px;max-width:36ch}
.sp-scopes figure{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;margin:0;background:var(--sp-band)}
.sp-scopes figure img{width:100%;height:100%;object-fit:cover;display:block}
.sp-scopes .gcard{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(24,24,27,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:4px 14px;color:#fff}
.sp-scopes .gcard .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
.sp-scopes .gcard .row:first-child{border-top:0}
.sp-scopes .gcard .row span:last-child{color:rgba(255,255,255,.8);text-align:right}
.sp-scopes .gcard .ok{color:#BFE3C8!important}
.sp-scopes .fine{margin:36px 0 0;font-size:14px;color:var(--sp-grey-2);max-width:80ch}
@media(max-width:1000px){.sp-scopes .cols{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sp-scopes{padding:70px 0 60px}.sp-scopes .shead{flex-direction:column;align-items:flex-start;gap:16px}.sp-scopes .cols{grid-template-columns:1fr}}
/* belief */
.sp-belief{min-height:72svh;background:#151312}
.sp-belief>.veil{background:linear-gradient(180deg,rgba(18,14,12,.5) 0%,rgba(18,14,12,.72) 100%)}
.sp-belief .in{align-items:center;justify-content:center;text-align:center;padding:110px 60px}
.sp-belief .k{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 26px}
.sp-belief .line{font-size:clamp(30px,3.2vw,44px);line-height:1.15;letter-spacing:-.02em;max-width:24ch;color:#fff;margin:0 auto 26px}
.sp-belief p{max-width:48ch;font-size:17px;line-height:1.5;color:rgba(255,255,255,.88);margin:0 auto 14px}
.sp-belief .b-pill{margin-top:22px}
@media(max-width:700px){.sp-belief .in{padding:80px 20px}}

.sp-stats .tile b{font-family:var(--sp-font)}
.sp-stats .in{padding-top:64px}
.sp-stats .head{font-size:clamp(36px,3.8vw,54px)}
@media(max-width:900px){.sp-stats .in{min-height:100svh;grid-template-rows:auto 1fr auto auto;align-content:stretch}.sp-stats .head{grid-row:1}.sp-stats .tiles{grid-row:3;align-self:end}.sp-stats .src{grid-row:4}}
/* styles.css gives every <section> a 132px band; photo cards size themselves, so they drop it */
body.sp section.mcard{padding:0}
/* ---- v3.16 (Namrata 2026-09-12): new stat-panel photo (man in a hoodie in the middle); tiles slimmer, headline below his face on phones ---- */
.sp-stats .in{grid-template-columns:minmax(0,1fr) 240px}
.sp-stats .tile b{font-size:40px}
@media(max-width:900px){.sp-stats .in{grid-template-columns:1fr}.sp-stats .head{margin-top:36svh}}

/* v3.20 (2026-09-13) — orange post-workout stat photo (g42): warm veil in place of navy,
   dark glass tiles so white captions hold 4.5:1 on orange, and on phones the headline
   drops below the faces with a warm bottom veil under it. */
.sp-stats>.veil{background:linear-gradient(90deg,rgba(40,14,4,.62) 0%,rgba(40,14,4,.18) 40%,rgba(40,14,4,.04) 66%,rgba(40,14,4,.42) 100%),linear-gradient(180deg,rgba(40,14,4,.18) 0%,rgba(40,14,4,0) 40%,rgba(40,14,4,.7) 100%)!important}
.sp-stats .tile{background:rgba(30,12,6,.36);border-color:rgba(255,255,255,.18)}
.sp-stats .tile span{color:rgba(255,255,255,.92)}
@media(max-width:900px){
  .sp-stats .head{margin-top:50svh}
  .sp-stats>.veil{background:linear-gradient(180deg,rgba(40,14,4,.1) 0%,rgba(40,14,4,0) 28%,rgba(40,14,4,.55) 46%,rgba(40,14,4,.86) 64%,rgba(40,14,4,.92) 100%)!important}
}
/* tiles sit bottom-right over shoulders, never beside a face (Oura grammar) */
@media(min-width:901px){.sp-stats .tiles{align-self:end;grid-row:1/3}}
/* the legacy .tile b rule (styles.css) paints numbers in --ink; on the photo tiles they are white */
.sp-stats .tile b,.sp-stats .tile b small{color:#fff}
/* program image: a soft top scrim so each tab's caption holds contrast over any photo (2026-09-13) */
.sp-program .media{position:relative}
.sp-program .media::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,0) 100%);z-index:1;pointer-events:none;border-radius:inherit}
.sp-program .media .ov{z-index:2}
/* caption contrast on every tab photo, measured: deeper scrim, no opacity on the text, smaller figure on phones */
.sp-program .media::before{height:72%;background:linear-gradient(180deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.24) 62%,rgba(0,0,0,0) 100%)}
.sp-program .media .ov .k,.sp-program .media .ov .v small{opacity:1}
.sp-program .media .ov{text-shadow:0 1px 14px rgba(0,0,0,.28)}
@media(max-width:700px){.sp-program .media .ov{top:20px;left:18px;right:18px}.sp-program .media .ov .k{font-size:17px}.sp-program .media .ov .v{font-size:44px}.sp-program .media .ov .v small{font-size:16px}}
@media(max-width:700px){.sp-program .media::before{background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.26) 68%,rgba(0,0,0,0) 100%)}}
/* v3.22: the leadership section holds only the scientist (Holly Ash is the founder, not a
   scientist — Namrata, 2026-09-13); a single card spans the row instead of half a grid */
.people.solo{grid-template-columns:1fr;max-width:860px}
.people.solo .person{border-right:0;margin-right:0;padding-right:0}
/* v3.23: a quiet link from the consumer-study chapter to Join a study */
.chap .copy .chap-join{margin:16px 0 0;font-size:15px}
.chap .copy .chap-join a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* v3.24: chapter copy and FAQ share one flow column (≥1101px), so an open answer pushes the copy up instead of running under it */
@media(min-width:1101px){
  .chap .mcard>.in{display:flex;flex-direction:column;justify-content:flex-start;padding:88px 60px 40px}
  .chap .copy{position:static;transform:none;margin:auto 0 28px}
  .chap .faq{position:static;flex:none}
  .chap .faq details p{max-height:min(30svh,220px);overflow:auto}
}
@media(min-width:1101px) and (max-height:820px){
  .chap h2{font-size:32px}
  .chap .copy{margin-bottom:20px}
  .chap .faq details p{max-height:min(20svh,130px)}
}
/* v3.24: chapter 02 taste-panel photo, keep the taster in frame on the 4:3 phone crop */
@media(max-width:700px){.chap[data-i="1"] .mcard>.bg{object-position:70% 50%!important}}
/* v3.24: 1101–1240px, the phone mock sat on the FAQ column by up to 51px (pre-existing); move it right and narrow the column */
@media(min-width:1101px) and (max-width:1240px){.chap[data-i] .dev{left:53%}.chap[data-i] .faq{width:340px}.chap .copy{max-width:320px}}
/* short windows: keep the open answer inside the card */
@media(min-width:1101px) and (max-height:760px){
  .chap .mcard>.in{padding:80px 60px 26px}
  .chap h2{font-size:28px;margin-bottom:10px}
  .chap .lede{font-size:16px}
  .chap .copy{margin-bottom:16px}
  .chap .faq details p{max-height:96px}
}
/* v3.24: FAQ column clears the phone mock at 1241–1400px; tighter card at 761–820px and very short windows */
@media(min-width:1241px) and (max-width:1400px){.chap[data-i] .faq{width:400px}}
@media(min-width:1101px) and (max-height:820px){.chap .mcard>.in{padding-bottom:30px}}
@media(min-width:1101px) and (max-height:680px){
  .chap .mcard>.in{padding:76px 60px 20px}
  .chap h2{font-size:26px}
  .chap .lede{font-size:15px}
  .chap .faq details p{max-height:64px}
}
/* v3.24: chapter index contrast. Dimmed labels measured 2.3–3.7:1 on every chapter (4.37 even as pure white over the ch01 lab window); lift them and lay a soft scrim behind the column */
.sp-index button{color:rgba(255,255,255,.86)}
.sp-index button.on{color:#fff}
.sp-index::before{content:"";position:absolute;inset:-56px -48px -56px -72px;background:radial-gradient(closest-side,rgba(12,12,12,.5),rgba(12,12,12,0));z-index:-1;pointer-events:none}
/* v3.25 (2026-09-14): R2 moat lines under the features heading */
.sp-feat .feat-lede{max-width:720px;font-size:18px;line-height:1.5;color:var(--sp-grey,#6B6B6B);margin:-18px auto 0;text-align:center}
.sp-feat .feat-lede+.feat-lede{margin-top:10px;color:var(--sp-ink,#18181B)}
.sp-feat .feat-lede+.ftable,.sp-feat .feat-lede+.feat-lede+.ftable{margin-top:36px}
@media(max-width:700px){.sp-feat .feat-lede{font-size:16px}}
/* v3.27 (2026-09-14): a quiet route to the six-question retail readiness check on Programs */
.sp-cta .cta-quiz{margin:22px 0 0;font-size:15px}
.sp-cta .cta-quiz a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.6)}
.sp-cta .cta-quiz a:hover{text-decoration-color:#fff}
.sp-cta .cta-quiz a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
/* v3.32: the leadership section was heading-over-card with the right half of the row empty
   (Namrata: "spacing is off"). Desktop now sets the heading and the card side by side on one
   grid: heading in the left third, card filling the rest, both aligned to the top; the section
   also gets the same breathing room above as the sections around it. */
.sp-people{padding:96px 0 100px}
@media(min-width:1001px){
  .sp-people .wrap{display:grid;grid-template-columns:minmax(280px,5fr) 7fr;gap:64px;align-items:start}
  .sp-people h2{margin-bottom:0;max-width:12ch}
  .people.solo{max-width:none;margin-top:6px}   /* first line of the card level with the heading's cap height */
  .person{grid-template-columns:220px 1fr;gap:40px}
  .person .bio{max-width:52ch}
}
@media(max-width:1000px){.sp-people{padding:72px 0 90px}.sp-people h2{margin-bottom:36px}}