/* Teamak design system - taken verbatim from Teamak_Mockup_v1.4.html (the founder's UI spec). App overrides live in app.css. */
/* Teamak mockup v1.4 — design tokens + components. Brand: Royal, Ink, Paper, Slate, Teal (Teal Deep under small white text). IBM Plex Sans / Arabic. */
:root{
  --ink:#101322; --ink-2:#262B45; --ink-3:#3A4060;
  --royal:#2F4BE0; --royal-h:#2440CC; --royal-50:#F3F5FE; --royal-100:#E8ECFD; --royal-200:#CBD3F8; --royal-700:#1F35B3;
  --teal:#00B8A9; --teal-deep:#007A70; --teal-h:#006259; --teal-50:#F0FBFA; --teal-100:#DDF6F4; --teal-200:#A6E4DE;
  --paper:#FBFBFA; --surface:#FFFFFF; --sunken:#F4F5F8; --slate:#646A7A; --slate-2:#454B5C; --line:#E3E6EE; --line-2:#EEF0F5;
  --amber:#8F5600; --amber-s:#E8A33D; --amber-50:#FFF6E6; --amber-200:#F3D9A8;
  --red:#B42318; --red-50:#FDEEEC; --red-200:#F4C7C1; --green:#13703A; --green-50:#E9F7EE; --green-200:#B7E2C6;
  --violet:#5B3FD6;
  --r-xs:6px; --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(16,19,34,.05);
  --sh-2:0 1px 2px rgba(16,19,34,.04),0 6px 16px -6px rgba(16,19,34,.10);
  --sh-3:0 2px 4px rgba(16,19,34,.04),0 24px 48px -20px rgba(16,19,34,.28);
  --font:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-ar:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --mbar-h:44px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[dir=rtl] body,[dir=rtl] input,[dir=rtl] button,[dir=rtl] select,[dir=rtl] textarea{font-family:var(--font-ar)}
[dir=rtl] body{line-height:1.75}
body{overflow-x:hidden}
a{color:var(--royal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--royal);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{margin:0 0 .45em;line-height:1.18;letter-spacing:-.015em;font-weight:600;color:var(--ink)}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{letter-spacing:0;line-height:1.4}
h1{font-size:52px;letter-spacing:-.03em} h2{font-size:32px;letter-spacing:-.022em} h3{font-size:19px} h4{font-size:15.5px}
p{margin:0 0 1em}
.muted{color:var(--slate)} .small{font-size:13.5px} .tiny{font-size:12.5px} .strong{font-weight:600}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.lg{width:22px;height:22px} .ic.sm{width:15px;height:15px} .ic.xl{width:28px;height:28px}
[dir=rtl] .flip{transform:scaleX(-1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.row{display:flex;gap:10px;align-items:center} .row.wrapx{flex-wrap:wrap} .grow{flex:1;min-width:0} .sp{flex:1}
.stack{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}

/* ---------- mockup control bar ---------- */
.mbar{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;display:flex;align-items:center;gap:4px;padding:7px 14px;flex-wrap:wrap;font-size:13px;min-height:var(--mbar-h)}
.mbar .tag{font-weight:600;margin-inline-end:10px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.mbar .tag .mk svg{width:22px;height:22px;display:block}
.mbar .tag span.v{color:#9AA3C7;font-weight:400}
.mbar a{color:#C9D0EE;padding:5px 10px;border-radius:999px;white-space:nowrap}
.mbar a:hover{background:var(--ink-2);text-decoration:none}
.mbar a.on{background:var(--royal);color:#fff}
.mbar .ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mbar label{color:#9AA3C7;font-size:12px}
.mbar select,.mbar button{background:var(--ink-2);border:1px solid var(--ink-3);color:#fff;border-radius:999px;padding:4px 10px;font-size:12.5px;max-width:190px}
.mbar .sample{color:#9AA3C7;font-size:12px;padding:0 6px}

/* ---------- buttons, chips, badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:9px 16px;font-weight:600;font-size:14px;background:var(--royal);color:#fff;line-height:1.25;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--royal-h);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--sh-1)}
.btn.sec:hover{border-color:var(--royal-200);color:var(--royal)}
.btn.ghost{background:transparent;color:var(--slate-2)} .btn.ghost:hover{background:var(--sunken);color:var(--ink)}
.btn.teal{background:var(--teal-deep)} .btn.teal:hover{background:var(--teal-h)}
.btn.ink{background:var(--ink)} .btn.ink:hover{background:var(--ink-2)}
.btn.danger{background:var(--surface);color:var(--red);border-color:var(--red-200)} .btn.danger:hover{background:var(--red-50)}
.btn.lg{padding:13px 22px;font-size:16px;border-radius:12px} .btn.sm{padding:6px 11px;font-size:13px;border-radius:8px} .btn.xs{padding:4px 9px;font-size:12px;border-radius:7px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--line-2);color:var(--slate-2);white-space:nowrap;line-height:1.6}
[dir=rtl] .chip{line-height:1.75}
.chip.blue{background:var(--royal-100);color:var(--royal-700)} .chip.teal{background:var(--teal-100);color:var(--teal-deep)}
.chip.amber{background:var(--amber-50);color:var(--amber)} .chip.red{background:var(--red-50);color:var(--red)} .chip.green{background:var(--green-50);color:var(--green)}
.chip.ink{background:var(--ink);color:#fff} .chip.line{background:transparent;border:1px solid var(--line);color:var(--slate-2)}
.chip.new{background:transparent;border:1px solid var(--royal-200);color:var(--royal-700)}
.chip .ic{width:13px;height:13px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--slate);flex:none}
.dot.work{background:var(--teal)} .dot.wait{background:var(--amber-s)} .dot.idle{background:#C3C8D4} .dot.lock{background:#C3C8D4} .dot.late{background:var(--red)} .dot.done{background:var(--green)}
.av{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:600;font-size:12.5px;color:#fff;background:var(--royal);flex:none;letter-spacing:.02em;font-family:var(--font)}
.av.sm{width:28px;height:28px;border-radius:8px;font-size:11px} .av.lg{width:52px;height:52px;border-radius:14px;font-size:17px} .av.xs{width:22px;height:22px;border-radius:6px;font-size:9.5px}
.av.person{border-radius:50%;background:var(--sunken);color:var(--slate-2);border:1px solid var(--line)}
.avs{display:flex} .avs .av{border:2px solid var(--surface);margin-inline-start:-6px} .avs .av:first-child{margin-inline-start:0}
/* an AI employee's face (Ui/RoleAvatar, img/team/{id}.svg): the icon carries its own tile; the .av size classes still apply */
.av.face{display:block;padding:0;background:none;border-radius:28%;object-fit:contain} .av.face.lg{width:72px;height:72px;border-radius:28%} .av.face.dimmed{opacity:.4}
@media (max-width:640px){.av.face.lg{width:56px;height:56px}}
/* the characters (UX Journey v1.1 Part H, D55): a round face with a 2-3 px ring in the desk colour; the image itself is never changed */
.av.face.person{border-radius:50%;object-fit:cover;box-shadow:0 0 0 2.5px var(--ring,#2F4BE0);background:var(--paper,#fff)} .av.face.person.lg{border-radius:50%}

/* ---------- layout primitives ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px}
.panel.pad-l{padding:24px}
.panel.flush{padding:0;overflow:hidden}
.panel .ph2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel .ph2 h3,.panel .ph2 h4{margin:0}
.panel.tint{background:var(--royal-50);border-color:var(--royal-100)}
.panel.tealt{background:var(--teal-50);border-color:var(--teal-100)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.g12{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;font-size:14px;margin:0}
.kv dt{color:var(--slate)} .kv dd{margin:0;min-width:0}
.note{background:var(--amber-50);border:1px solid var(--amber-200);border-radius:var(--r-m);padding:12px 14px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.note.blue{background:var(--royal-50);border-color:var(--royal-200)} .note.teal{background:var(--teal-50);border-color:var(--teal-200)} .note.plain{background:var(--sunken);border-color:var(--line)}
.note .ic{margin-top:2px}
.hr{height:1px;background:var(--line-2);margin:14px 0;border:0}

/* ---------- forms ---------- */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label,.lbl{font-size:13px;font-weight:600;color:var(--slate-2)}
.field .hint{font-size:12.5px;color:var(--slate)}
.input,.select,textarea.input{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
.input:focus,.select:focus{border-color:var(--royal);outline:none;box-shadow:0 0 0 3px var(--royal-100)}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);min-width:220px;color:var(--slate)}
.search input{border:0;outline:0;padding:9px 0;background:transparent;width:100%;color:var(--ink)}
.toggle{width:38px;height:22px;border-radius:999px;background:#C9CED9;position:relative;flex:none;border:0;padding:0;transition:background .15s}
.toggle::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:inset-inline-start .15s}
.toggle.on{background:var(--teal-deep)} .toggle.on::after{inset-inline-start:19px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--surface);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--slate-2);white-space:nowrap}
.seg button.on{background:var(--ink);color:#fff}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;padding:10px 12px;font-weight:600;color:var(--slate);border-bottom:2px solid transparent;white-space:nowrap;font-size:14px;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-color:var(--royal)}
.pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pills button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--slate-2);display:inline-flex;gap:6px;align-items:center}
.pills button:hover{border-color:var(--royal-200)}
.pills button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pills button .n{font-size:11.5px;opacity:.75}
.radio-cards{display:grid;gap:10px}
.rc{border:1.5px solid var(--line);border-radius:var(--r-m);padding:14px;display:flex;gap:12px;align-items:flex-start;background:var(--surface);text-align:start;width:100%;transition:border-color .15s,background .15s}
.rc:hover{border-color:var(--royal-200)}
.rc.on{border-color:var(--royal);background:var(--royal-50)}
.rc .rb{width:18px;height:18px;border-radius:50%;border:2px solid #B9C0D2;flex:none;margin-top:2px;background:#fff}
.rc.on .rb{border:5px solid var(--royal)}

/* ---------- tables ---------- */
.tbl{border:1px solid var(--line);border-radius:var(--r-m);overflow:auto;background:var(--surface);max-width:100%}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{background:var(--sunken);text-align:start;font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--slate-2);white-space:nowrap}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover td{background:#FAFBFE}
table.t td.n,table.t th.n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.nw{white-space:nowrap}
table.t tr.best td{background:var(--teal-50)}
.yes{color:var(--teal-deep);font-weight:700} .no{color:#B8BDCA}

/* ---------- stats, meters ---------- */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;display:grid;gap:2px;align-content:start}
.stat .v{font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-size:13px;color:var(--slate)}
.stat .d{font-size:12px;font-weight:600;color:var(--green)} .stat .d.neg{color:var(--red)}
.meter{height:7px;background:var(--line-2);border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--royal);border-radius:999px}
.meter.t i{background:var(--teal)} .meter.w i{background:var(--amber-s)}
.mrow{display:flex;justify-content:space-between;font-size:13px;margin:12px 0 5px;gap:8px}
.mrow:first-child{margin-top:0}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px;border-bottom:1px solid var(--line)}
.bars i{flex:1;background:var(--royal-200);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.bars i.hi{background:var(--royal)} .bars i.t{background:var(--teal)}
.axis{display:flex;gap:6px;font-size:11px;color:var(--slate);margin-top:6px} .axis span{flex:1;text-align:center}
.spark{display:block;width:100%;height:auto}

/* ---------- lists ---------- */
.list{display:grid}
.li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-2)}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}

/* ---------- role tiles & cards ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;display:flex;flex-direction:column;gap:8px;position:relative;text-align:start;transition:border-color .15s,box-shadow .15s}
button.rcard,.rcard[role=button]{cursor:pointer}
.rcard:hover{border-color:var(--royal-200);box-shadow:var(--sh-2)}
.rcard .top{display:flex;gap:12px;align-items:flex-start}
.rcard .nm{font-weight:600;font-size:15px;line-height:1.3}
.rcard .dp{font-size:12.5px;color:var(--slate)}
.rcard .ds{font-size:13.5px;color:var(--slate-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rcard .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.rcard .packs{font-size:12px;color:var(--slate);border-top:1px dashed var(--line);padding-top:8px}
.rcard.locked{background:var(--sunken)}
.rcard.locked .nm,.rcard.locked .ds{color:var(--slate)}
.rcard .why{font-size:13px;color:var(--teal-deep);background:var(--teal-50);border-radius:8px;padding:6px 9px}
.rcard.power{border-color:var(--teal-200);box-shadow:inset 0 3px 0 var(--teal)}
.lockline{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--slate-2);flex-wrap:wrap}
.lockline .ic{width:15px;height:15px;color:var(--slate)}

/* ---------- empty / locked state ---------- */
.locked-state{border:1.5px dashed var(--royal-200);background:linear-gradient(180deg,var(--royal-50),var(--surface));border-radius:var(--r-l);padding:26px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.locked-state .lk{width:48px;height:48px;border-radius:14px;background:var(--surface);border:1px solid var(--royal-200);display:grid;place-items:center;color:var(--royal)}
.locked-state h3{margin:0 0 4px}
.locked-state .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.empty{text-align:center;padding:36px 16px;color:var(--slate)}
.empty .ic{width:36px;height:36px;color:var(--royal-200);margin-bottom:8px}
.ghosted{opacity:.45;pointer-events:none;filter:saturate(.6);user-select:none}

/* ---------- modal & toast ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(16,19,34,.48);display:grid;place-items:center;z-index:80;padding:20px;animation:fade .15s ease-out}
.modal{background:var(--surface);border-radius:var(--r-l);max-width:660px;width:100%;max-height:88vh;overflow:auto;padding:26px;position:relative;box-shadow:var(--sh-3);animation:rise .18s ease-out}
.modal .x{position:absolute;top:14px;inset-inline-end:14px;border:0;background:var(--sunken);border-radius:50%;width:34px;height:34px;display:grid;place-items:center}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;z-index:90;font-size:14px;display:flex;gap:10px;align-items:center;box-shadow:var(--sh-3);animation:rise .18s ease-out;max-width:calc(100vw - 32px)}
.toast .ic{color:var(--teal)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast{animation-name:toastIn} @keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* =====================================================================
   WEBSITE
   ===================================================================== */
.site{background:var(--paper);font-size:16px}
.shead{background:rgba(251,251,250,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);position:sticky;top:var(--mbar-h);z-index:40}
.shead .wrap{display:flex;align-items:center;gap:26px;height:68px}
.logo{display:inline-flex;align-items:center;flex:none;padding:4px 0}
.logo svg{height:30px;width:auto;display:block}
.logo.stacked svg{height:64px}
.sfoot .logo svg{height:36px}
.mkw{display:inline-grid;flex:none} .mkw svg{width:32px;height:32px;display:block}
.wav{display:inline-grid;flex:none} .wav svg{width:32px;height:32px;display:block}
.shead nav{display:flex;gap:4px;font-size:14.5px}
.shead nav a{color:var(--slate-2);padding:7px 10px;border-radius:8px;font-weight:500}
.shead nav a:hover{background:var(--sunken);text-decoration:none;color:var(--ink)}
.shead nav a.on{color:var(--ink);font-weight:600;background:var(--sunken)}
.shead .act{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.shead .act a.si{color:var(--slate-2);font-weight:500;font-size:14.5px;padding:7px 10px}
section.sec{padding:84px 0}
section.sec.tight{padding:56px 0}
section.sec.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.sec.ink{background:var(--ink);color:#C9CDDA}
section.sec.ink h2,section.sec.ink h3{color:#fff}
.intro{max-width:66ch;margin-bottom:36px}
.intro p{color:var(--slate-2);font-size:18px;margin:0}
[dir=rtl] .intro p{font-size:17px}
.intro.center{margin-inline:auto;text-align:center}
.lead{font-size:19px;color:var(--slate-2);max-width:52ch;line-height:1.55}
[dir=rtl] .lead{font-size:18px;line-height:1.8}
.pagehead{padding:64px 0 28px}
.pagehead h1{font-size:46px;max-width:24ch}
.pagehead .lead{margin-top:6px}

/* hero */
.hero{position:relative;padding:72px 0 64px;overflow:hidden;border-bottom:1px solid var(--line);
  background-color:var(--paper);
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 520px at 0% 0%,var(--paper) 30%,rgba(251,251,250,.6) 60%,rgba(251,251,250,0) 100%);pointer-events:none}
[dir=rtl] .hero::before{background:radial-gradient(1100px 520px at 100% 0%,var(--paper) 30%,rgba(251,251,250,.6) 60%,rgba(251,251,250,0) 100%)}
.hero .wrap{position:relative}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:56px;align-items:center}
.hero h1{font-size:60px;line-height:1.04;max-width:13ch;margin-bottom:22px}
[dir=rtl] .hero h1{font-size:54px;line-height:1.3;max-width:14ch}
.hero .kicker{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;font-weight:600;color:var(--teal-deep);background:var(--surface);border:1px solid var(--teal-200);padding:5px 12px 5px 6px;border-radius:999px;margin-bottom:22px}
[dir=rtl] .hero .kicker{padding:5px 6px 5px 12px}
.hero .kicker b{background:var(--teal-deep);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 18px}
.trustline{display:flex;gap:18px;flex-wrap:wrap;color:var(--slate-2);font-size:13.5px}
.trustline span{display:inline-flex;gap:6px;align-items:center}
.trustline .ic{color:var(--teal-deep);width:16px;height:16px}

/* team board (hero signature) */
.board{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:16px 16px 22px;box-shadow:var(--sh-3);margin-bottom:96px}
.board .bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.board .bh b{font-size:14px}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.tile{position:relative;border-radius:11px;padding:8px 8px 7px;background:var(--sunken);min-height:70px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;overflow:hidden;border:1px solid transparent}
.tile b{font-size:10.5px;font-weight:600;line-height:1.25;color:var(--ink)}
[dir=rtl] .tile b{font-size:11px;line-height:1.35}
.tile .s{display:flex;gap:4px;align-items:center;font-size:9.5px;color:var(--slate)}
.tile .av{width:22px;height:22px;border-radius:6px;font-size:9px}
.tile.wait{background:var(--amber-50);border-color:var(--amber-200)}
.tile.later{background:transparent;border:1px dashed var(--line)}
.tile.later b{color:var(--slate)}
.tile.cos{grid-column:span 2;grid-row:span 2;background:var(--ink);color:#C9CDDA;padding:12px}
.tile.cos b{color:#fff;font-size:13px}
.tile.cos .brief{font-size:11px;line-height:1.45;display:grid;gap:5px}
[dir=rtl] .tile.cos .brief{font-size:11.5px;line-height:1.6}
.tile.cos .brief span{display:flex;gap:6px;align-items:center}
.tile.cos .brief i{font-style:normal;font-weight:700;color:#fff;min-width:16px}
.tile.cos .av{background:var(--teal)!important;color:var(--ink)}
.board .legend{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--slate);flex-wrap:wrap}
.board .legend span{display:inline-flex;gap:6px;align-items:center}
.floatcard{position:absolute;inset-inline-end:-22px;bottom:-104px;width:330px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);padding:12px 14px;font-size:13px}
.floatcard .t{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.floatcard .fr{font-size:12px;color:var(--teal-deep);margin:4px 0 10px;display:flex;gap:6px;align-items:center}
.floatcard .bb{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media (prefers-reduced-motion:no-preference){
  .tiles .tile{animation:tileIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 28ms + 120ms)}
  .floatcard{animation:rise .5s ease-out both;animation-delay:900ms}
}
@keyframes tileIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* pack tiles */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pack{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;text-align:start;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s;width:100%}
.pack:hover{border-color:var(--royal-200);box-shadow:var(--sh-2);text-decoration:none}
.pack .pi{width:44px;height:44px;border-radius:12px;background:var(--royal-50);color:var(--royal);display:grid;place-items:center;grid-row:span 2}
.pack .pi .ic{width:22px;height:22px}
.pack b{font-size:16px;font-weight:600}
.pack .w{font-size:13.5px;color:var(--slate-2);line-height:1.5}
.pack .avs{grid-column:2;margin-top:6px}
.pack.other .pi{background:var(--sunken);color:var(--slate-2)}
.pack.on{border-color:var(--royal);box-shadow:0 0 0 3px var(--royal-100)}
.pack.on .pi{background:var(--royal);color:#fff}
.packs.compact{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.packs.compact .pack{grid-template-columns:1fr;justify-items:center;text-align:center;padding:12px 8px;gap:8px;border-radius:var(--r-m)}
.packs.compact .pack .pi{grid-row:auto;width:38px;height:38px}
.packs.compact .pack b{font-size:12.5px;line-height:1.3}
.packs.compact .pack .w,.packs.compact .pack .avs{display:none}

/* section blocks */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split.top{align-items:start}
.feature-list{display:grid;gap:14px;margin:22px 0 26px;padding:0;list-style:none}
.feature-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.feature-list .fi{width:28px;height:28px;border-radius:8px;background:var(--teal-100);color:var(--teal-deep);display:grid;place-items:center}
.feature-list .fi .ic{width:16px;height:16px}
.feature-list b{display:block;font-weight:600}
.feature-list span{color:var(--slate-2);font-size:15px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{position:relative;padding:22px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.step .n{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;margin-bottom:14px}
.step h3{font-size:18px}
.step p{color:var(--slate-2);font-size:14.5px;margin:0}
.chainline{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chainline .lk{color:var(--slate);display:inline-flex}
.chainrow{display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.chainrow:last-child{border-bottom:0}
.quote{border-inline-start:3px solid var(--teal);padding:2px 18px;font-size:19px;color:var(--ink);line-height:1.5}
.cta-band{border-radius:var(--r-xl);background:var(--ink);color:#C9CDDA;padding:48px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin-bottom:8px}
.cta-band::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:220px;height:220px;opacity:.12;background:
  linear-gradient(var(--teal),var(--teal)) 0 0/100px 100px no-repeat,linear-gradient(#fff,#fff) 120px 0/100px 100px no-repeat,linear-gradient(#fff,#fff) 0 120px/100px 100px no-repeat,linear-gradient(var(--royal),var(--royal)) 120px 120px/100px 100px no-repeat}
.cta-band .row{position:relative;z-index:1}

/* ROI */
.roi{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.roi .out{background:var(--ink);color:#C9CDDA;border-radius:var(--r-l);padding:24px;display:grid;gap:14px}
.roi .out .big{font-size:34px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.1}
.roi .out .big.t{color:#5CE1D6}
.roi input[type=range]{accent-color:var(--royal);width:100%}
.cmpbar{height:12px;border-radius:999px;background:var(--ink-2);overflow:hidden}
.cmpbar i{display:block;height:100%;background:var(--teal)}

/* hunt brief */
.hb{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.hb .top{background:var(--teal-deep);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.hb .top .chip{background:#fff;color:var(--teal-deep)}
.opp{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;padding:14px 18px;border-top:1px solid var(--line-2);align-items:center}
.score{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--teal-100);color:var(--teal-deep);font-variant-numeric:tabular-nums}
.score.mid{background:var(--royal-100);color:var(--royal-700)}
.score.low{background:var(--sunken);color:var(--slate)}
.opp .why{font-size:13px;color:var(--slate-2)}
.opp .acts{display:flex;gap:6px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.plans.two{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:12px;position:relative}
.plan.hot{border:2px solid var(--royal);box-shadow:0 22px 44px -28px rgba(47,75,224,.65)}
.plan .flag{position:absolute;top:-12px;inset-inline-start:20px}
.plan h3{margin:0;font-size:20px}
.plan .who{font-size:13.5px;color:var(--slate-2);min-height:3em}
.plan .price{font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan .price small{font-size:13px;font-weight:500;color:var(--slate);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:0;font-size:13.5px;display:grid;gap:7px}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start}
.plan li .ic{width:15px;height:15px;color:var(--teal-deep);margin-top:3px}
.plan .team{background:var(--sunken);border-radius:10px;padding:10px;display:grid;gap:6px;font-size:12.5px}
.plan .team .tm{display:flex;gap:8px;align-items:center}
.plan .team .tm .av{width:22px;height:22px;border-radius:6px;font-size:9px}
.plan .team .tm span{min-width:0}
.plan .btn{margin-top:auto}
.addons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.addon{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;display:grid;gap:6px;align-content:start}
.addon .pr{font-weight:600;font-variant-numeric:tabular-nums}
.addon.hl{border-color:var(--teal-200);background:var(--teal-50)}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{margin-bottom:8px}
.faq p{color:var(--slate-2);font-size:14.5px;margin:0}

/* code block (developers) */
.code{background:var(--ink);color:#D6DAF0;border-radius:var(--r-m);padding:16px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.65;overflow:auto;direction:ltr;text-align:left;white-space:pre}
.code .k{color:#8FA2FF} .code .s{color:#5CE1D6} .code .c{color:#7F86A0}
.flow{display:grid;grid-template-columns:repeat(5,auto);gap:10px;align-items:center;justify-content:start}
.flow .nd{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;display:grid;gap:4px;max-width:200px}
.flow .nd.t{border-color:var(--teal-200);background:var(--teal-50)}
.flow .ar{color:var(--slate)}

/* footer */
.sfoot{background:var(--ink);color:#B9BED0;padding:56px 0 28px;font-size:14px}
.sfoot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px}
.sfoot h4{color:#fff;font-size:14px;margin-bottom:12px}
.sfoot a{color:#B9BED0;display:block;margin:6px 0}
.sfoot .bottom{border-top:1px solid var(--ink-2);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#8A90A6;font-size:12.5px}

/* sign-up */
.auth .packs.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.auth{min-height:calc(100vh - 160px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth .side-art{background:var(--ink);color:#C9CDDA;padding:56px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.auth .side-art h2{color:#fff;font-size:30px}
.auth .form{padding:56px;display:flex;align-items:flex-start;justify-content:center}
.auth .form>div{width:100%;max-width:460px}
.sustep{display:flex;gap:6px;margin-bottom:22px}
.sustep i{height:4px;flex:1;border-radius:999px;background:var(--line)}
.sustep i.on{background:var(--royal)}

/* =====================================================================
   WIZARD
   ===================================================================== */
.wtop{background:var(--surface);border-bottom:1px solid var(--line)}
.wtop .wrap{display:flex;align-items:center;height:64px;gap:16px}
.progress{height:6px;border-radius:999px;background:var(--line-2);overflow:hidden}
.progress i{display:block;height:100%;background:var(--teal);border-radius:999px;transition:width .3s}
.wiz{max-width:1120px;margin:28px auto 60px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;padding:0 24px}
.wsteps{list-style:none;padding:0;margin:0;display:grid;gap:2px;align-content:start;position:sticky;top:calc(var(--mbar-h) + 16px)}
.wsteps li{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;font-size:14px;color:var(--slate);cursor:pointer}
.wsteps li:hover{background:var(--sunken)}
.wsteps li .n{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1.5px solid #C3C8D4;font-size:12px;font-weight:600;flex:none;background:var(--surface)}
.wsteps li.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line),var(--sh-1)}
.wsteps li.on .n{background:var(--royal);border-color:var(--royal);color:#fff}
.wsteps li.done .n{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.wsteps li.done .n .ic{width:14px;height:14px}
.wcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:30px;box-shadow:var(--sh-1)}
.wcard>h2{font-size:26px;margin-bottom:6px}
.wcard>p.muted{margin-bottom:22px}
.wfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.brainbox{border:1px dashed var(--teal-200);background:var(--teal-50);border-radius:var(--r-m);padding:16px}
.drop{border:1.5px dashed var(--line);border-radius:var(--r-m);padding:22px;text-align:center;background:var(--sunken)}
.sizecards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sizecards .rc{flex-direction:column;gap:4px}
.sizecards .rc .pr{font-weight:600;font-size:15px}
.teamlist{display:grid;gap:8px}
.tm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.tm-row .why{font-size:13px;color:var(--slate-2)}
.tm-row.power{border-color:var(--teal-200);background:var(--teal-50)}
.tm-row.dim{background:var(--sunken)}
.tm-row.dim .nm{color:var(--slate)}
.firstwork{display:grid;gap:10px}
.fw{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m)}
.fw .res{font-size:13.5px;color:var(--slate-2)}

/* =====================================================================
   PORTAL (client, admin, partner)
   ===================================================================== */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - var(--mbar-h))}
.side{background:var(--surface);border-inline-end:1px solid var(--line);padding:12px 10px 20px;display:flex;flex-direction:column;gap:1px;position:sticky;top:var(--mbar-h);height:calc(100vh - var(--mbar-h));overflow:auto}
.side .co{display:flex;gap:10px;align-items:center;padding:8px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--line-2)}
.side .co .av{width:34px;height:34px;font-size:12px;background:var(--ink)}
.side .co b{display:block;font-size:13.5px;line-height:1.3}
.side a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--slate-2);font-size:14px;font-weight:500}
.side a .ic{color:var(--slate);width:17px;height:17px}
.side a:hover{background:var(--sunken);text-decoration:none;color:var(--ink)}
.side a.on{background:var(--royal-50);color:var(--royal-700);font-weight:600}
.side a.on .ic{color:var(--royal)}
.side a.lockd{color:var(--slate)}
.side a .lk{margin-inline-start:auto;width:14px;height:14px;color:#A9AFBE}
.side .grp{font-size:12px;color:var(--slate);padding:14px 10px 4px;font-weight:500}
.side .cnt{margin-inline-start:auto;background:var(--amber-s);color:var(--ink);border-radius:999px;font-size:11px;padding:0 7px;font-weight:700;line-height:18px}
.side .planbox{margin-top:auto;padding:12px;border-radius:12px;background:var(--sunken);font-size:12.5px;display:grid;gap:6px}
.side.admin{background:var(--ink);border-color:var(--ink)} .side.admin a{color:#C9CDDA} .side.admin a .ic{color:#7F86A0} .side.admin a:hover{background:var(--ink-2);color:#fff}
.side.admin a.on{background:var(--ink-2);color:#fff} .side.admin a.on .ic{color:var(--teal)} .side.admin .grp{color:#7F86A0} .side.admin .co{border-color:var(--ink-2);color:#fff}
.main{padding:0 32px 64px;min-width:0}
.topbar{display:flex;align-items:center;gap:10px;height:60px;border-bottom:1px solid var(--line-2);margin:0 -32px 22px;padding:0 32px;background:rgba(251,251,250,.9);position:sticky;top:var(--mbar-h);z-index:20;backdrop-filter:blur(8px)}
.topbar .crumb{font-size:13px;color:var(--slate);display:flex;gap:6px;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumb b{color:var(--ink);font-weight:600}
.topbar .search{min-width:200px;max-width:280px;margin-inline-start:auto}
.topbar .iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--slate-2);position:relative;flex:none}
.topbar .iconbtn .pip{position:absolute;top:7px;inset-inline-end:8px;width:7px;height:7px;border-radius:50%;background:var(--amber-s);border:1.5px solid #fff}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.ph h2{font-size:26px;margin:0}
.ph p{margin:4px 0 0;color:var(--slate);max-width:72ch}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Chief of Staff brief */
.brief{background:var(--ink);color:#C9CDDA;border-radius:var(--r-l);padding:20px 22px;display:grid;gap:16px;position:relative;overflow:hidden}
.brief h3{color:#fff;margin:0}
.brief .bh{display:flex;gap:12px;align-items:center}
.brief .bh .av{background:var(--teal)!important;color:var(--ink)}
.brief .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.brief .col{background:var(--ink-2);border-radius:12px;padding:12px 14px;display:grid;gap:8px;align-content:start}
.brief .col .h{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#fff;font-weight:600}
.brief .col .h .n{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.brief .col.late .h .n{color:#FF9F94} .brief .col.dec .h .n{color:#F6C46F}
.brief .it{font-size:13px;display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.brief .it .av{width:20px;height:20px;border-radius:5px;font-size:8.5px;margin-top:1px}
.brief .it .who{color:#8E95B0;font-size:12px;display:block}
.brief .foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#8E95B0}

/* plan */
.goal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-bottom:14px}
.goal .gh{display:flex;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.goal .gi{width:40px;height:40px;border-radius:12px;background:var(--royal-50);color:var(--royal);display:grid;place-items:center;flex:none}
.goal .gh h3{margin:0;font-size:17px}
.goal .pct{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.proj{padding:6px 18px 12px}
.proj .pj{display:flex;gap:10px;align-items:center;font-weight:600;font-size:14px;margin:10px 0 6px}
.task{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,230px) 110px 130px;gap:12px;align-items:center;padding:8px 10px;border-radius:10px;font-size:13.5px}
.task:hover{background:var(--sunken)}
.task .cb{width:18px;height:18px;border-radius:5px;border:1.5px solid #C3C8D4;display:grid;place-items:center}
.task.done .cb{background:var(--green);border-color:var(--green);color:#fff}
.task.done .tt{color:var(--slate);text-decoration:line-through;text-decoration-color:#C3C8D4}
.task .as{display:flex;gap:8px;align-items:center;min-width:0;font-size:13px}
.task .as span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task .due{font-size:12.5px;color:var(--slate)}
.task .due.late{color:var(--red);font-weight:600}
.proposal{border:1.5px solid var(--amber-200);background:linear-gradient(180deg,var(--amber-50),var(--surface) 70%);border-radius:var(--r-l);padding:18px}
.voice{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font-size:13px;width:max-content;max-width:100%}
[dir=rtl] .voice{padding:6px 6px 6px 14px}
.voice .play{width:32px;height:32px;border-radius:50%;background:var(--royal);color:#fff;display:grid;place-items:center;flex:none}
.wave{display:flex;gap:2px;align-items:center;height:22px}
.wave i{width:3px;border-radius:2px;background:var(--royal-200)}
.diff{display:grid;gap:8px;margin:14px 0}
.diff .d{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:start;font-size:13.5px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.diff .d .k{font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 6px;text-align:center}
.diff .d .k.add{background:var(--green-50);color:var(--green)} .diff .d .k.chg{background:var(--royal-100);color:var(--royal-700)}

/* approvals */
.appr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;display:grid;gap:12px;align-content:start}
/* B3 (22 Oct): no coloured start-side border on a rounded card — a waiting card is marked by a soft shadow */
.appr.wait{box-shadow:var(--sh-2);border-color:var(--line-2)}
.appr .doc{background:var(--sunken);border-radius:10px;padding:12px;font-size:13.5px;color:var(--slate-2)}
.appr .bar{display:flex;gap:8px;flex-wrap:wrap}
.route{display:grid;gap:6px;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font-size:12.5px}
.route .rr{display:grid;grid-template-columns:18px 92px minmax(0,1fr);gap:8px;align-items:center}
.route .rr .ic{width:15px;height:15px;color:var(--slate)}
.route .rr .k{color:var(--slate)}
.timer{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--amber);font-weight:600}
.levels{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.levels .lv{display:inline-flex;gap:5px;align-items:center;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--slate-2)}
.levels .lv.done{background:var(--green-50);border-color:var(--green-200);color:var(--green)}
.levels .lv.cur{background:var(--amber-50);border-color:var(--amber-200);color:var(--amber);font-weight:600}

/* chains */
.chain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;text-align:start;width:100%}
.chain.on{border-color:var(--teal-200)}
.chain.sel{box-shadow:0 0 0 2px var(--royal)}
.chain .steps2{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:8px}
.chain .steps2 .lk{color:#A9AFBE;display:inline-flex}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:10px 0;position:relative}
.timeline li::before{content:"";position:absolute;inset-inline-start:17px;top:44px;bottom:-6px;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .when{font-size:12px;color:var(--slate);white-space:nowrap}

/* sourcing */
.funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.funnel div{padding:14px 16px;border-inline-end:1px solid var(--line-2)}
.funnel div:last-child{border:0}
.funnel b{font-size:22px;font-weight:600;display:block;font-variant-numeric:tabular-nums}
.funnel span{font-size:12.5px;color:var(--slate)}
.flag-est{font-size:11px;color:var(--slate);font-weight:500}

/* designs */
.kit{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:44px;height:44px;border-radius:10px;border:1px solid rgba(0,0,0,.08);display:grid;align-items:end;font-size:9px;padding:3px;color:#fff;font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column}
.dz .art{aspect-ratio:1/1;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:14px;color:#fff}
.dz .art.story{aspect-ratio:4/5}
.dz .art .hl{font-weight:700;font-size:19px;line-height:1.2;max-width:12ch}
[dir=rtl] .dz .art .hl{line-height:1.45}
.dz .art .sm{font-size:11px;opacity:.9}
.dz .art .badge2{align-self:flex-start;background:#fff;color:var(--ink);font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.dz .art .mk{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:10px;font-weight:700}
.dz .meta{padding:10px 12px;display:grid;gap:6px;font-size:12.5px}
.art.a1{background:radial-gradient(circle at 80% 20%,#3A5CF0 0,transparent 55%),linear-gradient(160deg,#1A2B8C,#101322)}
.art.a2{background:radial-gradient(circle at 20% 80%,#00B8A9 0,transparent 60%),linear-gradient(200deg,#0B5E57,#06302D)}
.art.a3{background:linear-gradient(135deg,#F6F1E7 0%,#EADBC2 100%);color:var(--ink)!important}
.art.a3 .badge2{background:var(--ink);color:#fff}
.art.a4{background:repeating-linear-gradient(45deg,#2F4BE0 0 14px,#2A44CF 14px 28px)}
.art .shape{position:absolute;inset-inline-end:-20px;bottom:-20px;width:120px;height:120px;border-radius:24px;background:rgba(255,255,255,.12);transform:rotate(18deg)}

/* orders */
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;min-width:200px}
.stages i{height:6px;border-radius:999px;background:var(--line)}
.stages i.on{background:var(--teal)} .stages i.warn{background:var(--amber-s)}

/* rules editor */
.rules{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.rlist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:6px;display:grid;gap:2px;position:sticky;top:calc(var(--mbar-h) + 76px)}
.rlist button{display:flex;gap:10px;align-items:center;border:0;background:transparent;border-radius:9px;padding:8px;text-align:start;font-size:13.5px;width:100%}
.rlist button:hover{background:var(--sunken)}
.rlist button.on{background:var(--royal-50);color:var(--royal-700);font-weight:600}
.rlist .grp{font-size:12px;color:var(--slate);padding:10px 8px 4px}
.rsec{border-top:1px solid var(--line-2);padding:16px 0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.rsec:first-of-type{border-top:0;padding-top:0}
.rsec .rk b{display:block;font-size:14px}
.rsec .rk span{font-size:12.5px;color:var(--slate)}
.ppl{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pp{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px;font-size:13px;background:var(--surface)}
[dir=rtl] .pp{padding:3px 3px 3px 10px}
.pp .av{width:22px;height:22px;font-size:9px}
.pp.title{border-style:dashed}
.pp.title .av{background:var(--royal-100);color:var(--royal-700);border-radius:50%}
.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix th,.matrix td{padding:7px 8px;border-bottom:1px solid var(--line-2);text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:start}
.matrix th{font-size:12px;color:var(--slate-2);font-weight:600}
.ck{width:18px;height:18px;border-radius:5px;border:1.5px solid #C3C8D4;display:inline-grid;place-items:center;vertical-align:middle}
.ck.on{background:var(--royal);border-color:var(--royal);color:#fff}
.ck .ic{width:12px;height:12px;stroke-width:3}
.sim{background:var(--sunken);border-radius:12px;padding:14px;display:grid;gap:10px}
.sim input[type=range]{accent-color:var(--royal);width:100%}

/* api */
.keyrow{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.http{font-weight:700;font-size:11px;padding:1px 6px;border-radius:5px;background:var(--royal-100);color:var(--royal-700)}
.http.get{background:var(--teal-100);color:var(--teal-deep)}

/* privacy filter */
.pf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.pf .box{border:1px solid var(--line);border-radius:12px;padding:14px;font-size:13.5px;background:var(--surface);line-height:1.7}
.pf .box.out{background:var(--sunken)}
.pf mark{background:var(--amber-50);color:var(--amber);border-radius:4px;padding:0 3px;font-weight:600}
.pf .tok{background:var(--royal-100);color:var(--royal-700);border-radius:4px;padding:0 4px;font-family:ui-monospace,Menlo,monospace;font-size:12px;direction:ltr;unicode-bidi:isolate}
.pf .mid{display:grid;place-items:center;color:var(--slate)}

/* misc portal */
.upsell{background:linear-gradient(135deg,var(--royal-50),var(--teal-50));border:1px solid var(--royal-200);border-radius:var(--r-m);padding:16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.chat{display:grid;gap:10px}
.msg{max-width:78%;padding:9px 12px;border-radius:14px;font-size:14px;background:var(--surface);border:1px solid var(--line)}
.msg.me{justify-self:end;background:var(--royal-50);border-color:var(--royal-200)}
.regs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.reg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;text-align:start;display:grid;gap:2px}
.reg.on{border-color:var(--royal);box-shadow:0 0 0 2px var(--royal-100)}
.reg b{font-size:20px;font-weight:600}
.conn{display:flex;justify-content:space-between;align-items:center;gap:10px}
.conn .lg2{width:36px;height:36px;border-radius:10px;background:var(--sunken);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--slate-2);flex:none}

/* screen map */
.map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.map .panel ol{margin:0;padding-inline-start:22px;font-size:14px;display:grid;gap:4px}
.map .panel h3{display:flex;justify-content:space-between;gap:8px}

/* =====================================================================
   MOBILE FRAMES
   ===================================================================== */
.phones{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;padding:28px 16px 64px}
.phone{width:340px;height:700px;border-radius:46px;background:var(--ink);padding:11px;box-shadow:0 30px 60px -30px rgba(16,19,34,.6);flex:none;position:relative}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:999px;background:#000;z-index:3}
.screen{width:100%;height:100%;border-radius:36px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;position:relative}
.sbar{height:44px;display:flex;justify-content:space-between;align-items:center;padding:4px 26px 0;font-size:12px;font-weight:600;flex:none;direction:ltr}
.mhead{padding:6px 18px 10px;flex:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mhead h3{margin:0;font-size:21px}
.mbody{flex:1;overflow:auto;padding:0 14px 14px}
.mtab{display:flex;border-top:1px solid var(--line);background:var(--surface);flex:none;padding:6px 4px 16px}
.mtab a{flex:1;display:grid;justify-items:center;font-size:10.5px;color:var(--slate);gap:2px;padding-top:4px}
.mtab a .ic{width:20px;height:20px}
.mtab a.on{color:var(--royal);font-weight:600}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px;font-size:13px}
.mcard.ink{background:var(--ink);color:#C9CDDA;border:0}
.mcard.ink b{color:#fff}
.mcard.ink .av{background:var(--teal)!important;color:var(--ink)}
.phone .route .rr{grid-template-columns:16px 64px minmax(0,1fr)}
.phone .levels .lv{white-space:normal}
.plabel{text-align:center;font-size:13px;color:var(--slate);margin-top:12px;max-width:340px}
.wa{background:#EFEAE2}
.wa .bub{max-width:84%;padding:8px 10px;border-radius:10px;font-size:13px;margin:6px 0;box-shadow:0 1px 0 rgba(0,0,0,.06);line-height:1.45}
.wa .in{background:#fff;border-start-start-radius:2px}
.wa .out{background:#D9FDD3;margin-inline-start:auto;border-start-end-radius:2px}
.wa .qr{display:grid;gap:4px;margin-top:6px}
.wa .qr span{background:#fff;border-radius:8px;text-align:center;color:#0B6E63;font-weight:600;padding:7px;font-size:13px;box-shadow:0 1px 0 rgba(0,0,0,.08);border:1px solid #E7E2D9}
.wa .whead{background:#075E54;color:#fff;padding:10px 14px;display:flex;gap:10px;align-items:center;flex:none}
.wa .ts{font-size:10.5px;color:#667781;text-align:end;margin-top:2px}
.wa .day{align-self:center;background:#E1F2FB;color:#54656F;font-size:11.5px;border-radius:8px;padding:3px 10px;margin:4px auto;width:max-content}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .shead nav{gap:0} .shead nav a{padding:7px 7px;font-size:13.5px}
  .packs.compact{grid-template-columns:repeat(5,minmax(0,1fr))}
  .task{grid-template-columns:22px minmax(0,1fr) minmax(0,160px) 96px}
  .task .st2{display:none}
}
@media (max-width:1020px){
  h1{font-size:40px} .hero h1,[dir=rtl] .hero h1{font-size:44px}
  .hero .grid,.split,.g21,.g12,.grid2,.roi,.auth,.rules,.cta-band{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))} .packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rgrid,.grid3,.map,.gallery,.addons,.regs{grid-template-columns:repeat(2,minmax(0,1fr))} .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:8px;gap:4px;border-inline-end:0;border-bottom:1px solid var(--line)}
  .side .grp,.side .planbox{display:none} .side .co{border:0;margin:0;padding:4px 8px;flex:none} .side a{white-space:nowrap;flex:none}
  .topbar{position:static} .rlist{position:static}
  .wiz{grid-template-columns:minmax(0,1fr)} .wsteps{position:static;display:flex;overflow-x:auto;gap:4px} .wsteps li{white-space:nowrap;flex:none}
  .sfoot .cols{grid-template-columns:1fr 1fr} .steps{grid-template-columns:minmax(0,1fr)}
  .shead nav{display:none} .floatcard{position:relative;inset:auto;margin:14px 0 0 auto;width:auto;max-width:320px}
  .brief .cols{grid-template-columns:minmax(0,1fr)} .sizecards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth .side-art{display:none} .flow{grid-template-columns:minmax(0,1fr);justify-items:start} .flow .ar{transform:rotate(90deg)}
  .locked-state{grid-template-columns:auto minmax(0,1fr)} .locked-state .acts{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:640px){
  :root{--mbar-h:0px}
  .mbar{position:static} .shead{position:static}
  .wrap{padding:0 16px} .main{padding:0 16px 48px} .topbar{margin:0 -16px 16px;padding:0 16px;height:auto;min-height:56px;flex-wrap:wrap;gap:8px;padding-block:8px} .topbar .search{display:none}
  h1,.pagehead h1{font-size:34px} h2{font-size:26px} .hero h1,[dir=rtl] .hero h1{font-size:36px} section.sec{padding:56px 0} .hero{padding:44px 0 48px}
  .plans,.plans.two,.packs,.rgrid,.grid3,.grid4,.map,.gallery,.addons,.faq,.regs,.funnel{grid-template-columns:minmax(0,1fr)}
  .packs.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .opp{grid-template-columns:44px minmax(0,1fr)} .opp .acts{grid-column:1/-1;flex-wrap:wrap}
  .task{grid-template-columns:22px minmax(0,1fr);row-gap:4px} .task .as,.task .due{grid-column:2}
  .rsec{grid-template-columns:minmax(0,1fr)} .route .rr{grid-template-columns:18px 80px minmax(0,1fr)}
  .wcard{padding:20px} .sizecards{grid-template-columns:minmax(0,1fr)} .wiz{padding:0 12px}
  .cta-band{padding:28px} .auth .form{padding:28px 16px} .sfoot .cols{grid-template-columns:minmax(0,1fr)}
  .pf{grid-template-columns:minmax(0,1fr)} .pf .mid{transform:rotate(90deg)}
  .tm-row,.fw{grid-template-columns:auto minmax(0,1fr)} .tm-row>:last-child,.fw>:last-child{grid-column:1/-1}
  .chainrow{grid-template-columns:minmax(0,1fr)} .kit{grid-template-columns:minmax(0,1fr)}
  .phones{padding:20px 0 48px} .phone{width:330px}
  .ph h2{font-size:22px} .mbar .tag{width:100%} .search{min-width:0;width:100%}
  .pagehead{padding:40px 0 20px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* ===== intuitive round (23 Oct): Setup's «tomorrow» list ===== */
.tomorrow{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px}
.tomorrow .num{display:inline-block;min-width:44px;color:var(--slate,#6A7080)}