/* Onboarding v3 · live product mockups */
.obhr>.mapp,.bfv>.mapp{width:100%}
.mapp .obw{max-width:none}
.mapp-s{position:relative;overflow:hidden;margin:0 6px 6px;border-radius:9px;height:360px}
.mapp-in{position:absolute;left:0;top:0;width:960px;height:600px;transform-origin:0 0}
.mfd{width:960px!important;height:600px!important}
.mfd .fd-sb{width:190px}.mfd .fd-m{padding:22px 26px}.mfd .fd-top{margin-bottom:18px}.mfd .fd-s{width:150px}
.mfd .fd-k{gap:12px;margin-bottom:14px}.mfd .fd-k>div{padding:14px}.mfd .fd-c{padding:16px}.mfd .fd-ch{height:120px}
.mfd .fd-dlg{width:380px}
.mfd .prs{transform:scale(.95)}.mfd .ho-start.prs{transform:translate(-50%,-50%) scale(.95)}
.mfd .ho-wel{width:700px}
/* board */
.mtb{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.mtb .fd-tb{margin:0}
.mnew{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:linear-gradient(180deg,#FF8A2B,#F5610A);color:#fff;font-size:14px;font-weight:500;white-space:nowrap;transition:transform .12s}
.mb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mb-col{background:#eef0f3;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:340px}
.mb-col>small{font-size:12px;font-weight:600;color:#475569;padding:2px 4px;display:flex;gap:6px}.mb-col>small i{font-style:normal;color:#94a3b8}
.mb-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:transform .12s}
.mb-card b{font-size:13.5px;font-weight:500}
.mb-card>div{display:flex;align-items:center;justify-content:space-between}
.mav{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:600}
.mb-card.nw{animation:fdnw 2.4s ease}
/* reports */
.msub{font-size:14px;color:#64748b;margin-bottom:14px}
.mr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mr-t{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:5px;transition:border-color .3s,box-shadow .3s}
.mr-t.sel{border-color:#F5610A;box-shadow:0 0 0 3px rgba(245,97,10,.15)}
.mr-ch{height:110px;display:flex;align-items:flex-end;gap:8px;padding:10px;background:#f8fafc;border-radius:8px;margin-bottom:8px}.mr-ch i{flex:1;background:#cbd5e1;border-radius:4px 4px 0 0;transition:background .4s}
.mr-t.sel .mr-ch i{background:linear-gradient(0deg,#FF8A2B,rgba(245,97,10,.7))}
.mr-t b{font-size:14px;font-weight:600}.mr-t small{font-size:12px;color:#64748b}
.mr-u{align-self:flex-start;margin-top:8px;padding:6px 12px;border-radius:7px;border:1px solid #e2e8f0;font-size:12.5px;font-weight:500;transition:transform .12s,background .3s}
.mr-t.sel .mr-u{background:#1c2024;color:#fff;border-color:#1c2024}
/* settings */
.ms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start}
.ms-c{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:4px 16px}.ms-c>p{font-size:14px;font-weight:600;padding:12px 0 8px}
.ms-r{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #f1f5f9;font-size:13.5px}
.ms-r>span:first-child{color:#64748b;flex:1}.ms-r>b{font-weight:500}
.ms-r.im>span.ml{flex:none;width:32px;height:32px;border-radius:8px;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.ms-r.im>div{flex:1;min-width:0}.ms-r.im b{display:block;font-weight:500}.ms-r.im small{font-size:12px;color:#64748b}
.mbtn{padding:6px 12px;border-radius:7px;border:1px solid #e2e8f0;font-size:12.5px;font-weight:500}
/* billing */
.mp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.mp-c{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;transition:border-color .3s,box-shadow .3s,transform .12s}
.mp-c small{font-size:11.5px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.mp-c b{font-size:24px;font-weight:600}.mp-c b em{font-style:normal;font-size:13px;color:#94a3b8;font-weight:400}.mp-c span{font-size:12.5px;color:#64748b}
.mp-c.sel{border-color:#F5610A;box-shadow:0 0 0 3px rgba(245,97,10,.15)}
.mpay{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 18px 16px;width:60%}
.mpay>p{font-size:14px;font-weight:600}
.mpay label{display:block;font-size:12.5px;font-weight:500;margin:10px 0 4px;color:#475569}
.mpay .fd-in{font-family:ui-monospace,Menlo,monospace;font-size:13.5px}
.mpr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mtag{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 10px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#4F46E5;background:rgba(99,102,241,.12);padding:5px 7px;border-radius:5px;font-style:normal;opacity:0;transition:opacity .3s}.mtag.on{opacity:1}
.mpaybtn{display:flex;justify-content:center;margin-top:14px;padding:10px;border-radius:9px;background:#1c2024;color:#fff;font-size:14px;font-weight:600;transition:transform .12s}
/* overlays */
.mdock{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s,transform .4s}
.mdock.off{opacity:0;transform:translate(-50%,12px)}
.mdock .ho-link{margin:0}
.mfd .hpill{min-width:320px}
.mcap{display:none;max-width:460px;padding:10px 14px;border-radius:14px;font:400 15.5px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
.mcap.on{display:block;animation:fdin .3s ease}
.mcap small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:3px}
.mcap.a{background:rgba(20,20,20,.86);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mcap.u{background:#fff;color:#1c2024;border:1px solid #e2e8f0}
.mtoast{position:absolute;left:50%;top:16px;transform:translate(-50%,-10px);z-index:9;padding:9px 16px;border-radius:999px;background:#1c2024;color:#fff;font-size:13px;font-weight:500;opacity:0;transition:opacity .35s,transform .35s;white-space:nowrap}
.mtoast.on{opacity:1;transform:translate(-50%,0)}.mtoast::before{content:"✓";margin-right:8px;color:#4ade80}
.mcode{position:absolute;left:214px;right:24px;bottom:24px;z-index:8;background:#15161a;color:#e5e7eb;border-radius:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);opacity:0;transform:translateY(20px);transition:opacity .45s,transform .45s;overflow:hidden}
.mcode.on{opacity:1;transform:none}
.mcode-h{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.08);font:500 12px/1 ui-monospace,Menlo,monospace;color:#9ca3af}
.mcode-h b{font-weight:500;color:#e5e7eb;margin-right:auto}
.mcode-st{display:flex;align-items:center;gap:6px}.mcode-st::before{content:"";width:7px;height:7px;border-radius:50%;background:#f59e0b}.mcode-st.ok{color:#4ade80}.mcode-st.ok::before{background:#4ade80}
.mcode pre{margin:0;padding:14px 16px;height:210px;font:400 14px/1.6 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all;color:#e5e7eb}
.mrec{position:absolute;right:18px;top:72px;z-index:8;width:270px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 24px 50px -18px rgba(15,23,42,.35);padding:14px;opacity:0;transform:translateX(16px);transition:opacity .4s,transform .4s}
.mrec.on{opacity:1;transform:none}
.mrec-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;margin-bottom:10px}.mrec-h small{margin-left:auto;font-weight:400;color:#94a3b8;font-size:11.5px}
.mrec-l{display:flex;flex-direction:column;gap:6px}
.mrec-s{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:8px 10px;border-radius:8px;background:#f6f7f9;animation:fdin .35s ease}
.mrec-s .n{width:18px;height:18px;border-radius:50%;background:#1c2024;color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;flex:none}
.mrec-s>span:nth-child(2){flex:1;min-width:0}
.mchip{font-style:normal;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:999px;background:rgba(99,102,241,.12);color:#4F46E5;white-space:nowrap}.mchip.o{background:rgba(245,97,10,.12);color:#C2410C}
.mrec-f{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}.mrec-f span{padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:500;border:1px solid #e2e8f0}.mrec-f .mrec-fin{background:#1c2024;color:#fff;border-color:#1c2024;transition:transform .12s}
/* how it works stepper */
.obhw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);border-top:1px solid var(--ln)}
.obhl{display:flex;flex-direction:column;border-right:1px solid var(--ln)}
.obhl button{all:unset;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:30px 36px;border-bottom:1px solid var(--ln);transition:background .3s}
.obhl button:last-child{border-bottom:0}
.obhl .n{font:400 12px/1 var(--mono);color:var(--mu);padding-top:7px;transition:color .3s}
.obhl b{display:block;font-size:20px;font-weight:500;letter-spacing:-.015em}
.obhl .d{display:block;color:var(--mu);font-size:15.5px;line-height:1.5;margin-top:8px;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s,opacity .45s}
.obhl button.on{background:rgba(255,255,255,.65)}.obhl button.on .n{color:var(--ac)}.obhl button.on .d{max-height:140px;opacity:1}
.obhl button:not(.on):hover{background:rgba(255,255,255,.35)}
.obhr{display:grid;place-items:center;padding:56px 48px;min-height:640px}
/* analytics on view */
.obfn-r i::after,.obab i::after{animation:none!important;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.obfn:not(.in) .obfn-r i::after,.obfn:not(.in) .obab i::after{width:0!important}
@media (max-width:960px){.obhw{grid-template-columns:1fr}.obhl{border-right:0;border-bottom:1px solid var(--ln)}.obhl button{padding:18px 20px}.obhr{padding:20px 12px;min-height:0}.bfv{min-height:0}}

/* after onboarding (home dsplit pattern) */
.adv{display:grid!important;place-items:center;min-height:620px}
.apn{grid-area:1/1;width:100%;max-width:720px;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .45s,transform .45s;pointer-events:none;color:var(--ink)}
.apn.on{opacity:1;transform:none;pointer-events:auto}
.apn .card{max-width:none;padding:20px;border-radius:8px}
.apn .anh{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid rgba(20,20,18,.08)}.apn .anh>b{font-size:15px;font-weight:500;margin-right:auto}
.ab-v,.ab-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:center}
.ab-v{padding:14px 0 8px}.ab-v::before{content:""}
.ab-c{display:flex;flex-direction:column;gap:4px}.ab-c small{color:var(--mu)}.ab-c span{font-size:13.5px;font-weight:500}.ab-c.o small{color:var(--ac)}
.ab-r{padding:12px 0;border-top:1px solid rgba(20,20,18,.08);font-size:13.5px}
.ab-l{color:var(--mu)}.ab-a{font-size:20px;letter-spacing:-.02em;color:rgba(20,20,18,.5)}
.ab-b{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.02em;font-weight:500}.ab-b .chip{font-size:10.5px;letter-spacing:0;font-weight:400}
.ab-ch{margin-top:8px;padding:12px;border-radius:6px;background:rgba(255,255,255,.4)}
.ab-ch svg{display:block;width:100%;height:110px;overflow:visible}
.ab-ch polyline{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:600;stroke-dashoffset:600}
.ab-ch .c{stroke:rgba(20,20,18,.35)}.ab-ch .v{stroke:var(--ac)}
.apn.on .ab-ch polyline{animation:abd 1.8s .2s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes abd{to{stroke-dashoffset:0}}
.ab-lg{display:flex;align-items:center;gap:14px;margin-top:8px;font-size:12px}.ab-lg span{display:flex;align-items:center;gap:6px}.ab-lg .mo{margin-left:auto;color:var(--mu);font-size:10px}
.ab-lg i{width:14px;height:2.5px}.ab-lg i.c{background:rgba(20,20,18,.35)}.ab-lg i.v{background:var(--ac)}
.ab-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.ab-sig{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#1A7F4B}.ab-sig i{width:8px;height:8px;border-radius:50%;background:#1A7F4B;box-shadow:0 0 0 3px rgba(26,127,75,.2)}
.ab-f small{font-size:11.5px}
.ss-av{width:34px;height:34px;border-radius:50%;background:#ffedd5;color:#c2410c;font:500 11px/34px var(--mono);text-align:center;flex:none}
.ss-who{margin-right:auto;min-width:0}.ss-who b{display:block;font-size:14.5px;font-weight:500}.ss-who small{font-size:12px;color:var(--mu)}
.ss-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;padding-top:16px}
.ss-tl{display:flex;flex-direction:column;gap:2px}.ss-tl>small{color:var(--mu);margin-bottom:8px}
.ss-s{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:10px;padding:6px 0;position:relative;animation:qrin .4s backwards}
.apn:not(.on) .ss-s{animation:none}
.ss-s:nth-child(2){animation-delay:0.15s}.ss-s:nth-child(3){animation-delay:0.3s}.ss-s:nth-child(4){animation-delay:0.44999999999999996s}.ss-s:nth-child(5){animation-delay:0.6s}.ss-s:nth-child(6){animation-delay:0.75s}.ss-s:nth-child(7){animation-delay:0.8999999999999999s}
.ss-s i{grid-row:1/3;width:12px;height:12px;border-radius:50%;margin-top:3px;background:#1A7F4B}
.ss-s.q i{background:#6366f1}.ss-s.w i{background:var(--ac)}.ss-s.s i{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(20,20,18,.3)}
.ss-s span{font-size:13.5px;font-weight:500}.ss-s small{grid-column:2;font-size:11.5px;color:var(--mu)}.ss-s.w small{color:var(--ac)}
.ss-r{display:flex;flex-direction:column;gap:10px;min-width:0}
.ss-sum,.ss-q{padding:12px 14px;border-radius:6px;background:rgba(255,255,255,.5)}
.ss-sum small,.ss-q small{color:var(--mu)}.ss-sum p{font-size:13.5px;line-height:1.5;margin-top:6px}
.ss-q p{font-size:13px;margin-top:6px;line-height:1.45}.ss-q b{font-weight:500;margin-right:6px}
.ss-tags{display:flex;flex-wrap:wrap;gap:6px}
.ins-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;padding:16px 0}
.ins-g>div{display:flex;flex-direction:column;gap:10px}.ins-g .mo{color:var(--mu)}
.ins .ob2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 36px}.ins .ob2 span{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins .ob2 i::after{transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.apn:not(.on) .ins .ob2 i::after{width:0}
.ins .ob2.d i::after{background:var(--ink)}
.ins-s{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px;border-top:1px solid rgba(20,20,18,.08)}.ins-s>small{grid-column:1/-1;color:var(--mu)}
.ins-c{padding:12px 14px;border-radius:6px;background:rgba(20,20,18,.88);color:#fff}.ins-c b{font-size:13.5px;font-weight:500}.ins-c p{font-size:12.5px;line-height:1.45;margin-top:4px;color:rgba(255,255,255,.75)}
@media (max-width:960px){.adv{min-height:0;padding:14px!important}.ab-v,.ab-r{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr);font-size:12px}.ab-a,.ab-b{font-size:16px}.ab-b{flex-wrap:wrap;gap:4px}.ss-g,.ins-g,.ins-s{grid-template-columns:1fr}}

#atabs button.on::after{transition-duration:7s}

.ss-who small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}