/* Layout: a review sheet. Journey strip, then one browser frame per direction with screen tabs, then sign-in and admin. Single light look for the sheet; each portal direction carries its own palette. */
:root{--page:#ECEEEC;--ink:#14171A;--mu:#4E565E;--mu2:#7A838B;--ln:#DCE0DE;--plum:#302238;--red:#E1262D;--fb:Geist,-apple-system,system-ui,sans-serif;--fm:'Geist Mono',ui-monospace,monospace;color-scheme:light}
*{box-sizing:border-box}
body{background:var(--page);color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-block:48px 80px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ph h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;line-height:1.06;margin:0;text-wrap:balance}
.ph p{color:var(--mu);font-size:16px;line-height:1.6;max-width:76ch;margin:12px 0 0}
.journey{margin-top:36px}
.journey h2{font-size:13px;font-weight:500;color:var(--mu);margin:0 0 12px}
.journey ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:2px solid var(--ink)}
.journey li{padding:14px 14px 0 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.journey li span{font-family:var(--fm);font-size:12px;color:var(--red)}
.journey li b{font-size:15px}
.journey li small{font-size:13px;line-height:1.45;color:var(--mu)}
@media(max-width:900px){.journey ol{grid-template-columns:minmax(0,1fr)}.journey li{padding:12px 0;border-bottom:1px solid var(--ln);display:grid;grid-template-columns:28px 120px minmax(0,1fr);gap:8px;align-items:baseline}}
.opt{margin-top:52px}
.meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.meta .tag{font-family:var(--fm);font-size:12px;color:var(--mu);letter-spacing:.08em}
.meta h2{font-size:22px;margin:4px 0 0;font-weight:600;letter-spacing:-.01em}
.meta h2 em{font-style:normal;font-size:12px;font-weight:500;color:#fff;background:var(--ink);border-radius:999px;padding:3px 9px;margin-left:6px;vertical-align:3px}
.meta p{color:var(--mu);font-size:14.5px;line-height:1.55;margin:6px 0 0;max-width:70ch}
.sbtns{display:flex;gap:4px;background:#DDE1DF;border-radius:10px;padding:4px}
.sbtn{font:inherit;font-size:13px;font-weight:500;border:0;background:transparent;color:var(--mu);padding:8px 14px;border-radius:7px;cursor:pointer;min-height:36px}
.sbtn.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sbtn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.bf{margin-top:14px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 30px 60px -30px rgba(0,0,0,.4);background:#fff}
.bar{height:34px;background:#E3E6E4;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #D3D7D5}
.bar i{width:10px;height:10px;border-radius:50%;background:#C3C8C5}
.bar span{margin:0 auto;font-family:var(--fm);font-size:11px;color:var(--mu2)}
.vp{overflow-x:auto}
.scr-p{display:none;min-width:980px}
.scr-p.on{display:block}
.foot{margin-top:40px;color:var(--mu);font-size:13px}
.mono{font-family:var(--fm)}
/* WinLine wordmark, from the brand pack spec in StudioNav */
.wm{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-family:Arial,Helvetica,sans-serif;color:var(--wmc,#302238)}
.wm-n{display:flex;font-weight:750;letter-spacing:-.065em;line-height:1;font-size:22px}
.wm-l{position:relative;display:block;font-size:.84em;align-self:flex-start;padding-bottom:.19em}
.wm-l i{position:absolute;bottom:0;left:.055em;right:0;height:.11em;background:#E1262D;border-radius:999px}
.wm-s{font-weight:400;letter-spacing:.42em;padding-left:.42em;line-height:1.4;font-size:7px;margin-top:1px}
.eyebrow{font-size:12.5px;font-weight:500;color:var(--mu2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;background:var(--plum);color:#fff;font-weight:600;font-size:14.5px;text-decoration:none}
.btn.sm{height:38px;padding:0 16px;font-size:13.5px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ln)}
.btn.red{background:var(--red)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.fine{font-size:12px;line-height:1.5;color:var(--mu2);margin:10px 0 0}
.tag{font-size:12px;font-weight:500;border-radius:6px;padding:4px 9px;background:#EEF0EF;color:var(--mu);white-space:nowrap}
.t-now{background:#FDECEC;color:#B31E24}
.t-cmt{background:#FFF4DE;color:#8A5A00}
.fi{font-family:var(--fm);font-size:10px;font-weight:500;width:36px;height:44px;border-radius:5px;background:#F2F3F2;box-shadow:inset 0 0 0 1px var(--ln);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;color:var(--mu)}
/* timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:15px;top:16px;bottom:16px;width:2px;background:var(--ln)}
.st{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:12px 0}
.st .dot{width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--mu2);position:relative;z-index:1}
.st.done .dot{background:var(--plum);color:#fff;box-shadow:none}
.st.now .dot{background:#fff;color:var(--red);box-shadow:inset 0 0 0 2px var(--red),0 0 0 5px #FDECEC}
.st b{display:block;font-size:15px}
.st small{display:block;font-size:13px;color:var(--mu2);margin-top:2px}
.st.next b{color:var(--mu)}
/* ---- A: guided ---- */
.pa{background:#FAF9F7;min-height:640px}
.pa-top{display:flex;justify-content:space-between;align-items:center;padding:18px 40px;border-bottom:1px solid #ECEAE6;background:#fff}
.pa-who{font-size:13px;color:var(--mu)}.pa-who a{color:var(--mu)}
.pa-in{max-width:980px;margin:0 auto;padding:40px}
.pa-hero h1{font-size:40px;letter-spacing:-.035em;margin:8px 0 0;font-weight:700}
.pa-hero.sm h1{font-size:30px}
.pa-hero p{font-size:16px;color:var(--mu);margin:10px 0 0;max-width:56ch;line-height:1.55}
.pa-bar{height:6px;border-radius:3px;background:#ECEAE6;margin-top:22px;max-width:420px;overflow:hidden}
.pa-bar i{display:block;height:100%;background:var(--red);border-radius:3px}
.pa-pct{display:block;font-size:12.5px;color:var(--mu2);margin-top:8px}
.pa-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;margin-top:36px;align-items:start}
.pa-card{background:#fff;border-radius:16px;padding:26px;box-shadow:0 0 0 1px #ECEAE6,0 20px 40px -24px rgba(48,34,56,.25)}
.pa-card h2{font-size:22px;margin:6px 0 0;letter-spacing:-.02em}
.pa-card p{font-size:14.5px;color:var(--mu);line-height:1.55;margin:8px 0 18px}
.docs{list-style:none;margin:0 0 20px;padding:0}
.docs li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid #F0EEEA}
.docs b{display:block;font-size:14.5px}.docs small{display:block;font-size:12.5px;color:var(--mu2);margin-top:2px}
.sign{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;max-width:1060px}
.doc{background:#fff;border-radius:12px;box-shadow:0 0 0 1px #ECEAE6;overflow:hidden}
.doc-h{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #F0EEEA;font-size:13px}.doc-h span{color:var(--mu2)}
.doc-p{padding:34px 44px 40px;position:relative;min-height:440px}
.doc-p h4{font-size:16px;margin:0 0 16px}
.ln{height:8px;border-radius:4px;background:#EFEDE9;margin:0 0 10px}
.w9{width:94%}.w8{width:82%}.w7{width:70%}.w6{width:58%}.w5{width:44%}
.doc-p table{width:100%;border-collapse:collapse;font-size:13.5px;margin:18px 0 22px}
.doc-p td{padding:9px 0;border-bottom:1px solid #F0EEEA}.doc-p td:last-child{text-align:right;font-weight:500}
.cmt{position:absolute;right:16px;top:140px;font-size:11.5px;background:#FFF4DE;color:#8A5A00;border-radius:999px;padding:4px 10px}
.sig{background:#fff;border-radius:14px;padding:22px;box-shadow:0 0 0 1px #ECEAE6;display:flex;flex-direction:column;gap:12px}
.sig label,.fields label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--mu)}
.sig input,.fields input,.fields textarea,.lg-card input{font:inherit;font-size:14.5px;color:var(--ink);border:1px solid var(--ln);border-radius:9px;padding:10px 12px;background:#fff}
.pad{height:96px;border-radius:10px;border:1.5px dashed #D6D2CC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#FCFBFA}
.pad .scr{font-family:'Brush Script MT','Segoe Script',cursive;font-size:30px;color:var(--plum)}
.pad small{font-size:11px;color:var(--mu2)}
.chk{flex-direction:row!important;align-items:center;gap:8px!important;font-size:13px!important;color:var(--ink)!important}
.bill{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;margin-top:28px;align-items:start}
.inv{background:#fff;border-radius:14px;padding:24px;box-shadow:0 0 0 1px #ECEAE6}
.inv table{width:100%;border-collapse:collapse;font-size:14.5px}
.inv td{padding:12px 0;border-bottom:1px solid #F0EEEA}.inv td:last-child{text-align:right}
.inv .sub td{color:var(--mu)}.inv .tot td{font-weight:700;font-size:17px;border-bottom:0;padding-top:16px}
.dl{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--plum)}
.pay{background:#fff;border-radius:14px;padding:22px;box-shadow:0 0 0 1px #ECEAE6;display:flex;flex-direction:column;gap:10px}

.pay .popt{border-radius:10px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--ln)}
.pay .popt.on{box-shadow:inset 0 0 0 2px var(--plum);background:#FAF8FB}
.pay .popt b{display:block;font-size:14.5px}.pay .popt small{display:block;font-size:12.5px;color:var(--mu2);margin-top:2px}
/* ---- B: workspace ---- */
.pb{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:640px;background:#F6F7F6}
.pb-side{background:#fff;border-right:1px solid #E6E9E7;padding:22px 16px;display:flex;flex-direction:column;gap:22px}
.pb-side nav{display:flex;flex-direction:column;gap:2px}
.pb-side nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--mu);text-decoration:none}
.pb-side nav a.on{background:#F2EFF4;color:var(--plum);font-weight:600}
.pb-side nav em{font-style:normal;font-size:11px;font-weight:600;background:var(--red);color:#fff;border-radius:999px;padding:1px 7px}
.pb-acc{margin-top:auto;padding:12px;border-radius:10px;background:#F6F7F6}.pb-acc b{display:block;font-size:13.5px}.pb-acc small{font-size:12px;color:var(--mu2)}
.pb main{padding:30px 34px;display:flex;flex-direction:column;gap:20px;min-width:0}
.pb-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.pb-h h1{font-size:28px;letter-spacing:-.03em;margin:4px 0 0}
.pill{font-size:12.5px;font-weight:500;border-radius:999px;padding:5px 11px;background:#EEF0EF;color:var(--mu);white-space:nowrap}
.p-amber{background:#FFF4DE;color:#8A5A00}
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi div{background:#fff;border-radius:12px;padding:16px;box-shadow:0 0 0 1px #E6E9E7}
.kpi small{font-size:12px;color:var(--mu2)}.kpi b{display:block;font-size:24px;letter-spacing:-.02em;margin-top:4px}.kpi span{font-size:12.5px;color:var(--mu2)}
.pb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.box{background:#fff;border-radius:12px;padding:20px;box-shadow:0 0 0 1px #E6E9E7}
.box h3{font-size:15px;margin:0 0 12px}
.tasks{list-style:none;margin:0;padding:0}
.tasks li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #F0F2F1;font-size:14px}
.tasks small{font-size:12px;color:var(--mu2)}
.cb{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px #C8CDCA}
.cb.on{background:var(--plum);box-shadow:none;position:relative}.cb.on::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.msg{background:#F6F7F6;border-radius:12px;padding:12px 14px;margin-bottom:10px;max-width:92%}
.msg.me{background:#F2EFF4;margin-left:auto}
.msg b{font-size:12.5px}.msg p{margin:4px 0;font-size:14px;line-height:1.5}.msg small{font-size:11.5px;color:var(--mu2)}
.reply{border:1px solid var(--ln);border-radius:10px;padding:11px 12px;font-size:13.5px;color:var(--mu2)}
.steps6{display:flex;gap:6px}
.steps6 span{flex:1;font-size:12.5px;font-weight:500;color:var(--mu2);padding-top:10px;border-top:3px solid #E1E5E3}
.steps6 .d{color:var(--ink);border-top-color:var(--plum)}.steps6 .on{color:var(--red);border-top-color:var(--red)}
.radios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.radios label{border-radius:10px;padding:14px;box-shadow:inset 0 0 0 1px var(--ln);display:flex;flex-direction:column;gap:4px}
.radios label.on{box-shadow:inset 0 0 0 2px var(--plum);background:#FAF8FB}
.radios b{font-size:14.5px}.radios small{font-size:12.5px;line-height:1.45;color:var(--mu2)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.fields .w{grid-column:1/-1}
.fields textarea{min-height:70px;resize:none}
.act{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:500;color:var(--mu2);padding:0 0 10px}
.tbl td{padding:12px 0;border-top:1px solid #F0F2F1}.tbl a{color:var(--plum)}
.pm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}.pm small{grid-column:1;color:var(--mu2);font-size:12.5px}.pm a{grid-row:1/3;grid-column:2;color:var(--plum);font-size:13.5px}
.dl2{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;margin:0;font-size:14px}.dl2 dt{color:var(--mu2)}.dl2 dd{margin:0}
/* ---- C: deal room ---- */
.pc{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:640px;background:#141116;color:#F2EFF4;--wmc:#F2EFF4}
.pc .eyebrow{color:#A79DAE}
.pc-rail{background:#1B171E;border-right:1px solid #2A2430;padding:26px 24px;display:flex;flex-direction:column;gap:22px}
.pc-cl small{display:block;font-size:12px;color:#A79DAE}.pc-cl b{font-size:16px}
.ring{position:relative;width:96px;height:96px}.ring svg{width:100%;height:100%}.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.tl.dark::before{background:#2C2433}
.tl.dark .dot{background:#1B171E;box-shadow:inset 0 0 0 1.5px #3A3140;color:#8D8294}
.tl.dark .done .dot{background:#F2EFF4;color:#1B171E;box-shadow:none}
.tl.dark .now .dot{background:#1B171E;box-shadow:inset 0 0 0 2px #E1262D,0 0 0 5px rgba(225,38,45,.18);color:#E1262D}
.tl.dark small{color:#8D8294}.tl.dark .next b{color:#A79DAE}
.pc-contact{margin-top:auto;padding-top:16px;border-top:1px solid #2A2430}.pc-contact small{display:block;font-size:12px;color:#8D8294}.pc-contact b{display:block;font-size:14.5px;margin-top:2px}.pc-contact span{font-size:12.5px;color:#A79DAE}
.pc main{padding:44px 48px;min-width:0}
.pc h1{font-size:40px;letter-spacing:-.035em;margin:8px 0 0;font-weight:700;max-width:18ch}
.lead{font-size:16px;line-height:1.6;color:#C9C0CF;max-width:58ch;margin:12px 0 0}
.cdocs{display:flex;flex-direction:column;gap:10px;margin-top:28px;max-width:720px}
.cdocs article{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;background:#1E1A22;border-radius:12px;padding:14px 16px;box-shadow:inset 0 0 0 1px #2C2433}
.cdocs b{display:block;font-size:15px}.cdocs small{display:block;font-size:12.5px;color:#A79DAE;margin-top:2px}
.pc .fi{background:#2A2430;box-shadow:none;color:#C9C0CF}
.pc .tag{background:#2A2430;color:#C9C0CF}.pc .t-now{background:rgba(225,38,45,.16);color:#FF8A8E}.pc .t-cmt{background:rgba(245,184,61,.14);color:#F5C66B}
.cnext{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px;max-width:720px;padding-top:20px;border-top:1px solid #2A2430}
.cnext b{font-size:15px}.cnext p{margin:4px 0 0;font-size:13.5px;color:#A79DAE}
.pc-doc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.doc.dark{background:#1E1A22;box-shadow:inset 0 0 0 1px #2C2433}.doc.dark .doc-h{border-bottom-color:#2C2433}.doc.dark .doc-h span{color:#8D8294}
.doc.dark .ln{background:#2C2433}.doc.dark .ln.hl{background:rgba(245,184,61,.28)}
.thread{background:#1E1A22;border-radius:14px;padding:18px;box-shadow:inset 0 0 0 1px #2C2433;display:flex;flex-direction:column;gap:10px}
.thread .msg{background:#2A2430;max-width:none}.thread .msg.them{background:#33283B}.thread .msg small{color:#8D8294}
.pc .btn.ghost{color:#F2EFF4;box-shadow:inset 0 0 0 1px #3A3140}
.cbill{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin-top:26px;align-items:start;max-width:900px}
.inv.dark,.pay.dark{background:#1E1A22;box-shadow:inset 0 0 0 1px #2C2433}
.inv-h{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}.inv-h span{color:#8D8294}
.inv.dark td{border-bottom-color:#2C2433}.inv.dark .sub td{color:#A79DAE}
.pay.dark .popt{box-shadow:inset 0 0 0 1px #3A3140}.pay.dark .popt.on{box-shadow:inset 0 0 0 2px #E1262D;background:rgba(225,38,45,.06)}.pay.dark small,.pay.dark .fine{color:#8D8294}
/* login + admin */
.login{min-height:560px;display:flex;align-items:center;justify-content:center;background:#FAF9F7;background-image:radial-gradient(#E6E2DC 1px,transparent 1.2px);background-size:22px 22px}
.lg-card{width:380px;background:#fff;border-radius:18px;padding:32px;box-shadow:0 0 0 1px #ECEAE6,0 30px 60px -30px rgba(48,34,56,.3);display:flex;flex-direction:column;gap:14px}
.lg-card h1{font-size:24px;margin:10px 0 0;letter-spacing:-.02em}.lg-card p{margin:0;font-size:14px;color:var(--mu);line-height:1.5}
.lg-card label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--mu)}
.toggles{list-style:none;margin:0;padding:0}.toggles li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #F0F2F1;font-size:14px}
.sw{width:34px;height:20px;border-radius:999px;background:#D5DAD7;position:relative;flex:none}.sw.on{background:var(--plum)}.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff}.sw.on::after{left:16px}
.act2{list-style:none;margin:0;padding:0}.act2 li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid #F0F2F1;font-size:13.5px}.act2 .mono{font-size:12px;color:var(--mu2)}

/* plan screen */
.plan{display:flex;flex-direction:column;gap:22px}
.pb main .plan{padding:0}
.pl-h h1{font-size:30px;letter-spacing:-.02em;margin:6px 0 6px}.pl-h p{margin:0;color:var(--mu);font-size:15px}
.pl-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}
.pl-inc h3,.pl-box h3{font-size:13px;font-weight:500;color:var(--mu);margin:0 0 10px}
.pl-inc ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.pl-inc li{padding:12px 0;border-bottom:1px solid var(--ln);display:flex;flex-direction:column;gap:2px}
.pl-inc li b{font-size:14.5px}.pl-inc li small{font-size:13px;color:var(--mu);line-height:1.45}
.pl-r{display:flex;flex-direction:column;gap:12px}
.pl-box,.pl-sum{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 0 0 1px #ECEAE6}
.pl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pl-k{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.pl-row b{font-size:16px}.pl-p{font-size:22px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}.pl-p small{font-size:13px;font-weight:500;color:var(--mu2)}
.pl-set{margin:12px 0 0;padding:0 0 0 18px;font-size:13.5px;color:var(--mu);line-height:1.7}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:14px 0 8px;padding:4px;border-radius:10px;background:#F1F2F0}
.seg button{font:inherit;font-size:13.5px;font-weight:500;border:0;border-radius:7px;padding:9px 8px;background:transparent;color:var(--mu);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pl-note{margin:0;font-size:13px;color:var(--mu)}
.pl-sum{display:flex;flex-direction:column;gap:10px;font-size:14px;background:#FAF8FB;box-shadow:inset 0 0 0 1px #E6E0EA}
.pl-sum .tot{font-weight:700;font-size:16px;padding-top:10px;border-top:1px solid #E6E0EA}.pl-sum .tot small{font-weight:400;color:var(--mu2);font-size:12px}
.pl-sum .nx{color:var(--mu);font-size:13px}.pl-sum .btn{margin-top:6px;text-align:center}
[hidden]{display:none!important}
.plan.dark .pl-h p,.plan.dark .pl-inc li small,.plan.dark .pl-set,.plan.dark .pl-note,.plan.dark .pl-sum .nx,.plan.dark .pl-inc h3{color:#A79DAE}
.plan.dark .pl-inc ul{border-top-color:#F2EFF4}.plan.dark .pl-inc li{border-bottom-color:#2C2433}
.plan.dark .pl-box,.plan.dark .pl-sum{background:#1E1A22;box-shadow:inset 0 0 0 1px #2C2433}
.plan.dark .pl-sum .tot{border-top-color:#2C2433}
.plan.dark .seg{background:#141116}.plan.dark .seg button{color:#A79DAE}.plan.dark .seg button.on{background:#2C2433;color:#F2EFF4;box-shadow:none}
.plan.dark .pl-p small{color:#8D8294}

/* training */
.train{display:flex;flex-direction:column;gap:22px}
.tr-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px;align-items:start}
.tr-l h3{font-size:13px;font-weight:500;color:var(--mu);margin:0 0 10px}.tr-l h3+*{margin-bottom:20px}
.train .radios{display:flex;flex-direction:column;gap:8px}
.train .radios label{display:block;background:#fff;border-radius:10px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--ln);cursor:pointer}
.train .radios label.on{box-shadow:inset 0 0 0 2px var(--plum);background:#FAF8FB}
.train .radios b{display:block;font-size:14.5px}.train .radios small{display:block;font-size:12.5px;color:var(--mu2);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:13px;padding:6px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln)}.chip.add{color:var(--mu);box-shadow:inset 0 0 0 1px dashed var(--ln);border:1px dashed #C9CEC9;box-shadow:none;background:transparent}
.tr-n{font-size:13px;color:var(--mu);margin:0;padding-top:12px;border-top:1px solid var(--ln)}
.tr-c{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 0 0 1px #ECEAE6;display:flex;flex-direction:column;gap:14px}
.cal-h{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.cal-k{font-size:12px;color:var(--mu2);display:flex;align-items:center;gap:6px}.cal-k i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-left:8px}
.k-av{background:#EFE9F3;box-shadow:inset 0 0 0 1px var(--plum)}.k-gl{background:var(--red)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.cal em{font-style:normal;font-family:var(--fm);font-size:11px;color:var(--mu2);padding-bottom:4px}
.cal span,.cal button{height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font:inherit;font-size:13.5px;border:0;padding:0}
.cal .na{color:#B4BAB6}.cal .we{color:#D0D4D1}
.cal .av{background:#EFE9F3;color:var(--plum);font-weight:600;cursor:pointer}.cal .av:hover{box-shadow:inset 0 0 0 1px var(--plum)}
.cal .av.sel{background:var(--plum);color:#fff}
.cal .gl{background:var(--red);color:#fff;font-weight:600}
.slots{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #F0EEEA;flex-wrap:wrap}
.sl-d{font-size:14px;font-weight:600}.sl-r{display:flex;gap:6px}
.sl-r button{font:inherit;font-family:var(--fm);font-size:13px;padding:8px 12px;border-radius:8px;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);cursor:pointer;color:var(--ink)}
.sl-r button.on{background:var(--plum);color:#fff;box-shadow:none}.sl-r button:disabled{color:#C3C8C4;text-decoration:line-through;cursor:default}
.tr-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#FAF8FB;border-radius:10px;padding:12px 14px;box-shadow:inset 0 0 0 1px #E6E0EA}
.tr-sum b{display:block;font-size:15px}.tr-sum small{display:block;font-size:12.5px;color:var(--mu)}
.tr-c .fine{margin:0}
.train.dark .pl-h p,.train.dark .tr-l h3,.train.dark .tr-n,.train.dark .tr-sum small,.train.dark .tr-c .fine{color:#A79DAE}
.train.dark .radios label,.train.dark .chip{background:#1E1A22;box-shadow:inset 0 0 0 1px #3A3140;color:#F2EFF4}
.train.dark .radios label.on{box-shadow:inset 0 0 0 2px #E1262D;background:rgba(225,38,45,.06)}.train.dark .radios small{color:#8D8294}
.train.dark .chip.add{background:transparent;border-color:#3A3140;color:#8D8294;box-shadow:none}.train.dark .tr-n{border-top-color:#2C2433}
.train.dark .tr-c{background:#1E1A22;box-shadow:inset 0 0 0 1px #2C2433}
.train.dark .cal .na{color:#4E4555}.train.dark .cal .we{color:#3A3140}
.train.dark .cal .av{background:#2C2433;color:#F2EFF4}.train.dark .cal .av.sel{background:#F2EFF4;color:#141116}
.train.dark .slots{border-top-color:#2C2433}.train.dark .sl-r button{background:#1E1A22;box-shadow:inset 0 0 0 1px #3A3140;color:#F2EFF4}
.train.dark .sl-r button.on{background:#F2EFF4;color:#141116}.train.dark .sl-r button:disabled{color:#4E4555}
.train.dark .tr-sum{background:#141116;box-shadow:inset 0 0 0 1px #2C2433}.train.dark .k-av{background:#2C2433;box-shadow:inset 0 0 0 1px #8D8294}
.pb main .steps6+.train{margin-top:22px}

.vatc{display:flex;align-items:center;gap:10px}button.sw{border:0;padding:0;cursor:pointer}.sw::after{transition:left .15s}
.disc-c{flex-wrap:wrap}.pct{display:inline-flex;align-items:center;gap:3px;font-size:14px}
.pct input{width:52px;font:inherit;font-size:14px;padding:5px 6px;border-radius:7px;border:1px solid var(--ln);background:#fff;text-align:right}
.disc-c select{font:inherit;font-size:13px;padding:5px 6px;border-radius:7px;border:1px solid var(--ln);background:#fff;color:var(--ink)}
.disc-c :disabled{opacity:.45}
.inv .disc td{color:#1E7A4C}.inv .disc small{color:var(--mu2);font-size:12px;margin-left:4px}
.inv.dark .disc td{color:#6FD39C}.pl-sum .disc{color:#1E7A4C}.plan.dark .pl-sum .disc{color:#6FD39C}
.inv.dark td{color:#F2EFF4}.inv.dark .sub td{color:#A79DAE}.inv.dark .disc td{color:#6FD39C}.inv.dark .disc small{color:#8D8294}
.dnote{font-size:13px;color:var(--mu2)}
.pay .popt{cursor:pointer}
.pm-o{margin:10px 0 0;font-size:13px;color:var(--mu)}
.pms{display:flex;flex-wrap:wrap;gap:6px}
.pmc{font:inherit;font-size:12.5px;padding:5px 10px;border-radius:999px;border:0;cursor:pointer;background:#fff;color:var(--mu2);box-shadow:inset 0 0 0 1px var(--ln);text-decoration:line-through}
.pmc.on{background:#F3EFF6;color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum);text-decoration:none}
.pb-h .btn.ghost{margin-right:6px}
.hbtns{display:flex;gap:8px}.pb-h .hbtns .btn.ghost{margin:0}.inv td:last-child{white-space:nowrap;padding-left:16px}
.kf{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:4px}.kf small{color:var(--mu2);font-size:12px}
.fields select{font:inherit;font-size:14.5px;color:var(--ink);border:1px solid var(--ln);border-radius:9px;padding:10px 12px;background:#fff}
.admin .act{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.kf-n{font-size:13px;color:var(--mu)}
.admin main>.box{margin-top:16px}
.welc{margin-top:22px;padding:16px 18px;border-left:3px solid var(--red);background:#fff;border-radius:0 10px 10px 0}.welc p{margin:0 0 6px;font-size:14px;line-height:1.55}.welc small{font-size:12.5px;color:var(--mu2)}

/* ================= App layer (live portal) ================= */
html,body{margin:0}
body{background:#FAF9F7}
body.admin-body{background:#F6F7F6}
a{color:var(--plum)}
button{font:inherit}
.btn{border:0;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--plum);text-decoration:underline;cursor:pointer;font-size:inherit}
.linkbtn.danger{color:#B31E24}
.muted{color:var(--mu)}.small{font-size:12.5px}
.flash{background:#FFF4DE;color:#6B4700;border-radius:10px;padding:10px 14px;font-size:14px;margin:0 0 18px}
.err{background:#FDECEC;color:#9B1A1F;border-radius:9px;padding:9px 12px;font-size:13.5px;margin:0}
.devnote{background:#EEF6F0;color:#1E5B3A;border-radius:9px;padding:9px 12px;font-size:13.5px}
.t-ok{background:#E7F4EC;color:#1E6B42}
.p-ok{background:#E7F4EC;color:#1E6B42;text-decoration:none}
.p-bad{background:#FDECEC;color:#9B1A1F}
.wm-link{text-decoration:none;display:inline-flex}
input,select,textarea{font:inherit}
select{font-size:14px;border:1px solid var(--ln);border-radius:9px;padding:9px 10px;background:#fff;color:var(--ink)}
.fields select,.fields input,.fields textarea{width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--plum);outline-offset:1px}

/* login */
.login{min-height:100vh;padding:24px 16px}
.lg-card{width:100%;max-width:400px}
.lg-card .btn{width:100%}
.code{font-size:22px!important;letter-spacing:.3em;text-align:center}

/* customer shell */
.pa{min-height:100vh}
.pa-top{gap:20px;padding:16px 32px;position:sticky;top:0;z-index:5}
.pa-nav{display:flex;gap:4px;margin-right:auto;margin-left:24px}
.pa-nav a{font-size:14px;color:var(--mu);text-decoration:none;padding:8px 12px;border-radius:8px}
.pa-nav a.on{background:#F2EFF4;color:var(--plum);font-weight:600}
.pa-who{display:flex;gap:6px;align-items:center;margin:0}
.pa-who .linkbtn{color:var(--mu)}
.pa-in{padding:40px 32px 80px}
.pa-hero.sm{margin-bottom:24px}
.st a{text-decoration:none;color:inherit}.st a:hover b{text-decoration:underline}
.pa-card.wide{max-width:none}
.docs.big li{grid-template-columns:36px minmax(0,1fr) auto}
.docs a{text-decoration:none;color:inherit}
.docs .tag,.docs .btn{justify-self:end}
.crumb{margin:0 0 16px;font-size:14px}.crumb a{text-decoration:none}

/* plan */
.seg label{display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:500;border-radius:7px;padding:9px 8px;color:var(--mu);cursor:pointer;position:relative}
.seg label.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg:focus-within{outline:2px solid var(--plum);outline-offset:2px}
.pl-disc{margin:8px 0 0;font-size:13px;color:#1E7A4C}
.pl-sum .sub{color:var(--mu)}
.pl-r>.btn{width:100%}

/* document + signing */
.doc-p.of{min-height:0;padding:30px 36px}
.of-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #F0EEEA;font-size:14px}
.of-row span:first-child{color:var(--mu)}.of-row span:last-child{text-align:right;font-weight:500}
.doc-p.of p{font-size:13.5px;color:var(--mu);line-height:1.55;margin:14px 0 0}
.pdf{width:100%;height:70vh;min-height:480px;border:0;display:block;background:#F2F2F0}
.pad-x{padding:0 18px 14px}
.cthread{margin-top:22px}
.cthread h3{font-size:15px;margin:0 0 10px}
.msg.them{background:#F2EFF4}
.msg.resolved{opacity:.6}
.reply-f{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.reply-f textarea{border:1px solid var(--ln);border-radius:10px;padding:10px 12px;min-height:72px;resize:vertical;background:#fff}
.reply-f .btn{align-self:flex-end}
.sig{position:sticky;top:90px}
.sig .btn{width:100%}
.sig-img{width:100%;border-radius:10px;background:#FCFBFA;box-shadow:inset 0 0 0 1px #ECEAE6}
.pad-wrap{display:flex;flex-direction:column;gap:6px}
.pad-c{width:100%;height:130px;border-radius:10px;border:1.5px dashed #D6D2CC;background:#FCFBFA;touch-action:none;cursor:crosshair}
.pad-tools{display:flex;gap:12px;align-items:center;font-size:12.5px}.pad-tools small{margin-right:auto;color:var(--mu2)}

/* onboarding */
.steps6{margin-bottom:20px}
.steps6 a{flex:1;font-size:12.5px;font-weight:500;color:var(--mu2);padding-top:10px;border-top:3px solid #E1E5E3;text-decoration:none}
.steps6 a.d{color:var(--ink);border-top-color:var(--plum)}.steps6 a.on{color:var(--red);border-top-color:var(--red)}
.onb{max-width:880px}
.onb .muted{margin:0 0 6px;font-size:14px}
.radios label{cursor:pointer;position:relative;background:#fff}
.radios input{position:absolute;opacity:0;pointer-events:none}
.radios label:focus-within{outline:2px solid var(--plum);outline-offset:2px}
.radios.col{grid-template-columns:1fr}
.fields label small{font-weight:400;color:var(--mu2)}
.fields input[type=color]{height:44px;padding:4px}
.ulist{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.urow{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}
.urow input{border:1px solid var(--ln);border-radius:9px;padding:10px 12px;background:#fff;font-size:14.5px;min-width:0}
.logo-prev img{max-height:64px;max-width:240px}

/* training */
.train .radios label{display:block}
.fields1 textarea{width:100%;border:1px solid var(--ln);border-radius:10px;padding:10px 12px;min-height:72px;resize:vertical;background:#fff;margin-bottom:16px}
.cal-h .linkbtn{text-decoration:none;font-size:20px;padding:0 8px}
.booked{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:880px}
.booked h2{font-size:22px;margin:6px 0}

/* billing */
.inv .disc td{color:#1E7A4C}
.inv td:last-child{white-space:nowrap;padding-left:16px}
.bank{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;margin:4px 0 6px;font-size:14px}
.bank dt{color:var(--mu2)}.bank dd{margin:0;word-break:break-all}
.pay form .btn{width:100%}
.paid{font-size:14px;color:#1E6B42;background:#E7F4EC;border-radius:9px;padding:10px 12px;margin:0}
.inv-list{margin-top:28px}

/* admin */
.admin{min-height:100vh}
.pb-side{position:sticky;top:0;height:100vh}
.pb-acc{display:flex;flex-direction:column;gap:2px;margin-bottom:0}
.pb-acc .linkbtn{align-self:flex-start;font-size:12.5px;margin-top:6px}
.pb main{max-width:1180px}
.pb-h .eyebrow a{color:inherit}
.hbtns{display:flex;gap:8px;align-items:center}.hbtns form{margin:0}
.subnav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px}.subnav a{color:var(--mu);text-decoration:none}.subnav a:hover{color:var(--plum)}
.box{scroll-margin-top:16px}
.box-h{display:flex;justify-content:space-between;align-items:center;gap:12px}.box-h h3{margin:0}
.swl{display:inline-flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.sw-in{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;background:#D5DAD7;position:relative;margin:0;cursor:pointer;flex:none;transition:background .15s}
.sw-in::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw-in:checked{background:var(--plum)}.sw-in:checked::after{left:16px}
.sw-in:disabled{opacity:.4;cursor:not-allowed}
.toggles li{justify-content:space-between}
.marks{display:flex;gap:18px;margin-top:14px;padding-top:12px;border-top:1px solid #F0F2F1}
.f2{grid-template-columns:repeat(2,minmax(0,1fr))}.f3{grid-template-columns:repeat(3,minmax(0,1fr))}.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fields.inline{align-items:center;margin-top:14px}
.fields.inline.f3{grid-template-columns:1fr 1.3fr 1fr auto}
.fields.inline input{border:1px solid var(--ln);border-radius:9px;padding:9px 10px;background:#fff;font-size:14px;min-width:0}
.fields.up{grid-template-columns:1.3fr .7fr 1.3fr auto auto}
.drow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid #F0F2F1}
.drow .swl{min-width:190px}
.pct{display:inline-flex;align-items:center;gap:4px;font-size:14px}
.pct input{width:64px;font-size:14px;padding:6px 8px;border-radius:8px;border:1px solid var(--ln);background:#fff;text-align:right}
.prev{margin-top:10px;padding:12px 14px;border-radius:10px;background:#FAF8FB;box-shadow:inset 0 0 0 1px #E6E0EA;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.prev .disc{color:#1E7A4C}.prev .tot{font-weight:700;border-top:1px solid #E6E0EA;padding-top:8px}
.tbl td{vertical-align:top}
.tbl tr.muted td{opacity:.55}
.tbl form{margin:0;display:inline}
.cthread.adm{background:#FAFAF9;border-radius:10px;padding:12px;margin:4px 0 6px}
.onb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.onb-grid p{margin:8px 0 0;font-size:14px;line-height:1.5}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin:0 4px 0 6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
details.rec{display:inline-block;margin-right:10px}
details.rec[open]{display:block;margin-bottom:8px}
details.rec form{display:grid!important}
.act2 li{grid-template-columns:150px minmax(0,1fr)}
.archive{margin:8px 0 0;text-align:right}
.mailbody{white-space:pre-wrap;font-family:var(--fm);font-size:12.5px;background:#FAFAF9;border-radius:8px;padding:10px;margin:8px 0}
.stack{display:flex;flex-direction:column;gap:16px}
.stack .act{margin:0}

/* responsive */
@media (max-width:900px){
  .pa-top{padding:12px 16px;flex-wrap:wrap}
  .pa-nav{order:3;width:100%;margin:0;overflow-x:auto}
  .pa-in{padding:24px 16px 64px}
  .pa-hero h1{font-size:30px}
  .pa-grid,.sign,.bill,.pl-g,.tr-g{grid-template-columns:minmax(0,1fr)}
  .pa-grid{gap:24px}
  .sig{position:static}
  .radios,.urow{grid-template-columns:1fr}
  .fields,.f2,.f3,.f4,.kf,.fields.inline.f3,.fields.up{grid-template-columns:1fr}
  .steps6{overflow-x:auto}.steps6 a{min-width:96px}
  .booked{flex-direction:column;align-items:flex-start}
  .pb{grid-template-columns:1fr}
  .pb-side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:12px 16px}
  .pb-side nav{flex-direction:row}
  .pb-acc{margin-left:auto;padding:8px}
  .pb main{padding:20px 16px}
  .pb-two,.onb-grid{grid-template-columns:1fr}
  .pb-h{flex-direction:column;align-items:flex-start}
  .tbl{display:block;overflow-x:auto}
  .doc-p.of{padding:22px 18px}
}
.reply-f textarea{width:100%}
@media (max-width:900px){.pa-grid>.pa-card{order:-1}}

/* ================= v2: type, sign-in (C2), quote, invoice, library, support ================= */
:root{--fb:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;--fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;--fd:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif}
h1,h2,h3,.lf-h,.amt,.big,.pp-r b,.q-h b{font-family:var(--fd)}
h1{letter-spacing:-.025em}
.pa-hero h1{font-weight:700}
.eb,.k{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A9198;display:block}
.k{margin-bottom:4px}
.mono{font-family:var(--fm)}
.mut{color:#7A828A}.sm{font-size:12.5px}
.btn.wide{width:100%}
.pill.ok{background:#E3F2E9;color:#1E6B42}.pill.amber{background:#FFF1D6;color:#8A5A00}.pill.red{background:#FDE7E8;color:#B31E24}
.wm-n{font-size:21px}

/* sign-in */
body.auth-body{background:#FAF9F7}
.auth{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.au-top{display:flex;justify-content:space-between;align-items:center;padding:28px 40px;position:relative;z-index:1}
.au-help{font-size:13px;color:#7A828A}.au-help a{color:#14171A}
.au-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:0 40px 200px;max-width:1100px;width:100%;margin:0 auto;position:relative;z-index:1}
.au-form{display:flex;justify-content:center}
.lf{width:100%;max-width:380px}
.st{display:flex;flex-direction:column;gap:14px;animation:stIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes stIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lf-h{font-weight:700;font-size:44px;letter-spacing:-.025em;line-height:1.04;margin:0;color:#14171A;max-width:11ch}
.lf-p{margin:0;font-size:15px;line-height:1.55;color:#5A6168}.lf-p b{color:#14171A;font-weight:600}
.lf-l{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:500;color:#5A6168;margin-top:6px}
.lf-in{font:inherit;font-size:16px;color:#14171A;background:#fff;border:1px solid #DCDFDD;border-radius:12px;height:52px;padding:0 16px;outline:none;transition:border-color .2s,box-shadow .2s}
.lf-in:focus{border-color:#302238;box-shadow:0 0 0 4px rgba(48,34,56,.12)}
.lf-b{position:relative;overflow:hidden;font:inherit;font-size:15.5px;font-weight:600;height:52px;border:0;border-radius:12px;background:#14171A;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .15s ease}
.lf-b i{font-style:normal;transition:transform .25s cubic-bezier(.2,.8,.2,1)}.lf-b:hover i{transform:translateX(4px)}.lf-b:active{transform:scale(.985)}
.lf-b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%)}
.lf-b.busy::after{animation:shimmer 1s linear infinite}.lf-b.busy span{opacity:.75}
@keyframes shimmer{to{transform:translateX(120%)}}
.lf-f{margin:2px 0 0;font-size:13px;color:#7A828A}.lf-f a{color:#14171A}
.lf-back{align-self:flex-start;font-size:13px;color:#5A6168;text-decoration:none}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:6px}
.otp input{font-family:var(--fm);font-size:24px;font-weight:500;text-align:center;height:60px;border-radius:12px;border:1px solid #DCDFDD;background:#fff;color:#14171A;outline:none;min-width:0;width:100%;padding:0;transition:border-color .2s,box-shadow .2s}
.otp input:focus{border-color:#302238;box-shadow:0 0 0 4px rgba(48,34,56,.12)}
.otp input.fill{animation:pop .22s ease}@keyframes pop{50%{transform:scale(1.07)}}
.otp.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.au-side{border-left:1px solid #E6E3DE;padding-left:40px}
.au-eye{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9AA1A7}
.au-line{list-style:none;margin:18px 0 0;padding:0;position:relative}
.au-line::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:#E6E3DE}
.au-line::after{content:"";position:absolute;left:7px;top:10px;width:2px;height:calc(100% - 20px);background:#E1262D;transform-origin:top;transform:scaleY(0);animation:grow 2.4s .4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes grow{to{transform:scaleY(1)}}
.au-line li{position:relative;display:grid;grid-template-columns:16px auto 1fr;align-items:baseline;gap:0 16px;padding:11px 0;opacity:0;animation:up .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.4s + var(--i) * .4s)}
@keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.au-line .dot{width:12px;height:12px;margin-left:2px;border-radius:50%;background:#FAF9F7;box-shadow:inset 0 0 0 2px #D4D0CA;align-self:center;position:relative;z-index:1;animation:lit .3s forwards;animation-delay:calc(.55s + var(--i) * .4s)}
@keyframes lit{to{background:#E1262D;box-shadow:0 0 0 4px rgba(225,38,45,.14)}}
.au-line b{font-family:var(--fd);font-weight:600;font-size:17px;letter-spacing:-.02em;color:#14171A}
.au-line small{font-size:13px;color:#8A9198}
.au-sky{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:900px;aspect-ratio:1600/340;pointer-events:none}
.sky{position:absolute;inset:0}.sky svg{width:100%;height:100%}
.au-sky .base{color:#1F2328;opacity:.36}
.au-sky .base path,.au-sky .base circle{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.9s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--d,0s) * .8 + .3s)}
.au-sky .red path,.au-sky .red circle{stroke:#E1262D;stroke-dasharray:.09 1;stroke-dashoffset:.09;animation:trace 1.9s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--d,0s) * .8 + .3s)}
.au-sky .scan{-webkit-mask:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent) no-repeat;mask:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent) no-repeat;-webkit-mask-size:26% 100%;mask-size:26% 100%;-webkit-mask-position:-30% 0;mask-position:-30% 0;animation:scan 6s 3s ease-in-out infinite}
.au-sky .scan path,.au-sky .scan circle{stroke:#E1262D;stroke-opacity:.85}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes trace{0%{stroke-dashoffset:.09;opacity:1}85%{stroke-dashoffset:-.91;opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes scan{0%{-webkit-mask-position:-30% 0;mask-position:-30% 0}40%,100%{-webkit-mask-position:130% 0;mask-position:130% 0}}
@media (max-width:820px){
  .au-top{padding:20px}.au-help{display:none}
  .au-body{grid-template-columns:1fr;padding:6px 20px 110px;gap:28px;align-items:start}
  .lf-h{font-size:32px}
  .au-side{border-left:0;padding-left:0;border-top:1px solid #E6E3DE;padding-top:20px}
  .au-line li{padding:7px 0}.au-line small{display:none}
}
@media (prefers-reduced-motion:reduce){.auth *{animation-duration:.01ms!important;animation-delay:0s!important}}

/* portal shell */
.pa-nav{flex-wrap:nowrap}
.pa{display:flex;flex-direction:column}
.pa-in{flex:1;width:100%}
.pa-foot{display:flex;align-items:center;gap:18px;padding:18px 32px;border-top:1px solid #ECEAE6;font-size:13px;background:#fff}
.pa-foot a{color:#5A6168;text-decoration:none}.pa-foot a:hover{color:#14171A}.pa-foot .sp{flex:1}
.svc{display:inline-flex;align-items:center;gap:8px}
.sdot{width:8px;height:8px;border-radius:50%;background:#2E9E5B;box-shadow:0 0 0 3px rgba(46,158,91,.16);flex:none}
.lvl-degraded .sdot,.lvl-maintenance .sdot{background:#E0A100;box-shadow:0 0 0 3px rgba(224,161,0,.18)}
.lvl-outage .sdot{background:#E1262D;box-shadow:0 0 0 3px rgba(225,38,45,.18)}
.svc-bar{display:flex;align-items:center;gap:10px;justify-content:center;padding:10px 16px;font-size:13.5px;background:#FFF6E0;color:#6B4700}
.svc-bar.lvl-outage{background:#FDE7E8;color:#7F1519}.svc-bar a{color:inherit}
.svc-big{display:flex;align-items:center;gap:10px}
@media (max-width:900px){.pa-foot{flex-wrap:wrap;padding:16px}.pa-foot .sp{display:none}}

/* plan: quote */
.plan-wrap{display:flex;justify-content:center}
.plan-wrap.accepted{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.quote{width:100%;max-width:680px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px #ECEAE6,0 30px 60px -30px rgba(20,23,26,.25);padding:32px 36px}
.q-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:20px;border-bottom:2px solid #14171A}
.q-h>div:last-child{text-align:right}.q-h b{display:block;font-size:18px;margin-top:2px}.q-h small{color:#8A9198;font-size:12.5px}
.q-t{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 6px;padding:10px 10px 10px 16px;border-radius:12px;background:#14171A;color:#fff;font-family:var(--fd);font-weight:600;flex-wrap:wrap}
.q-pill{font-family:var(--fb);font-size:13px;font-weight:500;background:rgba(255,255,255,.12);border-radius:8px;padding:7px 12px}
.seg.dark{background:#2A2D31;margin:0;min-width:300px}.seg.dark label{color:#A4ABB2}.seg.dark label.on{background:#fff;color:#14171A}
.ql{width:100%;border-collapse:collapse;font-size:14.5px}
.ql td{padding:12px 0;border-bottom:1px solid #F0EEEA;vertical-align:top}.ql td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
.ql small{display:block;font-size:12.5px;color:#8A9198;margin-top:3px}
.ql .dc td{color:#1E7A4C}.ql .vt td{color:#7A828A}.ql .tt td{font-weight:700;font-size:17px;border-bottom:0;padding-top:16px}
.q-n{font-size:13.5px;color:#5A6168;margin:10px 0 0;line-height:1.5}
.q-f{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.plan-side{display:flex;flex-direction:column;gap:14px}
.dl3{display:grid;grid-template-columns:90px 1fr;gap:8px 12px;margin:10px 0 0;font-size:14px}.dl3 dt{color:#8A9198}.dl3 dd{margin:0}
.fl{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#5A6168;margin-top:12px}
.fl select,.fl textarea{font:inherit;font-size:14.5px;border:1px solid #DCDFDD;border-radius:10px;padding:10px 12px;background:#fff;color:#14171A;width:100%}
.plan-side form .btn{margin-top:12px;width:100%}
.mini{list-style:none;margin:0;padding:0}.mini li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #F0EEEA;font-size:14px}

/* invoice I1 */
.i1{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.paper{background:#fff;border-radius:6px;padding:36px 40px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 24px 50px -30px rgba(20,23,26,.35)}
.pp-h{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:22px;border-bottom:2px solid #14171A}
.pp-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.pp-r b{font-size:24px}
.pp-m{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px;margin:20px 0 10px}.pp-m b{display:block;font-size:14.5px}
.payp{background:#fff;border-radius:14px;padding:22px;box-shadow:0 0 0 1px #ECEAE6;display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
.payp form{margin:0}
.amt{font-weight:700;font-size:34px;letter-spacing:-.025em}
.bank{display:grid;grid-template-columns:96px 1fr;gap:10px;margin:0;font-size:14px;align-items:center}
.bank dt{color:#8A9198;font-size:12.5px}.bank dd{margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px;word-break:break-all}
.bank button{font:inherit;font-size:12px;font-weight:600;border:0;background:#F1F2F0;color:#14171A;border-radius:7px;padding:5px 9px;cursor:pointer;flex:none}
.tbl tr.sel td{background:#FAF8FB}
@media (max-width:900px){.i1,.plan-wrap.accepted{grid-template-columns:1fr}.paper{padding:24px 20px}.pp-m{grid-template-columns:1fr 1fr}.payp{position:static}.quote{padding:24px 20px}.seg.dark{min-width:0;width:100%}}

/* library */
.lib{display:flex;flex-direction:column;gap:14px;max-width:900px}
.dlist{list-style:none;margin:0;padding:0}
.dlist li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid #F0EEEA}
.dlist li:first-child{border-top:0}
.dlist b{display:block;font-size:14.5px}.dlist small{display:block;font-size:12.5px;color:#8A9198;margin-top:2px}.dlist a{text-decoration:none;color:inherit}
.dlist .acts{display:flex;gap:12px}.dlist .acts a{color:#302238;font-size:13.5px;font-weight:600;text-decoration:underline}
.empty{color:#8A9198;font-size:14px;padding:10px 0!important;display:block!important}

/* support */
.sp-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.newt{margin-bottom:16px;max-width:880px}
.radios.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tk-f{display:flex;gap:16px;font-size:13.5px;margin-bottom:8px}.tk-f a{color:#8A9198;text-decoration:none}.tk-f a.on{color:#14171A;font-weight:600}
.tks{list-style:none;margin:0;padding:0}
.tks li a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border-radius:10px;text-decoration:none;color:inherit}
.tks li a:hover{background:#FAFAF9}
.tks li.sel a{background:#F7F4F9;box-shadow:inset 3px 0 0 #302238}
.tks b{display:block;font-size:14.5px}.tks small{display:block;color:#8A9198;font-size:12.5px;margin-top:2px}
.tk-r{display:flex;gap:6px;flex:none}
.s1{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:14px;align-items:start}
.s1>.box:first-child .btn{margin-top:12px}
.th{display:flex;flex-direction:column;gap:12px}
.th-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid #F0EEEA}.th-h b{display:block;font-family:var(--fd);font-size:18px}.th-h small{color:#8A9198;font-size:12.5px}
.att{display:inline-block;font-size:12px;background:#fff;border-radius:6px;padding:4px 8px;box-shadow:0 0 0 1px #E6E3DE;margin:4px 8px 0 0;color:#14171A}
.rf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rf-row input[type=file]{font-size:12.5px}
.inl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#5A6168}
.resolve{margin:0;text-align:right;font-size:13px}
.adm-t .msg{max-width:80%}
.w-all{grid-column:1/-1}
@media (max-width:900px){.s1,.radios.r3{grid-template-columns:1fr}.sp-h{flex-direction:column;align-items:flex-start}}

/* updates + privacy */
.posts{list-style:none;margin:0;padding:0}
.posts li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid #F0EEEA}.posts li:first-child{border-top:0}
.posts .mono{font-size:12px;color:#8A9198;padding-top:3px}.posts b{font-family:var(--fd);font-size:16px;margin-right:8px}.posts p{margin:6px 0 0;color:#5A6168;line-height:1.55;font-size:14.5px;white-space:pre-line}
.pv{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:start}
.pv .box .btn{margin-top:12px}
.pv .box p.mut{margin:10px 0 0;line-height:1.5}
@media (max-width:900px){.pv{grid-template-columns:1fr}.posts li{grid-template-columns:1fr;gap:4px}}