/*
Client Ops design system - Premium Clean Fintech.
Ported byte-for-byte (tokens, spacing, component classes) from the
approved prototype at client-ops-premium-prototype/client-ops-premium-master.html.
Prototype-only demo chrome (the sidebar dev-tool navigation classes)
is intentionally not included here - those don't exist in production.
*/
:root{
  --ink:#10263D; --ink-2:#173A59; --ink-3:#2F4F6A;
  --blue:#2F6BFF; --blue-2:#1F55D9; --blue-soft:#EDF3FF;
  --cyan:#21A7B6; --cyan-soft:#EAFBFC;
  --green:#168A62; --green-soft:#EAF8F2;
  --amber:#B77A10; --amber-soft:#FFF7E7;
  --red:#C64E4E; --red-soft:#FFF0F0;
  --purple:#6D5DE7; --purple-soft:#F1EFFF;
  --bg:#F4F7FB; --surface:#FFFFFF; --surface-2:#F9FBFE;
  --line:#E3EAF2; --line-2:#D4DEE9;
  --muted:#6D8093; --muted-2:#91A2B2;
  --shadow:0 24px 64px rgba(25,55,86,.10);
  --shadow-sm:0 8px 24px rgba(25,55,86,.07);
  --r10:10px; --r14:14px; --r18:18px; --r24:24px; --r30:30px;
  --max:1380px;
}
*{box-sizing:border-box}
/* An element's own display-setting class (.field, .grid, .card...)
   otherwise wins a specificity tie against the browser's built-in
   [hidden] rule, so a conditionally-hidden .field could render visible
   anyway - found on billing_profile.html's VAT number field. !important
   makes "hidden" always mean hidden, everywhere in this app. */
[hidden]{display:none!important}
html:not(:has(.app-shell)){scroll-behavior:smooth}   /* the public site only: in the app it fought the page's place-keeping (2026-10-13) */
body{margin:0;background:var(--bg);color:#172435;font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
svg.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.icon.sm{width:15px;height:15px}
svg.icon.lg{width:22px;height:22px}
.main{min-width:0}
.container{width:min(calc((100% + var(--max)) / 2),calc(100% - 40px));margin:0 auto}
.site-head{position:sticky;top:0;z-index:20;background:rgba(244,247,251,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(227,234,242,.88)}
.site-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0}
.brand{display:flex;gap:11px;align-items:center;color:var(--ink);font-weight:850}
.brand span{display:block;color:var(--muted);font-size:11px;font-weight:650}
.brand-logo{display:block;height:34px;width:auto;max-width:none}   /* the owner's wordmark (2026-10-13), static/brand/ */
.brand-logo-sm{height:26px}
.app-brand .brand-logo{height:30px;margin-bottom:2px}
.app-brand .logo-mark{display:none;width:auto;height:34px}            /* the 8 alone: only when the sidebar is folded */
.app-shell.nav-collapsed .app-brand .logo-mark{display:block}
.mark{width:37px;height:37px;border-radius:13px;background:linear-gradient(145deg,var(--blue),var(--cyan));position:relative;box-shadow:inset 0 0 0 7px rgba(255,255,255,.14);flex:0 0 auto}
.mark:after{content:"";position:absolute;width:11px;height:11px;border-radius:4px;background:#fff;right:7px;bottom:7px;opacity:.9}
.nav{display:flex;gap:22px;color:#536C81;font-weight:650}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:0 16px;border-radius:12px;border:1px solid transparent;background:transparent;font-weight:780}
.btn-primary{background:linear-gradient(180deg,var(--blue),var(--blue-2));color:#fff;box-shadow:0 8px 20px rgba(47,107,255,.22)}
.btn-dark{background:var(--ink);color:#fff}
.btn-outline{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-soft{background:var(--blue-soft);color:var(--blue)}
.btn-danger{background:var(--red);color:#fff}
.btn:focus-visible,.side-link:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--blue);font-weight:850;margin-bottom:14px}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px var(--cyan-soft)}
h1,h2,h3,p{margin-top:0}
h1{font-size:62px;line-height:1.01;letter-spacing:-.045em;color:var(--ink);margin-bottom:18px}
h2{font-size:30px;line-height:1.12;letter-spacing:-.025em;color:var(--ink);margin-bottom:10px}
h3{font-size:17px;color:var(--ink);margin-bottom:7px}
.lead{font-size:18px;line-height:1.65;color:#536C81;max-width:760px}
.muted{color:var(--muted)}
.note{font-size:11px;color:var(--muted)}
.hero{padding:70px 0 50px}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:36px;align-items:center}
.hero-copy{padding-inline-end:18px}
.hero-copy .accent{background:linear-gradient(90deg,var(--blue),var(--cyan));-webkit-background-clip:text;color:transparent}
.trust-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.trust-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);font-size:11px;font-weight:760;color:#4B6479}
.product-window{background:#fff;border:1px solid #DAE4EF;border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.window-bar{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#FBFCFE}
.window-dots{display:flex;gap:6px}.window-dots i{width:8px;height:8px;border-radius:50%;background:#D4DEE8}.window-dots i:first-child{background:#F0B75A}.window-dots i:nth-child(2){background:#62C69B}.window-dots i:nth-child(3){background:#759BEE}
.window-body{display:grid;grid-template-columns:118px 1fr;min-height:380px}
.mini-side{background:#F8FAFD;border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column}
.mini-brand{display:flex;gap:6px;align-items:center;padding:4px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mini-brand .mark{width:20px;height:20px;border-radius:7px}
.mini-brand strong{display:block;font-size:9.5px;color:var(--ink)}
.mini-brand span{display:block;font-size:8px;color:var(--muted)}
.mini-link{display:flex;align-items:center;gap:6px;padding:7px 7px;border-radius:8px;font-size:9.5px;color:#61778A;margin:2px 0}
.mini-link.active{background:var(--blue-soft);color:var(--blue);font-weight:760}
.mini-user{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);display:flex;gap:6px;align-items:center}
.mini-user .avatar{width:20px;height:20px;border-radius:7px;font-size:8px}
.mini-user strong{display:block;font-size:9px;color:var(--ink)}
.mini-user span{display:block;font-size:8px;color:var(--muted)}
.mini-main{padding:13px}
.mini-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.mini-head .note{font-size:9px}
.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mini-kpi{border:1px solid var(--line);border-radius:11px;padding:7px 8px;background:#fff}
.mini-kpi-icon{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;margin-bottom:5px}
.mini-kpi-icon svg{width:10px;height:10px}
.mini-kpi .note{font-size:8px}
.mini-kpi strong{display:block;font-size:14px;color:var(--ink);margin-top:2px}
.mini-kpi .mini-delta{font-size:7.5px;font-weight:760;color:var(--green);margin-top:1px}
.mini-status-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:#FBFDFF;padding:8px 10px;margin-top:7px}
.mini-status-item{display:flex;gap:6px;align-items:flex-start;flex:1;min-width:0}
.mini-status-icon{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.mini-status-icon svg{width:10px;height:10px}
.mini-status-item strong{display:block;font-size:9px;color:var(--ink)}
.mini-status-item span{display:block;font-size:7.5px;color:var(--muted)}
.mini-status-row .btn{min-height:24px;padding:0 8px;font-size:9px}
.mini-portfolio{margin-top:10px}
.mini-portfolio-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.mini-portfolio-head strong{font-size:10.5px;color:var(--ink)}
.mini-portfolio-head .note{font-size:8px}
.mini-portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mini-portfolio-card{border:1px solid var(--line);border-radius:11px;padding:7px;background:#FBFDFF}
.mini-portfolio-icon{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;margin-bottom:5px}
.mini-portfolio-icon svg{width:10px;height:10px}
.mini-portfolio-card h4{font-size:9px;color:var(--ink);margin:0 0 3px;font-weight:800}
.mini-portfolio-card p{font-size:7.5px;color:#6D8093;margin:0 0 6px;line-height:1.35}
.mini-portfolio-card .badge{font-size:8px;padding:3px 6px}
.mini-portfolio-card .note{font-size:7px;margin-top:6px;display:block}
.mini-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mini-panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:9px}
.mini-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.mini-panel-head strong{font-size:9.5px;color:var(--ink)}
.mini-panel-head .note{font-size:7.5px}
.mini-activity-item{display:flex;gap:6px;align-items:flex-start;padding:4px 0;border-top:1px solid var(--line)}
.mini-activity-item:first-child{border-top:0}
.mini-activity-icon{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.mini-activity-icon svg{width:8px;height:8px}
.mini-activity-item strong{display:block;font-size:8px;color:var(--ink)}
.mini-activity-item span{display:block;font-size:7px;color:var(--muted)}
.mini-activity-item .time{margin-inline-start:auto;font-size:7px;color:var(--muted-2);white-space:nowrap}
.mini-bars{display:flex;align-items:flex-end;gap:4px;height:60px;margin-top:7px}
.mini-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.mini-bar{width:100%;max-width:13px;display:flex;flex-direction:column;justify-content:flex-end;height:46px;border-radius:3px 3px 0 0;overflow:hidden;background:#F0F4F8}
.mini-bar .seg{width:100%}
.mini-bar .seg.blue{background:var(--blue)}
.mini-bar .seg.amber{background:var(--amber)}
.mini-bar-col .day{font-size:6.5px;color:var(--muted);margin-top:3px}
.flow-card{margin-top:11px;border:1px solid var(--line);border-radius:15px;padding:13px;background:#FBFDFF}
.flow-line{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:center;gap:8px}
.flow-node{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px;text-align:center;font-size:10px;color:#506A80}
.arrow{color:var(--muted-2);text-align:center}
.section{padding:28px 0}.section-lg{padding:60px 0}
.section-title{font-size:36px}.section-sub{font-size:16px;color:#5B7185;max-width:820px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.discovery-grid{grid-template-columns:200px 1fr}
/* Segmented tab control - never actually defined before (the buttons
   rendered as unstyled default <button> boxes, caught by the owner in
   review) - matches this system's existing pill/soft-surface language
   (.badge, .btn-soft) rather than inventing a new visual idiom. */
.tab-row{display:inline-flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r14);box-shadow:var(--shadow-sm);flex-wrap:wrap}
.tab-btn{display:inline-flex;align-items:center;gap:6px;min-height:37px;padding:0 16px;border:none;border-radius:var(--r10);background:transparent;color:var(--muted);font-weight:780;font-size:13px;transition:background .15s ease,color .15s ease}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{background:linear-gradient(180deg,var(--blue),var(--blue-2));color:#fff;box-shadow:0 6px 16px rgba(47,107,255,.22)}
.tab-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.step-tabs{margin-bottom:16px}
/* Form section card - gives each group of fields (Goal & risk, Rules
   & controls, ...) its own visual identity via a colored icon chip,
   instead of every group looking like an identical gray wall of
   fields (owner review finding: "same color for headers and text,
   no icons, hard to differentiate"). */
.form-section{margin-bottom:16px;padding:20px}
.form-section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.form-section-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.form-section-head h4{margin:0;font-size:16px;color:var(--ink)}
.form-section-head p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.studio-sketch-layout{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start;margin-top:16px}
.studio-inspector{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
.studio-inspector h4{margin-top:20px}
.studio-inspector h4:first-child{margin-top:0}
.studio-canvas-frame{width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r14)}
.studio-canvas-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.studio-system-card{margin-bottom:8px;padding:8px}
.card,.panel{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.card{border-radius:19px;padding:19px}.panel{border-radius:22px;padding:20px}
.card p{color:#5D7386;margin-bottom:0}
/* Client brief (automation_request.html) - ported from the V4 pack's
   own "brief" screen, not invented here. */
.brief-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;margin-top:20px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.form-top{padding:24px 26px 20px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.form-top .copy{flex:1}
.form-kicker{font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--blue);margin-bottom:6px}
.form-top h2{font-size:28px;line-height:1.18;letter-spacing:-.025em;margin:0}
.form-top p{font-size:13px;line-height:1.6;color:var(--muted);margin:7px 0 0}
.form-body{padding:25px}
.form-actions{padding:16px 25px;border-top:1px solid var(--line);background:#fbfdff;display:flex;justify-content:flex-end;gap:9px}
.upload{min-height:115px;border:1.5px dashed #b9ccde;border-radius:13px;background:#fbfdff;display:grid;place-items:center;text-align:center;padding:18px;cursor:pointer}
.upload strong{display:block;font-size:13px}
.upload small{display:block;font-size:10px;color:var(--muted);margin-top:4px;line-height:1.45}
.upload input{display:none}
.side-note{padding:18px}
.side-note h3{font-size:15px;margin:0 0 7px}
.side-note p,.side-note li{font-size:11px;color:var(--muted);line-height:1.6}
.side-note ul{padding-left:18px;margin:0}
.estimate{display:flex;gap:9px;align-items:center;padding:12px;border-radius:11px;background:var(--blue-soft);color:#2b5fbc;font-size:11px;font-weight:800;margin-top:12px}
.contact-cards summary{list-style:none;cursor:pointer}
.contact-cards summary::-webkit-details-marker{display:none}
.chat-bubble{background:var(--blue-soft);color:var(--ink);border-radius:14px 14px 14px 4px;padding:10px 13px;margin-bottom:8px;font-size:13px;max-width:80%}
.chat-bubble.user{background:var(--ink);color:#fff;border-radius:14px 14px 4px 14px;margin-inline-start:auto}
.chat-quick-replies{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chat-quick-replies .btn{min-height:32px;padding:0 12px;font-size:12px}
.chat-transcript:empty{display:none}
.feature-card{position:relative;overflow:hidden;min-height:190px}
.feature-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:24px;background:var(--blue-soft);color:var(--blue)}
.feature-card:nth-child(2) .feature-icon{background:var(--green-soft);color:var(--green)}
.feature-card:nth-child(3) .feature-icon{background:var(--purple-soft);color:var(--purple)}
.feature-card:nth-child(4) .feature-icon{background:var(--cyan-soft);color:var(--cyan)}
.feature-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-48px;top:-48px;background:rgba(47,107,255,.035)}
.process-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.process-step{position:relative;padding:18px;border:1px solid var(--line);background:#fff;border-radius:18px}
.process-step .num{width:34px;height:34px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:850;margin-bottom:16px}
.process-step:not(:last-child):after{content:"";position:absolute;top:35px;inset-inline-end:-14px;width:16px;border-top:2px dotted #BCD0E1}
.pipeline-rail .process-step:nth-child(4n):after{display:none}
.pipeline-tag{display:inline-flex;margin-bottom:10px}
.pipeline-tag.client{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.pipeline-tag.owner{background:#F0F4F8;color:#61778A;border-color:transparent}
.tag-row{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#506A80;font-size:11px;font-weight:730}
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:820}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.success{background:var(--green-soft);color:var(--green)}.running{background:var(--blue-soft);color:var(--blue)}.scheduled{background:#F0F4F8;color:#61778A}.warning{background:var(--amber-soft);color:var(--amber)}.failed{background:var(--red-soft);color:var(--red)}.live{background:var(--cyan-soft);color:#147987}
.quote-card{padding:28px;border-radius:24px;background:linear-gradient(135deg,#0F2D4A,#173F5F);color:#DCE9F3;box-shadow:var(--shadow)}
.quote-card h2{color:#fff}.quote-card p{color:#C2D4E2}
.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.app-side{background:#fff;border-right:1px solid var(--line);padding:16px 13px;position:sticky;top:0;height:100vh;overflow:auto}
.app-brand{display:flex;gap:10px;align-items:center;padding:4px 7px 16px;color:var(--ink);font-weight:850}
.app-brand span{display:block;color:var(--muted);font-size:11px;font-weight:620}
.workspace-switch{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:13px;background:#FBFDFF;padding:10px 11px;margin-bottom:16px;width:100%}
.workspace-switch strong{font-size:12px;color:var(--ink)}.workspace-switch small{display:block;color:var(--muted);font-size:10px}
.side-label{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#8AA0B3;font-weight:820;margin:16px 9px 7px}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;color:#557085;font-weight:650;margin:3px 0}
.side-link span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-link.active{background:linear-gradient(90deg,var(--blue-soft),#F6F9FF);color:var(--blue);font-weight:780}
/* The count pill hugs its number: without flex:0 it inherited flex:1 from
   ".side-link span" above, grew as wide as the label and wrapped it. */
.side-link .count{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#EEF3F8;color:#60778B;font-size:10px;font-weight:750;display:grid;place-items:center;overflow:visible}
.user-tile{display:flex;gap:9px;align-items:center;flex:1;min-width:0}
.avatar{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#D8E5FF,#E5FBF8);display:grid;place-items:center;color:var(--blue);font-weight:850;flex:0 0 auto}
.user-tile strong{display:block;font-size:11px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}.user-tile small{display:block;color:var(--muted);font-size:10px}
/* Dropdown - reusable design-system component for any click-to-reveal
   menu (the account menu today; a table-row action menu, a notification
   panel, etc. tomorrow). Built on native <details>/<summary> - no JS
   needed to open/close, only to close on an outside click (see
   app/static/js/app.js's single delegated listener for details.dropdown).
   Usage: <details class="dropdown"><summary>trigger<span class="chevron">
   {{ icon("chevron-down","sm") }}</span></summary><div class="dropdown-
   menu">...</div></details>. The menu card itself has no position rules
   here - the wrapper (e.g. .account-menu below) decides which corner it
   opens from, since that depends on where the trigger sits on the page. */
.dropdown{position:relative}
.dropdown summary{list-style:none;cursor:pointer;border-radius:11px}
.dropdown summary::-webkit-details-marker{display:none}
.dropdown summary:hover,.dropdown[open] summary{background:#F8FAFD}
.dropdown .chevron{display:inline-flex;flex:0 0 auto;color:var(--muted-2);transition:transform .15s}
.dropdown[open] .chevron{transform:rotate(180deg)}
.dropdown-menu{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:20}
/* Products in the public top menu (2026-10-12) */
.nav-drop summary{display:inline-flex;align-items:center;gap:6px;padding:0;color:inherit;font:inherit}
.nav-drop summary:hover,.nav-drop[open] summary{background:none;color:#16324A}
.nav-drop summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav-drop .dropdown-menu{min-width:280px;top:calc(100% + 6px);inset-inline-start:0}
.nav-drop .dropdown-menu a{display:block;padding:9px 12px;border-radius:9px;white-space:nowrap}
.nav-drop .dropdown-menu a:hover{background:#F2F6FB}
.nav-drop .dropdown-menu a.menu-product{display:flex;align-items:center;gap:7px}   /* [logo] for Hotels (owner 2026-10-13) */
.menu-logo{height:22px;width:auto;flex:0 0 auto}
/* Product pages */
.product-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-self:center}
.product-split h3{margin:0 0 10px;font-size:16px}
.product-done{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:15px;line-height:1.5}
.product-done svg{flex:0 0 auto;margin-top:3px;color:var(--teal, #0E9F8E)}
.product-recent p{display:flex;gap:16px;margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.product-recent p:last-child{border-bottom:0}
.product-recent time{flex:0 0 96px;color:var(--muted-2, #7A8CA0);font-variant-numeric:tabular-nums}
@media (max-width:860px){.product-split{grid-template-columns:1fr}}
.two-ways .feature-card{display:flex;flex-direction:column;gap:6px}
.two-ways .feature-card .btn{align-self:flex-start;margin-top:auto}
.two-ways-links{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.two-ways-links a{font-size:14px;font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:#33475B;background:#fff}
.two-ways-links a:hover{border-color:var(--blue);color:var(--blue)}

/* Account menu - the sidebar-footer instance of .dropdown above. Only
   this instance's anchor position (opens upward, full sidebar width)
   lives here; the toggle/hover/chevron behavior is all in .dropdown. */
.account-menu{margin-top:20px;border-top:1px solid var(--line)}
.account-menu summary{padding:12px;display:flex;align-items:center;gap:6px}
.account-menu .dropdown-menu{left:8px;right:8px;bottom:calc(100% - 4px)}

/* Language switch - a single globe trigger in the header actions row,
   opening a small menu of the two languages. Positioned from its own
   inset-inline-end so it opens under the trigger correctly in both
   text directions, matching the .dropdown-menu contract (the wrapper
   decides its own corner). */
.lang-switch summary{width:43px;height:43px;padding:0;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink)}
.lang-switch .dropdown-menu{inset-inline-end:0;top:calc(100% + 6px);min-width:140px}
/* public header (2026-10-13 design): globe + EN side by side; the long demo button left to the page on phones */
.site-head .lang-switch summary{width:auto;padding:0 12px;display:inline-flex;align-items:center;gap:6px}
.site-head .lang-code{font-size:13px;font-weight:700}
.site-head .lang-code::after{content:"";display:inline-block;width:5px;height:5px;margin-inline-start:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
@media (max-width:640px){.site-head .actions .btn-primary{display:none}}
.lang-switch .dropdown-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:650;color:var(--ink)}
.lang-switch .dropdown-menu a:hover{background:var(--blue-soft)}
.lang-switch .dropdown-menu a.active{color:var(--blue);font-weight:800}
.app-main{padding:20px 24px;min-width:0}
.topline{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.topline h1{font-size:34px;margin:0 0 7px}.topline p{margin:0;color:var(--muted)}
.search{display:flex;align-items:center;gap:8px;min-width:310px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#71879A}
.notification{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#5E7487;position:relative}.notification:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--red);right:8px;top:8px}
.focus-banner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:18px 20px;border-radius:20px;background:linear-gradient(135deg,#112D47,#173F5F);color:#DBE7F1;box-shadow:var(--shadow-sm);margin-bottom:16px}
.focus-banner h3{color:#fff;margin-bottom:5px}.focus-banner p{margin:0;color:#BFD0DD}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;position:relative;overflow:hidden}
.kpi .label{display:flex;align-items:center;justify-content:space-between;color:#6B8193;font-size:11px}.kpi .value{display:block;color:var(--ink);font-size:30px;font-weight:870;margin:7px 0 2px}.kpi .delta{font-size:10px;font-weight:760;color:var(--green)}
.kpi .spark{position:absolute;right:-8px;bottom:-8px;width:95px;height:50px;opacity:.55}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.panel-head h2{font-size:19px;margin:0}.panel-head .subhead{font-size:11px;color:var(--muted)}
.row-list{display:grid;gap:10px}
.task-row{display:grid;grid-template-columns:38px 1.3fr .8fr .8fr .8fr auto;align-items:center;gap:11px;border:1px solid var(--line);border-radius:15px;padding:12px 13px;background:#fff}
.task-icon{width:38px;height:38px;border-radius:12px;background:#F1F5FA;display:grid;place-items:center;color:#5A7185}
.task-row strong{display:block;color:var(--ink);font-size:12px}.task-row small{display:block;color:var(--muted);font-size:10px}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.quick-card{border:1px solid var(--line);border-radius:15px;padding:15px;background:linear-gradient(180deg,#fff,#FCFDFF);min-height:135px}
.quick-card .feature-icon{margin-bottom:14px}
.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:start;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}.table th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8195A7}.table tr:hover td{background:#FBFDFF}
.chart-card{height:220px;display:grid;grid-template-rows:auto 1fr}
.chart{position:relative;margin-top:10px;border-radius:15px;overflow:hidden}
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.progress{height:8px;border-radius:999px;background:#EDF2F6;overflow:hidden}.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.wizard{display:grid;grid-template-columns:280px 1fr;gap:16px}
.wizard-steps{border:1px solid var(--line);border-radius:20px;background:#fff;padding:14px}
.wstep{display:flex;gap:11px;padding:12px;border-radius:12px;color:#657C8F}
.wstep .dot{width:28px;height:28px;border-radius:9px;background:#EEF3F8;display:grid;place-items:center;font-weight:830;font-size:11px;flex:0 0 auto}
.wstep.active{background:var(--blue-soft);color:var(--blue);font-weight:750}.wstep.active .dot{background:var(--blue);color:#fff}
.wstep.done .dot{background:var(--green);color:#fff}
.field{display:grid;gap:6px;margin-bottom:13px}
.pick-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--line-2);border-radius:11px;background:#F8FAFC;font-size:12.5px;color:var(--muted)}.pick-empty .btn{white-space:nowrap}.field label{font-size:11px;font-weight:780;color:#4B6377}
.input,.select,.textarea{width:100%;padding:11px 12px;border:1px solid var(--line-2);border-radius:11px;background:#fff;color:#172435}
.textarea{min-height:110px;resize:vertical}.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choice{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;min-height:120px;text-align:start;width:100%}.choice.selected{border-color:#9EB8FF;background:#F7FAFF;box-shadow:0 0 0 3px rgba(47,107,255,.07)}
.choice .feature-icon{width:38px;height:38px;margin-bottom:14px}
.flow-map{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr 36px 1fr;align-items:center;gap:9px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#FAFCFF}
.flow-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;min-height:108px}.flow-step .feature-icon{margin:0 auto 12px;width:38px;height:38px}
.timeline{position:relative;padding-left:28px}.timeline:before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:#DCE6EE}.timeline-item{position:relative;padding:0 0 18px 16px}.timeline-item:before{content:"";position:absolute;left:-24px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px var(--blue-soft)}.timeline-item strong{display:block;color:var(--ink);font-size:12px}.timeline-item small{color:var(--muted)}
.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.file-card{border:1px solid var(--line);border-radius:15px;padding:14px;background:#fff}.file-type{width:40px;height:40px;border-radius:12px;background:#EDF3FF;color:var(--blue);display:grid;place-items:center;margin-bottom:12px}
.connection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.connection{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}.connection-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.app-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#EDF3FF,#E8FBFC);color:var(--blue);display:grid;place-items:center}
.review-priority{display:grid;grid-template-columns:8px 1.2fr .8fr .7fr auto;gap:11px;align-items:center;border:1px solid var(--line);border-radius:15px;background:#fff;padding:12px}.priority-bar{width:8px;height:44px;border-radius:999px;background:var(--amber)}.priority-bar.critical{background:var(--red)}.priority-bar.normal{background:var(--blue)}
.admin-health{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.worker{border:1px solid var(--line);border-radius:18px;background:#fff;padding:16px}.worker-head{display:flex;justify-content:space-between;align-items:flex-start}.worker-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.worker-stat{background:#F8FAFD;border-radius:11px;padding:9px}.worker-stat strong{display:block;color:var(--ink);font-size:15px}.worker-stat span{font-size:9px;color:var(--muted)}
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 520px}
.auth-visual{padding:60px;background:linear-gradient(145deg,#0B2238,#143B59);color:#D8E6F1;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.auth-visual:after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.22),transparent 62%);right:-150px;top:20px}
.auth-visual h1{color:#fff;font-size:52px;max-width:620px}.auth-visual p{color:#BDD0DE;max-width:620px}
.auth-panel{padding:60px 54px;background:#fff;display:flex;align-items:center}.auth-box{width:100%;max-width:390px;margin:auto}
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.persona{border:1px solid var(--line);border-radius:16px;padding:15px;background:#fff;text-align:start;width:100%}.persona.selected{border-color:#9DB6FF;background:#F7FAFF}
.score{display:flex;gap:8px;align-items:center}.score-ring{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 86%,#EDF2F6 86% 100%);position:relative}.score-ring:after{content:"";position:absolute;inset:6px;background:#fff;border-radius:50%}.score-ring strong{position:relative;z-index:1;font-size:11px;color:var(--ink)}
.design-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}
.swatch{height:72px;border-radius:14px;margin-bottom:10px}
.empty-state{text-align:center;padding:48px 24px;border:1px dashed var(--line-2);border-radius:20px;background:#FBFDFF}
.empty-state .feature-icon{margin:0 auto 16px}
.empty-state h3{font-size:19px}
.empty-state p{color:var(--muted);max-width:420px;margin:0 auto 18px}
@media(max-width:1050px){
  .hero-grid,.g4,.g3,.g2,.kpis,.app-shell,.wizard,.choice-grid,.connection-grid,.file-grid,.process-rail,.admin-health,.auth,.persona-grid,.discovery-grid,.brief-layout,.studio-sketch-layout{grid-template-columns:1fr}
  .process-step:after{display:none}
  .app-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .window-body{grid-template-columns:1fr}.mini-side{display:none}
  .mini-kpis,.mini-portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .mini-bottom-grid{grid-template-columns:1fr}
  .task-row,.review-priority{grid-template-columns:1fr}
  .flow-map{grid-template-columns:1fr}.arrow{transform:rotate(90deg)}
  .cols2{grid-template-columns:1fr}.search{min-width:0}.topline{display:block}
  .auth{grid-template-columns:1fr}.auth-visual{padding:34px}.auth-panel{padding:34px}.auth-visual h1{font-size:38px}
  h1{font-size:44px}
}
@media(max-width:780px){
  .nav{display:none}
}

/* Arabic (RTL) - the wizard's directional "Next"/"Back" arrow icon
   points right regardless of writing direction unless flipped; text
   alignment/flex order elsewhere is already handled with logical
   properties (text-align:start, margin-inline-start, padding-inline-end)
   rather than physical left/right, so those need no override here. */
[dir="rtl"] use[href="#i-arrow"]{transform:scaleX(-1);transform-origin:center}

/* Homepage film cards (#see-it-work), styled like Trintech's
   reconciliation use-cases: each card is a thumbnail with a centred play
   button, a bold title and one short description, on the same
   four-column grid and card size as the task cards. The film opens in
   .film-lightbox. */
.films-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.film-card{background:#fff;border:1px solid var(--line);border-radius:19px;padding:16px;box-shadow:var(--shadow-sm)}
.film-thumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#EEF3F9;cursor:pointer;aspect-ratio:16/9}
.film-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.film-thumb:hover img{transform:scale(1.03)}
.film-play{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 10px 26px rgba(16,38,61,.22);transition:transform .15s}
.film-play svg{width:20px;height:20px;fill:currentColor}
.film-thumb:hover .film-play{transform:scale(1.08)}
.film-thumb:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.film-duration{position:absolute;inset-inline-end:10px;bottom:10px;font-size:12px;font-weight:800;color:#fff;background:rgba(16,38,61,.78);border-radius:7px;padding:3px 8px}
.film-card h3{font-size:16px;line-height:1.3;margin:14px 0 6px}
.film-card p{font-size:13.5px;line-height:1.5;color:#5B7185;margin:0}
.film-card .note{margin-top:10px}
/* the whole-product film leads the row: one wide card, film left and words right; stacks on narrow screens */
.film-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center;padding:18px}
.film-feature .film-play{width:64px;height:64px;margin:-32px 0 0 -32px}
.film-feature .film-play svg{width:26px;height:26px}
.film-feature h3{font-size:22px;margin:0 0 10px}
.film-feature p{font-size:15px;line-height:1.6}
@media(max-width:820px){.film-feature{grid-template-columns:minmax(0,1fr);gap:4px}.film-feature h3{font-size:18px;margin-top:14px}}
.film-alt{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--blue);font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.film-alt:hover{border-color:var(--blue);background:var(--blue-soft,#EEF4FF)}
.film-alt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.film-lightbox{width:min(1100px,94vw);padding:0;border:0;border-radius:16px;background:#0B1624;overflow:visible}
.film-lightbox::backdrop{background:rgba(7,18,33,.82)}
.film-stage video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:#000}
.film-close{position:absolute;top:-44px;inset-inline-end:0;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}


/* Homepage "What can be automated" task cards (#solutions), in the style
   of Trintech's reconciliation task grid: a small drawn illustration
   (document sheet + app window + round icon badge), a bold title and one
   short line. Hovering lifts the card and pops the badge forward. */
.task-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px}
.task-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:19px;padding:18px 16px 20px;text-align:center;box-shadow:0 1px 2px rgba(16,38,61,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.task-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(16,38,61,.13);border-color:rgba(47,107,255,.22)}
.task-card h3{font-size:16px;line-height:1.3;margin:12px 0 6px}
.task-card p{font-size:13.5px;line-height:1.5;color:#5B7185;margin:0 auto;max-width:260px}
.task-art{--badge:linear-gradient(135deg,#2F6BFF,#7B5CFF);position:relative;height:112px;max-width:210px;margin:0 auto}
.task-card:nth-child(3n+2) .task-art{--badge:linear-gradient(135deg,#7B5CFF,#2FB8C6)}
.task-card:nth-child(3n) .task-art{--badge:linear-gradient(135deg,#1F4FD8,#2FB8C6)}
.task-sheet{position:absolute;left:10px;top:26px;width:56px;height:76px;background:#fff;border:1px solid #E1E8F2;border-radius:5px;box-shadow:0 6px 14px rgba(16,38,61,.07);
  background-image:repeating-linear-gradient(#fff 0 7px,#E6ECF4 7px 9px);background-size:40px 100%;background-position:8px 10px;background-repeat:no-repeat}
.task-window{position:absolute;right:8px;top:10px;width:132px;height:84px;background:#F7F9FC;border:1px solid #E1E8F2;border-radius:8px;box-shadow:0 9px 20px rgba(16,38,61,.09);overflow:hidden;transition:transform .3s ease}
.task-window:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:#EDF1F7;
  background-image:radial-gradient(circle,#7B8FF7 1.8px,transparent 2.2px),radial-gradient(circle,#A8B6FA 1.8px,transparent 2.2px),radial-gradient(circle,#C9D2FC 1.8px,transparent 2.2px);
  background-size:6px 6px;background-repeat:no-repeat;background-position:6px 4px,13px 4px,20px 4px}
.task-window i{position:absolute;left:58px;right:9px;top:23px;bottom:9px}
.art-rows .task-window i{background:repeating-linear-gradient(#DCE4EF 0 4px,transparent 4px 11px)}
.art-bars .task-window i{background:
  linear-gradient(#7B8FF7,#7B8FF7) 6% 100%/12% 70% no-repeat,linear-gradient(#2FB8C6,#2FB8C6) 38% 100%/12% 45% no-repeat,
  linear-gradient(#A8B6FA,#A8B6FA) 70% 100%/12% 85% no-repeat,linear-gradient(#DCE4EF,#DCE4EF) 100% 100%/12% 55% no-repeat}
.art-arrows .task-window i{background:
  linear-gradient(90deg,#DCE4EF 70%,#7B8FF7 70%) 0 25%/100% 6px no-repeat,linear-gradient(90deg,#2FB8C6 30%,#DCE4EF 30%) 0 55%/100% 6px no-repeat,
  linear-gradient(90deg,#DCE4EF 60%,#A8B6FA 60%) 0 85%/100% 6px no-repeat}
.art-calendar .task-window i{background:
  linear-gradient(#2F6BFF,#2F6BFF) 72% 70%/22% 30% no-repeat,
  repeating-conic-gradient(#E3E9F2 0 25%,#fff 0 50%) 0 0/15px 15px}
.art-columns .task-window i{background:
  repeating-linear-gradient(#DCE4EF 0 4px,transparent 4px 11px) 0 0/28% 100% no-repeat,repeating-linear-gradient(#DCE4EF 0 4px,transparent 4px 11px) 50% 0/28% 100% no-repeat,
  repeating-linear-gradient(#DCE4EF 0 4px,transparent 4px 11px) 100% 0/28% 100% no-repeat}
.task-badge{position:absolute;left:46px;top:27px;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(47,107,255,.24),0 0 0 5px rgba(47,107,255,.07);display:grid;place-items:center;transition:transform .3s ease}
.task-badge:before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--badge)}
.task-badge .icon{position:relative;width:24px;height:24px;color:#fff;stroke:#fff}
.task-card:hover .task-badge{transform:scale(1.1) rotate(-6deg)}
.task-card:hover .task-window{transform:translateX(4px)}
[dir="rtl"] .task-art{transform:scaleX(-1)}
[dir="rtl"] .task-badge .icon{transform:scaleX(-1)}
.task-tag{position:absolute;top:12px;inset-inline-end:12px;font-size:10.5px;font-weight:800;color:var(--green);background:var(--green-soft);border-radius:999px;padding:4px 10px;z-index:1}
@media(max-width:1050px){.task-grid,.films-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.task-grid,.films-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.task-card,.task-badge,.task-window{transition:none}.task-card:hover,.task-card:hover .task-badge,.task-card:hover .task-window{transform:none}}

/* Homepage: every card lifts when the cursor is over it, the same
   "pop out" as the task cards. The security band itself stays still;
   its four inner cards lift. Homepage only - app screens don't move. */
.home-page .card,.home-page .process-step,.home-page .film-card,.home-page #audiences .quote-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.home-page .card:hover,.home-page .process-step:hover,.home-page .film-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(16,38,61,.13);border-color:rgba(47,107,255,.22)}
.home-page #audiences .quote-card:hover{transform:translateY(-8px);box-shadow:0 26px 54px rgba(16,38,61,.28)}
@media(prefers-reduced-motion:reduce){.home-page .card,.home-page .process-step,.home-page .film-card,.home-page #audiences .quote-card{transition:none}.home-page .card:hover,.home-page .process-step:hover,.home-page .film-card:hover,.home-page #audiences .quote-card:hover{transform:none}}

/* Site footer (public pages) and the Pricing/About/Terms/Refund/Privacy
   pages (app/legal_content.py). .legal-draft / .legal-confirm only show
   while a page still has open items for the owner. */
.site-foot{border-top:1px solid var(--line);background:#fff;margin-top:40px}
.site-foot-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:26px 0}
.site-foot-brand{display:flex;flex-direction:column;gap:2px;font-size:14px}
.site-foot-brand span{color:#5B7185;font-size:12.5px}
.site-foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13.5px}
.site-foot-links a{color:#3B5166;text-decoration:none}
.site-foot-links a:hover{color:var(--blue);text-decoration:underline}
.legal{max-width:780px}
.legal h1{font-size:34px;margin:0 0 12px}
.legal h2{font-size:19px;margin:30px 0 8px}
.legal p{font-size:15.5px;line-height:1.7;color:#33475B;margin:0 0 10px}
.legal .legal-intro{font-size:17px;color:#5B7185}
.legal .legal-bullet{position:relative;padding-inline-start:20px;margin-bottom:6px}
.legal .legal-bullet:before{content:"";position:absolute;inset-inline-start:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.legal .legal-updated{margin-top:34px;font-size:13px;color:#7A8CA0}
.legal-draft{border:1px solid #F0C36D;background:#FFF8E6;border-radius:14px;padding:16px 18px;margin-bottom:26px;font-size:14px;color:#6B4E00}
.legal-draft ul{margin:8px 0 0;padding-inline-start:20px}
.legal-draft li{margin:3px 0}
.legal .legal-confirm{background:#FFF8E6;border-inline-start:3px solid #F0C36D;padding:8px 12px;border-radius:0 8px 8px 0}
.legal .legal-why{display:block;margin-top:4px;font-size:12.5px;color:#8A6A12}
.legal-lang-note{font-size:14px;color:#5B7185;margin-bottom:16px}
/* App plans on the pricing page (app/app_pricing.py) */
.legal .price-part{font-size:24px;margin:28px 0 8px}
.price-hint{border-bottom:1px dotted #7A8CA0;cursor:help}
.legal .price-change,.price-change{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:14px;color:#5B7185;margin:-4px 0 16px}
.price-change-menu{display:inline-flex;align-items:baseline;gap:8px}
.price-change-menu summary{display:inline;cursor:pointer;color:var(--blue);list-style:none}
.price-change-menu summary::-webkit-details-marker{display:none}
.price-change-menu[open] summary{margin-inline-end:10px}
.price-change-opts{display:inline-flex;gap:12px}
.price-change-opts a{color:var(--blue);text-decoration:none;font-weight:600}
.price-cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.legal .price-geo{font-size:11px;margin-top:14px}
.legal .price-geo a{color:#7A8CA0;text-decoration:none}
.price-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px}
.price-tier{border:1px solid #D6E0EA;border-radius:14px;padding:16px;background:#fff}
.price-tier-main{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.legal .price-tier h3{font-size:16px;margin:0 0 6px}
.legal .price-tier p{margin:0 0 6px;font-size:14px}
.legal .price-tier .price-amount{font-size:24px;font-weight:700;color:#0F2A43;margin:0}
.price-amount span{font-size:13px;font-weight:400;color:#5B7185;margin-inline-start:4px}
.legal .price-tier .price-year{font-size:13px;color:#7A8CA0}
.legal .price-tier .price-adds{color:#5B7185}
@media (max-width:720px){.price-tiers{grid-template-columns:1fr}}

/* Invoice document (app/templates/invoice_document.html): one A4 page,
   bilingual labels, ZATCA QR top-right; action buttons hidden in print. */
.invoice-page{max-width:880px;margin:0 auto;padding:28px 16px 48px}
.invoice-actions{display:flex;gap:10px;justify-content:flex-end;margin-bottom:16px}
.invoice-doc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px 38px;color:#1B2B3A}
.invoice-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;border-bottom:2px solid var(--ink,#10263D);padding-bottom:18px}
.invoice-head h1{font-size:26px;margin:0 0 8px}
.invoice-head h1 span{font-size:22px;margin-inline-start:10px;color:#5B7185}
.invoice-plain-note{font-size:13px;color:#8A6A12;background:#FFF8E6;border-radius:8px;padding:6px 10px;margin:0 0 10px}
.invoice-plain-note span{display:block}
.invoice-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13.5px}
.invoice-meta dt{color:#5B7185}.invoice-meta dd{margin:0;font-weight:700}
.invoice-meta span,.invoice-parties h2 span,.invoice-lines th span,.invoice-totals span{color:#7A8CA0;font-weight:500;margin-inline-start:4px}
.invoice-qr-box svg{width:132px;height:132px;display:block}
.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:18px 0;font-size:13.5px;line-height:1.55}
.invoice-parties h2{font-size:13px;text-transform:none;color:#5B7185;margin:0 0 6px}
.invoice-parties p{margin:0 0 6px}
.invoice-lines{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.invoice-lines th{background:#F4F7FB;text-align:start;padding:9px 10px;font-size:12px;border-bottom:1px solid var(--line)}
.invoice-lines td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.invoice-lines td:nth-child(n+2),.invoice-lines th:nth-child(n+2){text-align:end;white-space:nowrap}
.invoice-totals{display:grid;grid-template-columns:1fr auto;gap:6px 18px;max-width:420px;margin:18px 0 0 auto;font-size:14px}
.invoice-totals dt{color:#5B7185}.invoice-totals dd{margin:0;text-align:end;font-weight:700}
.invoice-totals .grand{font-size:17px;color:#10263D;border-top:2px solid #10263D;padding-top:8px}
[dir="rtl"] .invoice-totals{margin:18px auto 0 0}
@media(max-width:620px){.invoice-doc{padding:20px}.invoice-parties{grid-template-columns:1fr}.invoice-head{flex-direction:column}}
@media print{.no-print,.invoice-actions{display:none!important}body{background:#fff}.invoice-page{padding:0}.invoice-doc{border:0;padding:0}}

/* ---- Homepage "How it works" journey (owner-approved redesign, 2026-09-30) ----
   Classes are jstep/journey/viz-* - deliberately not owner/client/blue/dot/live,
   which app.css already uses elsewhere. */
.journey-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.journey-legend{display:flex;gap:8px;flex-wrap:wrap}
.journey-legend span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:750;color:var(--ink-2)}
.journey-legend b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-size:11px}
.journey-legend .yours b{background:var(--blue-soft);color:var(--blue)}
.journey-legend .ours b{background:var(--ink);color:#fff}
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;position:relative}
.journey:before{content:"";position:absolute;z-index:0;top:15px;inset-inline:16px 16px;height:2px;background:linear-gradient(90deg,#9DB8FF 0%,#8FD6DD 55%,#8A9BB0 100%);border-radius:2px}
[dir=rtl] .journey:before{background:linear-gradient(270deg,#9DB8FF 0%,#8FD6DD 55%,#8A9BB0 100%)}
.phase{position:relative;display:flex;flex-direction:column;gap:12px}
.phase-label{position:relative;z-index:1;display:flex;align-items:center;gap:0;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);height:32px}
.phase-label span{background:var(--bg);padding-inline:10px}
.phase-label i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;letter-spacing:0;background:#fff;border:2px solid #D6E2FF;color:var(--blue);box-shadow:0 0 0 5px var(--bg);position:relative;z-index:1}
.jstep{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(25,55,86,.05);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;flex:1}
.jstep{border-top:4px solid var(--blue)}
.jstep.ours{border-top-color:var(--ink)}
.jstep:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,38,61,.11);border-color:rgba(47,107,255,.25)}
.jstep-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.jstep-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.jstep.ours .jstep-icon{background:var(--ink);color:#fff}
.jstep-icon .icon{width:22px;height:22px}
.jstep-num{font-size:11px;font-weight:850;color:var(--muted-2);letter-spacing:.08em}
.jstep h3{margin:2px 0 0;font-size:16px}
.jstep p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.who{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:var(--blue-soft);color:var(--blue)}
.who .icon{width:13px;height:13px}
.jstep.ours .who{background:#EEF2F6;color:var(--ink-2)}
/* dark "our step" cards */
.jstep.ours{background:linear-gradient(155deg,#0E2945,#143E62);border-color:#0E2945;color:#fff;box-shadow:0 16px 35px rgba(13,41,69,.14)}
.jstep.ours h3{color:#fff}.jstep.ours p{color:#C8DBE8}
.jstep.ours .jstep-icon{background:rgba(255,255,255,.10);color:#9DE2E8}
.jstep.ours .who{background:rgba(255,255,255,.10);color:#D8E7F0}
.jstep.ours .jstep-num{color:#7FA3C0}
.jstep.ours:after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;inset-inline-end:-50px;bottom:-60px;background:radial-gradient(circle,rgba(47,107,255,.35),transparent 68%);pointer-events:none}
.jstep.final{border-top-color:var(--green)}
/* mini visuals */
.viz{position:relative;z-index:1;height:78px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:6px;overflow:hidden}
.jstep.ours .viz{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}
.bar{height:7px;border-radius:5px;background:#DCE6F1}
.jstep.ours .bar{background:rgba(255,255,255,.14)}
.bar.w40{width:40%}.bar.w55{width:55%}.bar.w70{width:70%}.bar.w85{width:85%}
.viz-row{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:10.5px;font-weight:800;white-space:nowrap}
.chip .icon{width:12px;height:12px}
.chip.ok{background:var(--green-soft);color:var(--green)}
.chip.primary{background:var(--blue);color:#fff}
.jstep.ours .chip.ok{background:rgba(22,138,98,.22);color:#7FE0B8}
.viz-form .field-line{display:flex;align-items:center;gap:8px}.viz-form .lbl{width:28%;height:6px;border-radius:4px;background:#C9D6E4}
.viz-form .inp{flex:1;height:14px;border-radius:5px;background:#fff;border:1px solid var(--line)}
.viz-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-content:center}
.viz-cal i{height:13px;border-radius:4px;background:#fff;border:1px solid var(--line)}
.viz-cal i.pick{background:var(--blue);border-color:var(--blue);box-shadow:0 4px 10px rgba(47,107,255,.35)}
.viz-cal i.off{background:transparent;border-style:dashed}
.viz-chat .b{height:16px;border-radius:9px}
.viz-chat .b.them{background:rgba(255,255,255,.16);width:62%}
.viz-chat .b.us{background:#2F6BFF;width:48%;align-self:flex-end}
.viz-chat .b.them2{background:rgba(255,255,255,.16);width:40%}
.viz-vault .secret{flex:1;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 9px;color:var(--muted-2);font-size:13px;letter-spacing:.18em}
.viz-vault .secret .icon{width:13px;height:13px;color:var(--muted)}
.viz-doc{flex-direction:row;align-items:center;gap:12px}
.viz-doc .sheet{flex:1;display:flex;flex-direction:column;gap:6px}
.viz-pay{flex-direction:row;align-items:center;gap:8px}
.viz-pay .opt{flex:1;height:44px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;font-weight:800;color:var(--ink-2)}
.viz-pay .opt.on{border:2px solid var(--blue);color:var(--blue)}
.viz-pay .opt .icon{width:15px;height:15px}
.viz-check .row{display:flex;align-items:center;gap:8px}
.viz-check .tick{width:14px;height:14px;border-radius:4px;background:rgba(127,224,184,.2);color:#7FE0B8;display:grid;place-items:center;flex:0 0 auto}
.viz-check .tick .icon{width:10px;height:10px}
.viz-flow{flex-direction:row;align-items:center;justify-content:space-between;gap:4px;padding:10px 20px}
.viz-flow .st{flex:0 0 auto;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#AFCBDD}
.viz-flow .vf-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.viz-flow .vf-dot .icon{width:13px;height:13px}
.viz-flow .st.vf-live{color:#7FE0B8}.viz-flow .st.vf-live .vf-dot{background:var(--green);box-shadow:0 0 0 4px rgba(22,138,98,.25)}
.viz-flow .ln{flex:1;height:2px;background:rgba(255,255,255,.18);margin-bottom:16px}
@media(max-width:1060px){.journey{grid-template-columns:1fr 1fr}.journey:before{display:none}}
@media(max-width:640px){.journey{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.jstep{transition:none}.jstep:hover{transform:none}}
/* White cards inside the dark security panel inherited the panel's pale
   paragraph colour (#C2D4E2 on white, ~1.5:1 contrast) - use body text colour. */
.quote-card .card p{color:var(--muted)}

/* ---- Arabic typography (2026-10-01) ----
   Latin display settings break Arabic: negative/positive letter-spacing
   pulls joined letters apart, and line-height ~1.0 makes diacritics
   (shadda, hamza) collide with the line above. Small uppercase tracked
   eyebrows become unreadable - Arabic has no capitals. */
html[dir="rtl"] body *{letter-spacing:normal!important}
html[dir="rtl"] :is(h1,h2,h3,h4){line-height:1.35}
html[dir="rtl"] h1{line-height:1.3}
html[dir="rtl"] .eyebrow{font-size:14px;text-transform:none;font-weight:800}
html[dir="rtl"] .phase-label{font-size:13px;text-transform:none}

/* Legal line under the footer links (Saudi E-Commerce Law Art. 6):
   seller name, CR, city, email - small and quiet, like Trintech's. */
.site-foot-legal{border-top:1px solid var(--line);padding:14px 0 22px;font-size:12px;color:#7A8CA0;text-align:center}
.site-foot-legal a{color:inherit}

/* Automation screen (Part B, 2026-10-04)
   /automations/{id}: header, stat strip, pipeline of the 7 real steps,
   step detail, problem callout, result/files/delivery cards, history,
   files, settings & audit. Values ported from the approved preview
   (automation-detail-preview.html). Every class is prefixed as- so no
   existing class changes; the few preview colours with no :root token
   (slate, track, mono) are scoped to .as-screen as --as-* properties. */
.as-screen{--as-slate:#5B6F84;--as-slate-soft:#EEF2F6;--as-track:#F0F4F8;--as-surface-3:#FBFDFF;--as-shadow-xs:0 1px 2px rgba(25,55,86,.05);--as-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  display:flex;flex-direction:column;gap:14px;font-size:13px;line-height:1.45;color:var(--ink);max-width:1320px;min-width:0}
.as-screen h1,.as-screen h2,.as-screen h3,.as-screen h4,.as-screen h5,.as-screen p{margin:0}
.as-screen .badge{padding:4px 9px;white-space:nowrap}
.as-screen .icon.sm{width:14px;height:14px}
.as-screen .icon.lg{width:20px;height:20px}
.as-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.as-quiet{color:var(--muted);font-size:12px}
.as-muted{color:var(--muted-2);font-weight:600}
.as-btn{min-height:34px;padding:0 13px;border-radius:10px;font-size:12px;font-weight:800;gap:7px;white-space:nowrap}
.as-btn-sm{min-height:28px;padding:0 10px;font-size:11.5px;border-radius:8px}
.as-btn.btn-danger{box-shadow:0 6px 16px rgba(198,78,78,.22)}
.as-btn:disabled{opacity:.55;cursor:not-allowed}

/* header */
.as-crumb{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);font-weight:600;flex-wrap:wrap}
.as-crumb a:hover{color:var(--blue)}
.as-crumb b{color:var(--ink)}
.as-crumb .icon{width:12px;height:12px;color:var(--muted-2)}
.as-hdr{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.as-hdr-l{display:flex;gap:12px;align-items:flex-start;min-width:0;flex:1 1 100%}
.as-hdr-t{min-width:0}
.as-tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:var(--green-soft);color:var(--green)}
.as-hdr h1{font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.02em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.as-desc{color:var(--muted);font-size:12.5px;margin-top:3px;max-width:70ch}
.as-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.as-meta span{display:inline-flex;gap:5px;align-items:center}
.as-meta .icon{width:12px;height:12px;color:var(--muted-2)}
.as-acts{display:flex;gap:8px;flex-wrap:wrap}

/* stat strip */
.as-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;background:var(--as-surface-3);overflow:hidden}
.as-stat{padding:11px 14px;border-left:1px solid var(--line);min-width:0}
.as-stat:first-child{border-left:0}
.as-stat-l{font-size:11px;color:var(--muted);font-weight:600}
.as-stat-v{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.as-stat-s{font-size:11px;font-weight:700;color:var(--muted);margin-top:1px}
.as-tone-success{color:var(--green)}.as-tone-failed{color:var(--red)}.as-tone-running{color:var(--blue)}.as-tone-warning{color:var(--amber)}

/* tabs: the shared .tab-row/.tab-btn markup, drawn as the preview's
   underlined tab bar (one line, scrolls sideways on a phone) */
.tab-row.as-tabs{display:flex;gap:2px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;flex-wrap:nowrap;overflow-x:auto;max-width:100%}
.as-tabs .tab-btn{min-height:0;padding:10px 12px;font-size:12.5px;font-weight:700;gap:7px;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.as-tabs .tab-btn.active{background:transparent;color:var(--ink);border-bottom-color:var(--blue);box-shadow:none}
.as-tabs .tab-btn:focus-visible{outline-offset:-2px}
.as-ct{font-size:10.5px;font-weight:800;background:var(--as-slate-soft);color:var(--as-slate);border-radius:999px;padding:0 6px;line-height:17px}

/* problem callout */
.as-problem{border-radius:14px;border:1px solid #F0CACA;background:linear-gradient(180deg,var(--red-soft),#fff 85%);padding:14px 16px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px}
.as-problem.as-ours{border-color:#D5E2FF;background:linear-gradient(180deg,var(--blue-soft),#fff 85%)}
.as-pi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--red);box-shadow:var(--as-shadow-xs)}
.as-ours .as-pi{color:var(--blue)}
.as-problem h2{font-size:15px;line-height:1.35;font-weight:800;letter-spacing:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.as-what{font-size:12.5px;color:var(--ink-2);margin-top:3px;max-width:80ch}
.as-owner{font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;letter-spacing:.02em;color:#fff;white-space:nowrap}
.as-owner.you{background:var(--red)}.as-owner.team{background:var(--blue)}
.as-retry{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.as-retry form{margin:0}
.as-retry small{color:var(--muted);font-size:11.5px}
.as-retry-new summary{list-style:none}
.as-retry-new summary::-webkit-details-marker{display:none}
.as-retry-new[open]{flex-basis:100%;order:1}
.as-retry-new[open] summary{background:var(--blue-soft);border-color:#D5E2FF;color:var(--blue)}
.as-retry-main[open] summary{background:var(--red-soft);border-color:#F0CACA;color:var(--red);box-shadow:none}
.as-retry-form{margin-top:8px!important;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.as-tech{margin-top:10px;border-top:1px dashed var(--line-2);padding-top:8px}
.as-tech summary{font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;list-style:none;display:flex;gap:6px;align-items:center}
.as-team-only{font-size:10px;font-weight:800;border-radius:999px;padding:2px 7px;background:var(--purple-soft);color:var(--purple)}
.as-tech summary::-webkit-details-marker{display:none}
.as-tech pre{margin:8px 0 0;font-family:var(--as-mono);font-size:11px;background:#0F2236;color:#CFE0F5;border-radius:10px;padding:10px 12px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.as-note-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid #F1DDB4;background:var(--amber-soft);color:#7A520A;border-radius:12px;padding:9px 14px;font-size:12.5px;font-weight:600}
.as-note-bar span{display:inline-flex;gap:8px;align-items:center}
.as-note-bar form{margin:0}

/* layout */
.as-cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;align-items:start}
.as-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.as-panel{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:var(--as-shadow-xs);scroll-margin-top:16px}
.as-sh{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.as-sh h3{font-size:14px;line-height:1.35;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.as-note{font-size:11.5px;color:var(--muted);font-weight:600}
.as-empty{display:flex;gap:12px;align-items:center;border:1px dashed var(--line-2);border-radius:12px;background:var(--as-surface-3);padding:14px;color:var(--muted-2)}
.as-empty strong{display:block;color:var(--ink);font-size:13px}
.as-empty span{display:block;color:var(--muted);font-size:12px}

/* pipeline: 7 step links, each inside a role=listitem wrapper (.as-li)
   so the links keep their link role */
.as-pipe{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;padding:4px 2px 6px}
.as-li{display:flex;min-width:0}
.as-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:0 8px 0 0;min-width:0;flex:1 1 auto;color:inherit;border-radius:8px}
.as-step::after{content:"";position:absolute;top:14px;left:34px;right:4px;height:2px;background:var(--line-2);border-radius:2px}
.as-li:last-child .as-step::after{display:none}
.as-node{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-2);background:#fff;color:var(--muted-2)}
.as-step.ok .as-node{border-color:var(--green);background:var(--green);color:#fff}
.as-step.ok::after{background:var(--green)}
.as-step.fail .as-node{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 0 0 5px var(--red-soft)}
.as-step.warn .as-node{border-color:var(--amber);background:var(--amber);color:#fff}
.as-step.warn::after{background:var(--amber)}
.as-step.retry .as-node{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 5px var(--blue-soft)}
.as-step.wait .as-node{border-style:dashed}
.as-nm{font-size:11.5px;font-weight:800;color:var(--ink);line-height:1.25}
.as-step.wait .as-nm{color:var(--muted)}
.as-one{font-size:11px;color:var(--ink-3);line-height:1.3;overflow-wrap:anywhere}
.as-step.fail .as-one{color:var(--red);font-weight:700}
.as-step.warn .as-one{color:var(--amber);font-weight:700}
.as-step.wait .as-one{color:var(--muted-2)}
.as-dur{font-size:10.5px;font-weight:700;color:var(--muted-2)}
.as-step:hover .as-nm{color:var(--blue-2)}
.as-step[aria-current="true"] .as-nm{color:var(--blue-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* step detail */
.as-sd{border:1px solid var(--line);border-radius:12px;background:var(--as-surface-3);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.as-sd-h{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.as-sd-h h4{font-size:13.5px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--ink)}
.as-sd-t{font-size:11px;color:var(--muted);font-weight:600}
.as-why{font-size:12px;color:var(--ink-3)}
.as-why-bad{color:var(--red);font-weight:600}
.as-sd h5{margin:0 0 5px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);font-weight:800}
.as-io{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.as-kv{border-collapse:collapse;width:100%}
.as-kv td{padding:5px 0;border-top:1px solid var(--line);font-size:12px;vertical-align:top}
.as-kv tr:first-child td{border-top:0}
.as-kv td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;padding-left:10px;overflow-wrap:anywhere}
.as-checks{display:flex;flex-direction:column;gap:5px}
.as-ck{display:flex;gap:7px;align-items:flex-start;font-size:12px}
.as-c{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-size:11px;font-weight:800;line-height:1}
.as-ck.ok .as-c{background:var(--green-soft);color:var(--green)}
.as-ck.no .as-c{background:var(--red-soft);color:var(--red)}
.as-ck.na .as-c{background:var(--amber-soft);color:var(--amber)}
.as-action{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--ink-2);background:var(--blue-soft);border-radius:10px;padding:8px 10px}
.as-action .icon{color:var(--blue);margin-top:1px;flex:0 0 auto}

/* result, files, delivery cards */
.as-money{display:flex;flex-direction:column}
.as-mrow{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.as-mrow:first-child{border-top:0}
.as-mrow b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.as-mrow.big{font-size:13.5px}
.as-verdict{display:flex;gap:8px;align-items:center;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700}
.as-verdict.ok{background:var(--green-soft);color:var(--green)}
.as-verdict.warn{background:var(--amber-soft);color:var(--amber)}
.as-verdict.no{background:var(--as-slate-soft);color:var(--as-slate)}
.as-files{display:flex;flex-direction:column;gap:6px}
.as-file{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.as-file.partial{border-style:dashed}
.as-fi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:800}
.as-fi.in{background:var(--green-soft);color:var(--green)}
.as-fi.out{background:var(--blue-soft);color:var(--blue)}
.as-file-b{min-width:0}
.as-file strong{display:block;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-file-b>span{display:block;font-size:10.5px;color:var(--muted)}
.as-ftag{font-size:9.5px;font-weight:800;border-radius:999px;padding:1px 6px;margin-right:4px}
.as-ftag.in{background:var(--as-slate-soft);color:var(--as-slate)}
.as-ftag.out{background:var(--blue-soft);color:var(--blue)}
.as-ftag.nd{background:var(--amber-soft);color:var(--amber)}
.as-dl{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-3);background:#fff}
.as-dl:hover{color:var(--blue);border-color:var(--line-2)}
.as-rcp{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:5px 0;border-top:1px solid var(--line)}
.as-rcp:first-child{border-top:0}
.as-rcp>span:first-child{overflow-wrap:anywhere;min-width:0}

/* run grid (runs x steps) */
.as-hm{position:relative;overflow-x:auto;max-width:100%}
.as-grid{border-collapse:separate;border-spacing:3px;width:auto}
.as-grid th{font-size:10.5px;color:var(--muted);font-weight:700;text-align:left;padding-right:10px;white-space:nowrap}
.as-grid thead th{text-align:center;padding:0 0 3px;font-size:10px}
.as-grid td{width:22px;min-width:22px;height:18px;border-radius:4px;padding:0}
.as-grid td.ok,.as-legend i.ok{background:#43B48A}
.as-grid td.fail,.as-legend i.fail{background:var(--red)}
.as-grid td.warn,.as-legend i.warn{background:#E0A93A}
.as-grid td.retry,.as-legend i.retry{background:var(--blue)}
.as-grid td.na,.as-legend i.na{background:var(--as-track)}
.as-grid td.legacy,.as-legend i.legacy{background:repeating-linear-gradient(45deg,var(--as-track),var(--as-track) 3px,#fff 3px,#fff 6px);box-shadow:inset 0 0 0 1px var(--line-2)}
.as-grid td.sel{outline:2px solid var(--ink);outline-offset:1px}
.as-legend{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:11px;color:var(--muted);font-weight:600}
.as-legend span{display:inline-flex;align-items:center}
.as-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

/* history and files tables */
.as-tbl{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:12px;max-width:100%}
.as-tbl table{border-collapse:collapse;width:100%;min-width:860px}
.as-tbl th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-weight:800;text-align:left;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.as-tbl td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:12px;white-space:nowrap;vertical-align:middle}
.as-tbl tr:last-child td{border-bottom:0}
/* a list whose rows hold a fold (Customers: edit, VAT box, ID upload): on a phone each row is a card, full width, so
   the fold is never off to the right of a sideways-scrolling table (ZATCA V3 review fix) */
@media (max-width:640px){.as-tbl.as-cards{overflow-x:visible}.as-tbl.as-cards table{min-width:0}.as-tbl.as-cards thead{display:none}
  .as-tbl.as-cards tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}.as-tbl.as-cards tr:last-child{border-bottom:0}
  .as-tbl.as-cards td{display:block;border-bottom:0;white-space:normal;padding:3px 12px}.as-tbl.as-cards td:empty{display:none}}
.as-tbl td.r,.as-tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.as-tbl tr.hl td{background:#FFFBF7}
.as-sub{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;white-space:normal;max-width:36ch}

/* settings & audit */
.as-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.as-setrow{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px}
.as-setrow:first-child{border-top:0}
.as-setrow .k{color:var(--muted);font-weight:600}
.as-setrow .v{font-weight:700;min-width:0;overflow-wrap:anywhere}
.as-setrow .v small{display:block;font-weight:500;color:var(--muted);font-size:11px;margin-top:2px}
.as-input{max-width:160px;padding:7px 10px;border-radius:9px;font-weight:700;font-variant-numeric:tabular-nums}
.as-form-actions{padding-top:10px;border-top:1px solid var(--line)}
.as-chip{display:inline-flex;gap:5px;align-items:center;font-size:11px;font-weight:700;border:1px solid var(--line-2);border-radius:999px;padding:2px 8px;background:#fff;max-width:100%;overflow-wrap:anywhere}
.as-chip .icon{width:12px;height:12px;flex:0 0 auto}
.as-who{font-size:10px;font-weight:800;border-radius:999px;padding:2px 7px;white-space:nowrap}
.as-who.you{background:var(--blue-soft);color:var(--blue)}
.as-who.us{background:var(--purple-soft);color:var(--purple)}
.as-audit{display:flex;flex-direction:column}
.as-au{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);align-items:start}
.as-au:first-child{border-top:0}
.as-au-c{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--as-slate-soft);color:var(--as-slate)}
.as-au-c .icon{width:12px;height:12px}
.as-au-play{background:var(--blue-soft);color:var(--blue)}
.as-au-lock{background:var(--purple-soft);color:var(--purple)}
.as-au-check{background:var(--green-soft);color:var(--green)}
.as-au strong{display:block;font-size:12px;font-weight:700}
.as-au span{display:block;font-size:11px;color:var(--muted)}
.as-au time{font-size:10.5px;color:var(--muted-2);font-weight:600;white-space:nowrap}

/* run form */
.as-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;width:100%}
.as-form-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.as-screen .field{margin-bottom:10px;min-width:0}
.as-screen .input[type="file"]{padding:8px 10px;font-size:12px}

@media(max-width:1180px){
  .as-cols{grid-template-columns:minmax(0,1fr)}
  .as-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .as-stat:nth-child(4){border-left:0}
  .as-stat:nth-child(n+4){border-top:1px solid var(--line)}
}
@media(max-width:900px){
  .as-grid2,.as-io,.as-form-3{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .as-pipe{grid-template-columns:minmax(0,1fr);gap:10px}
  .as-step{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;padding:0}
  .as-step .as-node{grid-row:1/3}
  .as-step::after{display:none}
  .as-step .as-dur{grid-row:1;grid-column:3}
  .as-step .as-one{grid-column:2}
  .as-form-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .as-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-stat{border-left:0;border-top:1px solid var(--line)}
  .as-stat:nth-child(even){border-left:1px solid var(--line)}
  .as-stat:nth-child(-n+2){border-top:0}
  .as-problem{grid-template-columns:minmax(0,1fr)}
  .as-pi{display:none}
  .as-setrow{grid-template-columns:minmax(0,1fr);gap:4px}
  .as-setrow .as-who,.as-setrow .badge{justify-self:start}
  .as-hdr-l{flex-basis:100%}
}
@media(prefers-reduced-motion:no-preference){.as-node{transition:box-shadow .2s}}

/* Owner dashboard (Part C, 2026-10-05)
   /app: greeting header, KPI cards with sparklines, health strip,
   needs-your-attention + up next, automation portfolio (live and in-setup
   cards), recent activity, runs chart and time-saved donut. Values ported
   from the approved preview (owner-dashboard-preview.html). Every class is
   prefixed db- so no existing class changes; the preview colours with no
   :root token (slate, track, surface-3) are scoped to .db-screen as
   --db-* properties. Charts are server-drawn SVG, no JS. */
.db-screen{--db-slate:#5B6F84;--db-slate-soft:#EEF2F6;--db-track:#F0F4F8;--db-surface-3:#FBFDFF;--db-shadow-xs:0 1px 2px rgba(25,55,86,.05);
  display:flex;flex-direction:column;gap:14px;font-size:13px;line-height:1.45;color:var(--ink);max-width:1320px;min-width:0}
.db-screen h1,.db-screen h3,.db-screen h4,.db-screen p{margin:0}
.db-screen .badge{padding:4px 8px;font-size:10.5px;font-weight:800;gap:6px;white-space:nowrap}
.db-screen .icon.sm{width:14px;height:14px}
.db-screen .empty-state{background:#fff}
.db-screen .empty-state h3{margin-bottom:6px}
.db-screen .empty-state p{margin:0 auto 18px;text-wrap:balance}
.db-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.db-num{font-variant-numeric:tabular-nums}
.db-quiet{color:var(--muted);font-size:12px}
.db-btn{min-height:34px;padding:0 13px;border-radius:10px;font-size:12px;font-weight:800;gap:7px;white-space:nowrap}
.db-btn-sm{min-height:28px;padding:0 10px;font-size:11.5px;border-radius:8px}
.db-btn.btn-primary{box-shadow:0 6px 16px rgba(47,107,255,.25)}

/* tone tiles */
.db-t-green{background:var(--green-soft);color:var(--green)}
.db-t-blue{background:var(--blue-soft);color:var(--blue)}
.db-t-amber{background:var(--amber-soft);color:var(--amber)}
.db-t-red{background:var(--red-soft);color:var(--red)}
.db-t-purple{background:var(--purple-soft);color:var(--purple)}
.db-t-cyan{background:var(--cyan-soft);color:var(--cyan)}
.db-t-slate{background:var(--db-slate-soft);color:var(--db-slate)}
.db-tone-green{color:var(--green)}.db-tone-red{color:var(--red)}.db-tone-amber{color:var(--amber)}

/* header */
.db-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.db-head h1{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.db-sub{color:var(--muted);font-size:12.5px;margin-top:2px}

/* KPIs */
.db-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.db-kpi{border:1px solid var(--line);border-radius:14px;padding:12px 13px 11px;background:#fff;display:flex;flex-direction:column;gap:2px;box-shadow:var(--db-shadow-xs);min-width:0}
.db-kpi-top{display:flex;justify-content:space-between;align-items:flex-start;height:34px;margin-bottom:8px}
.db-kpi-tile{width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.db-kpi-l{font-size:11.5px;color:var(--muted);font-weight:600}
.db-kpi-v{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.db-kpi-v small{font-size:13px;font-weight:700;color:var(--muted);margin-left:2px;letter-spacing:0}
.db-kpi-s{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px}
.db-spark{width:86px;height:34px;flex:0 0 auto}

/* health strip */
.db-health{display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;gap:16px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--db-surface-3);padding:10px 12px}
.db-ring{width:52px;height:52px;position:relative}
.db-ring svg{width:52px;height:52px;transform:rotate(-90deg);display:block}
.db-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:800}
.db-hi{display:flex;gap:9px;align-items:flex-start;min-width:0}
.db-hi-c{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.db-hi strong{display:block;font-size:12.5px;font-weight:800}
.db-hi>div span{display:block;font-size:11.5px;color:var(--muted)}

/* section heads + panels */
.db-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.db-sh{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.db-sh h3{font-size:14px;font-weight:800;letter-spacing:-.01em}
.db-note{font-size:11.5px;color:var(--muted)}
.db-sh a{font-size:11.5px;font-weight:800;color:var(--blue);display:inline-flex;gap:4px;align-items:center}
.db-sh a .icon.sm{width:12px;height:12px}
.db-panel{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 13px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:var(--db-shadow-xs)}

/* attention + up next */
.db-row2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:10px}
.db-att{display:grid;grid-template-columns:4px 30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px 9px 0;border-radius:11px;background:var(--db-surface-3);border:1px solid var(--line);overflow:hidden}
.db-sev{align-self:stretch;margin:-9px 0}
.db-att.db-k-failed .db-sev{background:var(--red)}.db-att.db-k-review .db-sev{background:var(--amber)}
.db-ai{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.db-att.db-k-failed .db-ai{background:var(--red-soft);color:var(--red)}.db-att.db-k-review .db-ai{background:var(--amber-soft);color:var(--amber)}
.db-att-b{min-width:0}
.db-att strong{display:block;font-size:12.5px;font-weight:800}
.db-att p{font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
.db-meta{font-size:11px;color:var(--muted-2);margin-top:1px}
.db-calm{display:flex;gap:10px;align-items:center;padding:12px;border-radius:11px;background:var(--green-soft);border:1px solid #CDEBDD}
.db-calm .db-ai{background:#fff;color:var(--green);flex:0 0 auto}
.db-calm strong{display:block;font-size:12.5px;font-weight:800}
.db-calm>div span{font-size:11.5px;color:var(--ink-3)}
.db-emptyline{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px dashed var(--line-2);border-radius:11px;padding:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* portfolio */
.db-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.db-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--db-surface-3);display:flex;flex-direction:column;gap:7px;min-width:0;color:var(--ink)}
.db-card:hover{box-shadow:var(--shadow-sm);border-color:var(--line-2);background:#fff}
.db-card.db-setup{background:#fff;border-style:dashed}
.db-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.db-tile{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.db-last{font-size:10.5px;color:var(--muted-2);font-weight:600;white-space:nowrap}
.db-card h4{font-size:13px;font-weight:800;letter-spacing:-.01em}
.db-desc{font-size:11.5px;color:var(--muted);line-height:1.4;min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.db-res{font-size:11.5px;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-res.red{color:var(--red);border-color:#F2D2D2;background:var(--red-soft)}
.db-res.amber{color:#8A5B0A;border-color:#F1DDB4;background:var(--amber-soft)}
.db-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:2px}
.db-flow{font-size:10.5px;color:var(--muted);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-rel{display:flex;gap:2px;flex:0 0 auto}
.db-rel i{width:5px;height:12px;border-radius:2px;background:var(--db-track)}
.db-rel i.g{background:var(--green)}.db-rel i.r{background:var(--amber)}.db-rel i.f{background:var(--red)}.db-rel i.b{background:var(--blue)}
.db-stages{display:flex;gap:3px;margin-top:2px}
.db-stages i{flex:1;height:5px;border-radius:3px;background:var(--db-track)}
.db-stages i.d{background:var(--blue)}
.db-stagelbl{font-size:10.5px;color:var(--muted);font-weight:600}
.db-screen .badge.db-plan{background:#fff;color:var(--db-slate);border:1px dashed var(--line-2)}

/* activity, runs chart, time saved */
.db-row3{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr);gap:10px}
.db-act{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:9px;align-items:start;padding:7px 0;border-top:1px solid var(--line)}
.db-act:first-child{border-top:0}
.db-act-c{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.db-act-c .icon.sm{width:12px;height:12px}
.db-act strong{display:block;font-size:12px;font-weight:700}
.db-act>div span{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.db-act time{font-size:10.5px;color:var(--muted-2);white-space:nowrap;font-weight:600}
.db-bars{width:100%;height:auto;display:block}
.db-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);font-weight:600}
.db-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.db-donut{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}
.db-dcenter{position:relative;width:96px;height:96px}
.db-dcenter svg{width:96px;height:96px;transform:rotate(-90deg);display:block}
.db-dlab{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.db-dlab b{display:block;font-size:17px;font-weight:800;line-height:1}
.db-dlab span{font-size:10px;color:var(--muted);font-weight:600}
.db-dl{display:flex;flex-direction:column;gap:5px;font-size:11.5px;min-width:0}
.db-dl div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:7px;align-items:center}
.db-dl i{width:8px;height:8px;border-radius:2px}
.db-dl b{font-weight:800}

@media(max-width:1180px){
  .db-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-row3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-row3>:last-child{grid-column:1/-1}
  .db-health{grid-template-columns:auto 1fr 1fr}
  .db-hi3,.db-hb{display:none}
}
@media(max-width:900px){
  .db-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-row2,.db-row3{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .db-grid4{grid-template-columns:minmax(0,1fr)}
  .db-spark{display:none}
  .db-health{grid-template-columns:auto minmax(0,1fr)}
  .db-hi2{display:none}
  .db-att{grid-template-columns:4px minmax(0,1fr);row-gap:8px}
  .db-att .db-ai{display:none}
  .db-att .db-btn{grid-column:2;justify-self:start}
  .db-att .db-sev{grid-row:1/3}
  .db-head .db-btn{width:100%}
}
@media(prefers-reduced-motion:no-preference){.db-card{transition:transform .15s,box-shadow .15s,border-color .15s}.db-card:hover{transform:translateY(-2px)}}

/* One date picker everywhere (2026-10-08, owner's reference layout in the site's own colours): quick choices left, one calendar right,
   a range picked in the same window. Script: static/js/datepicker.js; range macro: components.date_range. */
.drp { position:relative; display:inline-block; }
.drp-single { display:block; }
.drp-btn { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 14px; border:1px solid var(--line-2);
  border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; white-space:nowrap; }
.drp-single .drp-btn { width:100%; justify-content:flex-start; font-weight:500; }
.drp-btn:hover, .drp-btn[aria-expanded="true"] { border-color:var(--blue); }
.drp-btn .icon { color:var(--muted); }
.drp-btn.empty .drp-label { color:var(--muted-2); }
.drp-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:60; display:flex; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; font-size:13px; }
[dir="rtl"] .drp-pop { left:auto; right:0; }
.drp-presets { display:flex; flex-direction:column; gap:1px; min-width:112px; padding:2px 8px 2px 2px; border-inline-end:1px solid var(--line); }
.drp-preset { text-align:start; padding:6px 10px; border:0; border-radius:8px; font-size:13px; background:none; color:var(--ink-2); font:inherit; cursor:pointer; white-space:nowrap; }
.drp-preset:hover { background:var(--blue-soft); }
.drp-preset.on { background:var(--blue-soft); color:var(--blue); font-weight:700; }
.drp-cal { width:224px; padding:0 2px 0 8px; }
.drp-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 4px; }
.drp-title { font-weight:800; font-size:13px; color:var(--ink); }
.drp-nav { width:24px; height:24px; border:0; border-radius:6px; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; }
.drp-nav:hover { background:var(--surface-2); }
.drp-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.drp-dow { text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); padding:2px 0; }
.drp-day { height:28px; padding:0; border:0; border-radius:6px; background:var(--surface-2); color:var(--ink-2); font:inherit; font-size:12px; cursor:pointer; }
.drp-day:hover { outline:1.5px solid var(--blue); }
.drp-day.out { background:none; color:var(--muted-2); }
.drp-day.in { background:var(--blue-soft); color:var(--ink); }
.drp-day.today { box-shadow:inset 0 0 0 1.5px var(--line-2); }
.drp-day.end { background:var(--blue); color:#fff; font-weight:800; }
.drp-foot { margin-top:6px; text-align:center; font-size:11px; color:var(--muted); }
@media (max-width:620px) {
  .drp-pop { flex-direction:column; position:fixed; left:12px !important; right:12px !important; top:auto; bottom:12px; }
  .drp-presets { flex-direction:row; flex-wrap:wrap; border-inline-end:0; border-bottom:1px solid var(--line); padding:0 0 8px; min-width:0; }
  .drp-cal { width:auto; padding:8px 0 0; }
}
@media print { .drp-pop { display:none; } .drp-btn { border:0; padding:0; } }
/* The design standard (2026-10-08) lives in design.css, loaded after this file. */
/* Designs panel on the contractor project page (design intake 2b-1) */
.dz-head{flex-wrap:wrap;align-items:flex-start}.dz-head h2{display:flex;align-items:center;gap:8px}
.dz-upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}.dz-upload .input{width:auto;max-width:100%;min-width:0;padding:8px 10px}
.dz-notice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:14px;border-radius:12px;background:var(--green-soft);color:var(--green);font-size:12.5px;font-weight:650}
.dz-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.dz-group{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface-2);min-width:0}
.dz-group-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--ink)}.dz-group-head .note{margin-left:auto}
.dz-item{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line)}.dz-group-head+.dz-item{border-top:0}
.dz-item-main{min-width:0}.dz-label{font-size:12.5px;font-weight:720;color:var(--ink)}
.dz-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}.dz-item-side .badge{padding:4px 9px;white-space:nowrap}
.dz-sheet{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dz-sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dz-sheet-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink)}.dz-sheet-title .badge{padding:4px 9px}
.dz-sheet-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dz-sheet-meta .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-rooms{max-width:760px}.dz-rooms table{min-width:0}.dz-rooms tr.dz-total td{background:var(--surface-2);border-top:1px solid var(--line-2)}
.dz-rooms tr.dz-separate td{color:var(--muted)}
.dz-plot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ink)}.dz-plot .badge{padding:4px 9px}
@media(max-width:600px){.dz-rooms td,.dz-rooms th{white-space:normal;padding:8px}.dz-rooms td:nth-child(2){white-space:nowrap}}
.dz-notice.dz-warn{background:var(--amber-soft);color:var(--amber)}

/* Sales items (ZATCA variations V4): Tax + Reason per item, one row each; stacked on a phone */
.si-head,.si-row{display:grid;grid-template-columns:2fr 1fr 1fr 2fr 1fr auto;gap:6px;align-items:center}
.si-head.sa,.si-row.sa{grid-template-columns:1.5fr .9fr .6fr 1.6fr 1.1fr 1.6fr 64px}
.si-row{grid-template-columns:2fr 1fr 1fr 2fr 1.1fr 64px}
.si-switch{flex:0 0 104px;display:flex;justify-content:flex-end}
.si-switch .btn{white-space:nowrap;padding-left:10px;padding-right:10px}
.si-head{font-size:12px;font-weight:600;color:var(--muted);padding:0 110px 6px 0;border-bottom:1px solid var(--line)}
.si-item{display:flex;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.si-item .si-row{flex:1;min-width:0}
.si-item .si-row>*{min-width:0}
.si-item.off{opacity:.55}
.si-item.needs [data-tax-reason]{border-color:var(--red);color:var(--red)}
.si-reason{display:flex;gap:6px;min-width:0}
.si-reason>select,.si-reason>input{flex:1 1 0;min-width:0}
.si-fixed{font-size:13px;color:var(--muted);padding-left:8px}
.si-new{margin-top:14px;align-items:end}
.si-new .si-reason{display:block}
.si-new .si-reason:has([data-tax-reason][hidden]):has([data-tax-why][hidden]){visibility:hidden}
.si-row.si-new{grid-template-columns:2fr 1fr 1fr 2fr 1.1fr auto}
.si-row.si-new.sa{grid-template-columns:1.6fr .8fr .6fr 1.6fr 1.1fr 1.7fr auto}
.si-item .si-row>.btn{padding-left:0;padding-right:0}
.si-new .si-reason>select,.si-new .si-reason>input{width:100%}
.si-new .si-reason>input{margin-top:6px}
@media (max-width:760px){
  .si-head{display:none}
  .si-item{flex-direction:column;align-items:stretch;padding:12px 0}
  .si-row,.si-row.sa,.si-row.si-new,.si-row.si-new.sa{grid-template-columns:1fr 1fr}
  .si-row>input[name=label],.si-row>select[name=account],.si-row>.si-reason,.si-new>.field:first-of-type{grid-column:1/-1}
  .si-switch{align-self:flex-end;flex:0 0 auto;margin-top:-49px}
  .si-switch:empty{display:none}
  .si-reason:not(:has(>:not([hidden]))){display:none}
  .si-item .si-row>.btn{justify-self:start;width:auto}
  .si-item .si-row>.btn{padding-left:14px;padding-right:14px}
}