/* Moonrise Models: one stylesheet for every page.
   Design: Inter, centered heroes, pill eyebrows, pill CTAs with a white arrow chip, violet service cards,
   a two-panel calculator and a split FAQ, in Moonrise's own colours (violet #7C3AED, lavender #968CEF /
   #D0CBFA, night #090713). v2 (2026-10-16): the visuals are cropped windows of believable product
   screens that animate through a state change (js/motion.js); research notes in research/motion-research.md. */

:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ink:#0F0B1F; --ink2:#2A2440; --body:#5B5670; --muted:#8A85A0; --faint:#B9B4CB;
  --bg:#fff; --soft:#F8F7FD; --tint:#F5F3FF; --line:#ECE9F7; --line2:#DDD8F0; --grey:#F1EFF7; --hair:#F2F0F7;
  --violet:#7C3AED; --violet-d:#6D28D9; --violet-l:#8B5CF6; --lav:#968CEF; --lav2:#D0CBFA; --lav3:#EDE9FE;
  --night:#090713; --night2:#160F33; --night3:#221A47; --moon:#D4D8E8;
  --red:#E5484D; --green:#25D366; --ok:#067647; --ok-bg:#ECFDF3; --wait:#B45309; --wait-bg:#FFF7E6;
  --shadow:0 1px 2px rgba(15,11,31,.04),0 8px 24px -12px rgba(15,11,31,.12);
  --win-shadow:0 0 0 1px rgba(15,11,31,.06),0 2px 4px rgba(15,11,31,.05),0 28px 56px -18px rgba(40,12,96,.55);
  /* motion: curves read from Stripe / Linear / Raycast (research/motion-research.md) */
  --e-out:cubic-bezier(.23,1,.32,1); --e-spring:cubic-bezier(.32,.72,0,1); --e-expo:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--ink)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px}
.skip:focus{top:12px}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:1232px;margin:0 auto;padding:0 24px}
.narrow{max-width:768px;margin:0 auto}
.sec{padding:112px 0}
.sec.tight{padding:80px 0}
.sec.soft{background:var(--soft)}

/* Type scale (h1 36/48/60 extrabold -.05em, h2 30/36/48 semibold -.04em, h3 20/24 bold -.03em) */
h1{font-size:36px;line-height:1.08;font-weight:800;letter-spacing:-.05em}
h2{font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.04em}
h3{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.03em}
@media(min-width:640px){h1{font-size:48px}h2{font-size:36px}}
@media(min-width:1024px){h1{font-size:60px}h2{font-size:48px}h3{font-size:24px}}
.hl{color:var(--violet)}
.lead{font-size:17px;line-height:1.6;color:var(--body)}
@media(min-width:768px){.lead{font-size:18px}}

.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:760px;margin:0 auto 56px}
.head .lead{max-width:620px}
.head.left{align-items:flex-start;text-align:left;margin-left:0}

/* Pill eyebrow: tint fill, violet text, thick violet side borders */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--tint);color:var(--violet-d);border:0;border-left:3px solid var(--violet-d);border-right:3px solid var(--violet-d);font-size:13px;font-weight:500;line-height:1.3}
.pill svg{width:14px;height:14px}
@media(min-width:768px){.pill{font-size:14px}}

/* Buttons */
/* Main button, Moonrise version: vertical violet, lavender chip, a horizontal arrow that slides through on hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:5px 5px 5px 24px;border-radius:999px;border:0;cursor:pointer;color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;background:linear-gradient(180deg,#8B5CF6 0%,#7C3AED 55%,#6D28D9 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(76,29,149,.25),0 10px 22px -12px rgba(109,40,217,.75);transition:transform .25s var(--e-out),box-shadow .25s var(--e-out),filter .25s var(--e-out)}
.btn .arr{position:relative;width:38px;height:38px;border-radius:50%;background:#EDE9FE;color:var(--violet-d);display:grid;place-items:center;flex:none;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.btn .arr svg{width:17px;height:17px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(76,29,149,.25),0 14px 26px -12px rgba(109,40,217,.85)}
.btn:hover .arr svg{animation:arr-through .5s var(--e-out)}
.btn:active{transform:translateY(0) scale(.98);filter:brightness(.97)}
@keyframes arr-through{0%{transform:translateX(0)}40%{transform:translateX(180%)}41%{transform:translateX(-180%)}100%{transform:translateX(0)}}
.btn.sm{padding:4px 4px 4px 18px;font-size:15px;gap:12px}
.btn.sm .arr{width:32px;height:32px}
.btn.sm .arr svg{width:15px;height:15px}
.btn.block{width:100%;justify-content:space-between}
.btn-grey{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 22px;border-radius:999px;background:var(--grey);color:var(--ink);font-size:16px;font-weight:500;line-height:1;border:0;cursor:pointer;white-space:nowrap;transition:gap .25s var(--e-out),background .2s}
.btn-grey svg{width:16px;height:16px}
.btn-grey:hover{gap:12px;background:#E7E4F0}
.ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.ctas.left{justify-content:flex-start}
.note{font-size:12px;color:var(--muted);text-align:center}

.checks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}
.checks span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink)}
.checks svg{width:20px;height:20px;color:var(--violet);flex:none}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.logo{display:inline-flex;align-items:center;flex:none}
.logo svg{height:46px;width:auto}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--ink2)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover{color:var(--violet)}
.nav-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grey);color:var(--ink);transition:background .2s}
.icon-btn:hover{background:#E7E4F0}
.icon-btn svg{width:20px;height:20px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--grey);cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px}
.menu{display:none}
@media(max-width:960px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav .wrap{height:68px}
  .logo svg{height:38px}
  .nav-right .btn{display:none}
  .menu{position:fixed;inset:68px 0 0;background:#fff;z-index:49;padding:16px 24px 32px;display:flex;flex-direction:column;gap:4px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s var(--e-out),visibility .2s;overflow:auto}
  .menu a.m{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line)}
  .menu .btn{margin-top:20px}
  body.menu-open .menu{opacity:1;visibility:visible;transform:none}
  body.menu-open{overflow:hidden}
}

/* ---------- Hero ---------- */
.hero{padding:44px 0 0;text-align:center}
.hero-in{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:820px;margin:0 auto}
.hero-in .lead{max-width:640px}
.hero .note{margin-top:-14px}
.hero .checks{padding-top:6px}

/* The night stage under the hero: the moon rises once, the phone receives Friday-night notifications */
.stage{position:relative;margin:56px auto 0;max-width:1184px;height:500px;border-radius:32px 32px 0 0;overflow:hidden;background:linear-gradient(180deg,#1B1340 0%,#120C2B 55%,var(--night) 100%)}
.stage::after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:4}
.stage .st-moon{position:absolute;left:8%;top:54px;width:120px;height:120px;color:var(--moon)}
.js .stage .st-moon{opacity:0;transform:translateY(40px);transition:opacity 1.4s var(--e-out),transform 2.2s var(--e-expo)}
.js .stage.in .st-moon{opacity:1;transform:none}
.stage .tag{position:absolute;left:8%;bottom:170px;z-index:2;text-align:left;color:var(--lav2);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;max-width:250px;line-height:1.7}
.stage .tag b{display:block;color:#fff;font-size:22px;letter-spacing:-.03em;text-transform:none;font-weight:600;line-height:1.25;margin-bottom:8px}
.stage .lights{position:absolute;right:8%;top:76px;text-align:right;color:var(--lav);font-size:13px;line-height:1.9;z-index:2}
.stage .lights b{display:block;font-size:44px;line-height:1;color:#fff;letter-spacing:-.04em;font-weight:700;margin-bottom:6px}
@media(max-width:860px){
  .stage{height:470px;margin-top:44px;border-radius:24px 24px 0 0}
  .stage .tag,.stage .lights{display:none}
  .stage .st-moon{display:none}
}

/* iPhone: real proportions (19.5:9), titanium edge, side buttons, Dynamic Island, iOS lock screen */
.iphone{position:absolute;left:50%;top:34px;width:304px;height:648px;margin-left:-152px;border-radius:56px;padding:10px;background:#1D1932;box-shadow:inset 0 0 0 1.5px #4A4366,inset 0 0 0 5px #121022,0 50px 90px -30px rgba(0,0,0,.75);z-index:2}
.ib{position:absolute;width:3px;background:#2E2848;border-radius:2px}
.ib.a{left:-2px;top:118px;height:30px}.ib.b{left:-2px;top:166px;height:54px}.ib.c{left:-2px;top:228px;height:54px}.ib.d{right:-2px;top:190px;height:86px}
.ip{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:#0B0820}
.ip-wall{position:absolute;inset:0;background:linear-gradient(180deg,#2C2160 0%,#181038 46%,#0B0820 100%)}
.ip-wall svg{position:absolute;right:-56px;top:96px;width:240px;height:240px;color:rgba(212,216,232,.16)}
.ip-island{position:absolute;top:10px;left:50%;width:86px;height:25px;margin-left:-43px;border-radius:14px;background:#000;z-index:3}
.ip-bar{position:absolute;top:16px;right:22px;display:flex;align-items:center;gap:4px;color:#fff;z-index:3}
.ip-bar svg{display:block;height:10.5px;width:auto}
.ip-bar svg:nth-child(2){height:10px}
.ip-bar svg:nth-child(3){height:11px;margin-left:1px}
.ip-date{position:relative;z-index:2;text-align:center;margin-top:60px;color:rgba(255,255,255,.88);font-size:15px;font-weight:600;letter-spacing:-.01em}
.ip-time{position:relative;z-index:2;text-align:center;color:#fff;font-size:72px;font-weight:600;letter-spacing:-.035em;line-height:1;margin-top:2px}
.ip-stack{position:absolute;left:10px;right:10px;top:190px;z-index:2}
.nt{display:flex;gap:10px;padding:10px 12px 11px;border-radius:20px;background:rgba(244,242,251,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#111;margin-bottom:8px;text-align:left}
.nt-ic{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;margin-top:1px}
.nt-ic svg{width:21px;height:21px}
.nt-ic.moon{background:var(--night2);color:var(--moon)}
.nt-ic.msg{background:linear-gradient(180deg,#65F07E,#14BF33);color:#fff}
.nt-ic.cal{background:#fff;display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.nt-ic.cal span{font-size:7.5px;font-weight:700;color:#F2443A;letter-spacing:.04em}
.nt-ic.cal b{font-size:17px;font-weight:500;color:#111}
.nt-tx{min-width:0;flex:1;font-size:13px;line-height:1.3}
.nt-top{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.nt-top b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-top time{font-size:11.5px;color:#6E6A80;flex:none}
.nt-bd{color:#2A2440}
@media(max-width:860px){.iphone{top:30px}}

/* ---------- Platforms ---------- */
.plats{padding:8px 0 24px;text-align:center}
.plats p{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.plats ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 44px}
.plats li{font-size:22px;font-weight:700;letter-spacing:-.04em;color:#A7A2BC}
@media(max-width:640px){.plats ul{gap:8px 24px}.plats li{font-size:18px}}

/* ---------- Service cards: violet cards, each a cropped product window that plays one state change ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1024px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc{grid-template-columns:1fr}}
.svc-c{position:relative;border-radius:22px;padding:8px 8px 26px;color:#fff;background:linear-gradient(180deg,var(--violet-l) 0%,var(--violet) 100%);overflow:hidden;display:flex;flex-direction:column}
.svc-c .vis{position:relative;height:256px;margin-bottom:20px;border-radius:16px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
.svc-c .vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.3px);background-size:14px 14px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.svc-c .win{position:absolute;left:22px;right:22px;top:26px}
.svc-c .w-cal{top:18px}
.svc-c h3{color:#fff;font-size:20px;padding:0 18px;margin-bottom:8px}
.svc-c p{color:rgba(255,255,255,.86);font-size:15px;line-height:1.55;padding:0 18px}

/* Product window */
.win{position:relative;background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--win-shadow);font-size:12.5px;line-height:1.4;text-align:left;overflow:hidden}
.win-h{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;border-bottom:1px solid var(--hair);font-size:12.5px;white-space:nowrap}
.win-h b{font-weight:600}
.win-m{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ava{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--lav3);color:var(--violet-d);font-size:10.5px;font-weight:700}
.ava.moon{background:var(--night2);color:var(--moon)}
.ava.moon svg{width:14px;height:14px}
.who2{line-height:1.15}
.who2 small{display:block;font-size:10.5px;color:#16A34A;font-weight:500}
.who2 small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#22C55E;margin-right:4px;vertical-align:1px}
.fi{width:26px;height:30px;border-radius:5px;background:#FDECEC;color:#D9363E;font-size:8.5px;font-weight:700;display:grid;place-items:center;flex:none}
.st{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--ok-bg);color:var(--ok);white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.wait{background:var(--wait-bg);color:var(--wait)}
.st.wait::before{animation:blink 1.1s var(--e-io) infinite}
.st.mk{background:var(--grey);color:var(--muted)}
.st.mk::before{width:8px;height:8px;background:none;border:1.5px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite}
.cur{position:absolute;left:0;top:0;width:18px;height:22px;z-index:5;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px rgba(15,11,31,.3));will-change:transform}
@keyframes blink{50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Generic scene states: written finished in HTML; while a scene plays (.playing) items wait for .on */
.fx{transition:opacity .45s var(--e-out),transform .6s var(--e-spring)}
.playing .fx:not(.on){opacity:0;transform:translateY(6px) scale(.98)}
.g{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s var(--e-spring),opacity .45s var(--e-out)}
.g>div{min-height:0;overflow:hidden}
.playing .g:not(.on){grid-template-rows:0fr;opacity:0}
.scene-fade{transition:opacity .4s var(--e-out)}
.scene-fade.dim{opacity:0}

/* 1. Chat with the manager */
.thread{display:flex;flex-direction:column;padding:4px 12px 14px}
.w-chat .thread{height:206px;justify-content:flex-end;overflow:hidden}
.g.tg:not(.on){grid-template-rows:0fr;opacity:0}
.thread .g>div{display:flex;flex-direction:column;padding-top:7px}
.msg{max-width:84%;padding:7px 10px 6px;border-radius:13px;font-size:12px;line-height:1.38}
.msg.l{background:#F3F1F8;border-top-left-radius:4px;align-self:flex-start}
.msg.r{background:var(--violet);color:#fff;border-top-right-radius:4px;align-self:flex-end}
.msg time{display:block;font-size:9.5px;opacity:.6;margin-top:2px;text-align:right}
.typing{display:inline-flex;gap:3px;padding:10px 11px;background:#F3F1F8;border-radius:13px;border-top-left-radius:4px;align-self:flex-start}
.typing i{width:5px;height:5px;border-radius:50%;background:#A39FB5;animation:tdot 1.1s var(--e-io) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.file{display:flex;gap:8px;align-items:center;padding:7px 10px 7px 7px;border:1px solid var(--line);border-radius:10px;align-self:flex-start;background:#fff;font-size:11.5px}
.file small{display:block;color:var(--muted);font-size:10px}

/* 2. Onboarding checklist */
.prog{height:4px;background:var(--hair);margin:12px 14px 2px;border-radius:4px;overflow:hidden}
.prog i{display:block;height:100%;width:var(--w,100%);background:var(--violet);border-radius:4px;transition:width .7s var(--e-expo)}
.todo{list-style:none;margin:4px 0 0;padding:0 14px}
.todo li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:12.5px;transition:color .3s}
.todo .cb{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--violet);background:var(--violet);display:grid;place-items:center;flex:none;transition:background .25s var(--e-out),border-color .25s}
.todo .cb svg{width:10px;height:10px;color:#fff;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--e-io) .08s}
.todo .when{margin-left:auto;font-size:10.5px;color:var(--muted);transition:opacity .3s}
.playing .todo li:not(.done){color:var(--muted)}
.playing .todo li:not(.done) .cb{background:#fff;border-color:#D5D0E4}
.playing .todo li:not(.done) .cb svg{stroke-dashoffset:24}
.playing .todo li:not(.done) .when{opacity:0}
.ready{display:flex;align-items:center;gap:7px;margin:10px 14px 14px;padding:8px 10px;border-radius:9px;background:var(--ok-bg);color:var(--ok);font-weight:600;font-size:11.5px}
.ready::before{content:"";width:7px;height:7px;border-radius:50%;background:#22C55E}

/* 3. Payout */
.pay{padding:14px 16px 14px}
.pay small{font-size:11px;color:var(--muted)}
.pay-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.amt{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;margin:3px 0 14px}
.amt sup{font-size:.48em;vertical-align:.75em;letter-spacing:0;color:var(--muted);margin-left:1px;font-weight:600}
.bars{display:flex;align-items:flex-end;gap:7px;height:78px;padding-bottom:1px;border-bottom:1px solid var(--hair)}
.bars i{flex:1;height:var(--h);background:#E9E5F5;border-radius:4px 4px 2px 2px;transform-origin:bottom;transition:transform .8s var(--e-expo),background .4s}
.bars i.hi{background:var(--violet)}
.playing .bars i:not(.on){transform:scaleY(0)}
.bars-x{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding-top:6px}

/* 4. Privacy: values get redacted, the lock closes */
.rec{margin:0;padding:2px 14px 4px}
.rec>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:12px}
.rec dt{color:var(--muted)}
.rec dd{margin:0;font-weight:600}
.redact{position:relative;display:inline-block}
.redact::after{content:"";position:absolute;inset:-2px -4px;background:#1B1530;border-radius:3px;transform-origin:left;transition:transform .55s var(--e-io)}
.playing .redact:not(.on)::after{transform:scaleX(0)}
.rec.back .redact::after{transform-origin:right}
.lk{width:16px;height:16px;color:var(--violet-d);overflow:visible}
.lk .sh{transition:transform .45s var(--e-spring)}
.playing .lk:not(.on) .sh{transform:translateY(-3px)}
.access{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 14px 14px;font-size:11px;color:var(--muted)}
.access span{padding:3px 9px;border-radius:999px;background:var(--grey);color:var(--ink2);font-weight:500}

/* 5. Week calendar: a cursor drags "Live" blocks around lectures */
.cal-h{display:grid;grid-template-columns:repeat(5,1fr);margin-left:30px;margin-right:10px;font-size:10px;color:var(--muted);font-weight:600;padding:8px 0 6px;text-align:center;letter-spacing:.02em}
.cal-h .td{color:var(--violet-d)}
.cal-b{position:relative;margin:0 10px 12px 30px;height:144px;border-left:1px solid var(--hair);background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:100% 36px,20% 100%}
.cal-t{position:absolute;left:-28px;width:22px;text-align:right;font-size:9px;color:var(--faint);transform:translateY(-50%)}
.ev{position:absolute;left:calc(var(--d) * 20% + 2px);width:calc(20% - 4px);top:calc((var(--s) - 10) * 12px + 1px);height:calc((var(--e) - var(--s)) * 12px - 2px);border-radius:5px;padding:3px 4px 3px 5px;font-size:9.5px;line-height:1.2;font-weight:600;overflow:hidden}
.ev.gr{background:#F3F1F8;color:#6B6680;box-shadow:inset 2px 0 0 #CFCAE0}
.ev.lv{background:var(--lav3);color:var(--violet-d);box-shadow:inset 2px 0 0 var(--violet);transform-origin:top;transition:transform .6s var(--e-spring),opacity .3s}
.ev small{display:block;font-weight:500;opacity:.8;font-size:8.5px;margin-top:1px}
.ev .evl{transition:opacity .3s .05s}
.playing .ev.lv:not(.on){transform:scaleY(0);opacity:0}
.playing .ev.lv:not(.lab) .evl{opacity:0}

/* 6. Live session with the assistant */
.stream{position:relative;height:122px;background:radial-gradient(120% 100% at 72% 0%,#3B2A7A 0%,#1A1240 55%,#0E0A24 100%);color:#fff;overflow:hidden}
/* The streamer: an animated vector illustration (images/streamer.svg animates itself) */
.stream>.av{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:filter .5s var(--e-out)}
.chip-d{position:absolute;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.38);font-variant-numeric:tabular-nums}
.chip-d svg{width:12px;height:12px}
.chip-d.live{background:var(--red);letter-spacing:.06em;font-weight:700}
.chip-d.live::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
.coach{padding:4px 12px 12px}
.coach .g>div{padding-top:8px}
.cm{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.35}
.cm b{font-size:11px}
.cm small{color:var(--muted);font-size:10px;margin-left:4px;font-weight:400}

.svc-more{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.svc-more p{font-size:15px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips span{padding:8px 14px;border-radius:999px;background:var(--grey);font-size:14px;color:var(--ink2);font-weight:500}
.statement{display:flex;align-items:center;justify-content:center;gap:12px;max-width:680px;margin:36px auto 0;font-size:16px;color:var(--body);text-align:left}
.statement .ok{width:28px;height:28px;border-radius:50%;background:var(--lav3);color:var(--violet-d);display:grid;place-items:center;flex:none}
.statement .ok svg{width:14px;height:14px}
.statement b{color:var(--ink)}
.after{margin-top:36px}

/* Two notes: student life / fake agencies (flat panels, no borders) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:0 auto}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo-c{border-radius:20px;padding:30px 32px;background:var(--tint)}
.duo-c.red{background:#FFF4F4}
.duo-c .lab{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-d);margin-bottom:12px}
.duo-c.red .lab{color:#C62F35}
.duo-c h3{margin-bottom:10px;font-size:22px}
.duo-c p{font-size:15.5px}

/* ---------- Results: copy left, live earnings feed right ---------- */
.res2{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:center}
@media(max-width:1000px){.res2{grid-template-columns:1fr;gap:40px}}
.res2-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.flist{list-style:none;margin:6px 0 8px;padding:0;width:100%;border-top:1px solid var(--line)}
.flist li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.flist b{color:var(--ink);font-weight:700}
.feed{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 1px 2px rgba(15,11,31,.04),0 30px 60px -30px rgba(40,12,96,.28);overflow:hidden}
.feed-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.feed-h b{color:var(--ink);font-size:15px;letter-spacing:-.01em}
.feed-m{margin-left:auto;font-size:12.5px;color:var(--muted)}
.ldot{position:relative;width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none}
.ldot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22C55E;animation:ring 1.8s var(--e-out) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(3);opacity:0}}
.feed-cols,.feed-rows li{display:grid;grid-template-columns:1.15fr 1fr .8fr .9fr;align-items:center;padding:0 20px;gap:10px}
.feed-cols{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;padding-top:10px;padding-bottom:10px;background:var(--soft);border-bottom:1px solid var(--line)}
.feed-cols .r,.fa{text-align:right}
.feed-rows{list-style:none;margin:0;padding:0;height:336px;overflow:hidden}
.feed-rows li{height:56px;border-bottom:1px solid var(--hair);font-size:14px;overflow:hidden}
.feed-rows li.new{animation:rowflash 1.8s var(--e-out)}
@keyframes rowflash{0%{background:rgba(124,58,237,.10)}100%{background:rgba(124,58,237,0)}}
.fn{font-weight:600;color:var(--ink);letter-spacing:.07em;font-size:13px}
.fp{display:flex;align-items:center;gap:8px;color:var(--body);font-size:13.5px}
.fp img{width:16px;height:16px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(15,11,31,.08)}
.fs .st{font-size:11px}
.fa{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:16px;letter-spacing:-.02em}
.feed-f{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;font-size:13px;color:var(--muted);background:var(--soft);border-top:1px solid var(--line)}
.feed-f b{color:var(--ink)}
@media(max-width:560px){
  .feed-cols,.feed-rows li{grid-template-columns:1.2fr 1fr;padding:0 16px}
  .feed-cols span:nth-child(2),.feed-cols span:nth-child(3),.feed-rows .fs{display:none}
  .feed-rows .fp{grid-column:1;grid-row:2;font-size:12px;margin-top:-2px}
  .feed-rows li{grid-template-rows:auto auto;align-content:center;row-gap:2px;height:60px}
  .feed-rows .fn{grid-column:1;grid-row:1}
  .feed-rows .fa{grid-column:2;grid-row:1 / span 2}
  .feed-rows{height:360px}
  .feed-h{padding:14px 16px}.feed-m{display:none}
  .feed-f{padding:12px 16px;flex-direction:column;gap:2px}
}
.fine{font-size:13px;color:var(--muted)}

/* ---------- How it works: steps list (autoplay with a progress line) + one stage that plays each step ---------- */
.hiw{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
@media(max-width:960px){.hiw{grid-template-columns:1fr;gap:24px}.hiw-side{display:contents}.hiw-side .head{order:0;margin-bottom:0!important}.hiw-stage{order:1}.hiw-list{order:2}}
.hiw-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hiw-i{position:relative;border-bottom:1px solid var(--line)}
.hiw-b{display:flex;align-items:center;gap:18px;width:100%;padding:22px 0;background:none;border:0;cursor:pointer;text-align:left}
.hiw-n{font-size:13px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;width:20px;transition:color .3s}
.hiw-t{font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--muted);transition:color .3s}
.hiw-i.on .hiw-t,.hiw-b:hover .hiw-t{color:var(--ink)}
.hiw-i.on .hiw-n{color:var(--violet)}
.hiw-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-spring)}
.hiw-i.on .hiw-d{grid-template-rows:1fr}
.hiw-d>div{overflow:hidden;min-height:0}
.hiw-d p{padding:0 0 22px 38px;font-size:15.5px;max-width:470px}
.hiw-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--violet)}
@media(min-width:1024px){.hiw-t{font-size:22px}}
.hiw-stage{position:relative;height:460px;border-radius:28px;background:linear-gradient(180deg,var(--violet-l) 0%,var(--violet) 100%);overflow:hidden}
.hiw-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent)}
.hiw-s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:36px;opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .5s var(--e-out),transform .8s var(--e-spring),visibility 0s .5s}
.hiw-s.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--e-out) .12s,transform .8s var(--e-spring) .12s,visibility 0s}
.hiw-s .win{width:100%;max-width:430px}
@media(max-width:960px){.hiw-stage{height:430px;border-radius:22px}.hiw-s{padding:22px}}
@media(max-width:420px){.hiw-stage{height:420px}.hiw-s{padding:14px}}

/* Step 1: the form being filled */
.fm{padding:14px 16px 18px}
.fm-q{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:2px}
.fm label{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:10px}
.fm-in{display:block;margin-top:4px;height:33px;border-radius:8px;border:1px solid #E6E2F0;padding:0 10px;font-size:12.5px;color:var(--ink);line-height:31px;font-weight:500;white-space:nowrap;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.fm-in.f{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.14)}
.fm-in.f::after{content:"";display:inline-block;width:1px;height:14px;background:var(--violet);vertical-align:-2px;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.fm-ch{display:flex;gap:6px;margin-top:5px}
.fm-ch span{font-size:11px;padding:5px 10px;border-radius:999px;border:1px solid #E6E2F0;color:var(--ink2);transition:background .25s,color .25s,border-color .25s}
.fm-ch span.sel{background:var(--violet);border-color:var(--violet);color:#fff}
.fm-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;height:38px;border-radius:999px;background:var(--violet);color:#fff;font-weight:600;font-size:12.5px;transition:transform .15s var(--e-out)}
.fm-btn.press{transform:scale(.96)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.fm-ok{position:absolute;left:0;right:0;top:42px;bottom:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}
.fm-ok .okc{width:44px;height:44px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.fm-ok .okc svg{width:20px;height:20px}
.fm-ok b{font-size:15px;letter-spacing:-.01em}
.fm-ok small{font-size:12px;color:var(--muted);max-width:240px}

/* Step 2: onboarding call */
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px 4px}
.tile{position:relative;height:124px;border-radius:10px;background:linear-gradient(160deg,#2C2160,#120C2B);display:grid;place-items:center;color:#fff;transition:box-shadow .3s var(--e-out)}
.tile.spk{box-shadow:0 0 0 2px var(--lav2)}
.ava-lg{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-weight:700;font-size:17px;color:#fff}
.ava-lg svg{width:26px;height:26px;color:var(--moon)}
.tile .nm{position:absolute;left:9px;bottom:8px;font-size:10px;color:rgba(255,255,255,.85)}
.wave{position:absolute;right:9px;bottom:9px;display:flex;gap:2px;align-items:center;height:12px}
.wave i{width:2px;height:3px;background:#fff;border-radius:2px;opacity:.6}
.tile.spk .wave i{animation:wv .9s var(--e-io) infinite;opacity:1}
.tile.spk .wave i:nth-child(2){animation-delay:.12s}.tile.spk .wave i:nth-child(3){animation-delay:.24s}.tile.spk .wave i:nth-child(4){animation-delay:.36s}
@keyframes wv{0%,100%{height:3px}50%{height:12px}}
.shared{padding:4px 12px 12px}
.shared .g>div{padding-top:8px}
.fl{display:flex;gap:9px;align-items:center;padding:8px 10px 8px 8px;border:1px solid var(--line);border-radius:10px;font-size:12px}
.fl small{display:block;color:var(--muted);font-size:10.5px}
.fl .st{margin-left:auto}

/* Step 3: platform accounts */
.acc{list-style:none;margin:0;padding:4px 14px 10px}
.acc li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair)}
.acc li:last-child{border-bottom:0}
.pfav{width:30px;height:30px;border-radius:8px;flex:none;box-shadow:0 0 0 1px rgba(15,11,31,.08);background:#fff}
.acc b{display:block;font-size:12.5px}
.acc small{color:var(--muted);font-size:10.5px}
.acc .st{margin-left:auto}

/* Step 4: go live */
.gl .stream{height:176px}
.gl-go{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .35s var(--e-out)}
.gl-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink);font-weight:700;font-size:12.5px;padding:10px 18px;border-radius:999px;transition:transform .15s var(--e-out)}
.gl-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.gl-btn.press{transform:scale(.95)}
.gl .stream .chip-d{transition:opacity .4s var(--e-out)}
.gl.playing:not(.is-live) .stream .chip-d{opacity:0}
.gl.playing:not(.is-live) .stream>.av{filter:brightness(.5) saturate(.7)}
.gl.is-live .gl-go{opacity:0;pointer-events:none}
.gl-go{opacity:0}
.gl.playing:not(.is-live) .gl-go{opacity:1}
.gl-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair)}
.gl-stats div{padding:10px 12px;border-left:1px solid var(--hair)}
.gl-stats div:first-child{border-left:0}
.gl-stats small{display:block;font-size:10px;color:var(--muted)}
.gl-stats b{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.spark-w{padding:10px 12px 12px}
.spark{display:block;width:100%;height:auto}
.spark .ln{fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--e-io),opacity .15s}
.spark .ar{fill:rgba(124,58,237,.08);transition:opacity 1s var(--e-out) 1s}
.playing .spark:not(.on) .ln{stroke-dashoffset:1;opacity:0}
.playing .spark:not(.on) .ar{opacity:0}

/* ---------- Calculator ---------- */
.calc{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;max-width:1040px;margin:0 auto}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.panel{position:relative;border-radius:28px;padding:28px;background:linear-gradient(135deg,#fff 0%,var(--tint) 100%);border:1px solid var(--line);box-shadow:inset 0 2px 4px #fff,var(--shadow)}
@media(max-width:560px){.panel{padding:20px;border-radius:22px}}
.p-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.p-head h3{font-size:20px}
.p-head small{display:block;font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;margin-top:2px}
.reset{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--violet-d);border:1px solid rgba(109,40,217,.12);cursor:pointer;transition:transform .4s var(--e-out)}
.reset:hover{transform:rotate(-60deg)}
.reset svg{width:16px;height:16px}
.lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px 4px}
.seg{display:flex;gap:6px;padding:6px;border-radius:14px;background:var(--tint);box-shadow:inset 0 2px 4px rgba(15,11,31,.05);border:1px solid rgba(124,58,237,.06)}
.seg button{flex:1;min-width:0;border:1px solid transparent;background:transparent;padding:11px 6px;border-radius:10px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.seg button:hover{color:var(--ink2);background:rgba(255,255,255,.5)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 4px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)}
.rng-row{display:flex;align-items:center;justify-content:space-between;margin:26px 4px 14px}
.rng-row b{font-size:15px;color:var(--ink)}
.val{font-size:13px;font-weight:700;color:var(--violet-d);background:var(--tint);border:1px solid rgba(109,40,217,.12);padding:6px 12px;border-radius:999px;font-variant-numeric:tabular-nums}
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--violet-l),var(--violet-d)) 0/var(--p,27%) 100% no-repeat,var(--tint);box-shadow:inset 0 2px 4px rgba(15,11,31,.08);outline:none;margin:0;cursor:pointer}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid rgba(15,11,31,.08);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:grab}
input[type=range].rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid rgba(15,11,31,.08);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:grab}
input[type=range].rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(124,58,237,.25)}
.rng-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:8px 4px 0}
.facts2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.facts2 div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.facts2 small{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.facts2 b{font-size:15px;color:var(--ink)}
.res{display:flex;flex-direction:column}
.res .seg{margin-bottom:22px}
.res .hr{height:1px;background:var(--line);margin-bottom:26px}
.res .k{text-align:center;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.res .wk{text-align:center;margin:6px 0 26px;font-size:28px;font-weight:700;letter-spacing:-.035em;color:var(--ink2);line-height:1.1;font-variant-numeric:tabular-nums}
.res .big{text-align:center;font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--violet-d);margin:6px 0 8px;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.res .big{font-size:38px}}
@media(max-width:420px){.res .big{font-size:32px}.res .wk{font-size:23px}}
.res .sub{text-align:center;font-size:14px;color:var(--body);margin-bottom:24px}
.res .sub b{color:var(--ink)}
.res .btn{margin-top:auto}
.res .disc{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

/* ---------- Criteria: heading left, hairline list right ---------- */
.crit2{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
@media(max-width:900px){.crit2{grid-template-columns:1fr;gap:28px}}
.crit2 .head{margin-bottom:0}
.crit-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.crit-list li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:26px 0;border-bottom:1px solid var(--line)}
.crit-list .ic{color:var(--violet-d);padding-top:2px}
.crit-list .ic svg{width:30px;height:30px}
.crit-list h3{font-size:20px;margin:2px 0 4px}
.crit-list p{font-size:15.5px;max-width:520px}
.crit-foot{margin-top:22px;font-size:15px;color:var(--body)}
.crit-foot b{color:var(--ink)}

/* ---------- Comparison (coloured caps, the middle one recommended) ---------- */
.cmp{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:16px;align-items:center;max-width:1080px;margin:0 auto}
@media(max-width:900px){.cmp{grid-template-columns:1fr;max-width:520px}.cmp .mid{order:-1}}
.cmp-c{position:relative;background:#fff;border-radius:20px;padding:30px 28px 28px;box-shadow:var(--shadow);border:1px solid var(--line);border-top:10px solid #F1A9AB;overflow:hidden}
.cmp-c.mid{border-top-color:var(--violet);padding:40px 30px 36px;box-shadow:0 24px 50px -24px rgba(76,29,149,.35)}
.cmp-c h3{margin-bottom:6px;font-size:22px}
.cmp-c .sub{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.cmp-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cmp-c li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.cmp-c li svg{width:18px;height:18px;flex:none;margin-top:1px}
.cmp-c .x{color:#D7898C}
.cmp-c .ok{color:var(--violet)}
.cmp-c.mid li{color:var(--ink2);font-weight:500}
.reco{position:absolute;right:18px;top:18px;font-size:12px;font-weight:600;color:var(--violet-d);background:var(--tint);border:1px solid rgba(109,40,217,.15);padding:4px 10px;border-radius:999px}
.mark{width:48px;height:48px;border-radius:50%;background:var(--night2);color:var(--moon);display:grid;place-items:center;margin-bottom:16px}
.mark svg{width:28px;height:28px}

/* ---------- Testimonials: editorial, one featured quote + four in a hairline grid ---------- */
.voices2{display:grid;grid-template-columns:1fr 1.15fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:900px){.voices2{grid-template-columns:1fr}}
.vq-feat{padding:44px 56px 44px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
@media(max-width:900px){.vq-feat{padding:32px 0;border-right:0;border-bottom:1px solid var(--line)}}
.vq-feat q{display:block;quotes:none;font-size:26px;line-height:1.32;letter-spacing:-.025em;color:var(--ink);font-weight:500}
@media(min-width:1100px){.vq-feat q{font-size:30px}}
.vq-grid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:640px){.vq-grid{grid-template-columns:1fr}}
.vq{padding:30px 0 30px 32px;border-bottom:1px solid var(--line)}
.vq:nth-child(odd){border-right:1px solid var(--line);padding-right:28px}
.vq:nth-last-child(-n+2){border-bottom:0}
@media(max-width:900px){.vq{padding-left:0}.vq:nth-child(even){padding-left:24px}}
@media(max-width:640px){.vq,.vq:nth-child(even){padding:24px 0;border-right:0!important;border-bottom:1px solid var(--line)!important}.vq:last-child{border-bottom:0!important}}
.vq q{display:block;quotes:none;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.voices2 q b{color:var(--violet-d);font-weight:600}
.who{display:block;margin-top:16px;font-size:13px;color:var(--muted)}
.who b{color:var(--ink);font-weight:600;margin-right:6px}
.vq-feat .who{font-size:14px;margin-top:0}

/* ---------- Video testimonial (portrait video + her words), above the written ones ---------- */
.vt{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:center;margin:0 0 56px}
@media(max-width:820px){.vt{grid-template-columns:1fr;gap:28px;justify-items:center;margin-bottom:44px}}
.vt-vid{position:relative;width:100%;max-width:320px;aspect-ratio:464/848;border-radius:24px;overflow:hidden;background:var(--night2);box-shadow:0 1px 2px rgba(15,11,31,.08),0 30px 60px -28px rgba(40,12,96,.5);cursor:pointer}
.vt-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vt-badge{position:absolute;left:12px;top:12px;font-size:12px;font-weight:600;color:var(--violet-d);background:#fff;padding:5px 10px;border-radius:999px;box-shadow:0 2px 6px rgba(15,11,31,.15)}
.vt-cap{position:absolute;left:14px;right:14px;bottom:64px;text-align:center;pointer-events:none}
.vt-cap span{display:inline;font-size:16px;line-height:1.5;font-weight:600;letter-spacing:-.01em;color:#fff;background:rgba(15,11,31,.78);padding:3px 8px;border-radius:7px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vt-cap span:empty{display:none}
.vt-snd{position:absolute;left:12px;bottom:16px;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 10px;border:0;border-radius:999px;background:rgba(15,11,31,.8);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s var(--e-out)}
.vt-snd:active{transform:scale(.96)}
.vt-snd svg{width:18px;height:18px}
.vt-snd .vt-w{display:none}
.vt-vid.sound .vt-snd .vt-x{display:none}
.vt-vid.sound .vt-snd .vt-w{display:block}
.vt-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.vt-bar i{display:block;height:100%;width:0;background:var(--lav2)}
.vt-vid:not(.enh) .vt-snd,.vt-vid:not(.enh) .vt-cap,.vt-vid:not(.enh) .vt-bar{display:none}
.vt-copy{margin:0;max-width:560px}
.vt-k{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-d);margin-bottom:14px}
.vt-copy blockquote{margin:0 0 14px;font-size:26px;line-height:1.3;letter-spacing:-.025em;color:var(--ink);font-weight:500}
@media(min-width:1100px){.vt-copy blockquote{font-size:30px}}
.vt-copy blockquote b{color:var(--violet-d);font-weight:600}
.vt-copy p{font-size:16px;color:var(--ink2)}
.vt-copy .who{margin:14px 0 22px}
.vt-play svg{width:15px;height:15px}
@media(max-width:820px){.vt-copy{text-align:center}.vt-copy .vt-play{margin:0 auto}}

/* ---------- FAQ (split) ---------- */
.faq{display:grid;grid-template-columns:.9fr 1.3fr;gap:64px;align-items:start}
@media(max-width:960px){.faq{grid-template-columns:1fr;gap:36px}}
.faq-side{position:sticky;top:112px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
@media(max-width:960px){.faq-side{position:static}}
.faq-side .lead{font-size:16px}
.faq-side .row{display:flex;flex-wrap:wrap;gap:10px}
.cbtn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:#fff;border:1px solid var(--line2);font-size:14.5px;font-weight:600;color:var(--ink);transition:background .2s}
.cbtn:hover{background:var(--tint)}
.cbtn .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff}
.cbtn .ic svg{width:17px;height:17px}
.cbtn .ic.wa{background:var(--green)}
.faq-side .mail{font-size:14px;color:var(--muted)}
.faq-side .mail a{color:var(--violet-d);font-weight:600}
.qa{display:flex;flex-direction:column;gap:10px}
.qa details{background:#fff;border:1px solid var(--line);border-radius:16px;transition:border-color .2s,box-shadow .2s}
.qa details[open]{border-color:var(--lav2);box-shadow:var(--shadow)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--violet-d);display:grid;place-items:center;flex:none;transition:transform .3s var(--e-out),background .2s}
.qa summary .pm svg{width:14px;height:14px}
.qa details[open] summary .pm{transform:rotate(45deg);background:var(--violet);color:#fff}
.qa .a{padding:0 20px 20px;font-size:15.5px;line-height:1.65}

/* ---------- Final call (the night) ---------- */
.final{position:relative;overflow:hidden;margin:0 12px;border-radius:32px;background:linear-gradient(180deg,var(--night2) 0%,var(--night) 100%);color:var(--lav2);text-align:center;padding:104px 24px}
.final>.moon{width:96px;height:96px;margin:0 auto 26px;color:var(--moon)}
.js .final>.moon{opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--e-out) .1s,transform 1.8s var(--e-expo) .1s}
.js .final.in>.moon{opacity:1;transform:none}
.final h2{color:#fff;margin-bottom:14px}
.final p{max-width:540px;margin:0 auto 32px;font-size:17px}
.final .note{color:var(--lav);margin-top:16px}
@media(min-width:1256px){.final{max-width:1232px;margin:0 auto}}

/* ---------- Footer ---------- */
.foot{padding:72px 0 36px;color:var(--body);font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot .logo svg{height:46px}
.foot .about p{margin-top:16px;max-width:320px}
.foot h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot ul a:hover{color:var(--violet)}
.foot-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.adult{display:inline-flex;align-items:center;gap:8px}
.adult b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);font-size:11px}

/* ---------- Apply page ---------- */
.nav.min .wrap{height:72px}
.ap-hero{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);padding:48px 0 88px}
.ap-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
@media(max-width:960px){.ap-grid{grid-template-columns:1fr;gap:32px}}
.ap-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ap-copy h1{font-size:36px}
@media(min-width:640px){.ap-copy h1{font-size:44px}}
@media(min-width:1024px){.ap-copy h1{font-size:52px}}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink2);font-weight:500}
.tick{width:22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;flex:none}
.tick svg{width:12px;height:12px}
.ap-form #apply-form{min-height:520px}
.ap-form .note{margin-top:14px}
@media(max-width:960px){.ap-copy .lead,.ap-copy .ticks{display:none}.ap-copy{align-items:center;text-align:center}.ap-hero{padding:28px 0 56px}}

/* Numbered steps in a hairline row (thank-you page) */
.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
@media(max-width:760px){.mini-steps{grid-template-columns:1fr}}
.mini-steps>div{padding:26px 28px 6px 0}
.mini-steps>div+div{padding-left:28px;border-left:1px solid var(--line)}
@media(max-width:760px){.mini-steps>div,.mini-steps>div+div{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}}
.mini-steps .n{display:block;font-size:13px;font-weight:600;color:var(--violet);margin-bottom:12px;font-variant-numeric:tabular-nums}
.mini-steps h3{font-size:19px;margin-bottom:6px}
.mini-steps p{font-size:15px}

/* ---------- Thank-you page ---------- */
.ty{padding:56px 0 96px;background:linear-gradient(180deg,var(--tint) 0%,#fff 420px)}
.ty-card{max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.ty-ok{width:72px;height:72px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(109,40,217,.6)}
.ty-ok svg{width:34px;height:34px}
.ty-card h1{font-size:36px}
@media(min-width:768px){.ty-card h1{font-size:52px}}
.next{width:100%;max-width:640px;margin:16px auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;text-align:left;box-shadow:var(--shadow)}
.next .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet-d);margin-bottom:6px}
.next h2{font-size:24px;letter-spacing:-.03em;margin-bottom:8px}
.next p{font-size:15.5px}
.next .ctas{justify-content:flex-start;margin-top:18px}
.btn-wa{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:var(--green);color:#fff;font-weight:600;font-size:15.5px;transition:transform .2s var(--e-out)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-wa svg{width:20px;height:20px}
.ty-steps{max-width:880px;margin:64px auto 0}
.prep{max-width:880px;margin:28px auto 0;background:var(--night2);color:var(--lav2);border-radius:24px;padding:30px;display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:center}
@media(max-width:760px){.prep{grid-template-columns:1fr}}
.prep h3{color:#fff;font-size:22px;margin-bottom:8px}
.prep ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.prep li{display:flex;gap:10px;font-size:15px;align-items:flex-start;color:#E6E3FA}
.prep .tick{margin-top:2px;background:var(--lav)}

/* ---------- Thank-you v2: message-first (she sends the first message on the app she picked) ---------- */
.ty2{padding:44px 0 88px;background:linear-gradient(180deg,var(--tint) 0%,#fff 360px)}
.ty-head{max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.ty-head h1{font-size:34px;line-height:1.1}
@media(min-width:768px){.ty-head h1{font-size:48px}}
.ty-head .lead b{color:var(--ink)}
.pill.wait{background:#FFF7E6;color:#B45309;border-left-color:#F59E0B;border-right-color:#F59E0B}
.wait-dot{width:8px;height:8px;border-radius:50%;background:#F59E0B;animation:waitpulse 1.6s var(--e-io) infinite}
@keyframes waitpulse{50%{opacity:.35}}
.mflow{--ch:#25D366;--ch-d:#1EBE5A;list-style:none;margin:32px auto 0;padding:6px 24px;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 1px 2px rgba(15,11,31,.04),0 24px 48px -28px rgba(40,12,96,.25)}
.mflow.ch-tg{--ch:#2AABEE;--ch-d:#1C93D2}
.mflow.ch-sms{--ch:#0A84FF;--ch-d:#0071E3}
.mstep{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--hair)}
.mstep:last-child{border-bottom:0}
.mnum{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--violet-d);background:var(--tint);border:1px solid rgba(109,40,217,.15);font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.mstep:first-child .mnum{background:var(--violet);color:#fff;border-color:var(--violet)}
.tapped .mstep:first-child .mnum{background:#16A34A;border-color:#16A34A}
.mbody h2{font-size:19px;letter-spacing:-.02em;margin:4px 0 12px}
.mbody .mnote{font-size:14px;color:var(--muted);margin-top:10px}
.ch-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border-radius:999px;background:var(--ch);color:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 22px -12px var(--ch);transition:transform .2s var(--e-out),background .2s}
.ch-btn:hover{background:var(--ch-d);transform:translateY(-1px)}
.ch-btn:active{transform:scale(.98)}
.ch-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 var(--ch);animation:chring 2.2s var(--e-out) infinite}
@keyframes chring{0%{box-shadow:0 0 0 0 var(--ch);opacity:.45}70%,100%{box-shadow:0 0 0 12px var(--ch);opacity:0}}
.tapped .ch-btn::after{animation:none}
.ch-ic{width:24px;height:24px;flex:none}
.missing{display:none}
.no-contact .ch-btn{background:#CBC7D8;box-shadow:none;cursor:not-allowed}
.no-contact .ch-btn::after{display:none}
.no-contact .missing{display:block;color:var(--wait)}
.compose{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:24px;background:#F2F1F7;border:1px solid var(--line)}
.compose-txt{flex:1;font-size:15px;line-height:1.45;color:var(--ink);padding:4px 0}
.compose-send{width:36px;height:36px;border-radius:50%;background:var(--ch);color:#fff;display:grid;place-items:center;flex:none}
.compose-send svg{width:17px;height:17px;fill:currentColor}
.ty-why{max-width:520px;margin:26px auto 0;text-align:center;font-size:14.5px;color:var(--body)}
.ty-alt{max-width:520px;margin:10px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.ty-alt b{color:var(--ink);white-space:nowrap}
@media(max-width:640px){.ty2{padding:28px 0 64px}.mflow{padding:2px 18px;margin-top:24px;border-radius:20px}.mstep{gap:14px;padding:18px 0}}

/* ---------- Legal pages ---------- */
.legal{padding:56px 0 96px}
.legal .narrow{max-width:800px}
.legal h1{font-size:40px;margin:14px 0 10px}
@media(min-width:768px){.legal h1{font-size:52px}}
.legal .upd{font-size:14px;color:var(--muted);margin-bottom:28px}
.legal .sum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 36px}
@media(max-width:640px){.legal .sum{grid-template-columns:1fr}}
.legal .sum div{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.legal .sum b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.legal .sum p{font-size:14.5px;margin:0}
.toc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-bottom:40px}
.toc b{display:block;color:var(--ink);margin-bottom:10px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px;font-size:14.5px}
@media(max-width:640px){.toc ol{columns:1}}
.toc li{padding:3px 0}
.toc a:hover{color:var(--violet)}
.legal h2{font-size:24px;letter-spacing:-.03em;margin:44px 0 12px;scroll-margin-top:100px}
.legal h3{font-size:17px;margin:22px 0 8px;letter-spacing:-.02em}
.legal p,.legal li{font-size:15.5px;line-height:1.7}
.legal p{margin:0 0 12px}
.legal ul{padding-left:20px;margin:0 0 12px}
.legal li{margin-bottom:6px}
.legal a{color:var(--violet-d);text-decoration:underline;text-underline-offset:2px}
.legal b{color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:var(--soft)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:8px 0 16px}
.tbl-wrap .tbl{margin:0}
.tbl-wrap .tbl tr:last-child td{border-bottom:0}

/* Section reveal: one calm motion, off for reduced motion */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out),transform .9s var(--e-expo)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .stage .st-moon,.js .final .moon{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(max-width:640px){
  .wrap{padding:0 16px}
  .sec{padding:80px 0}
  .sec.tight{padding:64px 0}
  .head{margin-bottom:40px}
  .duo-c{padding:24px}
  .final{padding:80px 20px;margin:0 8px}
}