/* ============ KNOWDE-INSPIRED DESIGN TOKENS ============
   White canvas · near-black type · violet primary · pill buttons ·
   tight grotesque display · hairline borders · generous whitespace */
:root{
  --ink:#131316; --ink2:#2A2A31; --mut:#6E6E78; --bg:#FFFFFF; --bg2:#F7F7F9;
  --purple:#7A2FF2; --purple-d:#6222CE; --purple-t:#F3EDFE; --purple-l:#E5D8FC;
  --line:#E8E8EC; --green:#0E8A54; --green-bg:#E9F7F0; --amber:#B96A00; --amber-bg:#FFF4E0;
  --red:#D6274A; --red-bg:#FDEBEF; --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.disp{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.02em;line-height:1.15}
h2{font-size:28px;font-weight:700}h3{font-size:17px;font-weight:700}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;width:100%;outline:none;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-t)}
label{font-size:12.5px;font-weight:600;color:var(--ink2);display:block;margin-bottom:6px}
.field{margin-bottom:15px}
.btn{border:none;border-radius:999px;padding:11px 22px;font-weight:600;font-size:14px;transition:.15s}
.btn-p{background:var(--purple);color:#fff}.btn-p:hover{background:var(--purple-d)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-o{background:#fff;border:1px solid var(--ink);color:var(--ink)}
.btn-o:hover{background:var(--bg2)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-sm{padding:7px 15px;font-size:13px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.pad{padding:24px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.tag-p{background:var(--purple-t);color:var(--purple)}.tag-g{background:var(--green-bg);color:var(--green)}
.tag-a{background:var(--amber-bg);color:var(--amber)}.tag-r{background:var(--red-bg);color:var(--red)}
.tag-n{background:var(--bg2);color:var(--mut)}
.mut{color:var(--mut)}.sm{font-size:12.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sb{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
a{color:var(--purple);font-weight:600;text-decoration:none}

/* ============ TOP BAR (Knowde: white, hairline, dark text) ============ */
/* flex-wrap:nowrap keeps everything on one line down to the hamburger breakpoint. .nav is the
   only item allowed to shrink (min-width:0) — if the 6 links don't fit, that strip scrolls
   horizontally on its own (scrollbar hidden) instead of the logo/mode/avatar wrapping or
   getting pushed off-screen. */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);padding:0 20px;height:64px;display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.logo{flex-shrink:0;font-family:'Inter Tight';font-weight:800;font-size:21px;letter-spacing:-.03em;display:flex;align-items:center;gap:9px;color:var(--ink)}
.logo .mark{width:30px;height:30px;border-radius:9px;background:var(--purple);display:grid;place-items:center;font-size:15px;color:#fff}
.nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}
.nav button{flex-shrink:0;background:none;border:none;color:var(--mut);font-weight:600;font-size:13.5px;padding:8px 11px;border-radius:999px;white-space:nowrap}
.nav button:hover{color:var(--ink)}
.nav button.on{color:var(--ink);background:var(--bg2)}
.navToggle{display:none;border:none;background:none;color:var(--ink);padding:8px;border-radius:10px;align-items:center;justify-content:center}
.navToggle:hover{background:var(--bg2)}
.nav .navOnly{display:none}
.mode{flex-shrink:0;display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:3px}
.mode button{border:none;background:none;color:var(--mut);font-weight:700;font-size:12px;padding:6px 14px;border-radius:999px;letter-spacing:.03em;white-space:nowrap}
.mode button.on{background:var(--ink);color:#fff}
.avatar{flex-shrink:0;width:34px;height:34px;border-radius:999px;background:var(--purple-t);color:var(--purple);display:grid;place-items:center;font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--purple-l)}
.topOnly{flex-shrink:0}
.logoutNavBtn{flex-shrink:0;width:34px;height:34px;border-radius:999px;background:none;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.logoutNavBtn:hover{background:var(--bg2);border-color:var(--red);color:var(--red)}

/* ============ SUPPORT CHAT ============ */
.chatNavBtn{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:999px;background:none;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.chatNavBtn:hover{background:var(--bg2)}
.chatNavBadge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.chatPanel{position:fixed;right:20px;bottom:20px;width:360px;max-width:calc(100vw - 32px);height:480px;max-height:calc(100vh - 100px);background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:0 20px 60px rgba(19,19,22,.22);display:flex;flex-direction:column;overflow:hidden;z-index:80;transition:none}
.chatPanelHead{background:var(--ink);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-start}
.chatPanelHead .mut{color:#B9B9C2}
.chatPanelHeadBtns{display:flex;align-items:center;gap:4px;flex-shrink:0}
.chatPanelExpand{background:none;border:none;color:#fff;opacity:.85;cursor:pointer;padding:5px;border-radius:8px;display:grid;place-items:center}
.chatPanelExpand:hover{opacity:1;background:rgba(255,255,255,.12)}
.chatPanelClose{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.chatPanelBody{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--bg2)}
.chatMsg{max-width:80%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;word-wrap:break-word}
.chatMsg.customer{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:4px}
.chatMsg.staff{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.chatMsg .chatMsgTime{display:block;margin-top:3px;font-size:10.5px;opacity:.7}
.chatPanelInput{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chatPanelInput input{flex:1}
/* Expanded = the floating widget becomes a full-page conversation instead of a small corner
   panel — same header/body/input structure, just filling the viewport, useful any time the
   360px widget feels cramped (long replies, attachments-heavy back-and-forth) and especially
   on a phone where the widget is already most of the screen. */
.chatPanel.expanded{right:0;left:0;top:0;bottom:0;width:auto;height:auto;max-width:none;max-height:none;border-radius:0;border:none;box-shadow:none;z-index:200}
.chatPanel.expanded .chatPanelBody{padding:16px calc(50% - 320px)}
.chatPanel.expanded .chatMsg{max-width:60%}
@media(max-width:820px){
  .chatPanel.expanded .chatPanelBody{padding:14px 16px}
  .chatPanel.expanded .chatMsg{max-width:82%}
}
@media(max-width:520px){
  .chatPanel{right:10px;left:10px;bottom:10px;width:auto;max-width:none}
}

.wrap{max-width:1140px;margin:0 auto;padding:28px 24px 64px}
.screen{display:none}.screen.on{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.crumb{font-size:12px;color:var(--mut);margin-bottom:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* ============ HERO (Knowde: huge tight headline on white) ============ */
.hero{padding:64px 0 44px;text-align:center}
.hero h1{font-size:58px;font-weight:800;letter-spacing:-.035em;line-height:1.05;max-width:820px;margin:18px auto 0}
.hero h1 em{font-style:normal;color:var(--purple)}
.hero p{color:var(--mut);margin:20px auto 28px;max-width:600px;font-size:17px}
.stats{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.stats .pill{border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:13.5px;font-weight:600}
.stats .pill b{color:var(--purple)}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.svc-head{margin:46px 0 22px;max-width:640px}
.svc-head h2{font-size:32px;margin-top:10px}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:38px}
.svc .card{padding:28px 26px;cursor:pointer;transition:.18s}
.svc .card:hover{border-color:var(--purple);box-shadow:0 10px 34px rgba(122,47,242,.09)}
.svc .ic{width:44px;height:44px;border-radius:12px;background:var(--purple-t);display:grid;place-items:center;margin-bottom:16px}
.svc .ic svg{width:22px;height:22px;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc h3{margin-bottom:7px;font-size:16.5px}
.svc .go{margin-top:14px;font-size:13px;font-weight:700;color:var(--purple)}
/* how it works */
.how{background:var(--ink);border-radius:24px;padding:46px;color:#fff;margin:8px 0 34px}
.how .eyebrow{color:#C9A8FF}
.how h2{font-size:30px;margin:10px 0 26px}
.howgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.howgrid .n{font-family:'Inter Tight';font-weight:800;font-size:14px;color:#C9A8FF;border:1px solid rgba(255,255,255,.25);border-radius:999px;width:34px;height:34px;display:grid;place-items:center;margin-bottom:12px}
.howgrid b{font-size:15px}
.howgrid p{color:#A9A9B4;font-size:13px;margin-top:5px}
/* routes */
.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}
.routes .card{padding:18px 20px}
.routes b{font-size:14.5px}
.databand{border:1px solid var(--line);border-radius:18px;padding:20px 26px;display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:34px;background:var(--bg2)}
.databand .item{font-size:13px;color:var(--mut)}
.databand .item b{color:var(--ink);display:block;font-size:14px}
/* trust list with svg icons */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.trust .t{display:flex;gap:12px;align-items:flex-start}
.trust .ti{width:36px;height:36px;border-radius:10px;background:var(--purple-t);display:grid;place-items:center;flex:none}
.trust .ti svg{width:18px;height:18px;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust .ti.warn{background:var(--amber-bg)}.trust .ti.warn svg{stroke:var(--amber)}
.trust b{font-size:13.5px;display:block}
.trust p{font-size:12.5px;color:var(--mut);margin-top:2px}
/* HS code recommendation dropdown */
.hswrap{position:relative}
.hsdrop{border:1px solid var(--purple-l);border-radius:14px;margin-top:8px;overflow:hidden;background:#fff;box-shadow:0 14px 40px rgba(122,47,242,.12)}
.hsdrop .hd{padding:9px 16px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);background:var(--purple-t)}
.hsopt{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);cursor:pointer;align-items:center}
.hsopt:hover{background:var(--bg2)}
.hsopt.pick{background:var(--purple-t)}
.hsopt b{font-size:13.5px}
.hsopt .sm{display:block}
/* charge applicability matrix */
.matrix td:last-child{text-align:right}
.na{color:var(--mut);text-decoration:none}
.na td{color:var(--mut);background:var(--bg2)}
.rline.off span,.rline.off b{color:#B9B9C2;text-decoration:line-through}
/* story */
.story{background:var(--bg2);border-radius:24px;padding:52px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin:14px 0 30px}
.story h2{font-size:34px;letter-spacing:-.03em}
.story .quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;position:relative}
.story .quote::before{content:'“';font-family:'Inter Tight';font-size:64px;color:var(--purple);position:absolute;top:-6px;left:18px;font-weight:800}
.story .quote p{padding-top:22px;font-size:15.5px}
.story .who{display:flex;gap:12px;align-items:center;margin-top:16px}

/* ============ CALCULATOR / RECEIPT ============ */
/* min-width:0 on the grid items: a 1fr track's implicit minimum is auto (its content's
   min-content size), not 0 — without this, a track whose content can't shrink below ~600px
   (long labels, an unbroken table row) forces the *whole page* wider than the viewport instead
   of wrapping, which is what was blowing out horizontal layout on every phone-width screen. */
.calcgrid{display:grid;grid-template-columns:1fr 400px;gap:22px;align-items:start}
.calcgrid>*{min-width:0}
/* Calculator accordion sections: each toggles independently (any combination open), animated
   via max-height/opacity. max-height is set to the section's real measured pixel height in JS
   (toggleCalcSection) rather than a large flat guess here — animating from/to an exact value
   instead of a generic "big enough" number is what makes both open AND close look smooth
   instead of close appearing to stall then snap shut. */
.calcsec-head{transition:background .15s}
.calcsec-head:hover{background:var(--bg2)}
.calcsec-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease}
.calcsec-body.open{opacity:1}
@media(max-width:520px){
  .calcsec-head{padding:12px 14px!important}
  .calcsec-head .sm{font-size:13.5px}
}
.receipt{background:#fff;border-radius:18px;border:1px solid var(--line);overflow:hidden;position:sticky;top:84px}
.receipt .rhead{background:var(--ink);color:#fff;padding:18px 22px;position:relative}
.receipt .rhead .sm{color:#A9A9B4}
.rline{display:flex;justify-content:space-between;padding:7.5px 22px;font-size:13.5px}
.rline span:first-child{color:var(--mut)}
.rline b{font-variant-numeric:tabular-nums}
.rsec{padding:8px 22px 4px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--purple);text-transform:uppercase}
.perf{border-top:2px dashed var(--line);margin:8px 0}
.rtotal{background:var(--purple-t);padding:15px 22px;display:flex;justify-content:space-between;align-items:center}
.rtotal b{font-size:22px;font-family:'Inter Tight';color:var(--purple)}
.stamp{position:absolute;right:16px;top:16px;border:1.5px solid rgba(255,255,255,.4);color:rgba(255,255,255,.7);font-weight:800;font-size:9.5px;letter-spacing:.12em;padding:4px 9px;border-radius:6px;transform:rotate(4deg);text-transform:uppercase}
.warn{background:var(--red-bg);border:1px solid #F5C6D0;border-radius:12px;padding:13px 15px;font-size:13px;margin-top:15px}
.note{background:var(--amber-bg);border:1px solid #F0DDB4;border-radius:12px;padding:13px 15px;font-size:13px;margin-top:10px}
.okbox{background:var(--green-bg);border:1px solid #C4E8D6;border-radius:12px;padding:13px 15px;font-size:13px;margin-top:10px}

/* ============ STEPPER / TIMELINE ============ */
.steps{display:flex;margin:24px 0 26px}
.steps .st{flex:1;text-align:center;font-size:11.5px;font-weight:600;color:var(--mut);position:relative;padding-top:26px}
.steps .st::before{content:'';width:17px;height:17px;border-radius:999px;background:#fff;border:2.5px solid var(--line);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1}
.steps .st::after{content:'';height:2.5px;background:var(--line);position:absolute;top:7.5px;left:-50%;width:100%}
.steps .st:first-child::after{display:none}
.steps .st.done{color:var(--green)}.steps .st.done::before{background:var(--green);border-color:var(--green)}
.steps .st.done::after{background:var(--green)}
.steps .st.now{color:var(--purple)}.steps .st.now::before{border-color:var(--purple);background:var(--purple-t);box-shadow:0 0 0 4px var(--purple-t)}
.tl{border-left:2px solid var(--line);margin-left:8px;padding-left:22px}
.tl .ev{position:relative;padding-bottom:20px}
.tl .ev::before{content:'';width:13px;height:13px;border-radius:999px;background:var(--line);position:absolute;left:-29px;top:4px;border:3px solid #fff}
.tl .ev.done::before{background:var(--green)}
.tl .ev.now::before{background:var(--purple);box-shadow:0 0 0 4px var(--purple-t)}
.tl .ev b{font-size:14px}

/* ============ TABLES ============ */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.sel td{background:var(--purple-t)}
td input,td select{padding:6px 10px;border-radius:8px}
.thead-strip{background:var(--bg2)}

/* ============ LEARNING ============ */
.lesson{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.lesson:last-child{border:none}
.lesson .n{color:var(--mut);font-weight:700;font-size:11.5px;width:22px;flex:none}
.lock{color:var(--mut)}
.vid{background:var(--ink);border-radius:18px;aspect-ratio:16/9;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.vid .wm{position:absolute;font-size:11px;color:rgba(255,255,255,.25);transform:rotate(-16deg);font-weight:600}
.play{width:64px;height:64px;border-radius:999px;background:var(--purple);display:grid;place-items:center;font-size:22px;box-shadow:0 10px 34px rgba(122,47,242,.55)}

/* ============ AUTH — branded split screen ============ */
.authwrap{max-width:960px;margin:36px auto;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(19,19,22,.14);display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:#fff}

.authbrand{background:var(--ink);color:#fff;padding:46px 42px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.authbrand::before{content:'';position:absolute;width:340px;height:340px;border-radius:999px;background:radial-gradient(circle,rgba(122,47,242,.55),transparent 70%);top:-150px;right:-130px;pointer-events:none}
.authbrand .alogo{display:flex;align-items:center;gap:9px;font-family:'Inter Tight';font-weight:800;font-size:19px;position:relative;z-index:1}
.authbrand .alogo .mark{width:30px;height:30px;border-radius:9px;background:var(--purple);display:grid;place-items:center;font-size:15px}
.authbrand h1{font-size:25px;line-height:1.25;margin:28px 0 10px;position:relative;z-index:1;letter-spacing:-.02em}
.authbrand p.lead{color:#C7C7D1;font-size:14px;position:relative;z-index:1;margin-bottom:28px}
.authperks{display:flex;flex-direction:column;gap:15px;position:relative;z-index:1;margin-bottom:auto}
.authperks .p{display:flex;gap:12px;align-items:flex-start}
.authperks .pi{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.authperks .pi svg{width:16px;height:16px;stroke:#C9A8FF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.authperks b{font-size:13.5px;display:block}
.authperks span{font-size:12.5px;color:#A9A9B4}
.authquote{position:relative;z-index:1;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.authquote p{font-size:13px;color:#D8D8DF;line-height:1.55;font-style:italic}
.authquote .who{margin-top:10px;font-size:12px;color:#A9A9B4;font-weight:600}

.authcard{padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.authcard h2{font-size:23px;margin-bottom:4px}
.authcard>p.lead{color:var(--mut);font-size:13.5px;margin-bottom:22px}
.authtabs{display:flex;gap:6px;background:var(--bg2);padding:4px;border-radius:999px;margin-bottom:22px}
.authtabs button{flex:1;border:none;background:none;padding:9px;border-radius:999px;font-weight:600;font-size:13px;color:var(--mut);transition:.15s;cursor:pointer}
.authtabs button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(19,19,22,.1)}

.gbtn{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px;font-weight:600;display:flex;justify-content:center;gap:10px;align-items:center;font-size:14px;transition:.15s}
.gbtn:hover{background:var(--bg2);border-color:#D4D4DA}
.gbtn svg{width:18px;height:18px;flex:none}
.or{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:12px;margin:16px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.otpbox{display:flex;gap:8px}.otpbox input{text-align:center;font-size:20px;font-weight:700;padding:10px 0}

.pwrap{position:relative}
.pwrap input{padding-right:42px}
.ptoggle{position:absolute;right:3px;top:3px;bottom:3px;width:36px;border:none;background:none;color:var(--mut);cursor:pointer;display:grid;place-items:center;border-radius:8px}
.ptoggle:hover{background:var(--bg2);color:var(--ink)}
.ptoggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.authswitch{text-align:center;margin-top:18px;font-size:13px;color:var(--mut)}

@media(max-width:820px){
  .authwrap{grid-template-columns:1fr;max-width:480px;margin:20px auto}
  .authbrand{padding:32px 30px}
  .authperks{margin-bottom:26px}
  .authcard{padding:32px 30px}
}

/* ============ ADMIN ============ */
.userMenu{position:relative}
.userMenuBtn{display:flex;align-items:center;gap:8px;border:none;background:none;padding:4px 6px 4px 4px;border-radius:999px;color:var(--ink)}
.userMenuBtn:hover{background:var(--bg2)}
.userMenuBtn svg{color:var(--mut);transition:transform .15s}
.userMenu.open .userMenuBtn svg{transform:rotate(180deg)}
.userMenuDrop{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 32px rgba(19,19,22,.14);padding:6px;z-index:60}
.userMenu.open .userMenuDrop{display:block}
.userMenuDrop a{display:block;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.userMenuDrop a:hover{background:var(--bg2)}
.side{display:grid;grid-template-columns:225px 1fr;gap:20px;align-items:start}
.snav{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;position:sticky;top:84px}
.snav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;padding:9px 12px;border-radius:10px;font-weight:600;font-size:13px;color:var(--mut)}
.snav button svg{flex-shrink:0;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snav button .tag{margin-left:auto}
.snav button.on{background:var(--purple-t);color:var(--purple)}
.panel{display:none}.panel.on{display:block;animation:fade .2s}
.bar-h{height:9px;border-radius:99px;background:var(--purple-l);position:relative;overflow:hidden;margin-top:5px}
.bar-h i{position:absolute;inset:0;background:var(--purple);border-radius:99px;display:block}
.kpi{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.kpi b{font-size:23px;font-family:'Inter Tight';line-height:1.2}
.kpi span{font-size:12px;color:var(--mut);font-weight:600}

/* modal */
.modal{position:fixed;inset:0;background:rgba(19,19,22,.5);display:none;place-items:center;z-index:99}
.modal.on{display:grid}
.mbox{background:#fff;border-radius:20px;max-width:500px;width:92%;padding:28px;max-height:88vh;overflow:auto}

/* pipeline (export flow) */
.pipe{counter-reset:p;margin-top:10px}
.pipe .p{display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line)}
.pipe .p:last-child{border:none}
.pipe .p::before{counter-increment:p;content:counter(p,decimal-leading-zero);font-family:'Inter Tight';font-weight:800;color:var(--purple);font-size:15px;width:30px;flex:none}
.pipe b{font-size:14px}

/* footer (Knowde-like light) */
/* ============ HERO ENTRANCE + ANIMATED BACKGROUND ============ */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hb-svg{width:100%;height:100%;opacity:.6}
.hb-path{fill:none;stroke:var(--purple-l);stroke-width:1.5;stroke-dasharray:2 11;stroke-linecap:round;animation:hbFlow 5.5s linear infinite}
.hb-path-2{stroke:var(--line);animation-duration:7s;animation-direction:reverse}
@keyframes hbFlow{to{stroke-dashoffset:-130}}
.hb-dot{fill:var(--purple-l);animation:hbPulse 3.4s ease-in-out infinite}
@keyframes hbPulse{0%,100%{opacity:.35;r:4}50%{opacity:.9;r:6.5}}
.hb-mark{position:absolute;width:22px;height:22px;fill:none;stroke:var(--purple-l);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:hbFly 9s linear infinite}
.hb-mark-2{animation-name:hbFly2;animation-delay:-4.4s}
@keyframes hbFly{0%{left:-5%;top:24%;opacity:0}7%{opacity:.6}50%{top:12%}93%{opacity:.6}100%{left:105%;top:18%;opacity:0}}
@keyframes hbFly2{0%{left:-5%;top:74%;opacity:0}7%{opacity:.5}50%{top:64%}93%{opacity:.5}100%{left:105%;top:70%;opacity:0}}

.hero .tag,.hero h1,.hero p,.hero>.row,.hero .stats{opacity:0;transform:translateY(16px);animation:heroIn .7s cubic-bezier(.2,.7,.3,1) forwards}
.hero .tag{animation-delay:.05s}.hero h1{animation-delay:.16s}.hero p{animation-delay:.3s}
.hero>.row{animation-delay:.42s}.hero .stats{animation-delay:.54s}
@keyframes heroIn{to{opacity:1;transform:none}}
.stats .pill b{font-variant-numeric:tabular-nums}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.svc .card.reveal:nth-child(1){transition-delay:0s}
.svc .card.reveal:nth-child(2){transition-delay:.06s}
.svc .card.reveal:nth-child(3){transition-delay:.12s}
.svc .card.reveal:nth-child(4){transition-delay:.18s}
.svc .card.reveal:nth-child(5){transition-delay:.24s}
.svc .card.reveal:nth-child(6){transition-delay:.3s}

/* live corridors */
.trade-route{border:1px solid var(--line);border-radius:20px;padding:24px 28px;margin:38px 0;background:linear-gradient(180deg,#fff,var(--bg2))}
.tr-eyebrow{display:block;margin-bottom:14px}
.tr-row{display:grid;grid-template-columns:190px 1fr 150px;align-items:center;gap:16px}
.tr-row+.tr-row{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.tr-node{display:flex;align-items:center;gap:11px}
.tr-node.tr-dest{justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.tr-icon{width:34px;height:34px;border-radius:10px;background:var(--purple-t);display:grid;place-items:center;flex:none}
.tr-icon svg{width:18px;height:18px;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tr-icon.tr-icon-dest{background:var(--green-bg)}
.tr-icon.tr-icon-dest svg{stroke:var(--green)}
.tr-node b{display:block;font-size:13.5px}
.tr-line{position:relative;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--purple-l) 0 8px,transparent 8px 15px)}
.tr-marker{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:20px;height:20px;opacity:0;animation:trFlow 3.4s linear infinite;filter:drop-shadow(0 2px 5px rgba(122,47,242,.35))}
.tr-marker svg{width:100%;height:100%;fill:none;stroke:var(--purple);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes trFlow{0%{left:0%;opacity:0}8%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}

.toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-140%);background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-weight:600;font-size:13.5px;z-index:999;box-shadow:0 12px 32px rgba(0,0,0,.28);transition:transform .35s cubic-bezier(.2,.7,.3,1);max-width:min(92vw,480px);text-align:center}
.toast.show{transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  .hb-path,.hb-dot,.hb-mark{animation:none}
  .hero-bg{opacity:.4}
  .hero .tag,.hero h1,.hero p,.hero>.row,.hero .stats{animation:none;opacity:1;transform:none}
  .reveal{transition:none;opacity:1;transform:none}
  .tr-marker{animation:none}
}
@media(max-width:920px){
  .tr-row{grid-template-columns:1fr}
  .tr-node.tr-dest{justify-content:flex-start;text-align:left;flex-direction:row}
  .tr-line{margin:12px 0;width:100%}
}

footer{background:var(--bg2);border-top:1px solid var(--line);margin-top:56px;padding:48px 24px 24px;color:var(--mut)}
.fgrid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:28px;font-size:13px}
footer h4{color:var(--ink);font-size:13px;margin-bottom:12px}
footer a{display:block;color:var(--mut);padding:3.5px 0;font-weight:500}
footer a:hover{color:var(--ink)}
.fbot{max-width:1140px;margin:28px auto 0;border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:8px}
.langBtn{background:none;border:none;padding:0;font:inherit;color:var(--mut);cursor:pointer;font-weight:600}
.langBtn.on{color:var(--purple);text-decoration:underline}
.demoAdmin{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:11px 18px;font-weight:600;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
@media(max-width:920px){
  /* Same min-width:0 reasoning as .calcgrid above, applied to every other grid this media query
     collapses to a single column — any of them can hit the identical "content can't shrink
     below X, so the whole page renders X wide" failure if their content is ever long enough. */
  .calcgrid,.grid2,.grid3,.svc,.side,.story,.howgrid,.routes,.trust{grid-template-columns:1fr}
  .calcgrid>*,.grid2>*,.grid3>*,.svc>*,.side>*,.story>*,.howgrid>*,.routes>*,.trust>*{min-width:0}
  .fgrid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
  .story,.how{padding:28px}

  /* Top nav collapses into a hamburger-triggered dropdown instead of vanishing outright —
     the links (and the sign-in/quote CTAs, duplicated here via .navOnly) still need to be
     reachable on a phone. margin-left:auto on .navToggle pushes it (and, via order, the chat
     icon + avatar right after it) to the right edge as a group — without it, .nav sits
     display:none while closed and contributes no width, so the button would otherwise land
     right next to the logo instead of on the opposite side of the bar.
     .topbar's base rule is a fixed height:64px, sized for a single row — fine on desktop where
     .nav scrolls horizontally instead of wrapping, but here the bar wraps onto 2-3 rows (icons,
     then the mode switcher). A fixed height doesn't clip an overflowing flex row, it just lets
     it render past the box edge — and since .topbar is position:sticky with z-index:50, that
     overflow paints on top of the page content below instead of pushing it down, which is what
     made the chat icon/avatar effectively invisible once they wrapped past row 1. height:auto
     lets the sticky bar actually grow to fit every row. */
  .topbar{padding:10px 16px;gap:10px 12px;flex-wrap:wrap;height:auto;min-height:64px}
  .navToggle{display:flex;margin-left:auto;order:2}
  /* Scoped to direct children of .topbar, not just the class — .avatar and .chatNavBtn are
     reused inside admin's user-menu button (a nested, unrelated flex container), and an
     unscoped order here would silently reshuffle that too. */
  .topbar>.chatNavBtn{order:3}
  .topbar>.avatar{order:3}
  .topbar>.logoutNavBtn{order:3}
  /* top:100% (not a hardcoded top:64px) so the dropdown still lands flush under the bar now
     that its height is auto instead of a fixed 64px. */
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:10px 16px 16px;box-shadow:0 16px 32px rgba(19,19,22,.12);z-index:49}
  .nav.open{display:flex}
  .nav button{text-align:left;padding:11px 13px}
  .nav .navOnly{display:block;margin-top:6px}
  .topOnly{display:none}
  .mode{order:4;flex-basis:100%;justify-content:center;margin:4px 0 2px}

  /* Tables don't reflow well on a phone — let each one scroll horizontally within its own
     card instead of forcing the whole page wider than the viewport. */
  table{display:block;width:auto;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* The admin sidebar nav is a tall stacked list once .side drops to one column above —
     sticky would pin the whole thing across most of a phone screen as you scroll. */
  .snav{position:static;top:auto}

  /* Below 16px, iOS Safari auto-zooms the whole page on focus — brutal on the calculator's
     15+ fields, where every tap would otherwise jolt the viewport. */
  input,select,textarea{font-size:16px}
}
@media(max-width:520px){
  .wrap{padding:20px 14px 48px}
  .hero h1{font-size:28px}
  .mode{width:100%}
  .mode button{flex:1;padding:6px 8px;font-size:11px;letter-spacing:0}
  .pad{padding:16px}
}