/* Think & Grow Rich Africa — The Journey · v3 design system
   Monochrome glass. Fonts self-hosted (Outfit, Inter — SIL OFL). */
@font-face{font-family:'Outfit';font-weight:300;font-display:swap;src:url(font-outfit-300.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:400;font-display:swap;src:url(font-outfit-400.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:500;font-display:swap;src:url(font-outfit-500.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:600;font-display:swap;src:url(font-outfit-600.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:700;font-display:swap;src:url(font-outfit-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(font-inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(font-inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(font-inter-600.woff2) format('woff2')}

:root{
  --bg:#050505;--text:#f5f5f4;--soft:#c8c8c6;--muted:#8b8b8f;--dim:#5c5c61;
  --line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.14);
  --glass:linear-gradient(155deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.03) 55%,rgba(255,255,255,.02) 100%);
  --glass2:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  --pearl:radial-gradient(130% 150% at 0% 0%,#ffffff 0%,#ececec 30%,#c4c4c4 70%,#9d9d9d 100%);
  --shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  --d:'Outfit',system-ui,sans-serif;--b:'Inter',system-ui,-apple-system,sans-serif;
  --r:30px;--ease:cubic-bezier(.2,.75,.2,1);
  --sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--b);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(55% 38% at 50% -6%,rgba(255,255,255,.11),transparent 70%),
  radial-gradient(40% 30% at 105% 60%,rgba(255,255,255,.045),transparent 70%),
  radial-gradient(45% 35% at -10% 95%,rgba(255,255,255,.04),transparent 70%)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:#fff;color:#000}
.hidden{display:none!important}

/* type */
.eyebrow{font-family:var(--d);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.h1{font-family:var(--d);font-weight:500;font-size:clamp(34px,4.4vw,52px);line-height:1.02;letter-spacing:-.025em;margin:8px 0 10px}
.h2{font-family:var(--d);font-weight:500;font-size:24px;letter-spacing:-.015em;line-height:1.15;margin:0}
.h3{font-family:var(--d);font-weight:500;font-size:19px;letter-spacing:-.01em;line-height:1.2;margin:0}
.lede{color:var(--soft);margin:0;max-width:620px;font-size:15px}
.muted{color:var(--muted)}
.sm{font-size:13px}

/* surfaces */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);position:relative;overflow:hidden}
.glass.p{padding:24px}
.pearl{background:var(--pearl);color:#0a0a0a;border-radius:var(--r);position:relative;overflow:hidden;box-shadow:0 26px 70px rgba(255,255,255,.07),0 20px 50px rgba(0,0,0,.5)}
.pearl .muted,.white .muted{color:#555}
.pearl .eyebrow,.white .eyebrow{color:#555}
.white{background:#fff;color:#0a0a0a;border-radius:var(--r);position:relative;overflow:hidden}
.orbits::before,.orbits::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(0,0,0,.09);pointer-events:none}
.orbits::before{width:240px;height:240px;right:-70px;top:-90px;box-shadow:0 0 0 34px rgba(0,0,0,.025),0 0 0 35px rgba(0,0,0,.06)}
.orbits::after{width:150px;height:150px;left:-50px;bottom:-70px;box-shadow:0 0 0 24px rgba(0,0,0,.02),0 0 0 25px rgba(0,0,0,.05)}
.orbits.dark::before,.orbits.dark::after{border-color:rgba(255,255,255,.08);box-shadow:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;font-family:var(--d);font-size:16px;font-weight:500;letter-spacing:.005em;transition:transform .2s var(--ease),background .2s,box-shadow .2s,opacity .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-w{background:#fff;color:#000;box-shadow:0 10px 30px rgba(255,255,255,.12)}
.btn-w:hover{background:#ececec}
.btn-k{background:#0a0a0a;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.btn-k:hover{background:#222}
.btn-g{background:var(--glass2);border:1px solid var(--line2);color:var(--text)}
.btn-g:hover{border-color:rgba(255,255,255,.3)}
.btn-l{background:#fff;color:#0a0a0a;border:1px solid #ddd}
.btn-sm{height:42px;padding:0 20px;font-size:14px}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.circ{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--glass2);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);flex:none;position:relative;transition:.2s}
.circ:hover{border-color:var(--line2)}
.circ svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.circ.w{background:#fff;color:#000;border-color:#fff}
.badge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#fff;color:#000;font-size:10.5px;font-weight:700;display:grid;place-items:center;font-family:var(--d);box-shadow:0 0 0 3px var(--bg)}
.chev{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none}
.chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.pearl .chev,.white .chev{background:rgba(0,0,0,.07)}

/* ---------------- shell ---------------- */
.app{position:relative;z-index:1;min-height:100vh}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:calc(14px + var(--st)) clamp(18px,4vw,48px) 14px;max-width:1180px;margin:0 auto;background:linear-gradient(180deg,rgba(5,5,5,.94) 50%,rgba(5,5,5,0))}
.top-l{display:flex;align-items:center;gap:12px;min-width:0}
.top-l img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1px var(--line2)}
.top-l b{display:block;font-family:var(--d);font-weight:500;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.top-l small{display:block;font-size:11.5px;color:var(--muted)}
.top-r{display:flex;gap:10px;align-items:center}
.demo-tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:99px;border:1px solid var(--line2);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:var(--d);font-weight:500}
.view{position:relative;max-width:1180px;margin:0 auto;padding:8px clamp(18px,4vw,48px) calc(150px + var(--sb));animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* dock */
.dock{position:fixed;left:50%;bottom:calc(14px + var(--sb));transform:translateX(-50%);z-index:40;display:flex;align-items:flex-end;gap:6px;padding:10px 14px 8px;border-radius:34px;background:linear-gradient(160deg,rgba(40,40,40,.72),rgba(14,14,14,.86));border:1px solid var(--line2);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.dock button{display:flex;flex-direction:column;align-items:center;gap:5px;width:70px;font-size:11px;color:var(--muted);font-family:var(--d);font-weight:500;letter-spacing:.01em;transition:color .2s}
.dock .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:.25s var(--ease)}
.dock svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dock button:hover{color:var(--text)}
.dock button.on{color:#fff}
.dock button.on .ic{background:#fff;color:#000;box-shadow:0 8px 24px rgba(255,255,255,.18)}
.dock .mid .ic{width:60px;height:60px;margin-top:-22px;background:linear-gradient(160deg,#3a3a3a,#161616);border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.dock .mid.on .ic{background:#fff}
.dock .mid svg{width:24px;height:24px}

/* ---------------- today ---------------- */
.home{display:grid;gap:16px;grid-template-columns:1fr}
.home .colA,.home .colB{display:grid;gap:16px;align-content:start}
.emblem{position:relative;display:grid;justify-items:center;padding:18px 0 10px;text-align:center}
.rays{position:absolute;left:50%;top:-8px;width:330px;height:330px;transform:translateX(-50%);opacity:.5;pointer-events:none}
.emblem .halo{position:relative;width:132px;height:132px;border-radius:50%;padding:4px;background:conic-gradient(from 200deg,#fff,#6d6d6d,#fff,#9a9a9a,#fff);box-shadow:0 0 70px rgba(255,255,255,.14)}
.emblem .halo img{width:100%;height:100%;border-radius:50%;background:#000}
.emblem h1{font-family:var(--d);font-weight:500;font-size:40px;letter-spacing:-.03em;line-height:1;margin:22px 0 8px;position:relative}
.emblem .sub{display:inline-flex;gap:8px;align-items:center;color:var(--soft);font-size:14px;position:relative}
.emblem .sub svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}

.cta-card{display:block;padding:28px 26px 26px;min-height:200px}
.cta-card .row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;position:relative;z-index:1}
.cta-card h2{font-family:var(--d);font-weight:500;font-size:clamp(30px,3.2vw,38px);letter-spacing:-.03em;line-height:1.02;margin:10px 0 10px;position:relative;z-index:1;max-width:420px}
.cta-card p{margin:0;color:#3d3d3d;font-size:14.5px;position:relative;z-index:1;max-width:400px}
.playbig{width:66px;height:66px;border-radius:50%;background:#0a0a0a;color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 14px 34px rgba(0,0,0,.3);transition:transform .25s var(--ease)}
.playbig svg{width:22px;height:22px;fill:#fff;margin-left:4px}
.cta-card:hover .playbig{transform:scale(1.06)}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:1}
.tag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:99px;background:rgba(0,0,0,.08);font-size:12px;font-weight:500;font-family:var(--d)}
.tag svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.tag.dk{background:rgba(255,255,255,.08);color:var(--soft)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{padding:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:184px;text-align:left;width:100%}
.tile h3{font-family:var(--d);font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1.08;margin:0 0 6px}
.tile p{margin:0;font-size:12.5px;color:var(--muted)}
.dots{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25)}
.dots i:nth-child(2),.dots i:nth-child(4){width:20px;height:20px;background:rgba(255,255,255,.5)}
.dots i:nth-child(3){width:28px;height:28px;background:#fff;box-shadow:0 0 20px rgba(255,255,255,.35)}
.stackv{display:grid;gap:14px;grid-template-rows:auto 1fr}
.chip-stat{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:64px;border-radius:24px;background:#fff;color:#000;width:100%}
.chip-stat b{font-family:var(--d);font-weight:500;font-size:28px;letter-spacing:-.03em}
.chip-stat small{font-size:12px;color:#666;font-family:var(--d);font-weight:500}
.meter{display:flex;align-items:flex-end;gap:5px;padding:18px;height:100%;min-height:106px}
.meter i{flex:1;border-radius:6px;background:rgba(255,255,255,.1);height:56px;position:relative}
.meter i.on{background:linear-gradient(180deg,#fff,#a8a8a8)}
.meter i.now{background:#fff;height:72px;box-shadow:0 0 18px rgba(255,255,255,.4)}
.meter i.now::after{content:'';position:absolute;left:50%;top:8px;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);background:#000}

.rowlink{display:flex;align-items:center;gap:16px;padding:16px 16px 16px 18px;border-radius:26px;width:100%;text-align:left}
.rowlink .grow{flex:1;min-width:0}
.rowlink b{display:block;font-family:var(--d);font-weight:500;font-size:17px;letter-spacing:-.01em}
.rowlink small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowlink .ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none}
.rowlink .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pearl.rowlink .ico,.white.rowlink .ico{background:rgba(0,0,0,.07)}

.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:22px 16px}
.ring{display:grid;justify-items:center;gap:10px;text-align:center}
.ring .wrap{position:relative;width:100%;max-width:112px}
.ring svg{width:100%;aspect-ratio:1;transform:rotate(-90deg);display:block}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--d);font-weight:500;font-size:22px;letter-spacing:-.02em}
.ring small{font-size:12px;color:var(--muted);font-family:var(--d);font-weight:500}

.segs{display:flex;gap:10px;overflow-x:auto;padding:2px;margin:0 -2px;scrollbar-width:none}
.segs::-webkit-scrollbar{display:none}
.seg{flex:1 0 auto;min-width:118px;height:60px;padding:0 20px;border-radius:20px;background:var(--glass2);border:1px solid var(--line);font-family:var(--d);font-size:16px;font-weight:500;color:var(--soft);transition:.2s;line-height:1.15}
.seg small{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.seg.on{background:#fff;color:#000;border-color:#fff;box-shadow:0 10px 30px rgba(255,255,255,.14)}
.seg.on small{color:#666}

.lrow{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.lrow:last-child{border:0}
.lrow .grow{flex:1;min-width:0}
.lrow b{display:block;font-family:var(--d);font-weight:500;font-size:16px}
.lrow small{display:block;color:var(--muted);font-size:12.5px}
.cal{width:56px;height:62px;border-radius:18px;background:rgba(255,255,255,.07);display:grid;place-content:center;text-align:center;flex:none}
.cal small{font-size:10px;letter-spacing:.16em;color:var(--muted);font-family:var(--d)}
.cal b{font-family:var(--d);font-size:24px;font-weight:500;line-height:1}

/* ---------------- sprint ---------------- */
.page-head{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.page-head .grow{flex:1;min-width:0}
.daylist{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.dayrow{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 14px;border-radius:26px;text-align:left;width:100%;transition:transform .25s var(--ease),border-color .2s}
.dayrow:hover{transform:translateY(-2px);border-color:var(--line2)}
.dayrow .num{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-family:var(--d);font-size:22px;font-weight:500;background:rgba(255,255,255,.07);flex:none;letter-spacing:-.02em}
.dayrow.done .num{background:#fff;color:#000}
.dayrow.cur{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 1px rgba(255,255,255,.2),var(--shadow)}
.dayrow.cur .num{background:var(--pearl);color:#000}
.dayrow.lock{opacity:.5}
.dayrow .grow{flex:1;min-width:0}
.dayrow b{display:block;font-family:var(--d);font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.dayrow small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.st-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.07)}
.st-ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.st-ic.ok{background:#fff;color:#000}
.st-ic.ok svg{stroke-width:3}
.st-ic.now{background:#fff;color:#000}
.st-ic.now svg{fill:#000;stroke:none;margin-left:2px}

/* ---------------- lesson ---------------- */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.player{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:var(--shadow)}
.player iframe,.player>div{position:absolute;inset:0;width:100%;height:100%;border:0}
.cover{display:grid;place-items:center;cursor:pointer;background:#000 url(welcome.jpg) center 35%/cover}
.cover::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.05),rgba(0,0,0,.7))}
.cover .inner{position:relative;display:grid;justify-items:center;gap:14px;text-align:center}
.cover .playbig{background:#fff}.cover .playbig svg{fill:#000}
.cover .inner span{font-family:var(--d);font-size:13px;color:#ddd;letter-spacing:.02em}
.cover .bignum{position:absolute;left:24px;bottom:16px;font-family:var(--d);font-size:clamp(56px,9vw,96px);font-weight:600;line-height:.8;letter-spacing:-.05em;color:#fff;opacity:.92}
.note-sm{font-size:12px;color:var(--dim);margin:10px 6px 0}
.idea{font-family:var(--d);font-weight:300;font-size:22px;line-height:1.4;letter-spacing:-.01em;color:var(--soft);margin:16px 0 22px}
.steps{display:grid;gap:10px}
.step{display:flex;gap:14px;align-items:center;padding:14px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line);width:100%;text-align:left;transition:.2s}
.step:hover{border-color:var(--line2)}
.step .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-family:var(--d);font-weight:500;flex:none}
.step.ok .n{background:#fff;color:#000}
.step b{display:block;font-family:var(--d);font-weight:500;font-size:15px}
.step small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
textarea,.input{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:20px;padding:16px 18px;font-size:15px;outline:none;transition:border-color .2s;line-height:1.55}
textarea{min-height:130px;resize:vertical}
textarea:focus,.input:focus{border-color:rgba(255,255,255,.5)}
::placeholder{color:var(--dim)}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--d);font-size:13.5px;font-weight:500;color:var(--soft);margin:0 0 8px 4px}
.side-stick{position:sticky;top:90px;display:grid;gap:14px}

/* ---------------- chat ---------------- */
.chat{max-width:760px;margin:0 auto}
.chat-head{display:flex;align-items:center;gap:14px;margin:4px 0 22px}
.chat-head .grow{flex:1;min-width:0}
.chat-head b{display:block;font-family:var(--d);font-weight:500;font-size:18px}
.chat-head small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.chat-head small i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.gav{width:48px;height:48px;border-radius:50%;background:var(--pearl);color:#000;display:grid;place-items:center;font-family:var(--d);font-weight:600;flex:none}
.msgs{display:grid;gap:14px;padding-bottom:110px}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:84%}
.msg .bub{padding:15px 18px;border-radius:24px;font-size:15px;line-height:1.5;white-space:pre-wrap}
.msg time{display:block;font-size:11px;color:var(--dim);margin:6px 8px 0}
.msg.them .bub{background:var(--glass2);border:1px solid var(--line);border-bottom-left-radius:8px}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg.me .bub{background:#fff;color:#000;border-bottom-right-radius:8px}
.msg.me time{text-align:right}
.msg .gav{width:34px;height:34px;font-size:12px}
.voice{display:flex;align-items:center;gap:12px;min-width:220px}
.voice .pp{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.voice .pp svg{width:14px;height:14px;fill:currentColor}
.wave{display:flex;align-items:center;gap:2px;height:30px;flex:1}
.wave i{width:3px;border-radius:3px;background:currentColor;opacity:.75}
.typing span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin:0 2px;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.composer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(112px + var(--sb));width:min(760px,calc(100% - 36px));z-index:35}
.composer form{display:flex;align-items:center;gap:10px;height:62px;padding:0 8px 0 10px;border-radius:31px;background:linear-gradient(160deg,rgba(40,40,40,.9),rgba(16,16,16,.94));border:1px solid var(--line2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.composer input{flex:1;background:none;border:0;outline:none;font-size:15px;min-width:0}
.composer .circ{width:46px;height:46px}
.quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:none;height:38px;padding:0 15px;border-radius:99px;border:1px solid var(--line2);font-size:13px;color:var(--soft);background:rgba(20,20,20,.85);backdrop-filter:blur(10px)}
.quick button:hover{border-color:#fff;color:#fff}

/* ---------------- library ---------------- */
.feature{display:grid;grid-template-columns:1.35fr .65fr;overflow:hidden}
.feature .player{border-radius:0;border:0;box-shadow:none}
.feature-b{padding:28px;display:flex;flex-direction:column;justify-content:flex-end}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:22px 0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:44px;padding:0 20px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-family:var(--d);font-size:14px;font-weight:500;color:var(--soft)}
.chip.on{background:#fff;color:#000;border-color:#fff}
.vgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.vid{padding:10px;border-radius:26px;text-align:left;transition:transform .25s var(--ease);width:100%}
.vid:hover{transform:translateY(-3px)}
.thumb{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0b0b0b center/cover;display:flex;align-items:flex-end;justify-content:space-between;padding:12px}
.thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75))}
.thumb>*{position:relative;z-index:1}
.thumb .tn{font-family:var(--d);font-size:54px;font-weight:600;letter-spacing:-.05em;line-height:.8;color:#fff}
.thumb .pb{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center}
.thumb .pb svg{width:13px;height:13px;fill:#000;margin-left:2px}
.thumb .soon{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#ccc;font-family:var(--d)}
.vid .vb{padding:14px 8px 6px}
.vid b{display:block;font-family:var(--d);font-weight:500;font-size:16.5px;line-height:1.2;letter-spacing:-.01em}
.vid small{display:block;color:var(--muted);font-size:12.5px;margin-top:5px}

/* ---------------- profile / misc ---------------- */
.pgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.prin{padding:22px;text-align:left;border-radius:26px;transition:transform .25s var(--ease);width:100%}
.prin:hover{transform:translateY(-2px)}
.prin .pn{font-family:var(--d);font-size:34px;font-weight:500;letter-spacing:-.04em;color:rgba(255,255,255,.3);line-height:1}
.prin b{display:block;font-family:var(--d);font-weight:500;font-size:19px;margin:18px 0 6px}
.prin small{font-size:13px;color:var(--muted);line-height:1.5;display:block}
.statement{padding:30px;font-family:var(--d);font-weight:400;font-size:clamp(21px,2.3vw,27px);line-height:1.38;letter-spacing:-.015em}
.entry{padding:18px 0;border-bottom:1px solid var(--line)}
.entry:last-child{border:0}
.entry small{font-size:12px;color:var(--muted);font-family:var(--d)}
.entry b{display:block;font-family:var(--d);font-weight:500;font-size:17px;margin:4px 0}
.entry p{margin:0;color:var(--soft);font-size:14px;white-space:pre-wrap}
.post{padding:22px}
.post-h{display:flex;gap:12px;align-items:center}
.av{width:40px;height:40px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-family:var(--d);font-weight:600;font-size:13px;flex:none}
.av.k{background:rgba(255,255,255,.14);color:#fff}
.post-h b{display:block;font-family:var(--d);font-weight:500}
.post-h small{font-size:12px;color:var(--muted)}
.post p{margin:14px 0;color:var(--soft)}
.post-a{display:flex;gap:10px}
.post-a button{height:34px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.06);font-size:12.5px;color:var(--soft)}
.post-a button.on{background:#fff;color:#000}
.avs{display:flex}.avs .av{margin-left:-10px;box-shadow:0 0 0 3px #111}.avs .av:first-child{margin-left:0}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:11px}
.ticks li{display:flex;gap:12px;font-size:14.5px;line-height:1.4}
.ticks li::before{content:'';width:20px;height:20px;flex:none;border-radius:50%;background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.ticks.lt li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
.price{font-family:var(--d);font-weight:500;font-size:58px;letter-spacing:-.04em;line-height:1;margin:12px 0 4px}
.price small{font-size:15px;color:#555;letter-spacing:0;font-weight:400}
.kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border:0}
.kv span{color:var(--muted)}
.lk{font-family:var(--d);font-weight:500;font-size:13px;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.sec{margin-top:34px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 4px 14px}
.sec-h a,.sec-h button{font-family:var(--d);font-size:14px;color:var(--soft);font-weight:500;white-space:nowrap}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.foot{text-align:center;color:var(--dim);font-size:12px;margin-top:40px}

/* modal / toast */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:flex-end;justify-content:center;padding:16px}
.scrim.show{display:flex;animation:fadein .25s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:500px;max-height:88vh;overflow:auto;background:linear-gradient(160deg,#1d1d1d,#0f0f0f);border:1px solid var(--line2);border-radius:32px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.7);animation:sheet .35s var(--ease)}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:700px){.scrim{align-items:center}}
.modal h2{font-family:var(--d);font-weight:500;font-size:28px;letter-spacing:-.02em;margin:8px 0 10px}
.modal p{color:var(--soft);font-size:14.5px}
.modal .x{float:right;width:40px;height:40px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.slot{display:flex;justify-content:space-between;align-items:center;width:100%;height:56px;padding:0 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);margin-top:8px;font-family:var(--d);font-size:15px;text-align:left}
.slot:hover,.slot.on{background:#fff;color:#000}
.toast{position:fixed;left:50%;top:calc(18px + var(--st));transform:translate(-50%,-20px);z-index:90;background:#fff;color:#000;padding:14px 22px;border-radius:99px;font-family:var(--d);font-weight:500;font-size:14px;opacity:0;pointer-events:none;transition:.35s var(--ease);box-shadow:0 14px 40px rgba(0,0,0,.5);max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= onboarding ================= */
body.ob .app{display:none}
#ob{display:none;position:relative;z-index:2}
body.ob #ob{display:block}
.splash{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;transition:opacity .7s ease}
.splash.out{opacity:0;pointer-events:none}
.splash::before{content:'';position:absolute;inset:0;background:radial-gradient(40% 35% at 50% 45%,rgba(255,255,255,.12),transparent 70%)}
.splash .in{position:relative;display:grid;justify-items:center;gap:28px;animation:rise 1s var(--ease)}
.splash img{width:136px;border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 60px rgba(255,255,255,.12)}50%{box-shadow:0 0 110px rgba(255,255,255,.28)}}
.splash .wm2{text-align:center;font-family:var(--d);font-weight:400;letter-spacing:.42em;font-size:15px;padding-left:.42em}
.splash .wm2 small{display:block;letter-spacing:.6em;font-size:10.5px;color:var(--muted);margin-top:10px;padding-left:.6em}

.welcome{position:relative;min-height:100vh;min-height:100svh;background:#000 url(welcome.jpg) center 30%/cover;display:flex;flex-direction:column;padding:calc(24px + var(--st)) clamp(22px,6vw,80px) calc(30px + var(--sb));overflow:hidden}
.welcome::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 62%,#000 96%);pointer-events:none}
.welcome>*{position:relative;z-index:1}
.welcome .tp{display:flex;align-items:center;justify-content:space-between}
.logo-chip{width:68px;height:68px;border-radius:22px;padding:8px;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.logo-chip img{border-radius:50%}
.welcome .bottom{margin-top:auto;max-width:520px;width:100%}
.welcome h1{font-family:var(--d);font-weight:500;font-size:clamp(50px,7vw,80px);line-height:.98;letter-spacing:-.035em;margin:0 0 18px}
.welcome p{color:#d6d6d6;font-size:16px;margin:0 0 30px;max-width:430px}
.welcome .btn{width:100%;height:60px;font-size:17px}
.welcome .alt{display:block;text-align:center;margin:18px 0 0;font-family:var(--d);font-size:15px;color:#e8e8e8;width:100%}
.legal{font-size:12px;color:#8d8d8d;text-align:center;margin:24px auto 0;max-width:360px;line-height:1.55}

.light{min-height:100vh;min-height:100svh;background:radial-gradient(90% 55% at 50% -10%,#e6e6e6 0%,#f6f6f6 45%,#fff 75%);color:#0a0a0a;display:flex;justify-content:center;padding:calc(18px + var(--st)) 22px calc(28px + var(--sb))}
.light .col{width:100%;max-width:440px;display:flex;flex-direction:column}
.light .topbar{display:flex;align-items:center;justify-content:space-between;height:52px;margin-bottom:22px}
.light .back{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.light .back svg{width:20px;height:20px;stroke:#000;fill:none;stroke-width:1.8}
.light .mini-logo{width:42px;height:42px;border-radius:50%}
.progress{display:flex;gap:6px;flex:1;max-width:170px;margin:0 16px}
.progress i{flex:1;height:4px;border-radius:4px;background:#e0e0e0}
.progress i.on{background:#0a0a0a}
.light h2{font-family:var(--d);font-weight:500;font-size:clamp(34px,8vw,42px);line-height:1.06;letter-spacing:-.03em;margin:6px 0 12px}
.light .copy{color:#5b5b5b;font-size:15px;margin:0 0 28px}
.light .field label{color:#222;margin-left:2px;font-size:14px}
.inwrap{position:relative}
.inwrap svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:#222;fill:none;stroke-width:1.6}
.light .input{background:#fff;border:1px solid #ebebeb;color:#0a0a0a;height:60px;border-radius:20px;padding:0 18px 0 52px;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.light .input:focus{border-color:#0a0a0a}
.light .input::placeholder{color:#a5a5a5}
.light .btn-k{width:100%;height:60px;font-size:17px}
.check-row{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 24px;font-size:14px}
.check-row label{display:flex;gap:10px;align-items:center;cursor:pointer}
.check-row input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:7px;border:1.5px solid #cfcfcf;background:#fff;margin:0;cursor:pointer}
.check-row input:checked{background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat;border-color:#0a0a0a}
.or{display:flex;align-items:center;gap:14px;color:#9a9a9a;font-size:13px;margin:24px 0 16px}
.or::before,.or::after{content:'';flex:1;height:1px;background:#e6e6e6}
.social{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.social button{height:56px;border-radius:20px;background:#fff;border:1px solid #ebebeb;font-family:var(--d);font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.social svg{width:19px;height:19px}
.light .legal{color:#8f8f8f;margin-top:auto;padding-top:30px}
.err{color:#b3261e;font-size:13.5px;margin:-4px 2px 14px}
.err:empty{display:none}
.switch{text-align:center;font-size:14.5px;color:#666;margin-top:20px}
.switch button{font-weight:600;color:#000;text-decoration:underline;text-underline-offset:3px}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:18px}
.otp input{width:100%;height:66px;border-radius:18px;border:1px solid #e4e4e4;background:#fff;text-align:center;font-family:var(--d);font-size:26px;font-weight:500;outline:none;box-shadow:0 6px 20px rgba(0,0,0,.04);color:#000;padding:0}
.otp input:focus{border-color:#000}
.demo-code{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-radius:20px;background:#0a0a0a;color:#fff;margin-bottom:22px}
.demo-code small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#999;font-family:var(--d)}
.demo-code b{font-family:var(--d);font-size:24px;font-weight:500;letter-spacing:.3em}
.mem-card{background:#0a0a0a;color:#fff;border-radius:30px;padding:28px;position:relative;overflow:hidden;margin-bottom:18px;box-shadow:0 26px 60px rgba(0,0,0,.25)}
.mem-card::before{content:'';position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%)}
.mem-card .price small{color:#999}
.mem-card .eyebrow{color:#999}
.mem-card img{position:absolute;right:22px;top:22px;width:48px;border-radius:50%}
.mem-card>*{position:relative}
.sum{background:#fff;border:1px solid #ebebeb;border-radius:22px;padding:4px 20px;margin-bottom:18px;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.sum .kv{border-color:#f0f0f0}
.sum .kv span{color:#777}
.sum .kv.t{font-weight:600;font-size:15.5px}.sum .kv.t span{color:#000}
.paycard{aspect-ratio:1.6;border-radius:26px;padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;margin-bottom:16px;background:#000 url(welcome.jpg) center 40%/cover;box-shadow:0 26px 60px rgba(0,0,0,.25)}
.paycard::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.1),rgba(0,0,0,.7))}
.paycard>*{position:relative}
.paycard img{position:absolute;right:22px;top:22px;width:46px;border-radius:50%}
.paycard small{font-size:10.5px;letter-spacing:.18em;color:#d0d0d0;font-family:var(--d)}
.paycard .no{font-family:var(--d);font-size:22px;letter-spacing:.14em}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.opt{height:54px;border-radius:18px;border:1px solid #e4e4e4;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--d);font-weight:500;cursor:pointer;color:#000}
.opt:has(input:checked){border-color:#000;box-shadow:0 0 0 1px #000}
.opt input{accent-color:#000}
.note{font-size:12.5px;color:#7a7a7a;background:#f1f1f1;border-radius:18px;padding:14px 16px;margin-top:16px;line-height:1.55}
.done-mark{width:84px;height:84px;border-radius:50%;background:#0a0a0a;display:grid;place-items:center;margin:20px 0 24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.done-mark svg{width:34px;height:34px;stroke:#fff;stroke-width:2.6;fill:none}
@media(min-width:1000px){.light{align-items:center}.welcome{padding-bottom:70px}}

/* ================= responsive ================= */
@media(min-width:980px){.home{grid-template-columns:1fr 1fr;align-items:start;gap:18px}}
@media(max-width:1000px){.lesson{grid-template-columns:1fr}.side-stick{position:static}}
@media(max-width:760px){
  .feature{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .daylist{grid-template-columns:1fr}
  .top-l small{display:none}
  .demo-tag{display:none}
}
@media(max-width:520px){
  html,body{font-size:14.5px}
  .dock{width:calc(100% - 20px);justify-content:space-between;padding:10px 8px 8px}
  .dock button{width:auto;flex:1}
  .dock .ic{width:44px;height:44px}
  .dock .mid .ic{width:56px;height:56px}
  .tile{padding:18px;min-height:170px}
  .tile h3{font-size:19px}
  .chip-stat{height:58px;padding:0 14px}.chip-stat b{font-size:24px}
  .meter{gap:3px;padding:14px}
  .rings{padding:18px 10px;gap:6px}
  .ring .val{font-size:18px}
  .cta-card{padding:24px 22px}
  .seg{min-width:104px;height:56px;font-size:15px}
  .msg{max-width:92%}
  .otp{gap:7px}.otp input{height:58px;font-size:22px}
}
.welcome .legal{font-size:12px;color:#8d8d8d;margin:22px auto 0;max-width:360px}
.welcome .alt{font-size:15.5px;margin-top:20px}

/* ================= v3.1 · UX/UI polish (accessibility & usability pass) =================
   Audit against the UI/UX Pro Max checklist: contrast ≥4.5:1, touch targets ≥44px,
   visible keyboard focus, reduced motion, readable type, no iOS input zoom. */
:root{--dim:#808086;--focus:#fff;--t-fast:.15s;--t-med:.25s}
.light,.pearl *{--focus:#0a0a0a}

/* readable base type (was 15px, 14.5px on phones) */
html,body{font-size:16px}
@media(max-width:520px){html,body{font-size:15.5px}}

/* 16px form text stops iOS Safari zooming the page on focus */
.input,textarea,.composer input{font-size:16px}

/* small labels: nothing below 12px except count badges */
.eyebrow{font-size:12px;letter-spacing:.18em}
.dock button{font-size:12px}
.top-l small,.seg small,.demo-code small,.paycard small,.thumb .soon,.demo-tag,.msg time{font-size:12px}
.cal small{font-size:11px}
.badge{font-size:11px}

/* clearly visible keyboard focus everywhere (mouse/touch users unaffected) */
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
.dock button:focus-visible .ic,.dock a:focus-visible .ic{outline:2.5px solid #fff;outline-offset:3px}
.dock button:focus-visible,.dock a:focus-visible{outline:none}
textarea:focus-visible,.input:focus-visible,.otp input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.light .input:focus-visible,.otp input:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.12)}

/* touch targets ≥44px */
.btn-sm{height:44px}
.pp{width:44px;height:44px}
.post-a button{height:44px;padding:0 16px}
.lk{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin-left:4px}

/* consistent pressed feedback that never shifts layout */
.btn,.circ,.pp,.post-a button,.dock .ic,.tile,.rowlink,.cta-card{transition:opacity var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-med)}
.btn:active,.circ:active,.pp:active,.post-a button:active,.rowlink:active,.tile:active,.cta-card:active{opacity:.78}

/* respect reduced-motion system setting */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ================= v3.2 · Welcome: diamond video ================= */
/* A seamless 4-second loop (diamond-mobile.mp4 portrait crop for phones, diamond.mp4 for wide screens).
   With reduced motion on, only the still poster frame shows. */
.welcome{background:#000 url(diamond-poster.jpg) center/cover}
@media(min-aspect-ratio:1/1){.welcome{background-image:url(diamond-poster-wide.jpg)}}
.welcome .bgv-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.welcome .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .6s}
.welcome.bg-playing .bgv{opacity:1}
.welcome.bg-still .bgv{display:none}
/* hide every native video control/overlay (iOS start button, Android play icon) */
.welcome video::-webkit-media-controls,.welcome video::-webkit-media-controls-panel,.welcome video::-webkit-media-controls-overlay-play-button,
.welcome video::-webkit-media-controls-start-playback-button,.welcome video::-webkit-media-controls-play-button{display:none!important;-webkit-appearance:none;opacity:0!important}
/* when the phone blocks video autoplay (iOS Low Power Mode, Android Data Saver) the still frame
   (the section background) shows, and the video starts on the first touch */
.welcome::after{z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 28%,rgba(0,0,0,.6) 58%,#000 92%)}
.welcome h1{font-size:clamp(46px,7vw,80px)}
@media(min-width:1000px){.welcome::after{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.65) 38%,rgba(0,0,0,.1) 75%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6))}}

/* ================= v3.5 · Sign-in screens & Face ID ================= */
/* light onboarding screens run edge to edge: the page itself turns white so no black band
   shows under the content or behind the iPhone home indicator */
html:has(body.ob-light),body.ob-light{background:#fff}
body.ob-light::before{display:none}
.light{min-height:100vh;min-height:100dvh}

/* biometric sign-in */
.bio-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:60px;border-radius:99px;background:#0a0a0a;color:#fff;font-family:var(--d);font-weight:500;font-size:17px;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.bio-btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bio-btn:active{opacity:.78}
.bio-btn.lite{background:#fff;color:#0a0a0a;border:1px solid #e6e6e6;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.bio-who{display:block;text-align:center;font-size:14px;color:#6b6b6b;margin:10px 0 0}
.welcome .alt.bio{display:flex;align-items:center;justify-content:center;gap:10px}
.welcome .alt.bio svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bio-ico{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:var(--glass2);border:1px solid var(--line2);margin:4px 0 18px}
.bio-ico svg{width:40px;height:40px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.switch-pill{width:52px;height:32px;border-radius:99px;background:rgba(255,255,255,.16);position:relative;flex:none;transition:background var(--t-fast)}
.switch-pill::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform var(--t-med)}
.switch-pill.on{background:#fff}.switch-pill.on::after{background:#0a0a0a;transform:translateX(20px)}

/* ================= v3.6 · Passwords & security ================= */
.inwrap .input.pw{padding-right:58px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;border-radius:50%}
.inwrap .pw-eye svg{position:static;transform:none;width:22px;height:22px;stroke:#555}
.modal .inwrap .pw-eye svg,.glass .inwrap .pw-eye svg{stroke:#bbb}
.modal .inwrap>svg{stroke:#bbb}
.modal .input{padding-left:52px}
.hint{font-size:13px;color:#6b6b6b;margin:8px 4px 0}
.modal .hint{color:var(--muted)}
.sec-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:99px;background:#0a0a0a;color:#fff;font-family:var(--d);font-size:13px;font-weight:500;margin:0 0 18px}
.sec-chip svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8}
.btn:disabled{opacity:.6;cursor:progress}

/* ================= v4 · Membership brief: join flow, member app ================= */
/* ---- light (public / onboarding) screens ---- */
.light .col.wide{max-width:560px}
.eyebrow.dk{color:#6b6b6b;margin-bottom:10px}
.light h2 + .copy{margin-bottom:22px}
.price-card{background:#0a0a0a;color:#fff;border-radius:28px;padding:24px;margin:0 0 26px;box-shadow:0 22px 50px rgba(0,0,0,.2)}
.price-now{font-family:var(--d);font-size:44px;font-weight:500;letter-spacing:-.03em}.per{color:#bbb}
.price-was{color:#c8c8c8;font-size:14px;margin:4px 0 12px}.price-was s,.mem-was s{opacity:.8}
.price-card .terms{color:#bdbdbd;font-size:13.5px;margin:0 0 18px}
.price-card .btn-k{background:#fff;color:#0a0a0a}
.mem-was{position:relative;z-index:1;color:#c8c8c8;margin:4px 0 0;font-size:14px}
.lh3{font-family:var(--d);font-weight:500;font-size:21px;letter-spacing:-.01em;margin:26px 0 12px}
.lcard{background:#fff;border:1px solid #ececec;border-radius:20px;padding:16px 18px;margin-bottom:10px}
.lcard b{font-family:var(--d);font-weight:500;font-size:16.5px}.lcard p{margin:6px 0 0;color:#555;font-size:14.5px}
.ticks-l li::before{background-color:#0a0a0a}
.who{display:grid;gap:10px}.who>div{background:#fff;border:1px solid #ececec;border-radius:18px;padding:14px 16px}.who b{display:block;font-family:var(--d);font-weight:500}.who span{color:#555;font-size:14px}
.alumni-box{background:#0a0a0a;color:#fff;border-radius:24px;padding:20px;margin-top:22px}.alumni-box .eyebrow{color:#aaa}.alumni-box b{display:block;font-family:var(--d);font-weight:500;font-size:19px;margin:8px 0 6px}.alumni-box p{margin:0;color:#c9c9c9;font-size:14.5px}
.xlist{list-style:none;padding:0;margin:0;display:grid;gap:8px}.xlist li{display:flex;gap:10px;color:#444;font-size:14.5px}.xlist li::before{content:'×';flex:none;width:20px;height:20px;border-radius:50%;background:#ececec;display:grid;place-items:center;font-size:13px;color:#555}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}.faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--d);font-weight:500;font-size:15.5px;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';font-size:22px;opacity:.6}.faq details[open] summary::after{content:'–'}.faq details p{margin:0 0 14px;color:var(--soft);font-size:14.5px}
.faq.lt details{border-color:#e9e9e9}.faq.lt details p{color:#555}
.kv .r{text-align:right;max-width:62%;font-size:13.5px;color:#444}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#333;margin:4px 2px 14px;cursor:pointer;line-height:1.45}
.agree input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid #cfcfcf;background:#fff;margin:0;cursor:pointer}
.agree input:checked{background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat;border-color:#0a0a0a}
.ps-head{display:flex;align-items:center;gap:12px;margin:0 0 18px}.ps-head b{display:block;font-family:var(--d);font-weight:500}.ps-head small{color:#777;font-size:13px}
.ps-lock{width:44px;height:44px;border-radius:14px;background:#0a0a0a;display:grid;place-items:center}.ps-lock svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7}
.ps-cards{display:grid;gap:10px;margin-bottom:18px}
.ps-card,.choice{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border-radius:18px;border:1.5px solid #e6e6e6;background:#fff;cursor:pointer;margin-bottom:10px}
.ps-card{margin:0}.ps-card b,.choice b{display:block;font-family:var(--d);font-weight:500;font-size:16px;color:#0a0a0a}.ps-card small,.choice small{color:#777;font-size:13.5px}
.ps-card input,.choice input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #cfcfcf;margin:0}
.ps-card input:checked,.choice input:checked{border:7px solid #0a0a0a}
.ps-card:has(input:checked),.choice.on{border-color:#0a0a0a}
.choice.sm{min-height:52px;margin-bottom:8px}.choice.sm b{font-size:15px}
fieldset.hist{border:0;padding:0;margin:4px 0 14px}fieldset.hist legend{font-family:var(--d);font-size:14px;font-weight:500;color:#222;margin:0 0 10px 2px;padding:0}
.spin-mark{width:72px;height:72px;border-radius:50%;border:4px solid #e4e4e4;border-top-color:#0a0a0a;animation:spin 1s linear infinite;margin:20px 0 24px}
@keyframes spin{to{transform:rotate(360deg)}}
.fail-mark{width:84px;height:84px;border-radius:50%;background:#fff;border:2px solid #0a0a0a;display:grid;place-items:center;margin:20px 0 24px;font-family:var(--d);font-size:40px;font-weight:600;color:#0a0a0a}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid #e2e2e2;background:#fff;font-family:var(--d);font-size:14.5px;font-weight:500;color:#222;cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}.pill.on{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.pill:has(input:focus-visible){outline:2.5px solid #0a0a0a;outline-offset:3px}
.light .input.plain{padding:0 18px}
.ta{min-height:130px;padding:14px 16px!important;resize:vertical;height:auto!important;line-height:1.55}
.light .input.plain.ta{padding:14px 18px!important}
.sm-ta{min-height:88px}
.privacy-note{display:flex;gap:12px;align-items:flex-start;background:#f3f3f3;border-radius:16px;padding:14px 16px;font-size:14px;color:#444;margin:0 0 18px}
.privacy-note svg{width:20px;height:20px;flex:none;stroke:#222;fill:none;stroke-width:1.7;margin-top:1px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:12px 16px;border-radius:18px;background:#fff;border:1px solid #ececec;margin-bottom:12px;cursor:pointer}
.toggle-row b{display:block;font-family:var(--d);font-weight:500;color:#0a0a0a}.toggle-row small{color:#777;font-size:13px}
.toggle-row input{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:32px;border-radius:99px;background:#ddd;position:relative;margin:0;cursor:pointer;transition:background .15s}
.toggle-row input::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-row input:checked{background:#0a0a0a}.toggle-row input:checked::after{transform:translateX(20px)}
.toggle-row.dk{background:rgba(255,255,255,.04);border-color:var(--line)}.toggle-row.dk b{color:var(--text)}.toggle-row.dk small{color:var(--muted)}.toggle-row.dk input{background:rgba(255,255,255,.18)}.toggle-row.dk input:checked{background:#fff}.toggle-row.dk input:checked::after{background:#0a0a0a}

/* ---- member app ---- */
.input.dk{background:rgba(0,0,0,.35);color:var(--text);border:1px solid var(--line2);height:52px;padding:0 16px;border-radius:16px;width:100%}
select.input.dk{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#aaa 50%),linear-gradient(135deg,#aaa 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
select.input.dk option{color:#000}
.input.dk.ta{height:auto}
.input.dk::-webkit-calendar-picker-indicator{filter:invert(1)}
.hello{margin:4px 0 18px}.hello .h1{margin:4px 0 12px}
.goal-line{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;background:var(--glass);border:1px solid var(--line);max-width:620px}
.goal-line small{display:block;font-size:12px;color:var(--muted)}.goal-line b{display:block;font-family:var(--d);font-weight:500;font-size:16px;line-height:1.3}
.ico-s{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none}.ico-s svg,.ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.soft-note{font-size:14.5px;color:var(--soft);margin-bottom:14px}.soft-note b{color:var(--text);font-weight:600}
.top-grid{align-items:start}
.task{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.task:last-of-type{border-bottom:0}
.task b{display:block;font-weight:500;font-size:15px;line-height:1.35}.task small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.task.done b{text-decoration:line-through;color:var(--muted)}.task.over small{color:#e8b4b0}
.tick{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;position:relative}
.tick::before{content:'';position:absolute;width:26px;height:26px;border-radius:50%;border:1.6px solid rgba(255,255,255,.45)}
.task.done .tick::before{background:#fff;border-color:#fff}
.tick svg{position:relative;width:15px;height:15px;stroke:#0a0a0a;fill:none;stroke-width:3}
.kebab{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--muted);font-size:20px}.kebab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.quick-add{display:flex;gap:10px;margin-top:12px}.quick-add .input{height:48px;padding:0 16px;border-radius:16px}.quick-add .circ{flex:none;font-size:24px;line-height:1}
.linkcard{display:block}.linkcard .muted svg{width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:1.8}
.hscroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;scroll-snap-type:x mandatory}
.mini-card{flex:none;width:220px;border-radius:22px;overflow:hidden;background:var(--glass);border:1px solid var(--line);text-align:left;scroll-snap-align:start;display:flex;flex-direction:column}
.mini-thumb{display:block;height:110px;background-size:cover;background-position:center}
.mini-b{display:block;padding:12px 14px 14px}.mini-b small{display:block;color:var(--muted);font-size:12px}.mini-b b{display:block;font-family:var(--d);font-weight:500;font-size:15px;line-height:1.3;margin-top:4px}
.prompt-card{justify-content:center;background:var(--glass2)}
.j-tools{display:flex;gap:10px;align-items:center;margin-bottom:6px}.j-tools .input{height:48px;padding:0 16px;border-radius:16px}.j-tools .btn{flex:none}
a.entry{display:block}
.private-badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.08);font-size:12.5px;font-family:var(--d);font-weight:500}.private-badge svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.ed-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}.ed-foot>span{display:flex;gap:10px}
.ed-foot small svg,.vis-note svg{width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:1.8}
.offer{display:block}.offer.cur{border-color:rgba(255,255,255,.35)}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:0 0 8px}.bar i{display:block;height:100%;background:#fff;border-radius:99px}
.alinks{margin:0 -12px -12px}
.rhythm{margin:12px 0 0;padding-left:20px;color:var(--soft);font-size:14.5px;line-height:1.8}
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.month{padding:16px 18px}.month b{display:block;font-family:var(--d);font-weight:500}.month small{color:var(--muted);font-size:12.5px}
.vis-note{font-size:13px;color:var(--muted);margin:0 0 12px}
.checks{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.checks li{display:flex;gap:10px;align-items:center}.checks li::before{content:'';width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);flex:none}
.checks li.ok{color:var(--text)}.checks li.ok::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat;border-color:#fff}
.rate{display:flex;gap:8px}.rate label{cursor:pointer}.rate input{position:absolute;opacity:0}.rate span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);font-family:var(--d)}.rate input:checked+span{background:#fff;color:#000}.rate input:focus-visible+span{outline:2.5px solid #fff;outline-offset:3px}
.ticks.lt-dk li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");background-size:11px;background-position:center;background-repeat:no-repeat}
.ticks.lt-dk li{color:var(--soft)}
.cert-prev{background:#fff;color:#0a0a0a;border-radius:24px;padding:32px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4);border:8px solid #f1f1f1}
.cert-prev img{width:64px;height:64px;border-radius:50%;margin:0 auto 10px}.cert-prev small{display:block;letter-spacing:.18em;font-size:11.5px;color:#555}.cert-prev h3{font-family:var(--d);font-weight:500;font-size:28px;margin:10px 0}.cert-prev p{margin:6px 0;color:#555}.cert-prev b{display:block;font-family:var(--d);font-size:30px;font-weight:600;margin:6px 0}
.chips.small .chip{height:38px;font-size:13px;padding:0 14px}
.thumb .tn2{align-self:flex-start;font-family:var(--d);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ddd;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:99px}
.prompt-big h3{font-size:21px;line-height:1.3}
.posts{display:grid;gap:12px;margin-top:12px}
.post p{margin:12px 0 14px;color:var(--soft);white-space:pre-wrap}
.post .gav{width:42px;height:42px;font-size:13px}
.post-a button[aria-pressed=true]{background:#fff;color:#000}
.dayscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px 0 6px;padding-bottom:4px}
.dpick{flex:none;width:64px;height:78px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--d)}
.dpick small{font-size:11.5px;color:var(--muted)}.dpick b{font-size:22px;font-weight:500}.dpick.on{background:#fff;color:#000}.dpick.on small{color:#555}
.slot:disabled{opacity:.4;cursor:not-allowed}
.cta-actions{position:relative;z-index:1;margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.banner{display:block;margin:0 0 16px;padding:14px 18px;border-radius:20px;background:var(--glass2);border:1px solid var(--line2);font-size:14px}
.banner b{display:block;font-family:var(--d);font-weight:500;font-size:15.5px;margin-bottom:2px}.banner span{color:var(--soft)}
.banner.warn{background:#fff;color:#0a0a0a;border-color:#fff}.banner.warn span{color:#444}
.warn-card{border-color:rgba(255,255,255,.4)}
.muted.p{padding:20px}
.lrow b{white-space:nowrap}
@media(max-width:520px){.dock button{letter-spacing:0}.mini-card{width:200px}.j-tools{flex-wrap:wrap}.j-tools .btn{width:100%}}
/* setup choices: beat the generic ".light .field label" rule */
.light .field label.choice{display:flex;margin:0 0 10px;font-size:inherit;color:inherit}
.light .field label.pill{display:inline-flex;margin:0;color:#222;font-size:14.5px}
.light .field label.pill.on{color:#fff}

/* ================= v4.1 · Home (classic elements) & reminder picker ================= */
.emblem .hi{position:relative;margin:20px 0 -14px;font-family:var(--d);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.goal-line.center{margin:0 auto;width:100%}.goal-line.center .chev{margin-left:auto}
.goal-line .chev svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.tile h3{font-family:var(--d);font-weight:500;font-size:18px;line-height:1.25;letter-spacing:-.01em;margin:6px 0 0}
.tile-k{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-family:var(--d);font-weight:500}
.tile-k svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
a.rings{display:flex}
.ring small{text-align:center;line-height:1.25}
@media(min-width:980px){.home .colA{position:sticky;top:90px}}

/* reminder picker */
.rp-body{margin:-2px 0 12px;animation:fadein .25s}
.rp-set{border:0;padding:0;margin:4px 0 0}
.rp-set legend{font-family:var(--d);font-size:14px;font-weight:500;color:#222;margin:4px 2px 10px;padding:0}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-opt{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic t" "time time" "s s";column-gap:10px;align-items:center;padding:14px;border-radius:20px;border:1.5px solid #e6e6e6;background:#fff;cursor:pointer;min-height:118px;transition:border-color var(--t-fast),background-color var(--t-fast)}
.rp-opt input{position:absolute;opacity:0;pointer-events:none}
.rp-opt:has(input:focus-visible){outline:2.5px solid #0a0a0a;outline-offset:3px}
.rp-ic{grid-area:ic;width:36px;height:36px;border-radius:12px;background:#f1f1f1;display:grid;place-items:center}
.rp-ic svg{width:20px;height:20px;stroke:#0a0a0a;fill:none;stroke-width:1.6}
.rp-opt b{grid-area:t;font-family:var(--d);font-weight:500;font-size:15px;color:#0a0a0a}
.rp-time{grid-area:time;font-family:var(--d);font-size:26px;font-weight:500;letter-spacing:-.02em;color:#0a0a0a;margin:10px 0 0;font-variant-numeric:tabular-nums}
.rp-opt small{grid-area:s;font-size:12.5px;color:#777;line-height:1.3}
.rp-opt.on{background:#0a0a0a;border-color:#0a0a0a}
.rp-opt.on b,.rp-opt.on .rp-time{color:#fff}.rp-opt.on small{color:#bdbdbd}
.rp-opt.on .rp-ic{background:rgba(255,255,255,.14)}.rp-opt.on .rp-ic svg{stroke:#fff}
.rp-custom{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 0;padding:14px;border-radius:20px;background:#fff;border:1px solid #ececec;animation:fadein .25s}
.rp-step{width:52px;height:52px;border-radius:50%;background:#f1f1f1;font-size:26px;line-height:1;color:#0a0a0a;flex:none}
.rp-step:active{background:#e4e4e4}
.rp-clock input{font-family:var(--d);font-size:40px;font-weight:500;letter-spacing:-.02em;color:#0a0a0a;background:none;border:0;text-align:center;width:170px;min-height:56px;padding:0;font-variant-numeric:tabular-nums}
.rp-clock input::-webkit-calendar-picker-indicator{display:none}
.rp-clock input:focus-visible{outline:2.5px solid #0a0a0a;outline-offset:4px;border-radius:12px}
.rp-preview{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:14px 16px;border-radius:22px;background:rgba(245,245,245,.92);border:1px solid #e9e9e9;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.rp-app{width:38px;height:38px;border-radius:10px;background:#0a0a0a;display:grid;place-items:center;flex:none;overflow:hidden}.rp-app img{width:30px;height:30px;border-radius:50%}
.rp-preview small{display:block;font-size:12.5px;color:#666}.rp-preview small b{display:inline;color:#111;font-weight:600}
.rp-preview .grow>b{display:block;font-size:15px;font-weight:600;color:#0a0a0a;margin-top:2px;line-height:1.3}.rp-preview .grow>span{display:block;font-size:13px;color:#555;margin-top:2px}
.rp-hint{font-size:13px;color:#6b6b6b;margin:10px 4px 0}.rp-hint b{color:#111}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* dark variant (Profile modal) */
.rp.dk .rp-set legend{color:var(--soft)}
.rp.dk .rp-opt{background:rgba(255,255,255,.04);border-color:var(--line2)}
.rp.dk .rp-opt b,.rp.dk .rp-time{color:var(--text)}.rp.dk .rp-opt small{color:var(--muted)}
.rp.dk .rp-ic{background:rgba(255,255,255,.08)}.rp.dk .rp-ic svg{stroke:#fff}
.rp.dk .rp-opt.on{background:#fff;border-color:#fff}.rp.dk .rp-opt.on b,.rp.dk .rp-opt.on .rp-time{color:#0a0a0a}.rp.dk .rp-opt.on small{color:#555}.rp.dk .rp-opt.on .rp-ic{background:#ececec}.rp.dk .rp-opt.on .rp-ic svg{stroke:#0a0a0a}
.rp.dk .rp-opt:has(input:focus-visible){outline-color:#fff}
.rp.dk .rp-custom{background:rgba(255,255,255,.04);border-color:var(--line2)}.rp.dk .rp-step{background:rgba(255,255,255,.1);color:#fff}.rp.dk .rp-clock input{color:#fff;color-scheme:dark}
.rp.dk .rp-hint{color:var(--muted)}.rp.dk .rp-hint b{color:var(--text)}
@media(max-width:360px){.rp-time{font-size:22px}.rp-clock input{font-size:34px;width:140px}}

/* ================= v4.2 · Napoleon Hill course & daily motivation ================= */
.hill-cover{background:radial-gradient(120% 120% at 30% 0%,#4b4b4b,#0d0d0d)!important}
.daily{display:flex;align-items:center;gap:14px;width:100%;padding:14px;text-align:left}
.daily .grow{display:block;min-width:0}
.daily small{display:block;font-size:12px;color:var(--muted);font-family:var(--d);letter-spacing:.02em}
.daily b{display:block;font-family:var(--d);font-weight:500;font-size:17px;line-height:1.25;margin:3px 0}
.d-q{display:block;font-size:13.5px;color:var(--soft);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.d-by{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.d-cover{flex:none;width:64px;height:64px;border-radius:18px;background:url(diamond-poster.jpg) center/cover;position:relative;overflow:hidden;display:grid;place-items:center}
.d-cover::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35)}
.d-ic{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.d-ic svg{width:15px;height:15px;stroke:#0a0a0a;fill:none;stroke-width:1.8}
.daily.big{padding:18px}.daily.big .d-cover{width:84px;height:84px;border-radius:22px}
.playbig.sm{width:48px;height:48px;flex:none;background:#fff;color:#000}.playbig.sm svg{width:18px;height:18px}
.dlist{display:grid;gap:12px}.d-day>small{display:block;color:var(--muted);font-size:12.5px;margin:0 6px 6px;font-family:var(--d)}
/* player sheet */
.modal.pl-sheet{max-width:460px}
.pl{display:flex;flex-direction:column;align-items:center;text-align:center}
.pl-top{display:flex;gap:8px;align-self:flex-start;flex-wrap:wrap}
.pl-art{width:min(62vw,240px);aspect-ratio:1;border-radius:50%;margin:22px 0 6px;background:url(diamond-poster.jpg) center/cover;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.05),0 30px 70px rgba(0,0,0,.6);position:relative}
.pl-art img{width:34%;border-radius:50%;box-shadow:0 0 0 6px rgba(0,0,0,.4)}
.pl-art.on{animation:plSpin 30s linear infinite}
@keyframes plSpin{to{transform:rotate(360deg)}}
.pl .player{width:100%}
.pl-vcover{background:url(diamond-poster.jpg) center/cover!important}
.pl-title{margin:14px 0 4px!important;font-size:26px!important}
.pl-by{margin:0;color:var(--muted);font-size:14px}
.pl-quote{margin:14px 0 18px;color:var(--soft);font-family:var(--d);font-size:16px;line-height:1.45;max-width:380px}
.pl-bar{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.pl-bar i{display:block;height:100%;width:0;background:#fff;border-radius:99px;transition:width .25s linear}
.pl-times{width:100%;display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin:6px 0 10px;font-variant-numeric:tabular-nums}
.pl-ctrl{display:flex;align-items:center;justify-content:center;gap:26px;margin:4px 0 18px}
.pl-play{width:76px;height:76px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;box-shadow:0 12px 34px rgba(255,255,255,.18)}
.pl-play svg{width:28px;height:28px;fill:#000;stroke:none}
.pl-skip{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);font-family:var(--d);font-weight:500;font-size:14px}
.pl-skip:disabled{opacity:.35}
.pl-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.playbig.sm svg{fill:#000;stroke:none;margin-left:2px}

/* ================= v4.3 · Courses tab ================= */
.courses{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.courses{grid-template-columns:1fr 1fr}}
.course{display:flex;gap:16px;padding:16px;align-items:stretch}
.course.cur{border-color:rgba(255,255,255,.35)}
.c-art{flex:none;width:88px;border-radius:20px;background:url(diamond-poster.jpg) center/cover;position:relative;overflow:hidden;display:grid;place-items:center;min-height:120px}
.c-art::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,.2),rgba(0,0,0,.65))}
.c-num{position:relative;z-index:1;font-family:var(--d);font-weight:600;font-size:34px;letter-spacing:-.03em;color:#fff}
.c-num svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.6}
.c-body{flex:1;min-width:0;display:flex;flex-direction:column}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.c-top small{font-size:12px;color:var(--muted);font-family:var(--d)}
.c-top .tag{height:24px;font-size:11.5px}
.course b{font-family:var(--d);font-weight:500;font-size:18px;line-height:1.2;margin:4px 0}
.c-sub{font-size:13.5px;color:var(--soft);line-height:1.4;margin-bottom:12px}
.course .bar{margin:auto 0 8px}
.c-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}.c-foot small{font-size:12.5px;color:var(--muted)}
.c-go{display:inline-flex;align-items:center;gap:4px;font-family:var(--d);font-weight:500;font-size:13.5px;text-align:right;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-go svg{flex:none;width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.daily-course .c-sub{margin-bottom:auto}