/* Joyce Tan · sign-up page v7 (12 Nov 2026, Bro: both versions rebuilt; date said once; form in the pop-up).
   One page, two looks. HERS = her pink, Fraunces. OURS = the look of our asset pages (black, Sora, gold, green button, red bar).
   The look is picked in the <head> (data-theme on <html>). The pages after the form still use site.css + ours.css. */
:root{
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#FDF7F5;--alt:#FAEDEF;--card:#FFFFFF;--ink:#2B1423;--body:#5A4452;--muted:#8B7180;--line:#F0DCE2;
  --acc:#B8326E;--acc2:#8E2254;--soft:#FBE6EE;--em:#A62B66;
  --head:'Fraunces',Georgia,serif;--hw:400;--ht:-.02em;--em-style:italic;--em-w:300;
  --r:24px;--r-sm:14px;--btn:linear-gradient(135deg,#C43C7A,#8E2254);--btn-ink:#fff;--btn-r:999px;
  --btn-sh:0 16px 30px -14px rgba(184,50,110,.65);--field:#FDF7F5;--field-line:#EBD3DA;
  --sh:0 34px 70px -40px rgba(58,21,48,.42);--lo:#F4EAEE;--lo-ink:#5E4A56;--ok:#3F8F6B;--no:#B4505A;
  --bar:#FFFFFF;--bar-ink:#2B1423;--chip:#FBE6EE;--chip-ink:#8E2254;--dot:#E8634C;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.xi-open{overflow:hidden}
body{background:var(--bg);color:var(--body);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
b,strong{font-weight:600;color:var(--ink)}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--head);font-weight:var(--hw);letter-spacing:var(--ht);line-height:1.1;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:var(--em-style);font-weight:var(--em-w);color:var(--em)}
.kicker{display:inline-block;font:700 11.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,99,76,.5)}70%{box-shadow:0 0 0 8px rgba(232,99,76,0)}100%{box-shadow:0 0 0 0 rgba(232,99,76,0)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border:0;border-radius:var(--btn-r);background:var(--btn);color:var(--btn-ink);font:700 16.5px/1 var(--sans);text-decoration:none;cursor:pointer;box-shadow:var(--btn-sh);transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.7;cursor:default;transform:none}
.btn svg{width:18px;height:18px;flex:none}
.btn.sm{min-height:40px;padding:0 18px;font-size:14px;box-shadow:none}

/* top bar: the countdown lives here, once */
.top{position:sticky;top:0;z-index:40;background:var(--bar);color:var(--bar-ink);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px}
.brand{font:var(--hw) 19px/1 var(--head);letter-spacing:-.01em;text-decoration:none;color:inherit;white-space:nowrap}
.brand em{font-style:var(--em-style);font-weight:var(--em-w);color:var(--em)}
.top-c{display:flex;align-items:center;gap:14px}
.top-l{display:flex;align-items:center;gap:9px;font:700 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.cd{display:flex;gap:5px}
.cd>span{min-width:42px;padding:6px 4px 5px;border-radius:8px;background:var(--chip);color:var(--chip-ink);text-align:center}
.cd b{display:block;font:700 15px/1 var(--sans);color:inherit;font-variant-numeric:tabular-nums}
.cd small{display:block;margin-top:3px;font:600 8px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* hero */
.hero{position:relative;padding:60px 0 64px;overflow:hidden}
[data-theme=hers] .hero,:root:not([data-theme]) .hero{background:radial-gradient(760px 520px at 12% 0,#FBE3EA 0,rgba(251,227,234,0) 70%),radial-gradient(620px 480px at 100% 30%,#FCEBDD 0,rgba(252,235,221,0) 70%)}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--card);font:700 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.pill img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.hero h1{margin:22px 0 18px;font-size:62px;line-height:1.04}
.hero h1 span,.hero h1 em{display:block}
.hero h1{text-wrap:balance}
.hero h1.hb{font-size:50px}
.lede{max-width:540px;font-size:18.5px;line-height:1.6}
.when1{display:flex;align-items:flex-start;gap:12px;margin-top:24px;color:var(--ink)}
.when1 svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--acc)}
.when1 b{display:block;font:600 18px/1.35 var(--sans);color:var(--ink)}
.when1 .z{font-weight:400;color:var(--muted)}
.nw{white-space:nowrap}
.when1 small{display:block;margin-top:3px;font-size:14.5px;color:var(--muted)}

/* the seat card (form) */
.pass{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.pass-ph{position:relative;height:176px;background:#1b0f17}
.pass-ph img,.pass-ph video{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.pass-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,8,17,0) 45%,rgba(20,8,17,.78))}
.pwho{position:absolute;left:20px;bottom:14px;z-index:1;color:rgba(255,255,255,.86);font-size:13px;line-height:1.35}
.pwho b{display:block;font:var(--hw) 21px/1.15 var(--head);color:#fff}
.snd{position:absolute;right:12px;top:12px;z-index:2;border:0;border-radius:999px;padding:8px 14px;background:rgba(0,0,0,.6);color:#fff;font:600 13px/1 var(--sans);cursor:pointer}
.pass-b{padding:24px 24px 22px}
.pass-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pass-h h2{font-size:26px}
.step{flex:none;padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--acc2);font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.join.flash{animation:flash 1.1s}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--acc)}70%{box-shadow:0 0 0 14px rgba(0,0,0,0)}100%{box-shadow:var(--sh)}}
.f{display:grid;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{position:relative;display:block}
.fld input{width:100%;height:56px;border:1.5px solid var(--field-line);border-radius:var(--r-sm);background:var(--field);padding:22px 15px 7px;font:500 16px/1.2 var(--sans);color:var(--ink);outline:0;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
/* The label floats up when the field has focus or text. Password managers (LastPass, 1Password...) insert their own element
   between the input and the label, so nothing here relies on input+span: the label is found from the .fld box (13 Nov). */
.fld>.fl{position:absolute;left:16px;top:18px;font-size:15px;line-height:1.3;color:var(--muted);pointer-events:none;transition:top .15s,font-size .15s,color .15s;white-space:nowrap;z-index:1}
.fld:focus-within>.fl,.fld.on>.fl{top:8px;font-size:11px;letter-spacing:.03em;color:var(--acc2)}
.fld:has(input:not(:placeholder-shown))>.fl{top:8px;font-size:11px;letter-spacing:.03em;color:var(--acc2)}
.fld input:not(:placeholder-shown)~.fl{top:8px;font-size:11px;letter-spacing:.03em;color:var(--acc2)}
.fld input:-webkit-autofill~.fl{top:8px;font-size:11px;letter-spacing:.03em;color:var(--acc2)}
.fld input:autofill~.fl{top:8px;font-size:11px;letter-spacing:.03em;color:var(--acc2)}
.fld input:-webkit-autofill,.fld input:-webkit-autofill:hover,.fld input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 60px var(--field) inset;caret-color:var(--ink);animation:fldaf .01s}
@keyframes fldaf{from{opacity:1}to{opacity:1}}
.fld input:focus{border-color:var(--acc);box-shadow:0 0 0 4px var(--soft)}
.fld input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 60px var(--field) inset,0 0 0 4px var(--soft)}
.fld.bad input{border-color:var(--no)}
.tel{display:grid;grid-template-columns:auto 1fr;gap:10px}
.cc{position:relative;height:56px;min-width:98px;border:1.5px solid var(--field-line);border-radius:var(--r-sm);background:var(--field);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;font:500 16px/1 var(--sans);color:var(--ink);white-space:nowrap}
.cc::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;color:#111}
.cc:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px var(--soft)}
.boxes{display:none;gap:8px;padding:2px 2px 0}
.boxes.on{display:grid}
.boxes label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;cursor:pointer;color:var(--body)}
.boxes label[hidden]{display:none}
.boxes label.tiny{font-size:11.5px;line-height:1.4;color:var(--muted);gap:7px;align-items:center}
.boxes label.tiny input{width:13px;height:13px;margin-top:0}
.boxes input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--acc)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f .btn{width:100%;margin-top:2px}
.err{font-size:13.5px;font-weight:500;color:var(--no);text-align:center}
.err:empty{display:none}
.fine,.pv{font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.trust{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:14px;color:var(--body)}
.avs{display:flex}
.avs i{display:grid;place-items:center;width:28px;height:28px;margin-left:-7px;border:2px solid var(--bg);border-radius:50%;background:var(--soft);color:var(--acc2);font:600 12px/1 var(--sans);font-style:normal}
.avs i:first-child{margin-left:0}

/* the moving line of student quotes */
.ticker{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);overflow:hidden;padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tk{display:flex;gap:52px;width:max-content;animation:tk 70s linear infinite}
.ticker:hover .tk{animation-play-state:paused}
.tk span{white-space:nowrap;font:300 italic 18px/1.3 var(--head);color:var(--ink)}
.tk span b{font:700 10.5px/1 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-left:12px}
@keyframes tk{to{transform:translateX(-50%)}}

/* sections */
.s{padding:84px 0}
.s.alt{background:var(--alt)}
.head{max-width:700px;margin:0 auto 40px;text-align:center}
.head h2{margin-top:12px;font-size:44px;text-wrap:balance}
.head p,.mine p,.mine blockquote,.trust>span:last-child,.pillars-h{text-wrap:balance}
.head p{margin-top:14px;font-size:17.5px}
.cta{margin-top:40px;text-align:center}

/* two voices */
.chat{max-width:620px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 26px;box-shadow:var(--sh)}
.chat-top{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:14px;margin-bottom:6px;border-bottom:1.5px dashed var(--line)}
.chat-top span{display:block;font:var(--hw) 19px/1.2 var(--head);color:var(--ink)}
.chat-top span.hi{text-align:right;color:var(--em)}
.chat-top small{display:block;margin-top:5px;font:400 12.5px/1.35 var(--sans);color:var(--muted);letter-spacing:0}
.msg{width:fit-content;max-width:82%;padding:12px 17px;border-radius:20px;font-size:16px;line-height:1.4;margin-top:11px}
.msg.lo{background:var(--lo);color:var(--lo-ink);border-bottom-left-radius:6px}
.msg.hi{margin-left:auto;background:linear-gradient(135deg,#C43C7A,#8E2254);color:#fff;border-bottom-right-radius:6px}
.mine{max-width:640px;margin:44px auto 0;text-align:center}
.mine blockquote{font:300 italic 28px/1.3 var(--head);color:var(--ink);letter-spacing:-.01em}
.mine p{margin:16px 0 26px;font-size:17px}

/* student results */
.who{display:flex;align-items:center;gap:12px}
.who>span:last-child{display:block;font-size:13px;line-height:1.35;color:var(--muted)}
.who b{display:block;font:600 16px/1.25 var(--sans);color:var(--ink)}
.who span span{display:block}
.av{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--soft);color:var(--acc2);font:var(--hw) 18px/1 var(--head)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;margin-bottom:18px}
.story blockquote{margin-top:14px;font:300 21px/1.5 var(--head);color:var(--ink)}
.story blockquote.sm{font-size:17px;line-height:1.6}
.stamp,.then{display:block;margin-top:16px;font:700 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.then{margin:0 0 12px}
.cert{display:block;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0b10;cursor:zoom-in;padding:0}
.cert img{width:100%}
.cert.msgc{margin-top:18px}
.cap{margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.four,.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pc.w2{grid-column:span 2}
.pc.w2 .two{max-width:560px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.pc .who{margin-bottom:14px}
.pc blockquote{margin-top:12px;font:300 17px/1.5 var(--head);color:var(--ink)}
.fineprint,.qnote{max-width:760px;margin:26px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--muted)}
.swipe{display:none}

/* in their own words */
.qwall{columns:3;column-gap:18px}
.q{break-inside:avoid;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:0 0 18px}
.q blockquote{font:300 18px/1.5 var(--head);color:var(--ink)}
.q .who{margin-top:18px}
.q .av{width:38px;height:38px;font-size:16px}
.vhead{margin:64px 0 24px;text-align:center;font-size:32px}
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.vid{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:transform .15s,box-shadow .15s}
.vid:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.th img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.94);color:#B8326E}
.play svg{width:20px;height:20px;margin-left:2px}
.vc{display:block;padding:13px 14px 15px}
.vc b{display:block;font:600 14.5px/1.35 var(--sans);color:var(--ink)}
.vc span{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}

/* Joyce */
.host{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.host-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh)}
.host-t h2{margin:12px 0 18px;font-size:44px}
.host-t p{margin-top:14px;font-size:17px;line-height:1.65}
.sig{font:400 46px/1 'Great Vibes','Snell Roundhand',cursive;color:var(--acc);margin-top:18px!important}
.hv{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;margin-top:22px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);text-decoration:none}
.hv .th{border-radius:8px}
.hv .play{width:34px;height:34px;margin:-17px 0 0 -17px}
.hv .play svg{width:15px;height:15px}
.hv b{display:block;font:600 14.5px/1.35 var(--sans)}
.hv span span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px}
.pillars-h{grid-column:1/-1;max-width:640px;margin:0 auto 12px;text-align:center;font:var(--hw) 23px/1.35 var(--head);color:var(--ink);letter-spacing:var(--ht)}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.pillar b{display:block;font:var(--hw) 25px/1 var(--head);color:var(--em);letter-spacing:var(--ht)}
.pillar i{display:block;margin:9px 0 9px;font:700 10.5px/1.3 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pillar span{display:block;font-size:14px;line-height:1.55}
.pq{max-width:720px;margin:40px auto 0;text-align:center}
.pq blockquote{font:300 italic 21px/1.5 var(--head);color:var(--ink)}
.pq cite{display:block;margin-top:12px;font:700 10.5px/1.3 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}

/* is this for you */
.said{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto}
.said article{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.said blockquote{font:300 italic 21px/1.4 var(--head);color:var(--ink)}
.said p{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:15.5px;line-height:1.55}
.fit{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;max-width:900px;margin:30px auto 0}
.fitc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.fitc h3{font-size:22px;margin-bottom:14px}
.fitc ul{list-style:none;display:grid;gap:11px}
.fitc li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.5}
.fitc li::before{position:absolute;left:0;top:1px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;font:700 11px/1 var(--sans)}
.yes li::before{content:"✓";background:rgba(63,143,107,.14);color:var(--ok)}
.no li::before{content:"✕";background:rgba(180,80,90,.13);color:var(--no)}
.no h3 em{color:var(--no)}

/* questions */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 20px}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:18px 34px 18px 0;font:600 16.5px/1.4 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 24px/1 var(--sans);color:var(--acc)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;font-size:15.5px;line-height:1.65}

/* last call */
.close{padding:88px 0;background:linear-gradient(160deg,#3A1530,#2A0F23);color:#EADFE6}
.close-g{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center}
.close .kicker{color:#F3B9CF}
.close-t h2{margin-top:14px;font-size:64px;color:#fff}
.close-t h2 em{color:#F3B9CF}
.close .when1{margin-top:22px}
.close .when1 svg{color:#F3B9CF}
.close-t .when1 b{color:#fff;font-size:20px}
.close-t .when1 small,.close-t .when1 .z{color:rgba(255,255,255,.7)}

footer{padding:44px 0 110px;background:var(--bg);border-top:1px solid var(--line);font-size:12.5px;line-height:1.65;color:var(--muted)}
footer .wrap{max-width:820px;text-align:center}
footer .brand{display:inline-block;margin-bottom:16px;font-size:20px;color:var(--ink)}
footer b{display:block;font:700 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
footer p{margin-top:8px}

/* phone: one button at the bottom while no form is on screen */
.mcta{display:none}

/* the seat pop-up: the form itself, nothing else to click */
.xi{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(30,10,24,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s;overflow-y:auto}
.xi[hidden]{display:none}
.xi.on{opacity:1}
.xi-card{position:relative;width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);transform:translateY(10px) scale(.98);transition:transform .22s}
.xi.on .xi-card{transform:none}
.xi-top{display:flex;align-items:center;gap:14px;padding-right:30px}
.xi-av{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--soft)}
.xi .kicker{font-size:10.5px;letter-spacing:.14em}
.xi h2{margin-top:5px;font-size:25px;line-height:1.15}
.xi h2 em{white-space:nowrap}
.xi .when1{margin:16px 0 16px;padding:11px 14px;border-radius:var(--r-sm);background:var(--soft);align-items:center}
.xi .when1 b{font-size:15.5px}
.xi .when1 svg{margin-top:0;width:19px;height:19px}
.xi-x{position:absolute;right:10px;top:10px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.xi-x:hover{background:var(--soft)}

.lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(10,6,9,.92);cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:min(1100px,100%);max-height:88vh;border-radius:12px}
.lb-x{position:absolute;right:16px;top:12px;width:44px;height:44px;border:0;background:none;color:#fff;font-size:32px;line-height:1;cursor:pointer}

.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}.tk{animation:none}.dot{animation:none}html{scroll-behavior:auto}}

@media(max-width:980px){
  .hero-g,.close-g{grid-template-columns:1fr;gap:30px}
  .hero-r,.close-g .pass{max-width:520px;width:100%;margin:0 auto}
  .lede{max-width:none}
  .host{grid-template-columns:1fr;gap:28px}
  .host-ph{max-width:420px;margin:0 auto;width:100%}
  .qwall{columns:2}
  .rail{grid-template-columns:1fr 1fr}
  .pc.w2{grid-column:auto}
  .pillars{grid-template-columns:1fr 1fr}
  .close-t{text-align:center}
  .close .when1{justify-content:center;text-align:left}
}
@media(max-width:760px){
  .wrap{padding:0 18px}
  .top-in{justify-content:center;min-height:52px}
  .top .brand,.top .btn{display:none}
  .top-c{gap:10px}
  .top-l{font-size:10px;letter-spacing:.1em}
  .cd>span{min-width:36px;padding:5px 3px 4px}
  .cd b{font-size:14px}
  .hero{padding:26px 0 40px}
  .pill{font-size:10.5px;letter-spacing:.12em}
  .hero h1{margin:16px 0 12px;font-size:39px}
  .hero h1.hb{font-size:34px}
  .lede{font-size:16.5px;line-height:1.55}
  .when1{margin-top:16px;gap:10px}
  .when1 b{font-size:16.5px}
  .when1 small{font-size:13.5px}
  .pass-ph{height:150px}
  .pass-ph:not(:has(video)){display:none}
  .pass-ph img,.pass-ph video{object-position:50% 20%}
  .pwho{left:16px;bottom:10px;font-size:12.5px}
  .pwho b{font-size:18px}
  .pass-b{padding:18px 16px 18px}
  .pass-h h2{font-size:23px}
  .row2{grid-template-columns:1fr}
  .trust{font-size:13.5px}
  .tk span{font-size:16px}
  .s{padding:56px 0}
  .head{margin-bottom:28px}
  .head h2,.host-t h2{font-size:31px}
  .head p{font-size:16px}
  .chat{padding:16px 14px 20px}
  .chat-top span{font-size:16px}
  .chat-top small{font-size:11.5px}
  .msg{font-size:15px;padding:11px 15px}
  .mine{margin-top:32px}
  .mine blockquote{font-size:23px}
  .mine p{font-size:16px}
  .mine .btn,.cta .btn{width:100%}
  .story{grid-template-columns:1fr;gap:20px;padding:20px}
  .story blockquote{font-size:18.5px}
  .story blockquote.sm{font-size:15.5px}
  /* the long rows become side-scrolling rails on a phone */
  .rail,.qwall,.vids{display:flex;columns:auto;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:2px 18px 8px;scrollbar-width:none}
  .rail::-webkit-scrollbar,.qwall::-webkit-scrollbar,.vids::-webkit-scrollbar{display:none}
  .rail>*,.qwall>*{flex:0 0 84%;scroll-snap-align:center;margin:0}
  .rail{align-items:flex-start}
  .vids>*{flex:0 0 68%;scroll-snap-align:center}
  .swipe{display:block;margin-top:10px;text-align:center;font:700 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .vhead{margin:44px 0 18px;font-size:26px}
  .host-t p{font-size:16px}
  .pillars{gap:10px;margin-top:40px}
  .pillars-h{font-size:19px}
  .pillar{padding:16px}
  .pillar b{font-size:21px}
  .pillar span{font-size:13px}
  .pq blockquote{font-size:18px}
  .said,.fit{grid-template-columns:1fr;gap:12px}
  .said article,.fitc{padding:20px}
  .said blockquote{font-size:19px}
  .faq summary{font-size:15.5px;padding:16px 30px 16px 0}
  .close{padding:56px 0}
  .close-t h2{font-size:44px}
  .close-t .when1 b{font-size:17px}
  .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
  .mcta.on{transform:none}
  .mcta .btn{width:100%;min-height:52px}
  .xi{place-items:end center;padding:0}
  .xi-card{max-width:none;border-radius:var(--r) var(--r) 0 0;border-bottom:0;padding:22px 16px calc(16px + env(safe-area-inset-bottom));transform:translateY(40px)}
  .xi h2{font-size:22px}
  .xi .fine{display:none}
}


/* ===== OURS v3 "deep olive & ivory travertine" + option "midnight forest & smoked walnut" (preview 14 Nov 2026) =====
   Joyce's own pick for the second look (WhatsApp 11 Nov 19:57 IST: "Let's try either this deep olive and ivory / Or midnight
   forest and walnut"; 13 Nov: "my original colour (pink purple) and this one"). Every colour is measured from the four
   pictures she sent (wa/palettes, PALETTE.md): olive #3D3923, olive shadow #2D2413, olive lit #534F3A, travertine #D2BDAB /
   #E4D1C1, gold ribbon #9F754B, brass #734F2B, ribbon highlight #DDB990; forest #34362A, forest deep #1A1B13, forest lit
   #505244, walnut #5F3C25 / #7E5438, tan #DCC2A9, kitchen glow #E1A062. Light tints are those colours mixed with white.
   Type: Cormorant Garamond (the serif on her swatch cards) for headlines, Manrope for reading. One dark solid thing per screen
   (the button) so the eye always knows where to click. */
[data-theme=ours]{
  /* olive & ivory (default) */
  --d:#3D3923;--d2:#2D2413;--dl:#534F3A;--on-d:#F5EEE6;--on-d2:rgba(245,238,230,.74);
  --g:#9F754B;--gt:#734F2B;--gl:#DDB990;
  --bg:#F5EEE6;--alt:#ECE2D7;--card:#FBF8F3;--ink:#2E2B1B;--body:#4F4A38;--muted:#6E6853;--line:#DFD3C5;
  --acc:#734F2B;--acc2:#3D3923;--soft:rgba(159,117,75,.13);--em:#3D3923;
  --btn:#3D3923;--btn-ink:#F5EEE6;--btn-hov:#4A4530;--btn-d:#DDB990;--btn-d-ink:#2E2B1B;
  --barred:#9A3B27;
  --head:'Cormorant Garamond','Cormorant',Georgia,serif;--hw:500;--ht:-.012em;--em-style:italic;--em-w:500;
  --sans:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:18px;--r-sm:12px;--btn-r:999px;
  --btn-sh:inset 0 1px 0 rgba(221,185,144,.55),0 14px 28px -16px rgba(45,36,19,.75);
  --field:#FFFFFF;--field-line:#D6C8B8;
  --sh:0 36px 70px -44px rgba(45,36,19,.42);--lo:#EFE7DD;--lo-ink:#4F4A38;--ok:#734F2B;--no:#9B937F;
  --bar:#3D3923;--bar-ink:#F5EEE6;--chip:rgba(245,238,230,.08);--chip-ink:#F5EEE6;--dot:#DDB990;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
[data-theme=ours][data-pal=forest]{
  /* midnight forest & smoked walnut */
  --d:#34362A;--d2:#1A1B13;--dl:#505244;--on-d:#F4EADF;--on-d2:rgba(244,234,223,.72);
  --g:#7E5438;--gt:#5F3C25;--gl:#E1A062;
  --bg:#F2E8DD;--alt:#E8D9C9;--card:#FBF6F0;--ink:#1F2017;--body:#45463A;--muted:#69675A;--line:#DCCAB7;
  --acc:#5F3C25;--acc2:#34362A;--soft:rgba(126,84,56,.13);--em:#5F3C25;
  --btn:#5F3C25;--btn-ink:#F6EDE3;--btn-hov:#6E4630;--btn-d:#E1A062;--btn-d-ink:#1A1B13;
  --barred:#8E3424;
  --btn-sh:inset 0 1px 0 rgba(225,160,98,.45),0 14px 28px -16px rgba(58,34,17,.8);
  --field-line:#D3BFA9;--sh:0 36px 70px -44px rgba(26,27,19,.45);--lo:#ECE0D2;--lo-ink:#45463A;--ok:#5F3C25;--no:#9A9384;
  --bar:#1A1B13;--bar-ink:#F4EADF;--dot:#E1A062;
}
[data-theme=ours] body{font-size:16.5px;line-height:1.68;color:var(--body)}
[data-theme=ours] b,[data-theme=ours] strong{font-weight:600;color:var(--ink)}
[data-theme=ours] h1,[data-theme=ours] h2,[data-theme=ours] h3{color:var(--ink)}
[data-theme=ours] h1 em,[data-theme=ours] h2 em,[data-theme=ours] h3 em{font-style:italic;font-weight:500;color:var(--em)}
/* small caps label with the short gold line from her swatch cards */
[data-theme=ours] .kicker{font:600 11.5px/1.2 var(--sans);letter-spacing:.22em;color:var(--gt);display:inline-flex;align-items:center;gap:12px}
[data-theme=ours] .kicker::before{content:"";width:28px;height:1px;background:var(--g)}
[data-theme=ours] .head .kicker,[data-theme=ours] .close .kicker{justify-content:center}
[data-theme=ours] .head .kicker::after{content:"";width:28px;height:1px;background:var(--g)}
/* buttons: one solid, quiet, expensive pill with a thin gold top edge */
[data-theme=ours] .btn{background:var(--btn);color:var(--btn-ink);font:600 15.5px/1 var(--sans);letter-spacing:.01em;border-radius:var(--btn-r);box-shadow:var(--btn-sh);padding:19px 30px}
[data-theme=ours] .btn:hover{background:var(--btn-hov);filter:none;transform:translateY(-1px)}
[data-theme=ours] .btn svg{stroke-width:2}
[data-theme=ours] .dot{background:var(--dot);animation:none;box-shadow:0 0 0 3px rgba(221,185,144,.22)}
/* top bar */
[data-theme=ours] .top{background:var(--bar);color:var(--bar-ink);border-bottom:1px solid rgba(221,185,144,.18)}
[data-theme=ours] .top .brand{font:500 21px/1 var(--head);letter-spacing:0;color:var(--on-d)}
[data-theme=ours] .top .brand em{color:var(--gl);font-style:italic}
[data-theme=ours] .top-l{font:600 11px/1 var(--sans);letter-spacing:.18em;color:var(--on-d2)}
[data-theme=ours] .cd>span{background:rgba(255,255,255,.06);border:1px solid rgba(221,185,144,.18);border-radius:8px}
[data-theme=ours] .cd b{color:var(--on-d);font-family:var(--sans);font-weight:600}
[data-theme=ours] .cd small{color:var(--on-d2);opacity:.8}
[data-theme=ours] .top .btn.sm{background:var(--btn-d);color:var(--btn-d-ink);box-shadow:none;padding:12px 20px}
/* hero: ivory stone, soft daylight from the top right */
[data-theme=ours] .hero{background:radial-gradient(760px 520px at 88% -10%,rgba(221,185,144,.28),transparent 70%),radial-gradient(640px 460px at -8% 10%,rgba(83,79,58,.07),transparent 70%),var(--bg)}
[data-theme=ours] .pill{background:var(--card);border:1px solid var(--line);color:var(--ink);font:600 12.5px/1.2 var(--sans);letter-spacing:.02em;text-transform:none;box-shadow:0 6px 18px -14px rgba(45,36,19,.4)}
[data-theme=ours] .hero h1{font:500 70px/.98 var(--head);letter-spacing:-.015em}
[data-theme=ours] .hero h1.hb{font-size:62px}
[data-theme=ours] .hero h1 .h1a{display:block}
[data-theme=ours] .lede{color:var(--body);font-size:18px}
[data-theme=ours] .when1{color:var(--ink)}
[data-theme=ours] .when1 svg{color:var(--g)}
/* the seat card */
[data-theme=ours] .pass{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 0 rgba(45,36,19,.04),0 46px 90px -50px rgba(45,36,19,.55)}
[data-theme=ours] .pass-ph{background:var(--d)}
[data-theme=ours] .pass-ph::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(30,26,14,.78))}
[data-theme=ours] .pwho b{font:500 25px/1.1 var(--head)}
[data-theme=ours] .pass-h h2{font:500 31px/1.05 var(--head)}
[data-theme=ours] .step{background:var(--alt);color:var(--gt);border:1px solid var(--line);font-weight:600}
[data-theme=ours] .fld input,[data-theme=ours] .cc{background:var(--field);border:1px solid var(--field-line);border-radius:12px}
[data-theme=ours] .fld input:focus,[data-theme=ours] .cc:focus-within{border-color:var(--d);box-shadow:0 0 0 4px var(--soft)}
[data-theme=ours] .fld:focus-within>.fl,[data-theme=ours] .fld.on>.fl{color:var(--gt)}
[data-theme=ours] .boxes input{accent-color:var(--d)}
[data-theme=ours] .avs i{background:var(--alt);color:var(--gt)}
/* student line */
[data-theme=ours] .ticker{background:var(--alt);border-color:var(--line)}
[data-theme=ours] .tk span{font:italic 500 19px/1.3 var(--head);color:var(--ink)}
[data-theme=ours] .tk span b{font:600 10.5px/1 var(--sans);letter-spacing:.18em;color:var(--gt);font-style:normal}
/* sections */
[data-theme=ours] .s{background:var(--bg)}
[data-theme=ours] .s.alt{background:var(--alt)}
[data-theme=ours] .head h2,[data-theme=ours] .host-t h2,[data-theme=ours] .close-t h2{font:500 54px/1.02 var(--head);letter-spacing:-.012em}
[data-theme=ours] .head p{color:var(--body)}
/* the dark bands: olive (or forest) with a little stone grain */
[data-theme=ours] #voices,[data-theme=ours] .close{background:var(--grain),radial-gradient(800px 520px at 88% 0%,var(--dl),transparent 70%),linear-gradient(180deg,var(--d),var(--d2));color:var(--on-d2)}
[data-theme=ours] #voices h2,[data-theme=ours] .close h2,[data-theme=ours] #voices b,[data-theme=ours] .close-t b{color:var(--on-d)}
[data-theme=ours] #voices h2 em,[data-theme=ours] .close h2 em{color:var(--gl)}
[data-theme=ours] #voices .kicker,[data-theme=ours] .close .kicker{color:var(--gl)}
[data-theme=ours] #voices .kicker::before,[data-theme=ours] #voices .kicker::after,[data-theme=ours] .close .kicker::before{background:var(--gl)}
[data-theme=ours] #voices .head p,[data-theme=ours] .close p{color:var(--on-d2)}
[data-theme=ours] .chat{background:rgba(255,255,255,.04);border:1px solid rgba(221,185,144,.18);box-shadow:none}
[data-theme=ours] .chat-top{border-bottom-color:rgba(221,185,144,.2)}
[data-theme=ours] .chat-top span{font:500 22px/1.15 var(--head);color:var(--on-d2)}
[data-theme=ours] .chat-top span.hi{color:var(--gl);font-style:italic}
[data-theme=ours] .chat-top small{color:var(--on-d2);font-family:var(--sans);opacity:.8}
[data-theme=ours] .msg.lo{background:rgba(255,255,255,.07);color:var(--on-d2)}
[data-theme=ours] .msg.hi{background:var(--on-d);color:var(--d2);font-weight:500}
[data-theme=ours] .mine blockquote{font:italic 500 32px/1.25 var(--head);color:var(--on-d)}
[data-theme=ours] .mine p{color:var(--on-d2)}
[data-theme=ours] #voices .btn,[data-theme=ours] .close .btn:not(form .btn){background:var(--btn-d);color:var(--btn-d-ink);box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
/* proof, quotes, videos */
[data-theme=ours] .story,[data-theme=ours] .pc,[data-theme=ours] .q,[data-theme=ours] .said article,[data-theme=ours] .fitc,[data-theme=ours] .pillar,[data-theme=ours] .faq details,[data-theme=ours] .vid,[data-theme=ours] .hv{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(45,36,19,.04)}
[data-theme=ours] .av{background:var(--soft);color:var(--gt);font:500 20px/1 var(--head)}
[data-theme=ours] .story blockquote{font:italic 500 22px/1.4 var(--head);color:var(--ink)}
[data-theme=ours] .story blockquote.sm{font:400 15.5px/1.6 var(--sans);font-style:normal;color:var(--body)}
[data-theme=ours] .stamp,[data-theme=ours] .then{color:var(--gt);font-weight:600}
[data-theme=ours] .cert{border-color:var(--line);background:var(--d)}
[data-theme=ours] .pc blockquote{font:400 15px/1.65 var(--sans);color:var(--body)}
[data-theme=ours] .q blockquote{font:italic 500 20px/1.45 var(--head);color:var(--ink)}
[data-theme=ours] .vhead{font:500 38px/1.05 var(--head)}
[data-theme=ours] .play{background:var(--on-d);color:var(--d)}
/* Joyce */
[data-theme=ours] .sig{font:italic 500 30px/1 var(--head);color:var(--gt)}
[data-theme=ours] .pillars-h{font-weight:600;color:var(--gt)}
[data-theme=ours] .pillar b{font:500 30px/1 var(--head);color:var(--ink)}
[data-theme=ours] .pillar i{color:var(--g)}
[data-theme=ours] .pq blockquote{font:italic 500 23px/1.45 var(--head)}
[data-theme=ours] .pq cite{color:var(--gt)}
/* is this for you */
[data-theme=ours] .said blockquote{font:italic 500 22px/1.35 var(--head);color:var(--ink)}
[data-theme=ours] .yes li::before{background:var(--soft);color:var(--gt)}
[data-theme=ours] .no li::before{background:var(--alt);color:var(--muted)}
[data-theme=ours] .no h3 em{color:var(--muted)}
[data-theme=ours] .faq summary{font:500 22px/1.3 var(--head);color:var(--ink)}
[data-theme=ours] .faq summary::after{color:var(--g)}
/* last call */
[data-theme=ours] .close .when1{color:var(--on-d)}
[data-theme=ours] .close .when1 svg{color:var(--gl)}
[data-theme=ours] .close .pass{color:var(--ink);border-color:transparent;box-shadow:0 50px 100px -40px rgba(0,0,0,.65)}
[data-theme=ours] footer{background:var(--bg);border-top:1px solid var(--line)}
[data-theme=ours] footer .brand{font:500 22px/1 var(--head)}
[data-theme=ours] footer .brand em{color:var(--gt)}
/* pop-up */
[data-theme=ours] .xi{background:rgba(30,26,14,.55)}
[data-theme=ours] .xi-card{background:var(--card);border:1px solid var(--line);box-shadow:0 50px 110px -40px rgba(30,26,14,.7)}
[data-theme=ours] .xi h2{font:500 32px/1.05 var(--head)}
[data-theme=ours] .xi .when1{background:var(--alt);border:1px solid var(--line)}
[data-theme=ours] .xi-av{border-color:var(--gl)}
@media(max-width:760px){
  [data-theme=ours] .hero h1{font-size:48px;line-height:1}
  [data-theme=ours] .hero h1.hb{font-size:44px}
  [data-theme=ours] .head h2,[data-theme=ours] .host-t h2,[data-theme=ours] .close-t h2{font-size:40px}
  [data-theme=ours] .mine blockquote{font-size:27px}
  [data-theme=ours] .said blockquote,[data-theme=ours] .story blockquote{font-size:20px}
  [data-theme=ours] .lede{font-size:16.5px}
  [data-theme=ours] .pill{font-size:12px}
  [data-theme=ours] .top .brand{font-size:18px}
  [data-theme=ours] .mcta{background:rgba(245,238,230,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  [data-theme=ours][data-pal=forest] .mcta{background:rgba(242,232,221,.94)}
}
[data-theme=ours] .pwho b{color:#fff}[data-theme=ours] .pwho{color:rgba(255,255,255,.82)}
[data-theme=ours] .close .pass h2{color:var(--ink)}
[data-theme=ours] .close .pass h2 em{color:var(--em)}
[data-theme=ours] .close .pass p{color:var(--muted)}
[data-theme=ours] .kicker{display:inline-block}
[data-theme=ours] .kicker::before{display:inline-block;vertical-align:middle;margin:-2px 12px 0 0}
[data-theme=ours] .head .kicker::after{display:inline-block;vertical-align:middle;margin:-2px 0 0 12px}
[data-theme=ours] .xi .kicker::before{width:18px;margin-right:9px}
[data-theme=ours] .xi .kicker{letter-spacing:.14em;font-size:10.5px}[data-theme=ours] .xi .kicker::before{display:none}