/* ================================================================
design.css — SERVORA design system (the single source of truth).
Aesthetic: "Professional Trade meets modern SaaS" — deep blue, crisp
white cards on a cool-clean canvas, soft layered shadows, confident
Inter type, tabular numbers for money. Calm, trustworthy, premium.
Every class hook below is used across the contractor console, client
portal, subcontractor portal, command center, and marketing site.
Fonts (Inter) load via a in each page's :
================================================================ */
:root{
/* COLOR — one loud accent (Servora deep blue). Cool-neutral canvas. */
--ink:#101828; /* headlines, primary text (blue-black) */
--ink-2:#1D2939; /* slightly softer heading ink */
--slate:#667085; /* secondary text */
--slate-2:#98A2B3; /* tertiary / captions */
--paper:#F5F7FB; /* cool off-white page bg */
--paper-2:#EEF2F8; /* recessed surfaces */
--card:#FFFFFF;
--line:#E6EAF0; /* hairline borders */
--line-2:#EEF1F6; /* subtle inner dividers */
--accent:#1D4ED8; /* SERVORA deep blue — primary action / active */
--accent-2:#2E6BF0; /* lighter stop for gradients */
--accent-ink:#1A3FB0; /* hover / pressed */
--accent-tint:#EAF1FE; /* accent wash for bars/badges/tints */
--accent-glow:rgba(29,78,216,.16); /* focus ring */
--grad-accent:linear-gradient(180deg,var(--accent-2),var(--accent));
--on-ink:#C3C9D4; /* muted text/icons on dark (--ink) surfaces */
--on-accent:#FFFFFF; /* text/icon ON the accent (contrast-guarded on client portal) */
--ok:#12A150; --ok-tint:#E7F6EC; /* paid / signed / done */
--alert:#E5484D; --alert-tint:#FDECEC;/* needs-you: unpaid / unsigned / overdue */
--warn:#D9820A; --warn-tint:#FBF0DC; /* pending / waiting */
--neutral-tint:#EEF1F6;
/* TYPE */
--font-display:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* SPACE (8px grid) */
--s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
/* SHAPE — a small radius scale */
--r-sm:8px; --radius:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
/* DEPTH — soft, layered, low-opacity (the modern floating-card look) */
--shadow-xs:0 1px 2px rgba(16,24,40,.05);
--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
--shadow-md:0 2px 6px -2px rgba(16,24,40,.08),0 8px 18px -6px rgba(16,24,40,.12);
--shadow-lg:0 4px 10px -4px rgba(16,24,40,.10),0 20px 40px -12px rgba(16,24,40,.20);
--shadow-accent:0 6px 18px -6px rgba(29,78,216,.45);
--shadow:var(--shadow-sm); /* back-compat alias */
--tap:48px; /* min tap target */
--ease:cubic-bezier(.4,0,.2,1);
}
/* ---- base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
font-family:var(--font-ui);
font-size:16px; line-height:1.55;
color:var(--ink); background:var(--paper);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
font-feature-settings:"cv05" 1,"ss01" 1;
}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.018em;color:var(--ink);margin:0 0 var(--s2)}
h1{font-size:1.55rem}
h2{font-size:1.28rem;letter-spacing:-.015em}
h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 var(--s3)}
a{color:var(--accent);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--accent-ink)}
.u-slate{color:var(--slate)}
.u-mono-num{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em}
.u-center{text-align:center}
small{font-size:.8rem;color:var(--slate)}
hr{border:none;border-top:1px solid var(--line);margin:var(--s4) 0}
/* keyboard focus — visible, on-brand, never on mouse click */
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow);border-radius:var(--r-sm)}
/* subtle custom scrollbars (desktop) */
@media(pointer:fine){
*{scrollbar-width:thin;scrollbar-color:#CBD2DE transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#CBD2DE;border-radius:8px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#AEB7C6;background-clip:content-box}
}
/* ---- layout helpers ---- */
.ds-wrap{max-width:1000px;margin:0 auto;padding:var(--s4) var(--s3)}
.ds-narrow{max-width:440px;margin:0 auto;padding:var(--s5) var(--s3)}
.ds-stack>*+*{margin-top:var(--s3)}
.ds-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
/* ================================================================
CORE COMPONENTS
================================================================ */
/* BUTTON — gradient primary with accent glow + tactile press. */
.ds-btn{
--btn-bg:var(--grad-accent); --btn-fg:var(--on-accent); --btn-bd:transparent; --btn-sh:var(--shadow-accent);
display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:var(--tap);padding:0 var(--s4);
font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1;letter-spacing:-.01em;
color:var(--btn-fg);background:var(--btn-bg);border:1px solid var(--btn-bd);
border-radius:var(--radius);cursor:pointer;text-align:center;white-space:nowrap;
box-shadow:var(--btn-sh);
transition:transform .12s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease),opacity .15s;
}
.ds-btn:hover{transform:translateY(-1px);--btn-sh:0 8px 22px -6px rgba(29,78,216,.5)}
.ds-btn:active{transform:translateY(0);--btn-sh:0 2px 8px -3px rgba(29,78,216,.5)}
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.ds-btn--secondary{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:var(--line);--btn-sh:var(--shadow-xs)}
.ds-btn--secondary:hover{--btn-bg:#fff;--btn-bd:var(--slate-2);--btn-sh:var(--shadow-sm)}
.ds-btn--quiet{--btn-bg:transparent;--btn-fg:var(--accent);--btn-bd:transparent;--btn-sh:none;padding:0 var(--s2)}
.ds-btn--quiet:hover{--btn-bg:var(--accent-tint);--btn-fg:var(--accent-ink);transform:none}
.ds-btn--block{width:100%}
.ds-btn--sm{min-height:38px;font-size:13.5px;padding:0 var(--s3);border-radius:var(--r-sm)}
.ds-btn--lock{--btn-bg:#EEF1F6;--btn-fg:var(--slate);--btn-bd:var(--line);--btn-sh:none;cursor:not-allowed}
.ds-btn--lock:hover{--btn-bg:#EEF1F6;transform:none}
.ds-btn--danger{--btn-bg:var(--alert);--btn-sh:0 6px 18px -6px rgba(229,72,77,.45)}
.ds-btn--success{--btn-bg:var(--ok);--btn-sh:0 6px 18px -6px rgba(18,161,80,.45)}
.ds-spinner{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.45);
border-top-color:#fff;border-radius:50%;animation:ds-spin .7s linear infinite;display:inline-block}
.ds-btn--secondary .ds-spinner{border-color:rgba(16,24,40,.25);border-top-color:var(--ink)}
@keyframes ds-spin{to{transform:rotate(360deg)}}
/* STATUS CHIP — pill, icon + word + color (never color alone). */
.ds-chip{display:inline-flex;align-items:center;gap:5px;
font-size:11.5px;font-weight:600;line-height:1;padding:5px 10px;
border-radius:var(--r-pill);white-space:nowrap;letter-spacing:.01em}
.ds-chip .ds-chip__ico{font-size:12px;line-height:1;margin-top:-1px}
.ds-chip--ok{background:var(--ok-tint);color:var(--ok)}
.ds-chip--alert{background:var(--alert-tint);color:var(--alert)}
.ds-chip--warn{background:var(--warn-tint);color:var(--warn)}
.ds-chip--accent{background:var(--accent-tint);color:var(--accent-ink)}
.ds-chip--neutral{background:var(--neutral-tint);color:var(--slate)}
/* CARD — white, soft shadow, generous radius. Tap cards lift on hover. */
.ds-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--s4);box-shadow:var(--shadow-sm)}
.ds-card+.ds-card{margin-top:var(--s3)}
.ds-card--raised{box-shadow:var(--shadow-md)}
.ds-card--tap{cursor:pointer;transition:transform .14s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.ds-card--tap:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#DBE1EA}
.ds-card--tap:active{transform:translateY(0)}
/* INPUT — soft, focus glow ring. */
.ds-field{margin-bottom:var(--s3)}
.ds-label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--ink-2);letter-spacing:-.005em}
.ds-input,.ds-select,.ds-textarea{
width:100%;min-height:var(--tap);padding:0 var(--s3);
font-family:var(--font-ui);font-size:15px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--slate-2)}
.ds-textarea{min-height:112px;padding:var(--s3);resize:vertical;line-height:1.55}
.ds-select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.ds-input--err{border-color:var(--alert)}
.ds-input--err:focus{box-shadow:0 0 0 3px rgba(229,72,77,.16)}
.ds-error{color:var(--alert);font-size:13px;margin-top:6px;font-weight:500}
.ds-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0;font-weight:400;color:var(--ink-2)}
.ds-check input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin-top:2px;accent-color:var(--accent);cursor:pointer}
/* EMPTY STATE — teach, don't apologize. */
.ds-empty{text-align:center;color:var(--slate);padding:var(--s6) var(--s3);
border:1px dashed var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.5)}
.ds-empty h3{color:var(--ink);margin-bottom:var(--s1)}
/* SKELETON loaders */
.ds-skel{background:linear-gradient(90deg,var(--paper-2) 25%,#F7F9FC 37%,var(--paper-2) 63%);
background-size:400% 100%;animation:ds-shimmer 1.3s ease-in-out infinite;border-radius:var(--radius)}
.ds-skel--line{height:14px;margin:var(--s2) 0}
.ds-skel--card{height:84px}
@keyframes ds-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
/* BOTTOM TAB BAR (mobile) — glassy, active accent with a lifted pill. */
.ds-tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;
display:flex;height:calc(58px + env(safe-area-inset-bottom,0));padding-bottom:env(safe-area-inset-bottom,0);
background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
border-top:1px solid var(--line)}
.ds-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;color:var(--slate);font-size:11px;font-weight:600;position:relative;transition:color .15s}
.ds-tabbar a .ds-tabbar__ico{display:flex;align-items:center;justify-content:center;height:26px;transition:transform .18s var(--ease)}
.ds-tabbar a[aria-current="page"]{color:var(--accent)}
.ds-tabbar a[aria-current="page"] .ds-tabbar__ico{transform:translateY(-1px)}
.ds-tabbar a .ds-tabbar__dot{position:absolute;top:8px;right:calc(50% - 16px);
width:8px;height:8px;background:var(--alert);border-radius:50%;box-shadow:0 0 0 2px #fff}
.ds-has-tabs{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}
/* STICKY primary action bar (Sign / Pay) */
.ds-sticky-action{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
border-top:1px solid var(--line);padding:var(--s3);box-shadow:0 -6px 20px -8px rgba(16,24,40,.15)}
/* ACTIVATION BAR (pending, unpaid contractor) */
.ds-activate-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
flex-wrap:wrap;background:var(--accent-tint);border-bottom:1px solid #CFE0FB;
color:var(--accent-ink);padding:10px var(--s3);font-size:14px;font-weight:500}
.ds-activate-bar strong{font-weight:700}
.ds-lock-hint{font-size:12px;color:var(--slate)}
/* TOPBAR — sticky glass, brand mark with gradient. */
.ds-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
gap:var(--s3);padding:10px var(--s4);min-height:58px;
background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
border-bottom:1px solid var(--line)}
.ds-topbar__brand{display:flex;align-items:center;gap:10px;min-width:0}
.ds-topbar__brand img{height:30px;width:auto;max-width:150px;object-fit:contain;border-radius:6px}
.ds-topbar__mark{width:32px;height:32px;border-radius:9px;background:var(--grad-accent);color:var(--on-accent);
display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px;
flex:0 0 auto;box-shadow:var(--shadow-accent)}
.ds-topbar__name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* PROGRESS STEPS (client status strip) */
.ds-progress{display:flex;gap:6px;margin:var(--s3) 0 var(--s1)}
.ds-progress__step{flex:1;height:8px;border-radius:var(--r-pill);background:var(--paper-2);transition:background .3s var(--ease)}
.ds-progress__step.is-on{background:var(--grad-accent)}
.ds-progress__label{font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.01em}
/* PHOTO STRIP */
.ds-photostrip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.ds-photostrip figure{flex:0 0 auto;width:160px;margin:0;scroll-snap-align:start}
.ds-photostrip img{width:160px;height:118px;object-fit:cover;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.ds-photostrip figcaption{font-size:12px;color:var(--slate);margin-top:6px;line-height:1.3}
/* MESSAGE BUBBLE */
.ds-msg{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);margin-bottom:var(--s2);background:#fff;box-shadow:var(--shadow-xs)}
.ds-msg--mine{background:var(--accent-tint);border-color:#CFE0FB}
.ds-msg__meta{font-size:12px;color:var(--slate);margin-bottom:4px;font-weight:500}
/* LIST ROW */
.ds-listrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
padding:var(--s3) 0;border-bottom:1px solid var(--line-2)}
.ds-listrow:last-child{border-bottom:none}
/* SNAPSHOT / STAT CARD GRID — real dashboard numbers. */
.ds-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.ds-cards .ds-card{margin:0;text-align:left;padding:var(--s3) var(--s4);position:relative;overflow:hidden}
.ds-cards .ds-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-accent);opacity:.9}
.ds-cards .ds-card b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:800;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
.ds-cards .ds-card span{font-size:12px;color:var(--slate);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* MODAL / BOTTOM SHEET — blurred backdrop, big radius, motion. */
.ds-modal-bg{position:fixed;inset:0;z-index:50;background:rgba(16,24,40,.42);backdrop-filter:blur(4px);
display:flex;justify-content:center;overflow:auto;padding:var(--s3);animation:ds-fade .18s var(--ease)}
.ds-modal-bg--sheet{align-items:flex-end;padding:0}
.ds-modal-bg--center{align-items:center}
.ds-modal{background:#fff;border-radius:var(--r-xl);width:100%;max-width:540px;padding:var(--s5);box-shadow:var(--shadow-lg);animation:ds-pop .22s var(--ease)}
.ds-modal-bg--sheet .ds-modal{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh;overflow:auto;padding:var(--s4);animation:ds-slideup .26s var(--ease)}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ds-slideup{from{transform:translateY(100%)}to{transform:none}}
/* SEGMENTED sub-tabs — pill group. */
.ds-seg{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s3) 0;padding:5px;background:var(--paper-2);border-radius:var(--radius);width:fit-content;max-width:100%}
.ds-seg button{min-height:36px;padding:0 var(--s3);font-size:13.5px;font-weight:600;color:var(--slate);
background:transparent;border:none;border-radius:var(--r-sm);cursor:pointer;transition:all .15s var(--ease)}
.ds-seg button:hover{color:var(--ink)}
.ds-seg button[aria-current="true"]{color:var(--accent);background:#fff;box-shadow:var(--shadow-xs)}
/* inline success note */
.ds-note-ok{padding:var(--s3);border-radius:var(--radius);color:var(--ok);background:var(--ok-tint);font-size:14px;font-weight:500}
/* ASSIST watermark bar */
.ds-assist-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
gap:var(--s2);padding:9px var(--s3);background:var(--warn);color:#fff;font-size:13px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase}
.ds-assist-bar a{color:#fff;text-decoration:underline;text-transform:none;font-weight:600}
/* COMMAND CENTER dense chrome */
.ds-dense h1{font-size:1.28rem}
.ds-dense h2{font-size:1.05rem}
.ds-dense .ds-card{padding:var(--s3)}
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs)}
.ds-table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;
text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0}
.ds-table td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ds-table tr:last-child td{border-bottom:none}
.ds-table tbody tr{transition:background .12s}
.ds-table tr.tap{cursor:pointer}
.ds-table tbody tr:hover{background:var(--paper)}
.ds-table-wrap{overflow-x:auto;border-radius:var(--radius)}
.ds-kanban{display:flex;gap:var(--s3);overflow-x:auto;align-items:flex-start;padding-bottom:var(--s2)}
.ds-kanban__col{flex:0 0 250px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s2);transition:background .15s,box-shadow .15s}
.ds-kanban__col.is-dragover{background:var(--accent-tint);box-shadow:inset 0 0 0 2px var(--accent)}
.ds-kanban__col h4{margin:0 0 var(--s2);padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700}
.ds-kanban__card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:10px var(--s3);margin-bottom:var(--s2);cursor:grab;font-size:13px;box-shadow:var(--shadow-xs);transition:transform .12s,box-shadow .15s}
.ds-kanban__card:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ds-kanban__card:active{cursor:grabbing}
/* demo bar */
.ds-demo-bar{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;
gap:var(--s2);padding:9px var(--s3);background:var(--ink);color:var(--paper);font-size:13px;font-weight:500}
.ds-demo-bar a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}
/* install prompt bar */
.ds-install{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:99;
display:flex;gap:var(--s2);align-items:center;background:#fff;border:1px solid var(--line);
border-radius:var(--r-pill);box-shadow:var(--shadow-lg);padding:8px 8px 8px var(--s3);font-size:14px;max-width:92%}
/* landscape hint (signature) */
.ds-hint{font-size:13px;color:var(--warn);background:var(--warn-tint);padding:10px var(--s3);border-radius:var(--radius);margin:var(--s2) 0}
/* signature pad */
.sigpad,.svc-sig__canvas{width:100%;height:190px;border:2px dashed var(--line);border-radius:var(--radius);
background:linear-gradient(#fff,#fff) padding-box,repeating-linear-gradient(-45deg,#fff,#fff 10px,#FAFBFD 10px,#FAFBFD 20px);
touch-action:none;display:block}
/* toast — slide-in with motion */
.ds-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:99;
max-width:90%;padding:11px var(--s3);border-radius:var(--r-pill);
box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;background:var(--ink);color:#fff;
animation:ds-toast-in .28s var(--ease)}
.ds-toast--ok{background:var(--ok)}
.ds-toast--err{background:var(--alert)}
@keyframes ds-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* ================================================================
MARKETING SITE (.mk-*) — conversion-first, one accent.
================================================================ */
/* NAV — sticky glass, full-bleed, with a real mobile menu. */
.mk-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
border-bottom:1px solid var(--line)}
.mk-nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
max-width:1120px;margin:0 auto;padding:11px var(--s4)}
.mk-nav__brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
font-weight:800;font-size:1.24rem;letter-spacing:-.02em;color:var(--ink)}
.mk-nav__brand:hover{color:var(--ink)}
.mk-nav__mark{width:26px;height:26px;border-radius:7px;background:var(--grad-accent);flex:0 0 auto;
box-shadow:var(--shadow-accent);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800}
.mk-nav__links{display:flex;gap:4px;align-items:center}
.mk-nav__links a:not(.ds-btn){color:var(--slate);font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:var(--r-sm)}
.mk-nav__links a:not(.ds-btn):hover{color:var(--ink);background:var(--paper)}
.mk-nav__cta{display:flex;gap:8px;align-items:center;margin-left:var(--s2)}
.mk-nav__toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);
background:#fff;cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow-xs)}
.mk-nav__toggle svg{width:22px;height:22px;stroke:var(--ink)}
.mk-nav__panel{display:none}
@media(max-width:820px){
.mk-nav__links{display:none}
.mk-nav__toggle{display:inline-flex}
.mk-nav.is-open .mk-nav__panel{display:block;position:absolute;left:0;right:0;top:100%;
background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:var(--s3) var(--s4) var(--s4)}
.mk-nav.is-open .mk-nav__panel a:not(.ds-btn){display:block;padding:13px 6px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-2)}
.mk-nav.is-open .mk-nav__panel .ds-btn{margin-top:12px;width:100%}
}
.mk-wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
.mk-section{padding:clamp(48px,8vw,104px) 0}
.mk-h1{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.03em;
font-size:clamp(2.5rem,6vw,4.4rem);color:var(--ink);margin:0 0 var(--s3)}
.mk-h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:clamp(1.7rem,3.5vw,2.6rem);color:var(--ink);margin:0 0 var(--s3)}
.mk-lede{font-size:clamp(1.08rem,2vw,1.32rem);color:var(--slate);max-width:36ch;margin:0 0 var(--s4);line-height:1.5}
.mk-eyebrow{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
font-size:12.5px;color:var(--accent);margin:0 0 var(--s2)}
.mk-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center;position:relative}
@media(max-width:820px){ .mk-hero{grid-template-columns:1fr} .mk-hero__art{order:-1} }
.mk-cta-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.mk-cta-row .ds-btn{width:auto}
/* phone frame */
.mk-phone{width:280px;max-width:78vw;margin:0 auto;background:#0B1220;border-radius:40px;
padding:12px;box-shadow:0 40px 80px -24px rgba(16,24,40,.5),0 0 0 1px rgba(16,24,40,.06)}
.mk-phone__screen{background:var(--paper);border-radius:28px;overflow:hidden;aspect-ratio:9/19;display:flex;flex-direction:column}
.mk-phone__bar{background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;font-size:12px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.mk-phone__body{padding:16px;flex:1;display:flex;flex-direction:column;gap:12px}
.mk-mini-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:12px;box-shadow:var(--shadow-xs)}
.mk-mini-btn{background:var(--grad-accent);color:#fff;text-align:center;border-radius:14px;padding:14px;font-weight:700;font-size:14px;box-shadow:var(--shadow-accent)}
.mk-mini-amt{font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mk-pain{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:720px){ .mk-pain{grid-template-columns:1fr;gap:var(--s3)} }
.mk-pain p{font-size:1.18rem;color:var(--ink);font-weight:600;line-height:1.35;margin:0;
padding-left:var(--s3);border-left:3px solid var(--accent)}
.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:720px){ .mk-steps{grid-template-columns:1fr} }
.mk-step__cap{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-top:var(--s2);color:var(--ink)}
.mk-step__n{font-family:var(--font-display);color:var(--accent);font-weight:800}
/* dark paper-trail section */
.mk-dark{background:radial-gradient(1200px 500px at 80% -10%,rgba(46,107,240,.25),transparent 60%),var(--ink);color:var(--paper)}
.mk-dark .mk-h2{color:var(--paper)}
.mk-dark .mk-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
@media(max-width:720px){ .mk-dark .mk-proof{grid-template-columns:1fr} }
.mk-dark .mk-proof h3{color:var(--paper);font-family:var(--font-display);margin:0 0 6px}
.mk-dark .mk-proof p{color:var(--on-ink);margin:0;font-size:15px}
/* price block */
.mk-price{text-align:center}
.mk-price__num{font-family:var(--font-display);font-weight:800;font-size:clamp(3.5rem,10vw,6.5rem);letter-spacing:-.04em;
background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.mk-price__num span{font-size:.28em;color:var(--slate);font-weight:700;-webkit-text-fill-color:var(--slate)}
/* services strip */
.mk-svc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:720px){ .mk-svc-strip{grid-template-columns:1fr} }
.mk-svc-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--s4);color:var(--ink);box-shadow:var(--shadow-xs);transition:transform .15s var(--ease),box-shadow .18s}
.mk-svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#DBE1EA}
.mk-svc-card h3{font-family:var(--font-display);margin:0 0 6px}
.mk-svc-card p{color:var(--slate);margin:0;font-size:15px}
/* testimonial slots */
.mk-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:720px){ .mk-quotes{grid-template-columns:1fr} }
.mk-quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-xs)}
.mk-quote blockquote{margin:0 0 var(--s2);font-size:1.05rem;color:var(--ink);line-height:1.5}
.mk-quote cite{color:var(--slate);font-style:normal;font-size:14px;font-weight:600}
.mk-todo{opacity:.55}
/* footer */
.mk-footer{border-top:1px solid var(--line);background:#fff}
.mk-footer__in{max-width:1120px;margin:0 auto;padding:var(--s6) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}
.mk-footer a{color:var(--slate);font-size:14px;display:block;padding:4px 0}
.mk-footer a:hover{color:var(--ink)}
.mk-footer h4{font-family:var(--font-display);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin:0 0 var(--s2)}
/* service landing + intake */
.mk-svc-hero{max-width:720px}
.mk-svc-list{list-style:none;padding:0;margin:var(--s3) 0}
.mk-svc-list li{padding:9px 0 9px 30px;position:relative;color:var(--ink)}
.mk-svc-list li::before{content:'✓';position:absolute;left:0;top:8px;color:#fff;background:var(--ok);font-weight:700;
width:20px;height:20px;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center}
.mk-disclosure{background:var(--warn-tint);border:1px solid #EBD3A0;border-radius:var(--radius);padding:var(--s3) var(--s4);color:#7A5A12;font-size:15px;margin:var(--s3) 0}
.mk-floor{font-weight:600;color:var(--slate)}
.mk-disclosure--ok{background:var(--ok-tint);border-color:#A9D6B8;color:#0E5A2E}
.mk-intake{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}
.mk-intake__progress{height:6px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden;margin-bottom:var(--s4)}
.mk-intake__bar{height:100%;background:var(--grad-accent);width:0;transition:width .3s var(--ease)}
.mk-step[hidden]{display:none}
.mk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mk-intake__nav{display:flex;gap:var(--s2);margin-top:var(--s4)}
.mk-bypass{margin-top:var(--s3);font-size:14px}
/* ================================================================
INTERACTIVE COMPONENTS (.svc-*) — the logic-heavy widgets mounted into
the console/portals (calendar, selector, uploader, wizard, negotiation,
demo). Now fully styled to match the system.
================================================================ */
/* --- Field Ops calendar --- */
.svc-cal__toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.svc-cal__title{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-right:auto}
.svc-cal__btn{min-width:38px;height:38px;padding:0 var(--s3);border:1px solid var(--line);background:#fff;
border-radius:var(--r-sm);font-weight:600;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-xs);transition:all .12s}
.svc-cal__btn:hover{border-color:var(--slate-2);box-shadow:var(--shadow-sm)}
.svc-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.svc-cal__dow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-2);text-align:center;padding:4px 0}
.svc-cal__day{min-height:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;
display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:border-color .12s,background .12s}
.svc-cal__day:hover{border-color:var(--slate-2)}
.svc-cal__day.is-other-month{background:var(--paper);opacity:.5}
.svc-cal__day.is-today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.svc-cal__day.is-dragover{background:var(--accent-tint);border-color:var(--accent)}
.svc-cal__daynum{font-size:12px;font-weight:700;color:var(--slate);align-self:flex-end}
.svc-cal__day.is-today .svc-cal__daynum{color:var(--accent)}
.svc-cal__job{background:var(--accent-tint);color:var(--accent-ink);border-radius:6px;padding:3px 6px;font-size:11px;font-weight:600;
cursor:grab;display:flex;flex-direction:column;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.svc-cal__job:active{cursor:grabbing}
.svc-cal__job.is-blocked{background:var(--alert-tint);color:var(--alert)}
.svc-cal__job.is-done{background:var(--ok-tint);color:var(--ok)}
.svc-cal__job.is-inprogress{background:var(--warn-tint);color:var(--warn)}
.svc-cal__job-crew{font-weight:500;opacity:.8;font-size:10px}
.svc-cal__more{font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;padding:2px}
@media(max-width:640px){ .svc-cal__day{min-height:64px} .svc-cal__job-crew{display:none} }
/* --- service selector (typeahead multi-select) --- */
.svc-sel{position:relative}
.svc-sel__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.svc-sel__chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-tint);color:var(--accent-ink);
border-radius:var(--r-pill);padding:5px 6px 5px 12px;font-size:13px;font-weight:600}
.svc-sel__chip-x{border:none;background:rgba(29,78,216,.15);color:var(--accent-ink);width:18px;height:18px;border-radius:50%;
cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.svc-sel__chip-x:hover{background:var(--accent);color:#fff}
.svc-sel__input{width:100%;min-height:var(--tap);padding:0 var(--s3);font-size:15px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
.svc-sel__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.svc-sel__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:280px;overflow:auto;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px}
.svc-sel__menu:not(.is-open){display:none}
.svc-sel__group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-2);padding:8px 10px 4px}
.svc-sel__opt{padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;font-weight:500}
.svc-sel__opt:hover,.svc-sel__opt.is-active{background:var(--accent-tint);color:var(--accent-ink)}
.svc-sel__other{color:var(--accent);font-weight:600}
/* --- uploader --- */
.svc-up__zone{border:2px dashed var(--line);border-radius:var(--r-lg);padding:var(--s5) var(--s3);text-align:center;
color:var(--slate);font-weight:500;cursor:pointer;background:var(--paper);transition:all .15s}
.svc-up__zone:hover,.svc-up__zone.is-dragover{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink)}
.svc-up__list{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.svc-up__item{display:flex;gap:var(--s3);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.svc-up__item.is-done{border-color:#B7E4C6}.svc-up__item.is-error{border-color:#F3B9BB}
.svc-up__thumb{width:44px;height:44px;border-radius:var(--r-sm);background:var(--paper-2);flex:0 0 auto;overflow:hidden;
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--slate)}
.svc-up__thumb img{width:100%;height:100%;object-fit:cover}
.svc-up__name{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-up__bar{flex:0 0 90px;height:6px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden}
.svc-up__bar-fill{height:100%;background:var(--grad-accent);width:0;transition:width .2s var(--ease)}
.svc-up__item.is-done .svc-up__bar-fill{background:var(--ok)}
/* --- wizard --- */
.svc-wiz__progress{display:flex;gap:6px;margin-bottom:var(--s4)}
.svc-wiz__step{flex:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-2);
padding-top:12px;border-top:3px solid var(--paper-2);transition:all .2s}
.svc-wiz__step.is-current{color:var(--accent);border-top-color:var(--accent)}
.svc-wiz__step.is-done{color:var(--ok);border-top-color:var(--ok)}
.svc-wiz__hint{color:var(--slate);font-size:14px;margin-bottom:var(--s3)}
.svc-wiz__summary{font-size:1.1rem;font-weight:600}
.svc-wiz__goals{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media(max-width:520px){ .svc-wiz__goals{grid-template-columns:1fr} }
.svc-wiz__goal{padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;
font-weight:600;font-size:14px;text-align:left;transition:all .12s}
.svc-wiz__goal:hover{border-color:var(--slate-2)}
.svc-wiz__goal[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent)}
.svc-wiz__nav{display:flex;gap:var(--s2);margin-top:var(--s4)}
.svc-wiz__btn{flex:1;min-height:var(--tap);border-radius:var(--radius);font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent}
.svc-wiz__btn[data-nav="next"]{background:var(--grad-accent);color:#fff;box-shadow:var(--shadow-accent)}
.svc-wiz__btn[data-nav="back"]{background:#fff;color:var(--ink);border-color:var(--line);flex:0 0 auto;padding:0 var(--s4)}
.svc-wiz__skip{display:block;margin:var(--s3) auto 0;background:none;border:none;color:var(--slate);font-size:14px;cursor:pointer;text-decoration:underline}
/* --- change-order negotiation --- */
.svc-nego{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);background:#fff}
.svc-nego__price{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:1.05rem}
.svc-nego__status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);background:var(--paper-2);padding:3px 8px;border-radius:var(--r-pill)}
.svc-nego__history{margin:var(--s3) 0;border-top:1px solid var(--line-2);padding-top:var(--s2)}
.svc-nego__offer{display:flex;gap:var(--s2);align-items:center;font-size:13px;padding:5px 0}
.svc-nego__offer-who{font-weight:600;min-width:74px}
.svc-nego__offer-price{font-variant-numeric:tabular-nums;font-weight:700}
.svc-nego__offer-outcome{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-2)}
.svc-nego__offer.is-accepted{color:var(--ok)}.svc-nego__offer.is-declined{color:var(--alert)}
.svc-nego__actions{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.svc-nego__btn{min-height:44px;border-radius:var(--radius);font-weight:600;cursor:pointer;border:1px solid var(--line);background:#fff}
.svc-nego__btn[data-act="accept"]{background:var(--ok);color:#fff;border-color:transparent}
.svc-nego__btn[data-act="counter"],.svc-nego__btn[data-act="recounter"]{background:var(--grad-accent);color:#fff;border-color:transparent}
.svc-nego__input{width:100%;min-height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--radius);font-size:15px}
.svc-nego__hint{font-size:13px;color:var(--slate)}
/* --- data grid (table + kanban) reuse the dense chrome --- */
.svc-grid__filter{width:100%;max-width:280px;min-height:40px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--s3);font-size:14px}
.svc-grid__table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs)}
.svc-grid__table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.svc-grid__table th.is-sorted-asc::after{content:' ↑';color:var(--accent)}
.svc-grid__table th.is-sorted-desc::after{content:' ↓';color:var(--accent)}
.svc-grid__table td{padding:11px 12px;border-bottom:1px solid var(--line-2)}
.svc-grid__row{cursor:pointer;transition:background .12s}
.svc-grid__row:hover{background:var(--paper)}
.svc-kb{display:flex;gap:var(--s3);overflow-x:auto;align-items:flex-start;padding-bottom:var(--s2)}
.svc-kb__col{flex:0 0 250px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s2);transition:background .15s,box-shadow .15s}
.svc-kb__col.is-dragover{background:var(--accent-tint);box-shadow:inset 0 0 0 2px var(--accent)}
.svc-kb__col-head{padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700}
.svc-kb__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px var(--s3);margin-bottom:var(--s2);cursor:grab;font-size:13px;box-shadow:var(--shadow-xs)}
.svc-kb__card:hover{box-shadow:var(--shadow-sm)}
/* --- demo widget --- */
.svc-demo{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-md)}
.svc-demo__toggle{display:flex;background:var(--paper-2);padding:5px;gap:5px;margin:var(--s3);border-radius:var(--radius)}
.svc-demo__toggle-btn{flex:1;min-height:38px;border:none;background:transparent;border-radius:var(--r-sm);font-weight:600;font-size:13px;color:var(--slate);cursor:pointer}
.svc-demo__toggle-btn.is-active{background:#fff;color:var(--accent);box-shadow:var(--shadow-xs)}
.svc-demo__view{padding:0 var(--s3) var(--s3)}
.svc-demo__head{display:flex;justify-content:space-between;font-weight:700;padding:var(--s2) 0;border-bottom:1px solid var(--line-2);margin-bottom:var(--s2)}
.svc-demo__photos{display:flex;gap:8px;overflow-x:auto;margin-bottom:var(--s2)}
.svc-demo__photo img{width:120px;height:88px;object-fit:cover;border-radius:var(--r-sm)}
.svc-demo__row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.svc-demo__chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.svc-demo__chip.is-paid,.svc-demo__chip.is-signed{background:var(--ok-tint);color:var(--ok)}
.svc-demo__chip.is-due,.svc-demo__chip.is-needs{background:var(--alert-tint);color:var(--alert)}
.svc-demo__cta{display:block;margin:var(--s3);text-align:center;background:var(--grad-accent);color:#fff;padding:13px;border-radius:var(--radius);font-weight:700;box-shadow:var(--shadow-accent)}
.svc-demo__empty{padding:var(--s6);text-align:center;color:var(--slate)}
/* --- booking embed --- */
.svc-book__frame{width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.svc-book__fallback{display:none;margin-top:var(--s2)}.svc-book__fallback.is-visible{display:block}
/* ================================================================
RESPONSIVE + MOTION
================================================================ */
@media(min-width:820px){
h1{font-size:1.7rem}
.ds-wrap{padding:var(--s5) var(--s4)}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.ds-btn:hover,.ds-card--tap:hover,.mk-svc-card:hover{transform:none}
}
/* ================================================================
MARKETING KIT v2 — sections that carry the sales narrative.
(trust strip · two-sided product peek · bands · feature grid ·
pricing plans · add-ons · FAQ) All token-driven, no image assets.
================================================================ */
/* centered section header */
.mk-head{text-align:center;max-width:660px;margin:0 auto var(--s5)}
.mk-head .mk-lede{margin:0 auto;max-width:54ch}
.mk-cta-row--center{justify-content:center}
/* trust strip under the hero */
.mk-trust{display:flex;flex-wrap:wrap;gap:9px 22px;align-items:center}
.mk-trust__item{font-size:13px;font-weight:600;color:var(--slate-2);letter-spacing:.01em;display:inline-flex;align-items:center;gap:7px}
.mk-trust__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}
/* tinted / dark full-bleed bands for rhythm */
.mk-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* desktop "window" frame — the console peek */
.mk-window{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.mk-window__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.mk-window__dot{width:11px;height:11px;border-radius:50%;background:#D6DBE3;flex:0 0 auto}
.mk-window__title{margin-left:8px;font-size:12px;font-weight:700;color:var(--slate)}
.mk-window__body{padding:var(--s4)}
/* two-sided product peek (console + client portal) */
.mk-peek{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,56px);align-items:center}
@media(max-width:860px){ .mk-peek{grid-template-columns:1fr;gap:var(--s5)} .mk-peek__art{order:-1} }
/* mini folder grid shown inside the console peek — a real taste of the app */
.mk-folders{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:520px){ .mk-folders{grid-template-columns:repeat(2,1fr)} }
.mk-folder{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--card);box-shadow:var(--shadow-xs)}
.mk-folder__ico{color:var(--accent);display:block;margin-bottom:7px}
.mk-folder__name{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.2}
.mk-folder__sub{font-size:11px;color:var(--slate);margin-top:1px}
.mk-folder__badge{display:inline-block;margin-top:7px;font-size:10px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);background:var(--alert-tint);color:var(--alert);letter-spacing:.02em}
.mk-folder__badge.is-ok{background:var(--ok-tint);color:var(--ok)}
.mk-folder__badge.is-warn{background:var(--warn-tint);color:var(--warn)}
/* feature grid (icon + title + line) */
.mk-features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
@media(max-width:820px){ .mk-features{grid-template-columns:1fr;gap:var(--s4)} }
.mk-feature__ico{width:42px;height:42px;border-radius:12px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.mk-feature h3{margin:0 0 5px}
.mk-feature p{color:var(--slate);margin:0;font-size:15px;line-height:1.5}
/* pricing plans */
.mk-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);max-width:840px;margin:0 auto;align-items:stretch}
@media(max-width:760px){ .mk-plans{grid-template-columns:1fr;gap:var(--s5)} }
.mk-plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;text-align:left}
.mk-plan--featured{border-color:var(--accent);box-shadow:var(--shadow-md)}
.mk-plan__tag{position:absolute;top:-13px;left:var(--s5);background:var(--grad-accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);box-shadow:var(--shadow-accent)}
.mk-plan__name{font-family:var(--font-display);font-weight:800;font-size:1.25rem;margin:0}
.mk-plan__who{color:var(--slate);font-size:14px;margin:3px 0 var(--s3)}
.mk-plan__price{font-family:var(--font-display);font-weight:800;font-size:2.7rem;letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.mk-plan__price span{font-size:1rem;font-weight:600;color:var(--slate);letter-spacing:0}
.mk-plan__annual{font-size:13px;color:var(--slate);margin-top:6px}
.mk-plan__feat{list-style:none;padding:0;margin:var(--s4) 0;flex:1}
.mk-plan__feat li{padding:7px 0 7px 28px;position:relative;font-size:14.5px;color:var(--ink);line-height:1.45}
.mk-plan__feat li::before{content:'✓';position:absolute;left:0;top:5px;color:#fff;background:var(--ok);width:19px;height:19px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800}
.mk-plan__feat li.is-plus{font-weight:700}
.mk-plan__feat li.is-plus::before{background:var(--accent)}
.mk-seats{max-width:840px;margin:var(--s4) auto 0;text-align:center;color:var(--slate);font-size:15px}
/* add-ons */
.mk-addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);max-width:940px;margin:var(--s4) auto 0}
.mk-addon{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);background:var(--card);box-shadow:var(--shadow-xs)}
.mk-addon strong{display:block;color:var(--ink);font-size:15px}
.mk-addon span{font-size:13px;color:var(--slate)}
.mk-addon b{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:800}
/* FAQ (native details/summary) */
.mk-faq{max-width:760px;margin:0 auto}
.mk-faq__item{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin-bottom:10px;box-shadow:var(--shadow-xs)}
.mk-faq__item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.mk-faq__item summary::-webkit-details-marker{display:none}
.mk-faq__item summary::after{content:'+';font-size:22px;font-weight:400;color:var(--accent);line-height:1}
.mk-faq__item[open] summary::after{content:'\2212'}
.mk-faq__a{padding:0 18px 16px;color:var(--slate);font-size:15px;line-height:1.6}
.mk-faq__a a{font-weight:600}
/* ================================================================
FOLDER SYSTEM (.fs-*) — the contractor/GC console as a file explorer.
Breadcrumb = navigation. Desktop: a sidebar rail + main pane. Mobile:
the rail collapses; breadcrumb + big tap targets carry navigation.
================================================================ */
.fs{display:flex;align-items:stretch;min-height:calc(100vh - 58px)}
.fs__side{display:none}
@media(min-width:900px){
.fs__side{display:flex;flex-direction:column;flex:0 0 250px;width:250px;background:#fff;
border-right:1px solid var(--line);position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto;padding:12px 12px 24px}
}
.fs__main{flex:1;min-width:0;display:flex;flex-direction:column}
.fs__grouplabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-2);padding:16px 10px 6px}
.fs__navitem{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-radius:var(--radius);
color:var(--slate);font-weight:600;font-size:14px;cursor:pointer;transition:background .12s,color .12s;width:100%;border:none;background:none;text-align:left}
.fs__navitem:hover{background:var(--paper);color:var(--ink)}
.fs__navitem[aria-current="page"]{background:var(--accent-tint);color:var(--accent)}
.fs__navitem svg{flex:0 0 auto}
.fs__navitem .fs__count{margin-left:auto;font-size:11px;font-weight:700;color:var(--slate-2)}
.fs__navitem[aria-current="page"] .fs__count{color:var(--accent)}
.fs__navitem .fs__dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--alert)}
/* breadcrumb bar (the navigation spine) */
.fs-crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px var(--s4);
border-bottom:1px solid var(--line);background:rgba(255,255,255,.75);backdrop-filter:saturate(1.4) blur(8px);
-webkit-backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:58px;z-index:15}
.fs-crumbs button{font-size:14px;color:var(--slate);font-weight:600;background:none;border:none;cursor:pointer;padding:2px 2px}
.fs-crumbs button:hover{color:var(--accent)}
.fs-crumbs .fs-crumbs__sep{color:var(--slate-2)}
.fs-crumbs .fs-crumbs__cur{font-size:14px;color:var(--ink);font-weight:700}
.fs-body{padding:var(--s4);max-width:1120px;width:100%;margin:0 auto}
/* toolbar (title + actions) */
.fs-toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.fs-toolbar h1{margin:0;font-size:1.45rem}
.fs-toolbar .fs-toolbar__spacer{margin-left:auto}
/* folder / file grid */
.fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:var(--s3)}
.fs-tile{display:block;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:16px;cursor:pointer;box-shadow:var(--shadow-xs);position:relative;
transition:transform .14s var(--ease),box-shadow .16s,border-color .16s;width:100%}
.fs-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#DBE1EA}
.fs-tile:active{transform:translateY(0)}
.fs-tile__ico{color:var(--accent);margin-bottom:10px;display:block}
.fs-tile__ico.is-file{color:var(--slate)}
.fs-tile__name{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.25;word-break:break-word}
.fs-tile__sub{font-size:12.5px;color:var(--slate);margin-top:2px}
.fs-tile__badge{position:absolute;top:13px;right:13px}
/* file list rows */
.fs-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.fs-file{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .12s;width:100%;border:none;background:#fff;text-align:left}
.fs-file:last-child{border-bottom:none}
.fs-file:hover{background:var(--paper)}
.fs-file__ico{color:var(--slate);flex:0 0 auto;display:flex}
.fs-file__main{flex:1;min-width:0}
.fs-file__name{font-weight:600;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-file__meta{font-size:12px;color:var(--slate);margin-top:1px}
.fs-file__right{flex:0 0 auto;display:flex;align-items:center;gap:10px}
/* small section label inside a folder view */
.fs-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin:var(--s5) 0 var(--s2)}
.fs-sec:first-child{margin-top:0}
/* global search results dropdown */
.fs-search{position:relative;flex:1;max-width:420px}
.fs-search input{width:100%;min-height:40px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-pill);
font-size:14px;background:var(--paper)}
.fs-search input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-glow)}
@media(max-width:640px){ .fs-search{max-width:none} }