/* Home page showcase: animated hero, "your month with us" and product mock-ups. Scoped to .sc. */
:root{--glow:rgba(14,90,107,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:rgba(95,183,201,.16)}}
:root[data-theme="dark"]{--glow:rgba(95,183,201,.16)}
.sc{margin-top:8px}
.sc h1,.sc h2,.sc h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.12;text-wrap:balance;margin:0}
.sc p{margin:0}
.sc .btn{display:inline-flex;align-items:center;gap:10px}
.sc-prog{position:fixed;left:0;top:0;height:3px;width:0;background:var(--signal);z-index:20;transition:width .1s}
.sc-wide{margin-inline:calc(50% - 50vw);padding-inline:max(16px,calc(50vw - 430px))}
.sc .eyebrow{font:500 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink)}
.sc .lede{font-size:1.125rem;max-width:58ch;color:var(--muted)}
.sc .btn{display:inline-flex;align-items:center;gap:10px;font:500 1rem var(--body);background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:10px;padding:12px 20px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.sc .btn .arr{display:inline-block;transition:transform .2s}
.sc .btn:hover .arr{transform:translateX(5px)}
.sc .btn:hover{box-shadow:0 6px 18px var(--glow)}
.sc .btn.ghost{background:transparent;color:var(--accent)}
.sc .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.sc .bar{height:4px;width:56px;background:var(--signal);border-radius:2px;margin-block:20px}
/* reveal on scroll: visible by default, only animated once JS adds .js */
.js .sc .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .sc .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .sc .rv{opacity:1;transform:none;transition:none}
.sc *{animation:none!important;transition:none!important}}
/* shared pieces */
.sc .grid{display:grid;gap:16px}
.sc .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sc .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sc .card{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:22px;box-shadow:var(--shadow);min-width:0}
.sc .card h3{font-size:1.3rem;margin-bottom:10px}
.sc .card ul{margin:0;padding-left:1.1em;display:grid;gap:6px;color:var(--muted)}
.sc .price{font:600 2.6rem var(--display);line-height:1;font-variant-numeric:tabular-nums}
.sc .price small{font:400 .9rem var(--body);color:var(--muted)}
.sc section.blk{margin-top:56px}
.sc section.blk>h2{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:20px}
/* spotlight: soft glow follows the cursor on a card (A, C) */
.scpack{background:var(--sheet);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);padding:22px;min-width:0;position:relative}
.scpack .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:8px}
.scpack .hd b{font:600 1.05rem var(--display)}
.scpack .hd span{font:500 .72rem var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sc .row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding-block:10px;border-bottom:1px dashed var(--rule);font-size:.95rem}
.sc .row .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--rule);display:grid;place-items:center;transition:background .3s,border-color .3s}
.sc .row .tick svg{width:12px;height:12px;stroke:var(--accent-ink);stroke-width:3;fill:none;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s .1s}
.sc .row.done .tick{background:var(--ok);border-color:var(--ok)}
.sc .row.done .tick svg{stroke-dashoffset:0}
.sc .row .who{font:500 .7rem var(--mono);color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.sc .row.done .who{color:var(--ok)}
.sc .sign{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sc .meter{flex:1;min-width:120px;height:6px;background:var(--rule);border-radius:3px;overflow:hidden}
.sc .meter i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .5s}
.sc .stamp{font:600 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink);border:2px solid var(--signal);border-radius:6px;padding:4px 10px;transform:rotate(-4deg) scale(1.6);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.sc .stamp.on{opacity:1;transform:rotate(-4deg) scale(1)}
@keyframes drift{to{transform:translate(12%,10%) scale(1.15)}}
/* ---------- D: Showcase (more motion, real product shots) ---------- */
.sc .progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:3px;width:0;background:var(--signal);z-index:20;transition:width .1s}
.schero{position:relative;border-radius:24px;padding:clamp(24px,5vw,56px);overflow:hidden;isolation:isolate;background:linear-gradient(135deg,var(--teal-100),var(--paper) 60%);border:1px solid var(--rule)}
.schero::before{content:"";position:absolute;width:55%;aspect-ratio:1;right:-12%;top:-30%;border-radius:50%;background:radial-gradient(circle,var(--teal-300),transparent 65%);opacity:.5;z-index:-1;animation:drift 16s ease-in-out infinite alternate}
.schero::after{content:"";position:absolute;width:40%;aspect-ratio:1;left:-8%;bottom:-35%;border-radius:50%;background:radial-gradient(circle,var(--signal),transparent 65%);opacity:.22;z-index:-1;animation:drift 20s ease-in-out infinite alternate-reverse}
.schero-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px;align-items:center}
.sc h1{font-size:clamp(2.1rem,5.5vw,3.5rem)}
.sc .word{display:inline-block;opacity:0;transform:translateY(.5em);animation:wordin .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wordin{to{opacity:1;transform:none}}
.sc .float{animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.sc .tl{position:relative;margin-top:56px;padding-left:36px}
.sc .tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--rule)}
.sc .tl .fill{position:absolute;left:11px;top:6px;width:2px;height:0;background:var(--accent);transition:height .15s}
.sc .stepD{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;align-items:center;padding-block:34px}
.sc .stepD::before{content:"";position:absolute;left:-33px;top:44px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--rule);transition:background .3s,border-color .3s,transform .3s}
.sc .stepD.in::before{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}
.sc .stepD .copy{min-width:0}
.sc .stepD .copy h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:8px 0 10px}
.sc .stepD .copy p{color:var(--muted);max-width:46ch}
.sc .who2{display:inline-block;font:500 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-top:14px}
.sc .who2.cl{background:var(--signal-100);color:var(--signal-ink)}
.sc .who2.us{background:var(--teal-100);color:var(--accent)}
/* mock window */
.sc .win{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;box-shadow:0 18px 44px rgba(20,34,46,.14);overflow:hidden;min-width:0;transition:transform .25s ease-out;will-change:transform}
.sc .win .bar2{display:flex;align-items:center;gap:6px;background:var(--paper);border-bottom:1px solid var(--rule);padding:9px 12px}
.sc .win .bar2 i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
.sc .win .bar2 b{margin-left:8px;font:500 .72rem var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .win .body{padding:18px;display:grid;gap:12px}
.sc .ex{display:block;font:500 .65rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:7px 18px;border-top:1px dashed var(--rule);background:var(--paper)}
.sc .fld label{display:block;font:500 .72rem var(--body);color:var(--muted);margin-bottom:3px}
.sc .fld .inp{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;font-size:.92rem;min-height:38px;background:var(--paper);display:flex;align-items:center;gap:2px}
.sc .fld .inp.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.sc .caret{display:none;width:1px;height:1em;background:var(--ink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sc .opts2{display:flex;gap:8px;flex-wrap:wrap}
.sc .opt{border:1px solid var(--rule);border-radius:999px;padding:5px 12px;font-size:.85rem;transition:background .25s,color .25s,border-color .25s}
.sc .opt.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sc .fbtn{justify-self:start;background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:9px 18px;font:500 .9rem var(--body);transition:transform .15s,opacity .3s}
.sc .fbtn.press{transform:scale(.94)}
.sc .toast{display:flex;align-items:center;gap:8px;background:var(--teal-100);color:var(--accent);border-radius:8px;padding:9px 12px;font-size:.88rem;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.sc .toast.on{opacity:1;transform:none}
.sc .chk{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;font-size:.9rem;padding-block:7px;border-bottom:1px dashed var(--rule)}
.sc .chk .t{width:20px;height:20px;border-radius:50%;border:2px solid var(--rule);display:grid;place-items:center;transition:background .3s,border-color .3s}
.sc .chk .t svg{width:11px;height:11px;stroke:var(--accent-ink);stroke-width:3;fill:none;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s .1s}
.sc .chk.done .t{background:var(--ok);border-color:var(--ok)}
.sc .chk.done .t svg{stroke-dashoffset:0}
.sc .chk em{font:500 .72rem var(--mono);font-style:normal;color:var(--muted);opacity:0;transition:opacity .3s}
.sc .chk.done em{opacity:1}
.sc .rec{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--paper);border-radius:10px;padding:12px;opacity:.35;transition:opacity .4s}
.sc .rec.on{opacity:1}
.sc .rec b{font:600 .8rem var(--mono);letter-spacing:.08em;color:var(--ok);border:2px solid var(--ok);border-radius:6px;padding:3px 10px}
.sc .btns{display:flex;gap:6px}
.sc .btns span{font:500 .78rem var(--body);border:1px solid var(--rule);border-radius:7px;padding:5px 10px;background:var(--sheet);transition:background .2s,color .2s,transform .15s}
.sc .btns span.hit{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:scale(.95)}
.sc .doc h4{font:600 1.05rem var(--display);margin:0}
.sc .doc .sub{font:500 .68rem var(--mono);color:var(--muted)}
.sc .kv2{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:.88rem}
.sc .kv2 dt{color:var(--muted)}
.sc .kv2 dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.sc .doc .sec{font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--signal-ink);margin-top:4px}
.sc .doc .ln{height:7px;border-radius:4px;background:var(--rule);opacity:.7}
.sc .sigrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.sc .sigrow svg{width:150px;height:46px;flex:none}
.sc .sigrow path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.sc .sigrow.go path{animation:sign 1.6s ease-out forwards}
@keyframes sign{to{stroke-dashoffset:0}}
.sc .rp{margin-top:10px;background:none;border:0;color:var(--accent);font:500 .8rem var(--body);cursor:pointer;text-decoration:underline;padding:0;justify-self:start}
@media (prefers-reduced-motion:reduce){.sc .mrow .fillm,.sc .mstep .dot{transition:none}
.sc .word{opacity:1;transform:none}
.sc .progress{display:none}}
/* month at a glance */
.sc .month{margin-top:48px}
.sc .month>h2{font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:6px}
.sc .month>p{color:var(--muted);max-width:56ch;margin-bottom:26px}
.sc .mrow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sc .mrow::before{content:"";position:absolute;left:12%;right:12%;top:27px;height:2px;background:var(--rule)}
.sc .mrow .fillm{position:absolute;left:12%;top:27px;height:2px;width:0;background:var(--accent);transition:width 2.6s ease-in-out}
.sc .mrow.go .fillm{width:76%}
.sc .mstep{position:relative;text-align:center;display:grid;gap:8px;justify-items:center;min-width:0}
.sc .mstep .dot{width:54px;height:54px;border-radius:50%;background:var(--sheet);border:2px solid var(--rule);display:grid;place-items:center;font:600 1.2rem var(--display);position:relative;z-index:1;transition:background .35s,border-color .35s,color .35s,transform .35s}
.sc .mrow.go .mstep .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1)}
.sc .mstep:nth-child(1) .dot{transition-delay:.2s}
.sc .mstep:nth-child(2) .dot{transition-delay:.9s}
.sc .mstep:nth-child(3) .dot{transition-delay:1.7s}
.sc .mstep:nth-child(4) .dot{transition-delay:2.5s}
.sc .mstep h3{font-size:1.1rem}
.sc .mstep p{color:var(--muted);font-size:.9rem;max-width:22ch}
.sc .mstep .who2{margin-top:2px}
@media (max-width:640px){.sc .mrow{grid-template-columns:1fr;gap:20px;padding-left:0}
.sc .mrow::before{left:26px;right:auto;top:26px;bottom:26px;width:2px;height:auto}
.sc .mrow .fillm{left:26px;top:26px;width:2px;height:0;transition:height 2.6s ease-in-out}
.sc .mrow.go .fillm{width:2px;height:calc(100% - 52px)}
.sc .mstep{grid-template-columns:54px 1fr;text-align:left;justify-items:start;column-gap:16px;align-items:center}
.sc .mstep .dot{grid-row:span 3}
.sc .mstep p{max-width:none}}
.sc .share{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.sc .share div{flex:1;min-width:220px;border-radius:12px;padding:14px 16px;font-size:.92rem}
.sc .share .y{background:var(--signal-100);color:var(--ink)}
.sc .share .w{background:var(--teal-100);color:var(--ink)}
.sc .share b{display:block;font:500 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.sc .share .y b{color:var(--signal-ink)}
.sc .share .w b{color:var(--accent)}
.sc .inp.on .caret{display:inline-block}