/* Xrero Connect - owner console + client portal.
   The xrero.com look (owner, 22 Oct 2026: the designs are the same as the website): the Figma "Teal & White"
   palette only (tints = rgba of palette colours), Geist / Geist Mono / Cairo (the site's own font files), Lucide
   icons, the light hero with the radial glow and the framed 3D scene (made with Higgsfield, like the site's).
   Status uses the palette only: OK = mint dot, waiting = teal tints, needs action = teal-950 solid + alert icon;
   the words always say the state. Logical properties everywhere so Arabic (RTL) and English (LTR) share one
   stylesheet. No external resources: every font and picture is bundled. */

/* -- fonts (variable woff2: one file serves several weights) -------------------------------------------- */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/geist-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/static/fonts/cairo-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/static/fonts/cairo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/static/fonts/cairo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  /* Figma "Xrero - Teal & White" foundations: the ONLY colours allowed */
  --surface:#F4F9FA; --surface-2:#EBF8FA;
  --ink:#0B2229; --ink-2:#4A5F66; --ink-400:#7A8C91; --ink-700:#2C4148;
  --line:#E2ECEE; --line-2:#CFDEE1;
  --brand:#0585A1; --teal:#04728A; --teal-d:#034A59; --teal-100:#D3EEF3; --teal-200:#9CE0EC; --teal-950:#062E37;
  --mint:#18B98A;
  /* tints = rgba of palette colours */
  --mint-tint:rgba(24,185,138,.12); --mint-soft:rgba(24,185,138,.07); --mint-line:rgba(24,185,138,.32); --mint-ring:rgba(24,185,138,.16);
  --glow:radial-gradient(900px 420px at 18% -30%,var(--surface-2) 0,rgba(255,255,255,0) 70%);
  --sh:0 1px 2px rgba(3,74,89,.06),0 14px 34px -16px rgba(3,74,89,.25);
  --sh-sm:0 1px 2px rgba(3,74,89,.06);
  --sh-lg:0 30px 60px -24px rgba(3,74,89,.35);
  --f:"Geist","Cairo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fa:"Cairo","Geist",system-ui,"Segoe UI",Tahoma,sans-serif;
  --fm:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* Lucide triangle-alert, drawn as a mask in the current text colour (the "needs action" sign) */
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  /* names used by the component rules below and by the Easy Connect packages' own CSS */
  --ink-3:var(--ink-2); --bg:var(--surface); --card:#fff; --muted:var(--ink-2);
  --brand-2:var(--teal); --brand-ink:var(--teal-d); --brand-50:var(--surface-2); --brand-100:var(--teal-100); --brand-200:var(--teal-200);
  --ok:var(--ink); --ok-bg:var(--mint-tint); --warn:var(--teal-d); --warn-bg:var(--teal-100);
  --bad:var(--teal-950); --bad-bg:var(--surface); --idle:var(--ink-2); --idle-bg:var(--surface);
  --xr-accent:var(--teal); --xr-accent-strong:var(--teal-d); --xr-accent-soft:var(--teal-100); --xr-accent-softer:var(--surface-2);
  --xr-ink:var(--ink); --xr-ink-2:var(--ink-700); --xr-muted:var(--ink-2); --xr-faint:var(--ink-2);
  --xr-line:var(--line); --xr-line-2:var(--line-2); --xr-bg:var(--surface); --xr-surface:#fff; --xr-surface-2:var(--surface);
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --shadow-sm:var(--sh-sm); --shadow:var(--sh); --shadow-lg:var(--sh-lg);
  --focus:0 0 0 2px #fff,0 0 0 4px var(--brand);
  --field-line:var(--ink-400);
  --t:.15s ease;
  --side-w:248px; --top-h:64px;
  --font:var(--f); --mono:var(--fm);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--surface);color:var(--ink);font:400 15px/1.6 var(--f);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[dir=rtl] body{font-family:var(--fa);font-size:15.5px}
img,svg{max-width:100%}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal-d)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;color:var(--ink);text-wrap:balance}
h1{font-size:26px;font-weight:700;letter-spacing:-.025em}
h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
h3{font-size:16px;font-weight:600;letter-spacing:-.005em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{letter-spacing:0;line-height:1.45;font-weight:700}
p{margin:0 0 .9em}
small,.small{font-size:13.5px}
code,.mono{font-family:var(--fm);font-size:.92em;direction:ltr;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
hr{border:0;border-block-start:1px solid var(--line);margin:24px 0}
img.logo{display:block;height:28px;width:auto;max-width:none}
::selection{background:var(--teal-100);color:var(--ink)}
/* eyebrows and small labels: Geist Mono uppercase, like the site's .eb (Arabic: Cairo, never tracked) */
.eb,.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
[dir=rtl] .eb,[dir=rtl] .eyebrow{font-family:var(--fa);letter-spacing:0;font-size:13px;font-weight:600;text-transform:none}

/* -- top bar: like the site header - white, thin line, logo + "Connect" -------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-block-end:1px solid var(--line)}
.topbar .inner{width:100%;margin-inline:auto;padding:0 24px;min-height:var(--top-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);white-space:nowrap;flex:none}
.brand .sub{font-weight:600;font-size:15px;color:var(--teal);padding-inline-start:12px;border-inline-start:1px solid var(--line-2);line-height:1.2}
.brand:hover .sub{color:var(--teal-d)}
body.console .topbar .brand{min-width:calc(var(--side-w) - 24px)}
/* the current section, a quiet pill (the side panel holds the full menu) */
.nav{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.nav a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:500;font-size:14.5px;white-space:nowrap;border:1px solid transparent}
.nav a.on{background:var(--surface-2);color:var(--teal-d);border-color:var(--teal-100);font-weight:600}
.topbar .end{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.lang-switch{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:13.5px;background:#fff;transition:border-color var(--t),color var(--t)}
.lang-switch:hover{border-color:var(--teal);color:var(--teal-d)}
.lang-switch svg.ico{width:16px;height:16px}
.who-pill{display:inline-flex;align-items:center;gap:8px;padding:0 4px;color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-weight:700;font-size:14px;line-height:1;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--teal-100)}
.linkbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;min-height:36px;padding:0 12px;font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;border-radius:9px;transition:background var(--t),color var(--t)}
.linkbtn:hover{background:var(--surface);color:var(--ink)}
form.inline{display:inline}
.menu{display:none;position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;font-weight:600;font-size:14px;color:var(--ink);background:#fff}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{border-color:var(--teal);color:var(--teal-d)}
.menu .panel{position:absolute;inset-inline-end:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);padding:8px;width:min(290px,calc(100vw - 32px));display:flex;flex-direction:column;gap:2px;z-index:40}
.menu .panel form{margin:6px 0 0;padding-block-start:6px;border-block-start:1px solid var(--line)}
.menu .panel button{width:100%;justify-content:flex-start;min-height:44px}

/* -- app shell: the side panel (site menu tiles, quiet pill for the current section) -------------------------- */
.shell{display:flex;min-height:calc(100vh - var(--top-h));align-items:stretch}
.shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sidenav{width:var(--side-w);flex:none;background:#fff;border-inline-end:1px solid var(--line)}
.side-inner{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));overflow-y:auto;display:flex;flex-direction:column;padding:20px 12px 16px}
.side-label{font:500 11px/1.3 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:0 12px 10px}
[dir=rtl] .side-label{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:600}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a,.menu .panel a{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 10px;border-radius:12px;border:1px solid transparent;color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;transition:background var(--t),color var(--t),border-color var(--t)}
.side-nav a:hover,.menu .panel a:hover{background:var(--surface)}
.side-nav a.on,.menu .panel a.on{background:var(--surface-2);color:var(--teal-d);border-color:var(--teal-100);font-weight:600}
/* icon tiles, like the site's menu (.mic): soft teal tile, teal Lucide stroke */
.app-ic{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--teal);background:var(--surface-2);transition:background var(--t)}
.app-ic svg.ico{width:17px;height:17px;vertical-align:0;stroke-width:1.75}
.side-nav a:hover .app-ic,.menu .panel a:hover .app-ic{background:var(--teal-100)}
.side-nav a.on .app-ic,.menu .panel a.on .app-ic{background:#fff;color:var(--teal-d);box-shadow:0 0 0 1px var(--teal-100)}
.tag{display:inline-block;font:500 11px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-d);background:var(--surface-2);border:1px solid var(--teal-100);border-radius:999px;padding:5px 9px}
.side-foot{margin-block-start:auto;display:flex;gap:10px;align-items:flex-start;padding:16px 12px 0;color:var(--ink-2);font-size:12.5px;line-height:1.55;border-block-start:1px solid var(--line)}
.side-foot svg.ico{color:var(--teal);margin-block-start:2px}
@media (max-width:980px){
  .sidenav{display:none}
  body.console .topbar .brand{min-width:0}
  .nav,.topbar .end .logout,.who-pill{display:none}
  .menu{display:block}
  .topbar .inner{padding:0 16px;gap:12px;min-height:58px}
}
@media (max-width:420px){.brand .sub{display:none}.lang-switch{padding:0 10px}.topbar .end{gap:8px}}

/* -- page ---------------------------------------------------------------------------------------------- */
main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:28px 28px 64px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-block-end:24px}
.page-head h1{margin:0}
.page-head p{margin:4px 0 0}
.crumbs{font-size:13.5px;margin-block-end:10px;color:var(--ink-2)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--teal)}
footer.foot{color:var(--ink-2);font-size:13px;text-align:center;padding:18px 16px 26px;border-block-start:1px solid var(--line);background:#fff}
.sidenav+.shell-main footer.foot{display:none}
@media (max-width:980px){.sidenav+.shell-main footer.foot{display:block}}
.narrow{max-width:780px;margin-inline:auto}
.xnarrow{max-width:480px;margin-inline:auto}

/* -- light hero (site): radial glow on white, mono eyebrow, big ink H1, short lead, mint-dot badge, 3D scene - */
.phero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:24px 40px;align-items:center;background:var(--glow),#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3.2vw,40px);margin-block-end:24px;box-shadow:var(--sh)}
/* dot field behind the words (the site's inner-page hero), fading out at the edges */
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(4,114,138,.14) 1px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 20% 10%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 70% 70% at 20% 10%,#000 20%,transparent 70%)}
[dir=rtl] .phero::before{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 80% 10%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 70% 70% at 80% 10%,#000 20%,transparent 70%)}
[dir=rtl] .phero{background:radial-gradient(900px 420px at 82% -30%,var(--surface-2) 0,rgba(255,255,255,0) 70%),#fff}
.phero>*{position:relative;z-index:1;min-width:0}
.phero h1{font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.035em;margin:10px 0 12px;overflow-wrap:anywhere}
[dir=rtl] .phero h1{letter-spacing:0;line-height:1.3}
.phero .lead{color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:56ch;margin:0}
.phero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:22px}
.phero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:18px}
.phero .trust{margin:0}
/* the site's badge: white pill, mint dot = everything is fine */
.hbadge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--ink-2);box-shadow:var(--sh-sm);max-width:100%}
.hbadge i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(24,185,138,.15);flex:none}
.hbadge b{color:var(--ink);font-weight:600}
.hbadge.attn{background:var(--teal-950);border-color:var(--teal-950);color:#fff}
.hbadge.attn b{color:#fff}
.hbadge.attn i{width:14px;height:14px;border-radius:0;box-shadow:none;background:#fff;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
@media (max-width:560px){.hbadge{border-radius:14px;align-items:flex-start}.hbadge i{margin-block-start:7px}.hbadge.attn i{margin-block-start:3px}}
/* the framed 3D scene: white frame, radius 24, thin line, soft shadow, a gentle float */
.illus{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);aspect-ratio:4/3}
.illus img{display:block;width:100%;height:100%;object-fit:cover;animation:xFloat 7s ease-in-out infinite}
@keyframes xFloat{0%,100%{transform:translateY(0) scale(1.03)}50%{transform:translateY(-7px) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.illus img{animation:none}}
/* totals strip under the hero words (the site's fact strip) */
.kstrip{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block-start:1px solid var(--line);margin-inline:calc(-1 * clamp(24px,3.2vw,40px));margin-block:8px calc(-1 * clamp(24px,3.2vw,40px));background:rgba(255,255,255,.75)}
.kstrip .kpi{padding:18px clamp(20px,2.4vw,28px);border-inline-start:1px solid var(--line);display:flex;flex-direction:column-reverse;gap:4px;min-width:0}
.kstrip .kpi:first-child{border-inline-start:0}
.kstrip .n{display:block;font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.kstrip .l{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13.5px;font-weight:500}
.kstrip .kpi.accent .n{color:var(--teal)}
.kstrip .kpi.ok .l::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--mint-ring);flex:none}
@media (max-width:760px){
  .phero{grid-template-columns:minmax(0,1fr);border-radius:20px}
  .phero .illus{display:none}
  .kstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kstrip .kpi:nth-child(odd){border-inline-start:0}
  .kstrip .kpi:nth-child(n+3){border-block-start:1px solid var(--line)}
  .phero .cta .btn{flex:1 1 auto}
}
/* the owner dashboard: the compact hero (no scene) - words at the start, the alert pill and the main button at the
   end, the totals strip under them - so the alerts start above the fold at 1280x800 */
.phero.dash{--hp:clamp(20px,2.2vw,26px);--hpi:clamp(20px,2.6vw,32px);grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;padding:var(--hp) var(--hpi);margin-block-end:20px}
.phero.dash .eb{margin:0}
.phero.dash h1{font-size:clamp(26px,2.4vw,32px);margin:2px 0 4px}
.phero.dash .lead{font-size:15px}
.phero.dash .side{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.phero.dash .kstrip{margin-inline:calc(-1 * var(--hpi));margin-block:0 calc(-1 * var(--hp))}
.phero.dash .kstrip .kpi{padding:11px clamp(18px,2vw,24px) 12px;gap:2px}
.phero.dash .kstrip .n{font-size:clamp(22px,2vw,27px)}
@media (max-width:760px){.phero.dash{grid-template-columns:minmax(0,1fr);gap:14px}.phero.dash .side{justify-content:flex-start}.phero.dash .side .btn{flex:1 1 auto}}

/* -- cards, grids -------------------------------------------------------------------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:22px 24px;margin-block-end:20px}
.card.flat{box-shadow:none}
.card.soft{background:var(--surface-2);border-color:var(--teal-100);box-shadow:none}
.card>h2:first-child,.card>h3:first-child{margin-block-start:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block-end:14px}
.card-head h2,.card-head h3{margin:0}
.grid{display:grid;gap:20px;align-items:start}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.side{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:900px){.grid.two,.grid.three,.grid.side{grid-template-columns:minmax(0,1fr)}}
.stack>*+*{margin-block-start:12px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.spacer{flex:1}

/* -- KPI tiles ----------------------------------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-block-end:24px}
.tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--sh);display:flex;flex-direction:column-reverse;gap:4px}
.tile .n{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.tile .l{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--ink-2);font-weight:500;font-size:13.5px}
/* accepted / done: a mint dot before the words */
.tile.ok .l::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--mint-ring);flex:none}
/* new arrivals: a soft teal tile */
.tile.accent{background:var(--surface-2);border-color:var(--teal-100)}
.tile.accent .n{color:var(--teal)}
/* due soon: teal tint and a ring (waiting) */
.tile.warn{background:var(--surface-2);border-color:var(--teal-200)}
.tile.warn .n{color:var(--teal-d)}
.tile.warn .l::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid var(--teal-d);flex:none}
/* needs action: the dark teal-950 tile with the alert sign */
.tile.bad{background:var(--teal-950);border-color:var(--teal-950)}
.tile.bad .n,.tile.bad .l,.tile.bad .faint,.tile.bad .muted{color:#fff}
.tile.bad .l::before{content:"";width:14px;height:14px;background:#fff;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:background var(--t),border-color var(--t),color var(--t)}
.chip b{font-family:var(--fm);font-weight:600;color:var(--teal-d);font-variant-numeric:tabular-nums}
a.chip:hover{border-color:var(--teal);color:var(--ink)}
.chip.on,.chip.current{background:var(--teal);border-color:var(--teal);color:#fff}
.chip.on b,.chip.current b{color:#fff}

/* -- status pills: palette only, the words say the state -------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:7px;padding:2px 11px 2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.75;white-space:nowrap;vertical-align:middle;background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-400);flex:none}
/* OK (accepted, live, done): mint tint, mint dot, ink words */
.badge.ok{background:var(--mint-tint);color:var(--ink);border-color:var(--mint-line)}
.badge.ok::before{background:var(--mint);box-shadow:0 0 0 3px var(--mint-ring)}
/* waiting (queued, sent, testing, new): surface-2 teal pill */
.badge.info{background:var(--surface-2);color:var(--teal-d);border-color:var(--teal-100)}
.badge.info::before{background:var(--brand)}
/* waiting on someone / to check (awaiting the client, warning, a deadline within 30 days): clearly stronger than
   waiting - teal-100 fill, a 1.5px teal-700 frame, bold teal-900 words and a hollow ring instead of the filled dot */
.badge.warn{background:var(--teal-100);color:var(--teal-d);border:1.5px solid var(--teal);padding:1.5px 10.5px 1.5px 9.5px;font-weight:700}
.badge.warn::before{width:9px;height:9px;background:transparent;border:2px solid var(--teal-d)}
/* needs action (rejected, error): teal-950 solid, white words, Lucide alert sign */
.badge.bad{background:var(--teal-950);color:#fff;border-color:var(--teal-950)}
.badge.bad::before{width:13px;height:13px;border-radius:0;background:#fff;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.badge.plain::before{display:none}
.badge.bad.plain::before,.badge.warn.plain::before{display:block}
.badge svg.ico{width:14px;height:14px}

/* -- buttons: primary = site .btn.p, secondary = site .btn.s -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:10px;border:1px solid var(--teal);background:var(--teal);color:#fff;font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:0 8px 18px -10px rgba(4,114,138,.7);transition:background var(--t),border-color var(--t),box-shadow var(--t),color var(--t);white-space:nowrap}
.btn:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.secondary:hover{background:#fff;border-color:var(--teal);color:var(--teal-d)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface);color:var(--ink)}
.btn.quiet{background:#fff;color:var(--ink-700);border-color:var(--line);box-shadow:none}
.btn.quiet:hover{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn.lg{min-height:50px;padding:0 24px;font-size:16px}
.btn.sm{min-height:36px;padding:0 14px;font-size:14px;box-shadow:none}
.btn.block{width:100%}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn .ico{width:18px;height:18px;flex:none}
.btn.copied{background:var(--mint-tint);border-color:var(--mint);color:var(--ink);box-shadow:none}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions form{margin:0}
.wizard-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:26px;padding-block-start:20px;border-block-start:1px solid var(--line)}
.wizard-nav .primary{margin-inline-start:auto}
@media (max-width:560px){.wizard-nav{flex-direction:column-reverse;align-items:stretch}.wizard-nav .primary{margin-inline-start:0}.wizard-nav .btn{width:100%}}

/* -- forms: the site's form fields (radius 12, teal focus ring) ----------------------------------------------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px}
.form-grid .full{grid-column:1/-1}
@media (max-width:700px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.field{margin-block-end:18px}
.field>label,.label{display:block;font-weight:600;font-size:14px;margin-block-end:6px;color:var(--ink)}
.field .opt{font-weight:500;color:var(--ink-2);font-size:13px}
.hint{display:block;font-size:13.5px;color:var(--ink-2);margin-block-start:6px;line-height:1.55}
.ferr{display:none;align-items:center;gap:7px;font-size:13.5px;color:var(--teal-950);font-weight:600;margin-block-start:6px}
.ferr:not(:empty)::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.field.invalid .ferr,.ferr.show{display:flex}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=number],input[type=date],input[type=search],input:not([type]),select,textarea{
  width:100%;font-family:inherit;font-size:16px;font-weight:400;line-height:1.45;color:var(--ink);background:#fff;border:1px solid var(--field-line);border-radius:12px;padding:10px 14px;min-height:46px;transition:border-color var(--t),box-shadow var(--t)}
textarea{min-height:auto;line-height:1.7;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-2);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--teal-d)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(5,133,161,.12)}
.field.invalid input,.field.invalid select{border-color:var(--teal-950);box-shadow:0 0 0 3px rgba(6,46,55,.12);background:#fff}
input[readonly],textarea[readonly]{background:var(--surface)}
input[type=checkbox],input[type=radio]{accent-color:var(--teal)}
input[type=file]{font:inherit;font-size:15px;width:100%;padding:14px;border:1.5px dashed var(--teal-200);border-radius:14px;background:var(--surface-2);cursor:pointer;color:var(--ink)}
input[type=file]:hover{border-color:var(--teal)}
input[type=file]::file-selector-button{font:inherit;font-size:14px;font-weight:600;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:8px 16px;margin-inline-end:14px;cursor:pointer}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http%3A//www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27m6 9 6 6 6-6%27 fill=%27none%27 stroke=%27%234A5F66%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");background-size:18px 18px;background-repeat:no-repeat;background-position:calc(100% - 14px) 50%;padding-inline-end:42px;cursor:pointer}
[dir=rtl] select{background-position:14px 50%}
.search{position:relative}
.search input{padding-inline-start:46px}
.search .ico{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--ink-2);pointer-events:none}
fieldset{border:0;padding:0;margin:0 0 8px}
legend{font-weight:600;font-size:16px;margin-block-end:12px;padding:0;color:var(--ink)}
details.more{border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin-block:8px 18px;background:var(--surface)}
details.more>summary{cursor:pointer;font-weight:600;padding:11px 0;color:var(--teal-d)}
details.more[open]>summary{margin-block-end:8px}
.secret-field{display:flex;gap:10px;align-items:center}
.secret-field input{flex:1}
.mask{font-family:var(--fm);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate;background:var(--surface-2);color:var(--ink);padding:3px 10px;border-radius:8px;font-size:14px}

/* choice cards (radio) */
.choices{display:grid;gap:12px}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .box{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border:1px solid var(--line-2);border-radius:14px;background:#fff;box-shadow:var(--sh-sm);cursor:pointer;transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.choice .box:hover{border-color:var(--teal-200)}
.choice input:checked+.box{border-color:var(--teal);background:var(--surface-2);box-shadow:0 0 0 1px var(--teal) inset}
.choice input:focus-visible+.box{box-shadow:var(--focus)}
.choice .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--field-line);flex:none;margin-block-start:3px;display:grid;place-items:center;background:#fff}
.choice input:checked+.box .dot{border-color:var(--teal)}
.choice input:checked+.box .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal)}
.choice .t{font-weight:600;font-size:15.5px;color:var(--ink);display:block}
.choice .d{font-size:13.5px;color:var(--ink-2);display:block;line-height:1.55}
.choice .meta{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.choice-group{margin-block-end:22px}
.choice-group h3{font:500 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-block-end:10px}
[dir=rtl] .choice-group h3{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:13.5px;font-weight:600}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.seg label{position:relative}
.seg input{position:absolute;opacity:0}
.seg span{display:block;padding:7px 18px;font-weight:600;color:var(--ink-2);cursor:pointer;border-radius:9px}
.seg label:hover span{color:var(--ink)}
.seg input:checked+span{background:#fff;color:var(--teal-d);box-shadow:var(--sh-sm),0 0 0 1px var(--line-2)}
.seg input:focus-visible+span{box-shadow:var(--focus) inset}

/* -- notices: icon tile + words; the tile and the start bar carry the state, the title says it ---------------- */
.notice{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px solid var(--teal-100);border-inline-start:4px solid var(--brand);background:var(--surface-2);margin-block-end:18px;color:var(--ink)}
.notice>.ico{width:18px;height:18px;padding:7px;box-sizing:content-box;border-radius:9px;flex:none;color:var(--teal);background:#fff;margin-block-start:0}
.notice p:last-child{margin:0}
.notice.ok{background:var(--mint-soft);border-color:var(--mint-line);border-inline-start-color:var(--mint)}
.notice.ok>.ico{background:var(--mint-ring);color:var(--teal-d)}
.notice.warn{background:#fff;border-color:var(--line-2);border-inline-start-color:var(--teal-d)}
.notice.warn>.ico{background:var(--teal-100);color:var(--teal-d)}
.notice.bad{background:#fff;border-color:var(--line-2);border-inline-start-color:var(--teal-950)}
.notice.bad>.ico{background:var(--teal-950);color:#fff}
.notice strong{display:block;margin-block-end:2px;color:var(--ink);font-weight:600}
.alert-list{list-style:none;margin:0;padding:0}
.alert-list li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-block-end:1px solid var(--line)}
.alert-list li:last-child{border-block-end:0}
.alert-list .sev{width:9px;height:9px;border-radius:50%;flex:none;margin-block-start:9px;background:var(--brand)}
.alert-list .critical .sev{width:16px;height:16px;border-radius:0;margin-block-start:4px;background:var(--teal-950);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.alert-list .warning .sev{width:10px;height:10px;background:transparent;border:2px solid var(--teal-d)}
.alert-list .count{margin-inline-start:auto;font-weight:700;font-variant-numeric:tabular-nums}

/* -- empty state ------------------------------------------------------------------------------------------ */
.empty{text-align:center;padding:40px 20px}
.empty .art{width:86px;height:86px;margin:0 auto 14px;color:var(--teal)}
.empty h3{margin-block-end:6px}
.empty p{color:var(--ink-2);max-width:460px;margin-inline:auto}

/* -- tables: mono uppercase headers on the surface, like the site's product screens ------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:12px 14px;text-align:start;vertical-align:middle;border-block-end:1px solid var(--line)}
th{height:44px;font:500 11px/1.3 var(--fm);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);background:var(--surface);white-space:nowrap}
[dir=rtl] th{font-family:var(--fa);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
tr:last-child td{border-block-end:0}
tbody tr{transition:background var(--t)}
tbody tr:hover td{background:var(--surface)}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
td a.rowlink{font-weight:600;color:var(--ink);text-decoration:none}
td a.rowlink:hover{color:var(--teal);text-decoration:underline}
@media (max-width:700px){
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{padding:12px 16px;border-block-end:1px solid var(--line)}
  table.stack tr:last-child{border-block-end:0}
  table.stack td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:16px;text-align:end}
  table.stack td::before{content:attr(data-label);font-weight:600;color:var(--ink-2);font-size:13.5px;text-align:start}
  table.stack td.num{text-align:end}
  table.stack td.lead{font-size:17px;display:block;text-align:start;padding-block-end:8px}
  table.stack td.lead::before{display:none}
  table.stack td.lead small{font-size:13.5px}
  /* a stacked LTR cell (dates, numbers) keeps the page's label/value order; the value itself stays LTR */
  [dir=rtl] table.stack td.ltr{direction:rtl}
}
/* label | value; a long label wraps inside its 45% instead of squeezing the value */
dl.facts{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:10px 24px;margin:0}
dl.facts dt{color:var(--ink-2);font-weight:500;min-width:min(140px,100%)}
dl.facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
/* the narrow side column of a page (document details): label above value */
.grid.side>:last-child dl.facts{grid-template-columns:minmax(0,1fr);gap:0}
.grid.side>:last-child dl.facts dt{margin-block-start:12px;font-size:13.5px}
.grid.side>:last-child dl.facts dt:first-child{margin-block-start:0}
/* an LTR value (TRN, IBAN, dates) in an Arabic page still sits on the label's side */
[dir=rtl] dl.facts dd.ltr{text-align:right}
@media (max-width:560px){dl.facts{grid-template-columns:minmax(0,1fr);gap:0 24px}dl.facts dt{margin-block-start:10px}dl.facts dt:first-child{margin-block-start:0}}

/* -- tabs: the site's quiet pills --------------------------------------------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-block-end:24px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm)}
.tabs a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:11px;border:1px solid transparent;text-decoration:none;color:var(--ink-2);font-weight:500;font-size:14.5px;white-space:nowrap;transition:color var(--t),background var(--t),border-color var(--t)}
.tabs a:hover{color:var(--ink);background:var(--surface)}
.tabs a.on{color:var(--teal-d);font-weight:600;background:var(--surface-2);border-color:var(--teal-100)}
.tabs .n{display:inline-block;min-width:22px;padding:0 7px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:600 12px/1.6 var(--fm);text-align:center;color:var(--ink-2)}
.tabs a.on .n{background:#fff;border-color:var(--teal-100);color:var(--teal-d)}
/* Geist Mono has no Arabic letters: an Arabic counter ("2 تجريبية") uses Cairo, never a system monospace */
[dir=rtl] .tabs .n{font-family:var(--fa)}
@media (max-width:560px){.tabs{gap:2px;padding:4px;border-radius:14px}.tabs a{min-height:36px;padding:0 10px;font-size:14px;border-radius:10px}}

/* -- wizard -------------------------------------------------------------------------------------------- */
.wizard{max-width:820px;margin-inline:auto}
.wizard-top{margin-block-end:18px}
.wizard-top .who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-2);font-weight:600;font-size:15px;margin-block-end:12px}
.wizard-top .who a{text-decoration:none}
.progress{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.progress a{display:block;text-decoration:none;color:var(--ink-2);font-size:12.5px;font-weight:500;text-align:center}
.progress a::before{content:"";display:block;height:6px;border-radius:999px;background:var(--line-2);margin-block-end:7px}
.progress a.done::before{background:var(--teal-200)}
.progress a.done{color:var(--teal-d)}
.progress a.current::before{background:var(--teal)}
.progress a.current{color:var(--teal-d);font-weight:700}
.progress-text{display:none;font-weight:600;color:var(--ink-2);font-size:15px;margin-block-start:8px}
@media (max-width:700px){.progress a{font-size:0}.progress a::before{margin:0}.progress-text{display:block}}
.wizard .card.main{padding:30px}
@media (max-width:560px){.wizard .card.main,.card{padding:18px}main{padding:18px 16px 44px}h1{font-size:23px}}
.step-title{display:flex;gap:14px;align-items:flex-start;margin-block-end:22px}
.step-title .num{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--teal);font:500 18px/1 var(--fm);display:grid;place-items:center;flex:none;box-shadow:var(--sh-sm)}
.step-title h1{font-size:24px;margin:0}
.step-title p{margin:4px 0 0;color:var(--ink-2)}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.checklist .ck{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.checklist .ck svg{width:15px;height:15px}
.checklist li.yes .ck{background:var(--mint-ring);border-color:var(--mint);color:var(--teal-d)}
.checklist li.no .ck{background:var(--teal-950);border-color:var(--teal-950);color:#fff}
.steps-list{counter-reset:s;list-style:none;margin:0;padding:0}
.steps-list li{counter-increment:s;position:relative;padding-inline-start:44px;margin-block-end:14px;min-height:30px}
.steps-list li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;border-radius:9px;background:var(--surface-2);border:1px solid var(--teal-100);color:var(--teal-d);font:500 13px/1 var(--fm);display:grid;place-items:center}
.kv{display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:15px}
.kv span+span::before{content:"·";margin-inline-end:8px;color:var(--ink-2)}

/* setup progress list on the client page */
.setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.setup-steps a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.setup-steps a:hover{background:var(--surface)}
.setup-steps .ck{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font:500 12px/1 var(--fm);flex:none}
.setup-steps .done .ck{background:var(--mint-ring);border-color:var(--mint);color:var(--teal-d)}
.setup-steps .next .ck{background:var(--teal);border-color:var(--teal);color:#fff}
.setup-steps .next{font-weight:700}
.meter{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;background:var(--teal);border-radius:999px}

/* -- copy blocks ------------------------------------------------------------------------------------------ */
.copybox{border:1px solid var(--line-2);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--sh-sm)}
.copybox .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--surface);border-block-end:1px solid var(--line);font-weight:600;color:var(--ink)}
.copybox textarea{border:0;border-radius:0;min-height:230px;field-sizing:content;font-size:15px;background:#fff;box-shadow:none}
.copybox textarea:focus{box-shadow:none}
.linkbox{display:flex;gap:10px;align-items:stretch}
.linkbox input{font-family:var(--fm);font-size:14.5px;direction:ltr;text-align:left}
@media (max-width:560px){.linkbox{flex-direction:column}}
.code{font:700 32px/1.2 var(--fm);letter-spacing:.18em;direction:ltr;unicode-bidi:isolate;background:var(--surface-2);border:1.5px dashed var(--teal-200);border-radius:14px;padding:18px 24px;text-align:center;color:var(--teal-d);margin:0 0 14px}

/* -- result card (htmx) ----------------------------------------------------------------------------------- */
.result{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:#fff;margin-block:16px}
.result>.ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.result>.ic svg{width:21px;height:21px}
.result.ok{border-color:var(--mint-line);background:var(--mint-soft)}.result.ok>.ic{background:var(--mint-ring);color:var(--teal-d);box-shadow:inset 0 0 0 1px var(--mint)}
.result.bad{border-color:var(--line-2);border-inline-start:4px solid var(--teal-950);background:#fff}.result.bad>.ic{background:var(--teal-950);color:#fff}
.result.wait{border-color:var(--teal-100);background:var(--surface-2)}.result.wait>.ic{background:#fff;color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal-100)}
.result h3{margin:0 0 4px;font-size:16px}
.result p{margin:0}
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
.btn.secondary .spinner,.btn.quiet .spinner{border-color:var(--teal-100);border-top-color:var(--teal)}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--brand);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){.spinner,.pulse{animation:none}}

/* -- score ring (readiness): the % is written in the middle; low = needs action ---------------------------- */
.score{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.ring{--p:0;width:130px;height:130px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(closest-side,#fff 76%,transparent 77% 100%),conic-gradient(var(--c,var(--teal)) calc(var(--p)*1%),var(--line) 0)}
.ring b{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.ring.low{--c:var(--teal-950)}.ring.mid{--c:var(--teal)}.ring.high{--c:var(--teal)}
.gaps{list-style:none;margin:0;padding:0}
.gaps li{display:flex;gap:12px;padding:12px 0;border-block-end:1px solid var(--line);align-items:flex-start}
.gaps li:last-child{border:0}
.gaps .sev{flex:none;margin-block-start:3px}

/* -- timeline (document history) ------------------------------------------------------------------------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding-inline-start:34px;padding-block-end:18px}
.timeline li::before{content:"";position:absolute;inset-inline-start:7px;top:8px;bottom:-8px;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{position:absolute;inset-inline-start:0;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--teal-200)}
.timeline li.ok .dot{border-color:var(--mint);background:#fff}.timeline li.bad .dot{border-color:var(--teal-950);background:var(--teal-950)}.timeline li.last .dot{background:var(--teal);border-color:var(--teal)}
.timeline .when{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.timeline .what{font-weight:600}
.timeline .detail{font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}
.totals{margin-inline-start:auto;min-width:280px}
.totals div{display:flex;justify-content:space-between;gap:24px;padding:6px 0}
.totals .grand{border-block-start:2px solid var(--ink);margin-block-start:6px;padding-block-start:10px;font-weight:700;font-size:19px}

/* -- catalog ------------------------------------------------------------------------------------------------ */
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-block-end:28px}
.sys{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-sm);transition:box-shadow var(--t),border-color var(--t),transform var(--t)}
.sys:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.sys .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sys .name{font-weight:600;font-size:15.5px;line-height:1.4;color:var(--ink)}
.sys .vendor{font-size:13px;color:var(--ink-2)}
.sys .how{font-size:14px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.sys .how svg{width:18px;height:18px;color:var(--teal);flex:none}
.family-title{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.family-title .count{font:500 12px/1 var(--fm);color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 9px}

/* -- sign-in pages: the form card beside the 3D scene, on the site's hero glow ----------------------------- */
body.auth{background:radial-gradient(1100px 480px at 50% -10%,var(--surface-2) 0,rgba(255,255,255,0) 70%),#fff}
body.auth .topbar .inner,body.portal .topbar .inner{max-width:1240px}
body.auth main{display:flex;align-items:flex-start;justify-content:center;max-width:1120px;padding-block:clamp(28px,6vh,72px) 64px}
body.auth footer.foot{background:transparent}
.auth-wrap{width:100%;display:grid;grid-template-columns:minmax(0,420px) minmax(0,500px);justify-content:center;align-items:center;gap:clamp(36px,6vw,80px)}
.auth-card{width:100%;max-width:420px;margin-inline:auto}
.auth-card .card{padding:32px 32px 26px;border-radius:22px;margin:0}
.auth-card h1{font-size:28px;letter-spacing:-.03em;margin-block:6px 8px}
[dir=rtl] .auth-card h1{letter-spacing:0}
.auth-card .lead{font-size:15px;color:var(--ink-2)}
.auth-side{min-width:0}
.auth-side .hbadge{margin-block-start:18px}
@media (max-width:880px){.auth-wrap{grid-template-columns:minmax(0,440px)}.auth-side{display:none}}
@media (max-width:560px){.auth-card .card{padding:24px 20px 20px}body.auth main{padding-block-start:24px}}
.pw-meter{display:flex;gap:6px;margin-block-start:8px}
.pw-meter i{flex:1;height:6px;border-radius:999px;background:var(--line)}
.pw-meter.s1 i:nth-child(-n+1){background:var(--teal-950)}
.pw-meter.s2 i:nth-child(-n+2){background:var(--teal-d)}
.pw-meter.s3 i:nth-child(-n+3){background:var(--teal)}
.pw-meter.s4 i{background:var(--mint)}

/* -- portal ------------------------------------------------------------------------------------------------- */
body.portal .topbar .inner{max-width:980px}
.topbar .secure-pill{align-self:center}
body.portal main{max-width:980px}
.portal-hero{padding:8px 0 20px}
.portal-hero h1{font-size:28px;margin-block-end:6px}
.phero.portal-hero{padding:clamp(24px,3.2vw,40px)}
.phero.portal-hero h1{font-size:clamp(28px,3.4vw,40px)}
.task{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh);margin-block-end:18px;overflow:hidden}
.task>.head{display:flex;gap:14px;align-items:center;padding:16px 22px;border-block-end:1px solid var(--line);background:var(--surface)}
.task>.head .num{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--teal);font:500 16px/1 var(--fm);display:grid;place-items:center;flex:none;box-shadow:var(--sh-sm)}
.task>.head h2{margin:0;font-size:17px}
.task>.body{padding:20px 22px}
.task.done>.head .num{background:var(--mint-ring);border-color:var(--mint);color:var(--teal-d)}
.trust{display:flex;gap:10px;align-items:center;color:var(--ink-2);font-size:14px}
.trust svg{width:19px;height:19px;color:var(--teal);flex:none}
.big-ok{width:84px;height:84px;border-radius:50%;background:var(--mint-ring);border:2px solid var(--mint);color:var(--teal-d);display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 0 10px var(--mint-soft)}
.big-ok svg{width:42px;height:42px}

/* -- print (readiness report, documents) ---------------------------------------------------------------- */
@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:12.5pt;display:block}
  .topbar,.sidenav,.no-print,.tabs,.wizard-nav,.btn,footer.foot,.menu,.illus{display:none!important}
  main{padding:0;max-width:none}
  .card,.tile,.table-wrap,.phero,.task{box-shadow:none;border-color:var(--line-2);break-inside:avoid}
  .phero,[dir=rtl] .phero{display:block;background:none;padding:12px 0;border:0}
  .phero::before{display:none}
  .kstrip{margin:12px 0 0;border:1px solid var(--line-2)}
  a{color:inherit;text-decoration:none}
  .print-only{display:block!important}
  table{font-size:10.5pt}
  th{background:var(--surface)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ring,.badge,.tile{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.print-only{display:none}
[dir=rtl] .flip{transform:scaleX(-1)}
.mt-1{margin-block-start:8px}.mt-2{margin-block-start:16px}.mt-3{margin-block-start:24px}.mt-4{margin-block-start:36px}
.mb-0{margin-block-end:0}.mb-1{margin-block-end:8px}.mb-2{margin-block-end:16px}
.sr-only:focus{position:fixed;inset-inline-start:12px;top:12px;width:auto;height:auto;clip:auto;margin:0;padding:10px 16px;background:#fff;border-radius:10px;box-shadow:var(--sh-lg);z-index:50}
progress.meter{appearance:none;-webkit-appearance:none;width:100%;height:10px;border:0;border-radius:999px;background:var(--line);overflow:hidden}
progress.meter::-webkit-progress-bar{background:var(--line);border-radius:999px}
progress.meter::-webkit-progress-value{background:var(--teal);border-radius:999px}
progress.meter::-moz-progress-bar{background:var(--teal);border-radius:999px}
.ring-svg{width:132px;height:132px;flex:none}
.ring-svg .track{stroke:var(--line)}
.ring-svg .val{stroke:var(--teal);transition:stroke-dasharray .6s}
.ring-svg.low .val{stroke:var(--teal-950)}.ring-svg.mid .val{stroke:var(--teal)}.ring-svg.high .val{stroke:var(--teal)}
.ring-svg text{font:700 30px var(--font);fill:var(--ink)}
/* the verdict under the score: mint dot when ready, the alert sign when it needs work */
.verdict{display:inline-flex;align-items:center;gap:8px}
.verdict.high::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--mint-ring);flex:none}
.verdict.low::before{content:"";width:14px;height:14px;flex:none;background:var(--teal-950);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
svg.ico{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
h2 svg.ico,h3 svg.ico{color:var(--teal);margin-inline-end:4px}
/* empty-state icon: the site's large icon tile */
.empty svg.art{display:block;width:72px;height:72px;margin:0 auto 16px;color:var(--teal);stroke-width:1.5;background:var(--surface-2);border:1px solid var(--teal-100);border-radius:20px;padding:18px}
.stack-0{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice .how{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-block-start:4px}
.choice .how svg{color:var(--teal)}
.choice .needs{display:none;margin-block-start:10px;padding:12px 14px;background:#fff;border:1px solid var(--teal-100);border-radius:10px;font-size:14px}
.choice .needs ul{margin:6px 0 0;padding-inline-start:20px}
.choice input:checked+.box .needs{display:block}
.busy-indicator{display:none}
form.busy .busy-indicator{display:inline-block}
form.busy button[type=submit]{opacity:.8;pointer-events:none}
.btn.secondary .busy-indicator{border-color:var(--teal-100);border-top-color:var(--teal)}

@media (max-width:560px){.btn{white-space:normal;text-align:center;line-height:1.35;padding-block:10px}.btn.lg{padding-inline:20px}}
.tax-table select{min-width:190px}
.tax-table .w-rate{width:84px;min-width:84px}
.tax-table td.why{min-width:190px}
.tax-table .exempt{margin-block-start:8px;min-width:190px}
.tax-table td{vertical-align:top}
.card-head>div{min-width:0}
.card-head h2,.card-head h3{overflow-wrap:anywhere}

details.section>summary{cursor:pointer;list-style:none}
details.section>summary::-webkit-details-marker{display:none}
details.section>summary h2::after{content:" +";color:var(--teal)}
details.section[open]>summary h2::after{content:" \2212"}
.big-ok svg.ico{width:42px;height:42px}
.btn.copied,.btn.copied .label,.btn.copied svg{color:var(--ink)}

/* -- review fixes: warning result, tick boxes, planned systems, phone layout ------------------------------ */
.result.warn{border-color:var(--line-2);border-inline-start:4px solid var(--teal-d);background:#fff}.result.warn>.ic{background:var(--teal-100);color:var(--teal-d)}
label.check{display:flex;gap:10px;align-items:flex-start;margin-block:12px;cursor:pointer;line-height:1.5}
label.check input{width:20px;height:20px;flex:none;margin-block-start:3px;accent-color:var(--teal)}
.choice.off{opacity:.62;cursor:not-allowed}
.choice.off .box{background:var(--surface)}
.opt.need{color:var(--teal-d);font-weight:600}
@media (max-width:700px){
  /* step 2: the Continue bar stays in reach while scrolling a long list */
  .wizard-nav.sticky-mobile{position:sticky;bottom:0;z-index:5;background:#fff;margin-inline:-16px;padding:12px 16px;
    border-block-start:1px solid var(--line);box-shadow:0 -6px 16px rgba(3,74,89,.06)}
  .choice .how,.choice .d.how{font-size:14px}
  /* tax codes: one card per code, the exemption list under the category, never off-screen */
  .tax-table select,.tax-table .exempt{min-width:0;width:100%}
  .tax-table td.cat{flex-direction:column;align-items:stretch;text-align:start}
  .tax-table td.cat::before{margin-block-end:4px}
  .tax-table td.why{min-width:0;flex-direction:column;align-items:stretch;text-align:start}
  .table-wrap.tax-wrap{overflow-x:visible}
}
/* small state words next to a value: the words say the state, the sign only repeats it */
.warn-text{color:var(--teal-d);font-weight:600}
.ok-text{color:var(--ink)}
.ok-text::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--mint-ring);margin-inline-end:8px;vertical-align:.1em}
.ok-text svg.ico{color:var(--teal-d)}
.error-text{color:var(--teal-950);font-weight:600}
.error-text::before{content:"";display:inline-block;width:13px;height:13px;margin-inline-end:6px;vertical-align:-.1em;background:currentColor;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
/* core v2 + database setup (20 Oct 2026) */
.company-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:6px}
.company-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--sh-sm)}
.company-list li form{margin-inline-start:auto}
.db-settings fieldset{border:0;padding:0;margin-inline:0}
.db-settings legend{font-weight:600;margin-bottom:6px}
.agent-results h4,.doc-panel h4{margin:12px 0 6px;font-size:15px}
.task-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.task-list li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-inline-start:4px solid var(--teal-d);border-radius:10px;background:#fff}
.task-list li.done{border-color:var(--mint-line);border-inline-start-color:var(--mint);background:var(--mint-soft)}
.task-list li form{margin-inline-start:auto}
.task-list .what{flex:1 1 220px;min-width:0}
.exposure{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0}
.exposure .tile{min-height:0}
.vendor-note{display:block;margin-top:4px;color:var(--teal-d)}
.fix-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.fix-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.check-steps{margin:6px 0 10px;padding-inline-start:20px}
.check-steps li{margin-bottom:4px}
.official{font-weight:700}
.agent-results,.db-settings,.doc-panel,.reader-notes{overflow-wrap:anywhere}
.choice .box>.stack-0{min-width:0;flex:1 1 auto}.choice .t,.choice .d{overflow-wrap:anywhere}
/* phones: the status pill sits above the name, so the words get the card's full width */
@media (max-width:560px){
  .choice .box{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px 12px;padding:14px}
  .choice .box>.dot{grid-row:1/span 2;margin-block-start:1px}
  .choice .meta{grid-column:2;grid-row:1;margin:0;align-items:flex-start}
  .choice .box>.stack-0{grid-column:2;grid-row:2}
}

/* in-page confirmation (hub.js data-confirm) - replaces window.confirm, which some web views dismiss silently */
.confirm-dialog{border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);padding:24px 24px 20px;width:min(440px,calc(100vw - 32px));color:var(--ink);background:#fff;font-family:inherit;font-size:15.5px;line-height:1.6}
.confirm-dialog::backdrop{background:rgba(6,46,55,.45)}
.confirm-dialog p{margin:0 0 20px;font-weight:600}
.confirm-dialog .actions{display:flex;gap:10px;flex-wrap:wrap}
.confirm-dialog .actions .btn{flex:1 1 150px}
h2.section-title{font:500 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:8px 0 12px}
[dir=rtl] h2.section-title{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:14px;font-weight:600}

/* -- received invoices (22 Oct 2026) ------------------------------------------------------------------------ */
.tabs .n.new{background:var(--teal);border-color:var(--teal);color:#fff}
.link-checks{list-style:none;margin:0 0 10px;padding:0}
.link-checks li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-block-end:1px solid var(--line);overflow-wrap:anywhere}
.link-checks li:last-child{border-block-end:0}
.received-table tr.is-new td.lead a.rowlink{font-weight:700}
/* ten columns: the headers and the arrival time may take two lines, so the status column stays in view at 1280 */
.received-table{font-size:14px}
.received-table th,.received-table td{padding-inline:11px}
.received-table th{white-space:normal;line-height:1.35}
.received-table td:nth-child(9){white-space:normal;min-width:106px}
.received-side dl.facts{grid-template-columns:minmax(0,1fr);gap:0}
.received-side dl.facts dt{margin-block-start:10px;font-size:14px}
.received-side dl.facts dt:first-child{margin-block-start:0}
[dir=rtl] .received-side dl.facts dd.ltr{text-align:right}
/* review fixes (22 Oct 2026): test count apart, credit notes negative, duplicate / first-import labels */
.tabs .n.test{background:var(--teal-100);border-color:var(--teal-200);color:var(--teal-d)}
.received-neg{color:var(--teal-950);font-weight:600}
.received-flags{display:flex;flex-wrap:wrap;gap:4px;margin-block-start:4px}
.received-flags .badge{white-space:normal}

/* -- Phase 1 (24 Oct 2026): two-step sign-in, rejections by rule, archive & export -------------------------- */
.qr-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;width:min(240px,100%);margin-block:12px}
.qr-box svg.qr{display:block;width:100%;height:auto}
.otp-secret{font:600 17px/1.6 var(--fm);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow-wrap:anywhere;margin:6px 0}
input.otp-input{font:600 22px/1.2 var(--fm);letter-spacing:.3em;text-align:center;max-width:260px}
.recovery-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font:600 18px/1.5 var(--fm);direction:ltr;unicode-bidi:isolate;padding-inline-start:28px;margin:12px 0 18px}
@media (max-width:520px){.recovery-codes{grid-template-columns:1fr}}
.rule-group .card-head h2{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.rule-id{font-family:var(--fm);font-size:12.5px;font-weight:500;color:var(--ink-2)}
.rule-fix{background:var(--surface-2);border-inline-start:4px solid var(--brand);border-radius:10px;padding:10px 14px;margin-block:8px 10px}
.provider-said span{overflow-wrap:anywhere}
.filters .form-grid{margin-block-end:8px}
.hold-form{margin-block:4px 0}