/* ============================================================
   InsureCRM — brand design system (gradient-light)
   Brand: navy #1B3A8B / #26529F → #0C2563  ·  gold #F7941D → #FCC60A
   ============================================================ */
:root{
  --navy:#1B3A8B; --navy-2:#26529F; --navy-d:#0C2563; --navy-ink:#0b1c44;
  --gold:#F7941D; --gold-2:#FCC60A;
  --ink:#0b1220; --slate:#3f4b63; --muted:#6b7896; --muted-2:#9aa7c0;
  --line:#e6ebf3; --line-soft:#eef2f8; --bg:#ffffff; --soft:#f5f8fd; --blue-soft:#eef3fb;
  --grad-navy:linear-gradient(135deg,#26529F,#0C2563);
  --grad-gold:linear-gradient(135deg,#F7941D,#FCC60A);
  --grad-brand:linear-gradient(120deg,#1B3A8B,#3f7bd8);
  --radius:16px; --radius-lg:22px; --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(11,28,68,.05),0 2px 6px rgba(11,28,68,.06);
  --shadow:0 8px 30px rgba(11,28,68,.08);
  --shadow-lg:0 30px 70px rgba(11,28,68,.14);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.section.tight h2{letter-spacing:-.02em;line-height:1.12;color:var(--bg)}

/* ---------- shared bits ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--navy);background:var(--blue-soft);border:1px solid #dbe6fb;padding:6px 14px;border-radius:999px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.badge-soon{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#7a4a00;background:linear-gradient(135deg,#fff2dc,#ffe6b8);border:1px solid #ffd98a;padding:6px 13px;border-radius:999px}
.badge-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
/* Web-app-only marker — for modules that live on the web CRM but are not in
   the mobile app (Claims), so the app page and the feature pages agree. */
.badge-web{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);background:var(--blue-soft);border:1px solid #dbe6fb;padding:6px 13px;border-radius:999px}
.badge-web::before{content:"💻";font-size:11px;line-height:1}
.tag-web{display:inline-block;font-size:9.5px;font-weight:800;color:var(--navy);border:1px solid #dbe6fb;background:var(--blue-soft);border-radius:5px;padding:1px 5px;text-transform:uppercase;white-space:nowrap}
/* Uptime pill — the hero's stat slots now carry live counters, so the uptime
   promise (a claim, not a count) sits in the hero badge row instead. */
.badge-uptime{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;padding:6px 14px;border-radius:999px}
.badge-uptime .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.75)}
.grad-navy{background:var(--grad-navy);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grad-gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grad-brand{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section{padding:40px 0}
.section.tight{padding:60px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 52px}
.section-head h2{font-size:37px;font-weight:800;margin-top:16px}
.section-head p{font-size:16.5px;color:var(--muted);margin-top:14px}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px;border-radius:11px;cursor:pointer;padding:13px 24px;border:1px solid transparent;transition:.18s ease;white-space:nowrap}
.btn-primary{background:var(--grad-navy);color:#fff;box-shadow:0 10px 22px rgba(27,58,139,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(27,58,139,.36)}
.btn-gold{background:var(--grad-gold);color:#3a2400;box-shadow:0 10px 22px rgba(247,148,29,.32)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(247,148,29,.42)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy-2);background:var(--soft)}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.22)}
.btn-lg{padding:15px 28px;font-size:15.5px}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:box-shadow .3s,background .3s,border-color .3s,backdrop-filter .3s}
.site-header.scrolled{box-shadow:0 6px 26px rgba(11,28,68,.07);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links>a,.has-menu>span{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--slate);padding:9px 13px;border-radius:9px;cursor:pointer;transition:.15s}
.nav-links>a:hover,.has-menu>span:hover{color:var(--navy);background:var(--blue-soft)}
.has-menu{position:relative}
.has-menu>span::after{content:"▾";font-size:10px;color:var(--muted-2)}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}
.menu.wide{min-width:460px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.has-menu:hover .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:11px;transition:.15s}
.menu a:hover{background:var(--soft)}
.menu .mi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;font-size:16px;background:var(--blue-soft);color:var(--navy)}
.menu .mi.gold{background:linear-gradient(135deg,#fff2dc,#ffe6b8);color:var(--gold)}
/* wrap, so a long tag ("Web App only") drops under the title instead of
   pushing the menu column wide */
.menu .mt{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px}
.menu .md{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.menu .tag-soon{font-size:9.5px;font-weight:800;color:var(--gold);border:1px solid #ffd98a;border-radius:5px;padding:1px 5px;text-transform:uppercase}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-actions .signin{font-size:14.5px;font-weight:600;color:var(--slate)}
.nav-actions .signin:hover{color:var(--navy)}
.menu-btn{display:none;font-size:24px;line-height:1;color:var(--navy);background:none;border:none;cursor:pointer;padding:4px 6px}
/* the drawer CTA row lives in the markup on every page but only renders
   inside the mobile drawer, where .nav-actions .signin is hidden */
.nav-mobile-cta{display:none}
.nav-backdrop{display:none}

/* ---------- hero (home) & page-hero (inner) ---------- */
.hero,.page-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#eef3fb 0%,#f7faff 46%,#ffffff 84%)}
.hero{padding:76px 0 70px}
.page-hero{padding:64px 0 56px;border-bottom:1px solid var(--line-soft)}
.hero .container,.page-hero .container{position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(80px)}
.hero-bg::before{width:520px;height:520px;background:radial-gradient(circle,rgba(63,123,216,.4),transparent 70%);top:-180px;right:-120px}
.hero-bg::after{width:440px;height:440px;background:radial-gradient(circle,rgba(252,198,10,.34),transparent 70%);bottom:-140px;left:-140px}
/* soft fade so the hero blends seamlessly into the white section below */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff);pointer-events:none;z-index:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero h1{font-size:54px;font-weight:800}
.page-hero h1{font-size:44px;font-weight:800}
.hero p.lead,.page-hero p.lead{font-size:18px;color:var(--slate);margin-top:20px;max-width:520px}
.hero-cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumb a:hover{color:var(--navy)}
.hero-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-stats{display:flex;gap:38px;margin-top:38px}
.hero-stats .n{font-size:30px;font-weight:800;color:var(--navy)}
.hero-stats .l{font-size:13px;color:var(--muted);margin-top:2px}

/* ---------- generic panel / mock ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px}
.mock-dark{background:var(--grad-navy);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:#fff;padding:24px}

/* ---------- home hero: product preview — web dashboard, desk scene, mobile app ----------
   sections/hero-devices.php. The web app's Agency Dashboard in a browser
   window, an agent at a desk working on it, and the phone app beside them,
   on a brand blob. Sized in percentages and container units, so the whole
   group scales as one picture from desktop down to a phone. */
/* The phone sits below the web window, never over it: web 74% wide (its
   height is ~46% of the frame width), phone 22% wide and bottom-anchored, and
   the frame is tall enough for a small gap between them. */
.hero-devices{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:600/565;container-type:inline-size}
.hd-blob{position:absolute;inset:12% 2% 4% 14%;z-index:0;border-radius:58% 42% 52% 48%/46% 54% 46% 54%;
  background:linear-gradient(155deg,#4f7fe0 0%,#1B3A8B 58%,#142f73 100%);box-shadow:0 30px 80px rgba(27,58,139,.28)}
.hd-dot{position:absolute;z-index:0;right:1%;top:9%;width:8%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#F7941D,#fbbf24)}
.hd-spark{position:absolute;z-index:0;width:1.6%;aspect-ratio:1;border-radius:50%;background:var(--sp,#F7941D)}
.hd-web{position:absolute;right:0;top:0;width:74%;z-index:1;container-type:inline-size;background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 28px 60px rgba(11,28,68,.26),0 0 0 1px rgba(11,28,68,.06)}
.hd-desk{position:absolute;left:0;bottom:0;width:60%;z-index:2}
.hd-desk svg{display:block;width:100%;height:auto;overflow:visible}
.hd-phone{position:absolute;right:6%;bottom:0;width:22%;z-index:3}
.hd-phone .phone{width:100%;padding:4%;border-radius:15%/7%}
.hd-phone .phone .screen{border-radius:12%/5.6%}
.hd-phone .phone::after{width:34%;height:1.1%;top:1%}
.hd-chip{position:absolute;left:0;top:13%;z-index:4;display:flex;align-items:center;gap:.7em;font-size:clamp(9px,2.2cqw,13px);
  padding:.75em 1.1em .75em .75em;background:#fff;border:1px solid var(--line-soft);border-radius:1em;box-shadow:0 16px 36px rgba(11,28,68,.18)}
.hd-chip .ci{flex:none;width:2.5em;height:2.5em;border-radius:.8em;display:grid;place-items:center;background:#e7f8ee;color:#177245}
.hd-chip .ci svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hd-chip b{display:block;font-weight:800;color:var(--ink);line-height:1.25}
.hd-chip i{display:block;font-style:normal;font-size:.88em;color:var(--muted);margin-top:1px}
@media(prefers-reduced-motion:no-preference){.hd-chip{animation:floaty 7s ease-in-out infinite}}

/* The web app, laid out on a 640px-wide grid where 1em == 10 design px.
   Mirrors the real Agency Dashboard: white nav with section labels, orange
   active marker, count badges, tabs, period switch and top-bordered KPI cards. */
.wm-in{font-size:1.5625cqw}
@supports not (width:1cqw){.wm-in{font-size:7.3px}}
.wm-chrome{display:flex;align-items:center;gap:.6em;height:2.4em;padding:0 1.1em;background:#eef2f8;border-bottom:1px solid #e1e7f1}
.wm-chrome i{width:.85em;height:.85em;border-radius:50%;background:#f16d64}
.wm-chrome i:nth-child(2){background:#f5bd4f}
.wm-chrome i:nth-child(3){background:#5ec46a}
.wm-chrome span{margin-left:1.2em;flex:0 1 26em;height:1.6em;display:flex;align-items:center;padding:0 1em;border-radius:.8em;
  background:#fff;border:1px solid #e1e7f1;font-size:.9em;color:#6b7a94;white-space:nowrap;overflow:hidden}
.wm-view{position:relative;aspect-ratio:640/376;background:#f5f7fb}
.wm-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.wm{position:absolute;inset:0;display:grid;grid-template-columns:13em 1fr;color:#0f172a;line-height:1.2;text-align:left}
.wm svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.wm b{font-weight:800}

/* nav */
.wm-side{min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-right:1px solid #e8edf5}
.wm-brand{display:flex;align-items:center;gap:.7em;padding:.9em 1em;border-bottom:1px solid #eef2f8}
.wm-brand .lg{flex:none;width:2.6em;height:2.6em;padding:.45em;border-radius:.7em;background:#eef3fb}
.wm-brand b{display:block;font-size:.95em;white-space:nowrap}
.wm-brand i{display:block;margin-top:.25em;font-style:normal;font-size:.6em;font-weight:700;letter-spacing:.12em;color:#64748b}
.wm-sec{padding:1.5em 1.9em .6em;font-size:.55em;font-weight:800;letter-spacing:.16em;color:#64748b;white-space:nowrap}
.wm-item{position:relative;display:flex;align-items:center;gap:.7em;height:2.35em;padding:0 1em 0 1.15em;font-size:.85em;color:#334155;white-space:nowrap}
.wm-item svg{flex:none;width:1.3em;height:1.3em}
.wm-item.on{background:#eef3fb;color:#1B3A8B;font-weight:700}
.wm-item.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.25em;background:#F7941D}
.wm-item em{margin-left:auto;min-width:1.75em;height:1.75em;padding:0 .45em;display:grid;place-items:center;border-radius:1em;
  background:var(--b);color:#fff;font-style:normal;font-size:.72em;font-weight:800}
.wm-user{margin-top:auto;display:flex;align-items:center;gap:.7em;padding:.8em 1em;border-top:1px solid #eef2f8}
.wm-user .av{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:conic-gradient(from 200deg,#4338ca,#6d28d9,#f59e0b,#ef4444,#4338ca)}
.wm-user b{display:block;font-size:.85em}
.wm-user i{display:block;font-style:normal;font-size:.7em;color:#64748b;margin-top:.15em}

/* top bar */
.wm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.wm-top{flex:none;display:flex;align-items:center;gap:1em;height:3.8em;padding:0 1.4em;background:#fff;border-bottom:1px solid #e8edf5}
.wm-search{flex:0 1 21em;min-width:0;display:flex;align-items:center;gap:.6em;height:2.5em;padding:0 1em;border-radius:1.25em;background:#f5f7fb;border:1px solid #e8edf5;color:#94a3b8}
.wm-search svg{flex:none;width:1.15em;height:1.15em}
.wm-search span{font-size:.8em;white-space:nowrap;overflow:hidden}
.wm-tools{margin-left:auto;display:flex;align-items:center;gap:1em;color:#475569}
.wm-tools i{position:relative;flex:none;width:1.45em;height:1.45em}
.wm-tools i.n::after{content:"9+";position:absolute;top:-.6em;right:-.9em;padding:.2em .35em;border-radius:1em;border:.1em solid #fff;
  background:#ef4444;color:#fff;font:800 .55em/1 'Plus Jakarta Sans',system-ui,sans-serif}
.wm-lang{flex:none;display:flex;align-items:center;gap:.35em;height:2.3em;padding:0 .75em;border-radius:1.15em;background:#f5f7fb;border:1px solid #e8edf5;color:#0f172a}
.wm-lang svg{width:1.15em;height:1.15em}
.wm-lang b{font-size:.75em}

/* content */
.wm-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:1.3em 1.8em 0;overflow:hidden}
.wm-crumb{font-size:.72em;color:#64748b}
.wm-crumb b{color:#0f172a}
.wm-h{margin-top:.35em;font-size:2.05em;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#0f172a}
.wm-sub{margin-top:.35em;font-size:.82em;color:#475569}
.wm-tabs{display:flex;gap:1.8em;margin-top:1em;padding-top:.9em;border-top:1px solid #e8edf5;border-bottom:1px solid #e8edf5}
.wm-tabs span{display:flex;align-items:center;gap:.45em;margin-bottom:-1px;padding-bottom:.7em;border-bottom:.2em solid transparent;
  font-size:.82em;font-weight:700;color:#475569;white-space:nowrap}
.wm-tabs span.on{color:#1B3A8B;border-bottom-color:#1B3A8B}
.wm-tabs svg{width:1.25em;height:1.25em}
.wm-filter{display:flex;align-items:center;gap:.8em;margin-top:1.1em}
.wm-live{display:flex;align-items:center;gap:.45em;font-size:.8em;color:#475569;white-space:nowrap}
.wm-live::before{content:"";width:.7em;height:.7em;border-radius:50%;background:#16a34a;box-shadow:0 0 0 .25em #dcfce7}
.wm-live b{color:#0f172a}
.wm-period{margin-left:auto;display:flex;align-items:center;gap:.35em;font-size:.8em;color:#475569}
.wm-period svg{width:1.1em;height:1.1em}
.wm-seg{display:flex;padding:.25em;border-radius:.8em;background:#fff;border:1px solid #e8edf5}
.wm-seg span{padding:.5em .9em;border-radius:.6em;font-size:.78em;font-weight:700;color:#334155}
.wm-seg span.on{background:#1B3A8B;color:#fff}
.wm-widgets{display:flex;align-items:center;gap:.45em;height:2.4em;padding:0 .8em;border-radius:.7em;background:#fff;border:1px solid #e8edf5;
  color:#0f172a;font-size:.78em;font-weight:800}
.wm-widgets svg{width:1.1em;height:1.1em}
.wm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em;margin-top:1.1em}
.wm-card{min-width:0;padding:1em 1em .95em;border-radius:.9em;background:#fff;border:1px solid #e8edf5;border-top:.28em solid var(--c);
  box-shadow:0 .3em .9em rgba(15,23,42,.05)}
.wm-card .t{display:flex;align-items:flex-start;justify-content:space-between;gap:.5em}
.wm-card .t b{padding-top:.3em;font-size:.72em;font-weight:700;line-height:1.3;color:#334155}
.wm-card .t span{flex:none;width:2.4em;height:2.4em;padding:.55em;border-radius:.7em;background:var(--s);color:var(--c)}
.wm-card .v{margin-top:.5em;font-size:1.8em;font-weight:800;letter-spacing:-.02em;line-height:1;color:#0f172a}
.wm-card .p{display:inline-block;margin-top:.7em;padding:.45em .8em;border-radius:1em;background:var(--pb);color:var(--pc);font-size:.66em;font-weight:800;white-space:nowrap}

/* ---------- feature cards ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:.2s;position:relative;display:flex;flex-direction:column}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe0f7}
.fcard .fi{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:22px;margin-bottom:16px;background:var(--blue-soft);color:var(--navy)}
.fcard .fi.gold{background:linear-gradient(135deg,#fff2dc,#ffe6b8);color:var(--gold)}
.fcard h3{font-size:18px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fcard p{font-size:14px;color:var(--muted);line-height:1.65;flex:1}
.fcard .more{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
.fcard:hover .more{gap:10px}
/* Compact feature grid — condensed cards for shortened home sections */
.feature-grid.compact{gap:16px}
.feature-grid.compact .fcard{padding:18px 20px}
.feature-grid.compact .fcard .fi{width:40px;height:40px;font-size:18px;margin-bottom:12px;border-radius:11px}
.feature-grid.compact .fcard h3{font-size:15.5px;margin-bottom:5px}
.feature-grid.compact .fcard p{font-size:13px;line-height:1.55}

/* ---------- split feature rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.split+.split{margin-top:70px}
.split.rev .split-media{order:2}
/* Equal-height cards: the media-side panel stretches to fill the row so it
   always matches the height of the copy column beside it. */
.split-media{display:flex}
.split-media>.panel{flex:1;width:100%;display:flex;flex-direction:column;justify-content:center}
.split-copy .eyebrow{margin-bottom:16px}
.split-copy h2{font-size:30px;font-weight:800;margin-bottom:14px}
.split-copy p{font-size:15.5px;color:var(--slate);line-height:1.7;max-width:440px}
.ticks{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.ticks .li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--slate)}
.ticks .ck{width:22px;height:22px;border-radius:7px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}

/* ---------- bands ---------- */
.band{background:var(--soft)}
.band-navy{background:var(--grad-navy);color:#fff}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy p{color:#c9d6f0}
.band-soft-gold{background:linear-gradient(180deg,#fffaf2,#fff)}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .si{width:46px;height:46px;border-radius:12px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;margin:0 auto 14px;font-size:20px}
.stat .sn{font-size:32px;font-weight:800;color:var(--ink)}
.stat .sl{font-size:13px;color:var(--muted);margin-top:4px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.step .sno{width:40px;height:40px;border-radius:11px;background:var(--grad-navy);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:14px}
.step h4{font-size:16px;font-weight:700;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--grad-navy);border-radius:26px;padding:56px;text-align:center;color:#fff;box-shadow:var(--shadow-lg)}
.cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(252,198,10,.3),transparent 70%);top:-160px;right:-120px}
.cta h2{font-size:34px;font-weight:800;position:relative}
.cta p{font-size:16px;color:#cdd8f0;margin:14px auto 26px;max-width:520px;position:relative}
.cta .hero-cta{justify-content:center;position:relative}

/* ---------- coming-soon specifics ---------- */
.soon-hero{background:linear-gradient(180deg,#fffaf2 0%,#f7faff 60%,#fff 100%)}
.roadmap{display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto}
.rm{display:grid;grid-template-columns:40px 1fr;gap:18px;padding-bottom:26px;position:relative}
.rm::before{content:"";position:absolute;left:19px;top:34px;bottom:-4px;width:2px;background:var(--line)}
.rm:last-child::before{display:none}
.rm .dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;z-index:1}
.rm.done .dot{background:var(--grad-navy);color:#fff}
.rm.now .dot{background:var(--grad-gold);color:#3a2400}
.rm.next .dot {
  background: var(--grad-brand); /* or another variable */
  color: #fff;
}
.rm h4{font-size:16px;font-weight:700}
.rm p{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.6}
.notify{display:flex;gap:10px;max-width:440px;margin:32px auto 0}
.notify input{flex:1;border:1px solid var(--line);border-radius:11px;padding:13px 16px;font:inherit;font-size:14px;background:#fff}
.notify input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,58,139,.12)}

/* ---------- forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:32px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{font-size:12.5px;font-weight:700;color:var(--slate);display:block;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 15px;font:inherit;font-size:14px;background:var(--soft);transition:.15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(27,58,139,.12)}
.field textarea{resize:vertical;min-height:120px}
.form-ok{display:none;margin-top:14px;padding:12px 16px;border-radius:11px;background:#eef7ee;border:1px solid #cde8cd;color:#276749;font-size:13.5px;font-weight:600}
.form-ok.show{display:block}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.price.pop{border:2px solid var(--navy);box-shadow:var(--shadow-lg);position:relative}
.price.pop::before{content:"Most Popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-gold);color:#3a2400;font-size:11.5px;font-weight:800;padding:6px 16px;border-radius:999px;box-shadow:0 6px 14px rgba(247,148,29,.35)}
.price .pl{font-size:16px;font-weight:700}
.price .pd{font-size:13px;color:var(--muted);margin-top:6px;min-height:38px}
.price .pa{font-size:40px;font-weight:800;margin:12px 0 2px}
.price .pa small{font-size:15px;font-weight:500;color:var(--muted)}
.price ul{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.price li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--slate)}
.price li .ck{width:18px;height:18px;border-radius:5px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;font-size:11px;flex-shrink:0}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-ink);color:#c4cfe6;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:3.6fr 1fr 1fr 1fr 1fr;gap:34px}
.foot-brand img{height:34px;margin-bottom:16px;filter:brightness(0) invert(1)}
.foot-brand p{font-size:13.5px;color:#8fa0c4;line-height:1.7;max-width:260px}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#c4cfe6;transition:.2s}
.foot-social a:hover{background:var(--gold);color:#3a2400}
.foot-col h5{color:#fff;font-size:13px;font-weight:700;margin-bottom:15px;text-transform:uppercase;letter-spacing:.04em}
.foot-col a{display:block;font-size:13.5px;color:#8fa0c4;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:#fff}
.foot-col a .soon{font-size:9px;font-weight:800;color:var(--gold);border:1px solid rgba(252,198,10,.4);border-radius:4px;padding:1px 4px;margin-left:6px;text-transform:uppercase}
/* Web-app-only marker on the dark footer — same shape as .soon, cool tone */
.foot-col a .web{display:inline-block;font-size:9px;font-weight:800;color:#a9c2ee;border:1px solid rgba(169,194,238,.38);background:rgba(169,194,238,.1);border-radius:4px;padding:1px 4px;margin-left:6px;text-transform:uppercase;white-space:nowrap}
.foot-col a:hover .web{color:#fff;border-color:rgba(255,255,255,.5)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:46px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#6b7ba0}
.foot-bottom .links{display:flex;gap:20px}
.foot-bottom .links a:hover{color:#c4cfe6}

/* ---------- download / app store ---------- */
.dl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.badges{display:flex;gap:14px;flex-wrap:wrap}
.store-btn{display:inline-flex;align-items:center;gap:12px;background:var(--grad-navy);color:#fff;border-radius:14px;padding:11px 20px;transition:.2s}
.store-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,28,68,.22)}
.store-btn svg{width:25px;height:25px;flex-shrink:0}
.store-btn .st{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-btn .st small{font-size:10.5px;color:#c9d6f0;font-weight:500}
.store-btn .st b{font-size:15px;font-weight:700}
.qr-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px;text-align:center;max-width:290px;margin:0 auto}
.qr-card img{width:186px;height:186px;border:1px solid var(--line-soft);border-radius:16px;padding:10px;margin:0 auto 14px}
.qr-card h4{font-size:16px;font-weight:700}
.qr-card p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.ci-row{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.ci-ic{width:46px;height:46px;border-radius:12px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;font-size:19px;flex-shrink:0}
.ci-row .k{font-size:13px;color:var(--muted)}
.ci-row .v{font-size:15px;font-weight:700;margin-top:2px}

/* ---------- legal / prose ---------- */
.legal-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
.legal-toc{position:sticky;top:90px;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.legal-toc h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
.legal-toc a{display:block;font-size:13.5px;color:var(--slate);padding:6px 0 6px 12px;border-left:2px solid transparent;margin-left:-12px;transition:.15s}
.legal-toc a:hover{color:var(--navy);border-color:#cfe0f7}
.prose{max-width:760px}
.prose h1,.prose h2{font-size:22px;font-weight:800;margin:34px 0 12px;scroll-margin-top:90px}
.prose h1:first-child,.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h3{font-size:16px;font-weight:700;margin:22px 0 8px;color:var(--navy-ink)}
.prose p{font-size:15px;color:var(--slate);line-height:1.78;margin-bottom:14px}
.prose ul{margin:0 0 16px 20px}
.prose li{font-size:15px;color:var(--slate);line-height:1.75;margin-bottom:9px}
.prose a{color:var(--navy);font-weight:600}
.prose strong{color:var(--navy-ink)}
.callout{background:var(--blue-soft);border:1px solid #dbe6fb;border-radius:14px;padding:16px 20px;font-size:14px;color:var(--navy-ink);line-height:1.7;margin:22px 0}
@media(max-width:980px){.dl-grid,.contact-grid{grid-template-columns:1fr}.legal-layout{grid-template-columns:1fr}.legal-toc{position:static}}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}
  .reveal.d4{transition-delay:.24s}.reveal.d5{transition-delay:.3s}.reveal.d6{transition-delay:.36s}
}

/* ---------- auth (sign in / register) ---------- */
.auth{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:48px 0;position:relative;overflow:hidden;background:linear-gradient(180deg,#eef3fb 0%,#f7faff 55%,#ffffff 100%)}
.auth .container{position:relative;z-index:1;width:100%}
.auth-card{width:100%;max-width:980px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.auth-aside{background:var(--grad-navy);color:#fff;padding:44px 42px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.auth-aside::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(252,198,10,.28),transparent 70%);top:-130px;right:-110px;pointer-events:none}
.auth-aside::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(63,123,216,.4),transparent 70%);bottom:-120px;left:-100px;pointer-events:none}
.auth-aside .a-logo{width:auto;filter:brightness(0) invert(1);position:relative;z-index:1}
.auth-aside h2{font-size:26px;font-weight:800;position:relative;z-index:1;margin:0 0 10px;color:#fff}
.auth-aside .a-lead{font-size:14.5px;color:#cdd8f0;line-height:1.7;position:relative;z-index:1}
.auth-aside .apts{margin-top:22px;display:flex;flex-direction:column;gap:13px;position:relative;z-index:1}
/* middle visual on the auth panel */
.a-mock{position:relative;z-index:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:20px 22px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.a-mock .stars{color:#FCC60A;font-size:15px;letter-spacing:2px}
.a-mock blockquote{font-size:15px;line-height:1.6;color:#eef2fb;margin:12px 0 16px;font-weight:500}
.a-mock .who{display:flex;align-items:center;gap:11px}
.a-mock .who .av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.a-mock .who .nm{font-size:13px;font-weight:700;color:#fff}
.a-mock .who .rl{font-size:11.5px;color:#c9d6f0}
.a-stats{display:flex;gap:10px;position:relative;z-index:1}
.a-stat{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 10px;text-align:center}
.a-stat .n{font-size:21px;font-weight:800;color:#fff}
.a-stat .l{font-size:10.5px;color:#c9d6f0;margin-top:3px;letter-spacing:.02em}
.auth-aside .apt{display:flex;gap:11px;align-items:center;font-size:14px;color:#e6ecfb}
.auth-aside .apt .c{width:24px;height:24px;border-radius:7px;background:rgba(252,198,10,.22);color:#FCC60A;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.auth-body{padding:46px 44px}
.auth-body h1{font-size:27px;font-weight:800}
.auth-body .sub{font-size:14px;color:var(--muted);margin-top:6px;margin-bottom:28px}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 22px;font-size:13.5px}
.auth-row a{color:var(--navy);font-weight:600}
.remember{display:inline-flex;align-items:center;gap:8px;color:var(--slate);cursor:pointer;user-select:none}
.remember input{width:16px;height:16px;accent-color:var(--navy)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;padding:6px;line-height:1;opacity:.7}
.pw-toggle:hover{opacity:1}
.meta-text{font-size:12px;color:var(--muted);margin:-8px 0 18px}
.auth-alt{text-align:center;font-size:13.5px;color:var(--muted);margin-top:24px}
.auth-alt a{color:var(--navy);font-weight:700}
@media(max-width:760px){.auth-card{grid-template-columns:1fr;max-width:460px}.auth-aside{display:none}.auth-body{padding:36px 26px}}

/* full-width auth (sign in / register): header + edge-to-edge split fill the window; footer sits below, shown on scroll */
body.auth-neat .auth{height:calc(100vh - 71px);min-height:520px;display:block;padding:0}
body.auth-neat .auth .container{max-width:none;width:100%;padding:0;margin:0;height:100%;position:relative;z-index:1}
body.auth-neat .auth-card{max-width:none;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none;background:transparent}
body.auth-neat .auth-aside{height:100%;min-height:0;overflow:hidden}
body.auth-neat .auth-body{display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;min-height:0;background:#fff;padding:28px 5vw}
body.auth-neat .auth-body>*{width:100%;max-width:440px;margin-left:auto;margin-right:auto}
body.auth-neat .auth-body h1{font-size:24px}
body.auth-neat .auth-body .field{margin-bottom:14px}
body.auth-neat .auth-body .field label{font-size:12px;font-weight:700;color:var(--slate);margin-bottom:5px}
body.auth-neat .auth-body .field input,body.auth-neat .auth-body .field select{padding:11px 14px;border-radius:12px;font-size:14px;background:#fff;border:1.5px solid var(--line)}
body.auth-neat .auth-body .field input:focus,body.auth-neat .auth-body .field select:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(27,58,139,.1)}
body.auth-neat .auth-body .frow{gap:14px}
body.auth-neat .phone-field select{flex:0 0 92px}
@media(max-width:820px){
  body.auth-neat .auth{height:auto;min-height:0}
  body.auth-neat .auth-card{grid-template-columns:1fr}
  body.auth-neat .auth-aside{display:none}
  body.auth-neat .auth-body{padding:34px 24px}
}

/* ---------- auth flow (otp / verify / workspace) ---------- */
.auth-card.solo{grid-template-columns:1fr;max-width:470px}
.auth-solo{padding:42px 40px 36px}
.solo-logo{height:34px;width:auto;margin:0 auto 22px}
.auth-solo>h1{font-size:24px;font-weight:800;text-align:center}
.auth-solo .sub{font-size:14px;color:var(--muted);margin:8px auto 26px;text-align:center;max-width:350px;line-height:1.6}
.auth-solo .sub b{color:var(--ink)}
.auth-solo .sub a{color:var(--navy);font-weight:600}
.auth-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:28px;margin:0 auto 18px}
.auth-icon.blue{background:var(--blue-soft)}
.auth-icon.gold{background:linear-gradient(135deg,#fff2dc,#ffe6b8)}
.auth-icon.wa{background:#e7f8ee}
.auth-back{display:block;text-align:center;font-size:13.5px;color:var(--navy);font-weight:600;margin-top:22px}
.auth-alert{display:flex;gap:12px;align-items:flex-start;background:#fef4f2;border:1px solid #fbd5cd;border-radius:12px;padding:14px 16px;text-align:left;margin:2px 0 20px}
.auth-alert .ai{font-size:17px;line-height:1.3}
.auth-alert .at{font-size:12.8px;color:#9b2c1e;line-height:1.55}
.auth-alert .at b{color:#7a1f13}
.auth-alert .at a{color:var(--navy);font-weight:700}
.brand-note{text-align:center;font-size:11.5px;color:var(--muted-2);margin-top:18px}
.phone-field{display:flex;gap:10px}
.phone-field select{flex:0 0 100px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}
.btn:disabled::after{display:none}
.demo-hint{text-align:center;font-size:12px;color:var(--muted);margin-top:16px}
.demo-hint a{color:var(--navy);font-weight:700}
/* otp inputs */
.otp{display:flex;gap:9px;justify-content:center;margin:6px 0}
.otp input{width:48px;height:56px;text-align:center;font-size:22px;font-weight:700;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);font-family:inherit}
.otp input:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(27,58,139,.12)}
.otp input.filled{border-color:var(--navy);background:#fff}
.resend{text-align:center;font-size:13.5px;color:var(--muted);margin:18px 0 22px}
.resend .rc{color:var(--navy);font-weight:700}
.resend .rbtn{background:none;border:none;color:var(--navy);font-weight:700;cursor:pointer;font-size:13.5px;padding:0}
.resend .rbtn:hover{text-decoration:underline}
/* workspace select */
.ws-list{display:flex;flex-direction:column;gap:12px;margin:6px 0 8px}
.ws{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:.18s;background:#fff;width:100%;text-align:left;font:inherit}
.ws:hover{border-color:#cfe0f7;box-shadow:var(--shadow);transform:translateY(-2px)}
.ws.sel{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,58,139,.12)}
.ws-logo{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0}
.ws .wn{font-size:15px;font-weight:700}
.ws .wm{font-size:12.5px;color:var(--muted);margin-top:2px}
.ws .role{margin-left:auto;font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--blue-soft);color:var(--navy);white-space:nowrap}
.ws-new{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border:1.5px dashed var(--line);border-radius:14px;color:var(--navy);font-weight:700;font-size:13.5px;cursor:pointer;margin-top:4px;background:none;width:100%}
.ws-new:hover{background:var(--soft);border-color:var(--navy)}
@media(max-width:520px){.otp input{width:42px;height:50px;font-size:19px;gap:7px}.auth-solo{padding:34px 24px}}

/* ---------- landing extras: reminders / app download / refer / faq ---------- */
.rcompare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm)}
.rcard.prem{border:1px solid #cfe0f7;background:linear-gradient(180deg,#f4f8ff,#fff)}
.rcard .rh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.rcard h3{font-size:19px;font-weight:800}
.rtag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:5px 11px;border-radius:999px;white-space:nowrap}
.rtag.gold{background:linear-gradient(135deg,#fff2dc,#ffe6b8);color:#7a4a00}
.rtag.wa{background:#e7f8ee;color:#177245}
.rlist{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.ritem{display:flex;gap:13px}
.ritem .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex-shrink:0;background:var(--blue-soft)}
.ritem h5{font-size:14.5px;font-weight:700}
.ritem p{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.55}

.dl3{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:24px;align-items:center;margin-top:44px}
.appstats{display:flex;gap:30px;margin:0 0 22px}
.appstats .n{font-size:27px;font-weight:800;color:var(--navy)}
.appstats .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.appstats .is-off{display:none}
.qr-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 18px;text-align:center}
.qr-block .os{font-size:14px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.qr-block img.qr{width:150px;height:150px;border:1px solid var(--line-soft);border-radius:12px;padding:8px;margin:0 auto}

.refer{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffedcc,#fff3e0 55%,#eef3fb);border:1px solid #f4dcae;border-radius:26px;padding:40px 48px;display:grid;grid-template-columns:1.5fr auto;gap:24px;align-items:center;box-shadow:0 14px 36px rgba(247,148,29,.16)}
.refer h2{font-size:30px;font-weight:800;color:var(--ink)}
.refer p{font-size:15.5px;color:var(--muted);margin:12px 0 22px;max-width:480px}
.refer .gift{font-size:96px;line-height:1;text-align:center}
.refer .btn{background:var(--navy);color:#fff}
.refer .btn:hover{background:var(--navy-d);transform:translateY(-1px)}
.refer .eyebrow{background:#fff2dc;border-color:#ffe6b8;color:#b45309}

.faq{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px;transition:.2s}
.faq details[open]{border-color:#cfe0f7;box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:15px;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--navy);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{font-size:14px;color:var(--slate);line-height:1.7;margin:0;padding:0 0 18px}
.faq details a{color:var(--navy);font-weight:600}

@media(max-width:860px){
  .rcompare{grid-template-columns:1fr}
  .dl3{grid-template-columns:1fr}
  .refer{grid-template-columns:1fr;text-align:center}
  .refer .gift{margin:0 auto}
  .appstats{justify-content:center}
}

/* ---------- pricing: billing toggle, plans, compare table, tooltips ---------- */
.bill{display:inline-flex;align-items:center;gap:12px;margin:8px 0 4px;flex-wrap:wrap;justify-content:center}
.bill-toggle{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px}
.bill-toggle button{border:none;background:none;padding:9px 20px;border-radius:999px;font:inherit;font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;transition:.2s}
.bill-toggle button.active{background:var(--grad-navy);color:#fff;box-shadow:0 6px 14px rgba(27,58,139,.25)}
.bill-save{font-size:12px;font-weight:800;color:#177245;background:#e7f8ee;border:1px solid #bfead0;border-radius:999px;padding:5px 12px}
.price-grid.four{grid-template-columns:repeat(4,1fr);gap:18px}
.price .free-badge{align-self:flex-start;font-size:11px;font-weight:800;color:#177245;background:#e7f8ee;border:1px solid #bfead0;border-radius:999px;padding:4px 11px;margin-bottom:10px}
.price .py{display:none}
body.annual .price .pm{display:none}
body.annual .price .py{display:inline}
.price .pnote{font-size:12px;color:var(--muted);margin-top:-2px}
.price ul li .ck.no{background:#f1f5f9;color:var(--muted-2)}

.cmp-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 22px;cursor:pointer;transition:.18s}
.cmp-toggle:hover{border-color:var(--navy);box-shadow:var(--shadow-sm)}
.cmp-wrap{margin-top:26px;border:1px solid var(--line);border-radius:18px;overflow:auto;box-shadow:var(--shadow-sm);background:#fff}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:780px}
.cmp col.pop{background:#f2f7ff}
.cmp th,.cmp td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--line-soft)}
.cmp thead th{position:sticky;top:0;z-index:3;background:#fff;font-weight:800;color:var(--ink);font-size:14.5px;border-bottom:2px solid var(--line)}
.cmp thead th.pop{color:var(--navy)}
.cmp thead th small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px}
.cmp th:first-child,.cmp td:first-child{text-align:left;position:sticky;left:0;z-index:2;background:#fff;font-weight:600;color:var(--slate);min-width:220px}
.cmp thead th:first-child{z-index:4}
.cmp .grp td{background:var(--blue-soft);font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;font-size:11px;text-align:left}
.cmp tbody tr:hover td{background:#f7faff}
.cmp tbody tr:hover td:first-child{background:#eef4ff}
.cmp .yes{color:#16a34a;font-weight:800;font-size:16px}
.cmp .no{color:#cbd5e1;font-weight:700}
.cmp .val{font-weight:700;color:var(--ink);font-size:12.5px}
.cmp .soon{font-size:10px;font-weight:800;color:var(--gold);border:1px solid #ffd98a;border-radius:5px;padding:2px 6px;text-transform:uppercase}
.tip{cursor:help;border-bottom:1px dotted var(--muted-2)}
.tipbox{position:fixed;z-index:200;max-width:250px;background:var(--navy-ink);color:#fff;font-size:12px;line-height:1.5;font-weight:500;padding:10px 12px;border-radius:10px;box-shadow:var(--shadow-lg);pointer-events:none}
.pricing-notes{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.9;text-align:center}
.pricing-notes .req{color:#dc2626;font-weight:700}
.pricing-notes a{color:var(--navy);font-weight:700}
@media(max-width:1000px){.price-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.price-grid.four{grid-template-columns:1fr}}

/* ---------- colored feature icons (home features grid) ---------- */
.fgrid-colored .fcard{--c:#1B3A8B;--c2:#3f7bd8}
.fgrid-colored .fcard .fi{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;box-shadow:0 8px 16px color-mix(in srgb,var(--c) 34%,transparent)}
.fgrid-colored .fcard .fi svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fgrid-colored .fcard::before{opacity:.35;background:linear-gradient(150deg,transparent 45%,var(--c))}
.fgrid-colored .fcard:hover::before{opacity:.9}
.fgrid-colored .fcard:hover{border-color:transparent;box-shadow:0 18px 40px color-mix(in srgb,var(--c) 22%,transparent)}
.fgrid-colored .fcard:hover .fi{transform:translateY(-3px) scale(1.06)}

/* ---------- feature tabbed selector ---------- */
.tabs{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center;margin-top:44px}
.tab-stage{background:var(--grad-navy);border-radius:24px;padding:46px 36px;color:#fff;text-align:center;box-shadow:var(--shadow-lg);min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}
.tab-stage::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(252,198,10,.28),transparent 70%);top:-120px;right:-100px;pointer-events:none}
.tab-stage .ts-icon{font-size:58px;margin-bottom:18px;position:relative}
.tab-stage .ts-title{font-size:22px;font-weight:800;max-width:320px;position:relative;color:#fff}
.tab-stage .ts-desc{font-size:14.5px;color:#cdd8f0;margin-top:12px;max-width:340px;line-height:1.6;position:relative}
.tab-list{display:flex;flex-direction:column;gap:11px}
.tab-btn{text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px;font:inherit;font-size:14.5px;font-weight:600;color:var(--slate);cursor:pointer;transition:.18s;display:flex;align-items:center;gap:12px}
.tab-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0;transition:.18s}
.tab-btn:hover{border-color:#cfe0f7;background:var(--soft)}
.tab-btn.active{background:var(--grad-navy);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(27,58,139,.25)}
.tab-btn.active::before{background:var(--gold)}
@media(max-width:860px){.tabs{grid-template-columns:1fr}}

/* ---------- enquiry modal ---------- */
dialog.modal{border:none;border-radius:20px;padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:var(--shadow-lg)}
dialog.modal::backdrop{background:rgba(11,28,68,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-card{padding:30px 28px;position:relative}
.modal-card h3{font-size:20px;font-weight:800;margin-bottom:4px}
.modal-card .msub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;background:var(--soft);cursor:pointer;font-size:15px;color:var(--slate)}
.modal-close:hover{background:var(--line)}

/* ============================================================
   ADVANCED LAYER — motion, depth, slider, marquee
   ============================================================ */
/* scroll progress */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--navy),var(--gold));box-shadow:0 0 10px rgba(27,58,139,.4);transition:width .12s ease-out}

/* animated hero atmosphere */
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-26px)}}
.hero-bg::before{animation:floaty 15s ease-in-out infinite}
.hero-bg::after{animation:floaty 19s ease-in-out infinite reverse}

/* button shine sweep */
.btn-primary,.btn-gold{position:relative;overflow:hidden}
.btn-primary::after,.btn-gold::after{content:"";position:absolute;top:0;left:-45%;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);pointer-events:none}
@keyframes shine{to{left:140%}}
.btn-primary:hover::after,.btn-gold:hover::after{animation:shine .75s ease}

/* card gradient-border glow + icon pop */
.fcard,.stat{position:relative}
.fcard::before,.stat::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--navy),var(--gold));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .28s;pointer-events:none}
.fcard:hover::before,.stat:hover::before{opacity:.7}
.fcard .fi{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.fcard:hover .fi{transform:translateY(-3px) scale(1.06)}
.stat{transition:transform .25s,box-shadow .25s}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.panel:hover{box-shadow:var(--shadow-lg)}
.panel{transition:box-shadow .3s}

/* ===== slider / carousel ===== */
.slider{position:relative;overflow:hidden}
.slides{display:flex;transition:transform .6s cubic-bezier(.16,.84,.44,1);will-change:transform}
.slide{min-width:100%;box-sizing:border-box;padding:6px}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.sdot{width:9px;height:9px;border-radius:999px;border:none;background:#cdd8ef;cursor:pointer;transition:.2s;padding:0}
.sdot.on{background:var(--navy);width:26px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;z-index:2;color:var(--navy);font-size:20px;line-height:1;transition:.2s}
.slider-arrow:hover{background:var(--grad-navy);color:#fff;border-color:transparent}
.sprev{left:6px}.snext{right:6px}
@media(max-width:640px){.slider-arrow{display:none}}
.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:40px 46px;text-align:center;max-width:720px;margin:0 auto}
.quote-card .stars{color:var(--gold);font-size:18px;letter-spacing:3px}
.quote-card blockquote{font-size:21px;font-weight:600;line-height:1.55;color:var(--navy-ink);margin:18px 0 24px;letter-spacing:-.01em}
.quote-card .who{display:flex;align-items:center;justify-content:center;gap:12px}
.quote-card .av{width:46px;height:46px;border-radius:50%;background:var(--grad-navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.quote-card .who .nm{font-weight:700;font-size:14px;text-align:left}
.quote-card .who .rl{font-size:12.5px;color:var(--muted);text-align:left}

/* ===== marquee ===== */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mchip{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:700;color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-size:14px;box-shadow:var(--shadow-sm)}
.mchip .d{width:8px;height:8px;border-radius:50%;background:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.hero-bg::before,.hero-bg::after,.slides{animation:none}
  .btn-primary::after,.btn-gold::after{display:none}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid,.split{grid-template-columns:1fr;gap:36px}
  .split.rev .split-media{order:0}
  .feature-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand p{max-width:none}
  /* the mobile source order (logo → links → About → social) is set in
     sections/footer.php, which owns the .fb-about rules */
  .nav-links,.nav-actions .signin{display:none}
  .menu-btn{display:block}
  .hero h1{font-size:40px}.page-hero h1{font-size:33px}.section-head h2{font-size:29px}
  .cta{padding:38px 24px}

  /* ---- mobile drawer ----------------------------------------------------
     The hamburger toggles .open on .nav-links; everything below is what
     actually renders that state. The hover-only desktop dropdowns become
     tap-to-expand accordions (.has-menu.sub-open), because there is no
     hover on touch. ------------------------------------------------------ */
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:fixed;top:var(--hdr-h,70px);left:0;right:0;
    max-height:calc(100vh - var(--hdr-h,70px));overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#fff;border-top:1px solid var(--line-soft);
    box-shadow:0 20px 44px rgba(11,28,68,.16);
    padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px));z-index:70;
    overscroll-behavior:contain;
  }
  .nav-links.open>a,.nav-links.open .has-menu>span{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    font-size:15.5px;padding:13px 12px;border-radius:0;
    border-bottom:1px solid var(--line-soft);
  }
  .nav-links.open .has-menu>span::after{transition:transform .2s ease;font-size:12px}
  .nav-links.open .has-menu.sub-open>span{color:var(--navy)}
  .nav-links.open .has-menu.sub-open>span::after{transform:rotate(180deg)}
  /* submenu: static block, collapsed by default, revealed by .sub-open */
  .nav-links.open .menu,.nav-links.open .menu.wide{
    position:static;display:none;min-width:0;width:auto;
    grid-template-columns:1fr;border:0;border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;transition:none;
    padding:4px 0 10px;background:transparent;
  }
  .nav-links.open .has-menu.sub-open .menu{display:block}
  .nav-links.open .has-menu.sub-open .menu.wide{display:grid}
  /* hover must not open anything while the drawer is in accordion mode */
  .nav-links.open .has-menu:hover .menu{opacity:1;visibility:visible}
  .nav-links.open .menu a{padding:10px 12px;border-radius:10px}
  .nav-links.open .menu a:active{background:var(--soft)}
  .nav-links.open .menu .md{display:none}
  .nav-mobile-cta{display:flex;gap:10px;margin-top:16px}
  .nav-mobile-cta .btn{flex:1;justify-content:center}
  .nav-backdrop{display:block;position:fixed;inset:var(--hdr-h,70px) 0 0;z-index:59;
    background:rgba(11,28,68,.34);opacity:0;pointer-events:none;transition:opacity .2s ease}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  /* the bar is transparent until .scrolled — give it a ground while the
     white drawer hangs off it, or the two disagree at scroll top */
  body.nav-open .site-header{background:#fff;border-bottom-color:var(--line-soft)}
}
@media(max-width:560px){
  .feature-grid,.stats,.steps,.frow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .hero-stats{gap:22px}
  .foot-bottom{flex-direction:column;gap:14px;text-align:center}
  .nav-links.open{padding-left:16px;padding-right:16px}
  .nav-mobile-cta{flex-direction:column}
}
@media(max-width:420px){
  /* stay two-up: .foot-brand spans the row, so Features / Coming soon /
     Company / Legal sit 2x2 rather than stacking into one long column */
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 18px}
  .site-footer{padding:48px 0 26px}
  /* the tag needs its own line once the column is this narrow */
  .foot-col a .web{margin-left:0;margin-top:4px}
  .foot-col a:has(.web){display:flex;flex-direction:column;align-items:flex-start}
}

/* Panel-footer CTA — the arrow link at the bottom of a preview card.
   These point at logged-in app screens, so they go to the login page. */
.panel-cta{color:var(--navy);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:gap .18s ease,opacity .18s ease}
.panel-cta:hover{gap:9px;opacity:.82;text-decoration:none}

/* ============================================================
   MOBILE APP — device frames & screenshot showcase
   Used by feature-mobile-app.php. A .phone is a self-contained
   device mock: bezel + notch + screen. The screen holds either a
   real screenshot (<img class="shot">) or, until one is dropped
   into assets/images/app/, a styled .shot-ph placeholder so the
   layout is never half-built.
   ============================================================ */
.phone{position:relative;width:232px;flex:0 0 auto;border-radius:34px;padding:9px;
  background:linear-gradient(160deg,#243352,#0b1220);
  box-shadow:0 26px 60px rgba(11,28,68,.28),0 2px 0 rgba(255,255,255,.18) inset;
  transition:transform .3s cubic-bezier(.16,.84,.44,1),box-shadow .3s}
.phone::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:4px;
  width:78px;height:5px;border-radius:99px;background:rgba(255,255,255,.16)}
.phone .screen{position:relative;border-radius:26px;overflow:hidden;background:#fff;
  aspect-ratio:9/19.5;display:block}
.phone .screen .shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
  width:30%;height:14px;border-radius:0 0 10px 10px;background:#0b1220}
.phone.sm .notch{width:34%;height:11px}
.phone.lg .notch{width:28%;height:16px}
.phone.lift{transform:translateY(-16px)}
.phone:hover{transform:translateY(-8px);box-shadow:0 34px 74px rgba(11,28,68,.34)}
.phone.lift:hover{transform:translateY(-24px)}
.phone.sm{width:196px}
.phone.lg{width:240px}

/* placeholder shown when the screenshot file isn't there yet */
.shot-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;padding:22px;
  background:linear-gradient(180deg,#eef3fb,#f8fbff)}
.shot-ph .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:var(--grad-navy);color:#fff;box-shadow:0 8px 18px rgba(27,58,139,.28)}
.shot-ph .t{font-size:13px;font-weight:800;color:var(--navy)}
.shot-ph .s{font-size:11px;color:var(--muted);line-height:1.5}

/* a row / grid of phones */
.phones{display:flex;gap:26px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;justify-items:center;margin-top:8px}
.shot-item{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:250px}
.shot-cap{text-align:center}
.shot-cap .h{font-size:15px;font-weight:800;color:var(--ink)}
.shot-cap .p{font-size:13px;color:var(--muted);line-height:1.6;margin-top:4px}

/* hero cluster — three overlapping phones */
.phone-cluster{display:flex;justify-content:center;align-items:center;gap:-10px;padding:8px 0}
.phone-cluster .phone:nth-child(1){transform:rotate(-6deg) translateX(24px) scale(.9);z-index:1}
.phone-cluster .phone:nth-child(2){z-index:3}
.phone-cluster .phone:nth-child(3){transform:rotate(6deg) translateX(-24px) scale(.9);z-index:1}
.phone-cluster .phone:nth-child(1):hover{transform:rotate(-6deg) translateX(24px) scale(.94)}
.phone-cluster .phone:nth-child(3):hover{transform:rotate(6deg) translateX(-24px) scale(.94)}

@media(max-width:1000px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .phone-cluster{gap:0}
  .phone-cluster .phone:nth-child(1),.phone-cluster .phone:nth-child(3){display:none}
  .phone-cluster .phone:nth-child(2){transform:none}
}
@media(max-width:560px){.shots{grid-template-columns:1fr}.phone{width:212px}}


/* ============================================================
   IN-FRAME APP SCREENS (.mk)
   Faithful recreations of the real app screens, drawn in CSS +
   SVG rather than shipped as PNGs: they stay sharp at every
   frame size, add no image requests, and follow the site tokens.

   Sizing: laid out on a 260 x 563 design grid (the 9/19.5 frame)
   where 1em == 10 design px. Every value below is derived from
   the real 1080x2408 captures scaled by 260/1080, so a screen
   fills its frame the way it fills a real handset — the whole
   dashboard from status bar to tab bar, and 3-4 list rows.
   A real screenshot in assets/images/app/ still wins (app_screen).
   ============================================================ */
.mk{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;
  font-size:8.2px;line-height:1.25;letter-spacing:-.01em;
  color:var(--mk-ink);background:#fff;
  --mk-b:#123d8f;--mk-b2:#e9effb;--mk-ink:#0e1b34;--mk-mut:#6b7a94;
  --mk-line:#e4eaf4;--mk-head:linear-gradient(180deg,#dbe4f3,#e9eef8)}
.phone.sm .screen .mk{font-size:6.8px}
.phone.lg .screen .mk{font-size:9.4px}
@supports (width:1cqw){
  .phone .screen{container-type:size}
  .phone .screen .mk,.phone.sm .screen .mk,.phone.lg .screen .mk{font-size:3.846cqw}
}
/* stroke is heavier than the site's own icons: these draw at ~10 design px,
   where a 1.9 stroke greys out instead of reading as a line */
.mk svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* status bar + app header, shared by the screens that have one */
.mk .sb{display:flex;align-items:center;justify-content:space-between;
  padding:1.5em 1.4em .2em;font-size:.78em;font-weight:700;color:#0e1b34}
.mk .sb .l,.mk .sb .r{display:flex;align-items:center;gap:.4em}
.mk .sb .l svg{width:.95em;height:.95em;opacity:.85}
.mk .sb .r svg{width:1.15em;height:1.15em}
.mk .sb .pct{font-weight:800;margin-right:.1em}
.mk .hd{display:flex;align-items:center;gap:.5em;padding:.45em .8em .7em}
.mk .hd .rnd{width:2.5em;height:2.5em;border-radius:50%;background:#fff;flex:none;
  display:grid;place-items:center;color:var(--mk-b);box-shadow:0 .15em .45em rgba(11,28,68,.10)}
.mk .hd .rnd span{display:block;width:1.15em;height:1.15em}
.mk .hd .lg{flex:1;display:flex;align-items:center;justify-content:center;gap:.28em;
  font-size:1.16em;font-weight:800;color:#17357e;letter-spacing:-.02em}
.mk .hd .lg em{display:block;width:.95em;height:1.05em;flex:none}
.mk .hd .bdg{position:relative}
.mk .hd .bdg u{position:absolute;top:-.1em;right:-.1em;min-width:1.7em;height:1.7em;
  border-radius:99px;background:#ff2d6f;color:#fff;font-size:.62em;font-weight:800;
  text-decoration:none;display:grid;place-items:center;padding:0 .3em}

/* bottom tab bar + android system bar */
/* .nav, .notify, .body … are generic names the marketing site also uses.
   Anything those rules set that the mock does not restate leaks in — the
   site nav's height:70px/gap:24px and the notify form's margin:32px auto
   between them stole ~7.5em of a 56em screen, which is what squeezed the
   action grid. Every leaked property is reset here, not just overridden. */
.mk .nav{margin-top:auto;display:flex;background:#fff;border-top:1px solid var(--mk-line);
  padding:.62em .15em .55em;height:auto;gap:0;justify-content:normal;align-items:stretch}
.mk .nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25em;
  color:#7c8ba3;text-decoration:none}
.mk .nav a.on{color:var(--mk-b)}
.mk .nav a span{display:block;width:1em;height:1em}
.mk .nav a b{font-size:.66em;font-weight:700}
.mk .sysbar{background:#000;height:2.1em;display:flex;align-items:center;
  justify-content:space-around;color:#fff;flex:none}
.mk .sysbar i{display:block;width:.95em;height:.95em;font-style:normal;opacity:.9}
/* ---- screen 1: Home / dashboard ----
   Scaled so the screen fills its frame the way the real one does: the top
   band (identity + counters) lands at ~223 of 563 design px against ~232 in
   the capture. Everything below — followup bar, the full six-tile grid and
   the deal-stages header — then fits with room to spare, and .deal takes
   margin-top:auto so the leftover collects above it, never clipping the bar. */
.mk-dash .top{background:var(--mk-head);padding-bottom:.4em}
.mk-dash .who{display:flex;flex-direction:column;align-items:center;gap:.05em}
.mk-dash .av{width:5.6em;height:5.6em;border-radius:50%;background:#fff;padding:.32em;
  box-shadow:0 .2em .6em rgba(11,28,68,.12)}
.mk-dash .av span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#fff}
.mk-dash .who b{font-size:1.32em;font-weight:800;margin-top:.16em}
.mk-dash .who i{font-style:normal;font-size:.88em;font-weight:800;color:var(--mk-b)}
.mk-dash .kpi{margin:.7em 1.1em 0;display:flex;border:1px solid #ccd9ef;border-radius:.9em;
  background:rgba(255,255,255,.45);padding:.52em .35em}
.mk-dash .kpi div{flex:1;text-align:center;position:relative}
.mk-dash .kpi div+div::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;
  width:1px;background:#c3d2ea}
.mk-dash .kpi b{display:block;font-size:1.36em;font-weight:800;color:var(--mk-b);letter-spacing:-.03em}
.mk-dash .kpi i{font-style:normal;font-size:.78em;font-weight:700;color:#5b6b85}
.mk-dash .body{flex:1;min-height:0;overflow:hidden;padding:.75em 1.1em 0;
  display:flex;flex-direction:column;gap:1em}
.mk-dash .notify{display:flex;align-items:center;gap:.45em;background:#fff;border-radius:1.15em;
  padding:.42em .42em .42em .95em;box-shadow:0 .18em .6em rgba(11,28,68,.10);
  margin:0;max-width:none}
.mk-dash .notify b{flex:1;font-size:1em;font-weight:800;line-height:1.15;white-space:nowrap}
.mk-dash .notify u{display:flex;align-items:center;gap:.3em;text-decoration:none;background:var(--mk-b);
  color:#fff;font-size:.96em;font-weight:800;border-radius:.78em;padding:.6em .95em}
.mk-dash .notify u em{display:block;width:.9em;height:.9em}
.mk-dash .quick{background:#e6ecf9;border-radius:1.15em;padding:.95em .4em 1.05em;
  flex:none;align-content:start;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.05em .15em}
.mk-dash .quick a{display:flex;flex-direction:column;align-items:center;gap:.39em;text-decoration:none}
.mk-dash .quick a span{width:3em;height:3em;border-radius:.88em;background:#fff;color:var(--mk-b);
  display:grid;place-items:center;box-shadow:0 .18em .5em rgba(11,28,68,.09)}
.mk-dash .quick a span em{display:block;width:1.62em;height:1.62em}
.mk-dash .quick a b{font-size:.74em;font-weight:700;color:#40506b;text-align:center;line-height:1.25}
.mk-dash .deal{flex:none;margin-top:auto;margin-bottom:.4em;background:#fff;border-radius:1.1em;
  padding:.8em .85em .7em;box-shadow:0 .25em .8em rgba(11,28,68,.08)}
.mk-dash .deal{display:block}
.mk-dash .deal .dh{display:flex;align-items:center;gap:.4em}
.mk-dash .deal .dh b{flex:1;font-size:1.15em;font-weight:800}
/* one row per stage: label, track, count */
.mk-dash .stages{margin-top:.6em;display:flex;flex-direction:column;gap:.38em}
.mk-dash .stages div{display:flex;align-items:center;gap:.5em}
.mk-dash .stages i{font-style:normal;flex:0 0 6.8em;font-size:.62em;font-weight:700;
  color:#40506b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-dash .stages s{flex:1;height:.85em;border-radius:99px;background:#f0f3f9;
  text-decoration:none}
.mk-dash .stages s span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(180deg,#2f5bc4,#153a92);box-shadow:0 .14em .28em rgba(18,61,143,.32)}
.mk-dash .stages b{flex:0 0 1.5em;text-align:right;font-size:.76em;font-weight:800;color:var(--mk-ink)}
/* year switch: current year carries the weight, the rest recede */
.mk-dash .years{margin-top:.45em;display:flex;justify-content:center;align-items:baseline;
  gap:.9em;font-size:.72em;font-weight:800}
.mk-dash .years b{color:var(--mk-ink)}
.mk-dash .years i{font-style:normal;color:#b9c3d2}
.mk-dash .deal u{display:flex;align-items:center;gap:.35em;text-decoration:none;border:1px solid #ccd9ef;
  border-radius:.7em;padding:.5em .65em;font-size:.84em;font-weight:700;color:#22375f}
.mk-dash .deal u em{display:block;width:.9em;height:.9em}


/* ---- screens 2 & 3: policy / renewal lists ----
   A card is ~96 design px, so four rows give three whole cards plus the top
   of a fourth — the same "there is more below" cue the real list has. */
.mk-list{background:#f1f4f9}
.mk-list .sb,.mk-list .hd{background:#fff}
.mk-list .srch{display:flex;gap:.45em;padding:.95em .95em .42em}
.mk-list .srch .f{flex:1;display:flex;align-items:center;gap:.5em;background:#fff;border-radius:.85em;
  padding:.95em .8em;color:#93a1b8;box-shadow:0 .15em .5em rgba(11,28,68,.07)}
.mk-list .srch .f em{display:block;width:1.05em;height:1.05em;flex:none}
.mk-list .srch .f b{font-size:.85em;font-weight:600;color:#93a1b8}
.mk-list .srch .g{width:3.05em;flex:none;display:grid;place-items:center;background:#fff;border-radius:.85em;
  color:#22375f;box-shadow:0 .15em .5em rgba(11,28,68,.07)}
.mk-list .srch .g em{display:block;width:1.15em;height:1.15em}
.mk-list h4{font-size:2.15em;font-weight:800;letter-spacing:-.035em;padding:0 .44em;
  margin:.62em 0 .58em}
.mk-list .tabs{display:flex;gap:.5em;padding:.34em .95em 0;margin:0;grid-template-columns:none}
.mk-list .tabs span{display:flex;align-items:center;gap:.34em;border-radius:99px;padding:.55em .9em;
  font-size:.85em;font-weight:800;background:#fff;color:#22375f;box-shadow:0 .15em .45em rgba(11,28,68,.07)}
.mk-list .tabs span.on{background:var(--mk-b);color:#fff}
.mk-list .tabs span em{display:block;width:1em;height:1em}
.mk-list .rows{flex:1;min-height:0;padding:.3em .95em 0;display:flex;flex-direction:column;gap:.8em}
.mk-list .hdr{display:flex;align-items:center;gap:.55em;padding:.9em .95em 1em}
.mk-list .hdr em{display:block;width:1.35em;height:1.35em;flex:none;color:#0e1b34}
.mk-list .hdr b{font-size:1.45em;font-weight:800;letter-spacing:-.03em;color:#3a4353}

/* one card */
.mk-c{background:#fff;border-radius:1em;padding:.8em .85em;flex:none;
  box-shadow:0 .2em .7em rgba(11,28,68,.07)}
.mk-c .t{display:flex;align-items:flex-start;gap:.4em}
.mk-c .t b{flex:1;min-width:0;font-size:1.22em;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-c .pill{display:flex;align-items:center;gap:.28em;background:#d8f3e0;color:#177245;
  border-radius:99px;padding:.3em .6em;font-size:.72em;font-weight:800;flex:none}
.mk-c .pill s{width:.5em;height:.5em;border-radius:50%;background:#1aa053;text-decoration:none}
.mk-c .dots{display:flex;flex-direction:column;gap:.18em;padding:.15em .15em;flex:none}
.mk-c .dots s{width:.28em;height:.28em;border-radius:50%;background:#5b6b85;text-decoration:none}
.mk-c .sub{display:flex;align-items:center;gap:.34em;color:#5b6b85;margin-top:.28em}
.mk-c .sub em{display:block;width:.85em;height:.85em;flex:none}
.mk-c .sub i{font-style:normal;font-size:.78em;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mk-c .chip{display:inline-block;white-space:nowrap;margin-top:.42em;background:#dfe8fb;color:#1b3a8b;border-radius:.45em;
  padding:.3em .6em;font-size:.72em;font-weight:800}
.mk-c hr{border:0;border-top:1px solid var(--mk-line);margin:.55em 0 .5em}
.mk-c .ft{display:flex;align-items:flex-end;justify-content:space-between;gap:.4em}
.mk-c .ft b{display:block;font-size:1.2em;font-weight:800;letter-spacing:-.03em}
.mk-c .ft i{font-style:normal;display:block;font-size:.72em;font-weight:600;color:#5b6b85;
  margin-top:.1em;white-space:nowrap}
.mk-c .ft .r{text-align:right}
.mk-c .ft .r b{font-size:.82em;font-weight:600;color:#5b6b85}
/* renewal rows lead with the premium, so it keeps the headline weight there */
.mk-c.rn .ft .r b{font-size:1.05em;font-weight:800;color:var(--mk-ink)}
.mk-c .due{display:flex;align-items:center;gap:.3em;font-size:.85em;font-weight:800;white-space:nowrap}
.mk-c .due s{width:.45em;height:.45em;border-radius:50%;background:#5b6b85;text-decoration:none;flex:none}
.mk-c .rem{margin-top:.45em;display:flex;align-items:center;justify-content:center;gap:.35em;
  border:1px solid #b9cbea;background:#eaf0fb;border-radius:.7em;padding:.55em;
  font-size:.85em;font-weight:800;color:var(--mk-b)}
.mk-c .rem em{display:block;width:.95em;height:.95em}
.mk .fab{position:absolute;right:.95em;bottom:6.1em;width:3.6em;height:3.6em;border-radius:1.2em;
  background:var(--mk-b);color:#fff;display:grid;place-items:center;
  box-shadow:0 .4em 1em rgba(18,61,143,.42)}
.mk .fab em{display:block;width:1.35em;height:1.35em}

/* ============================================================
   RENEWAL REMINDER POSTER  (.mk-renew)
   "Send reminder" produces a shareable card, so the mock plays the
   whole beat instead of showing a button: the tap lands on the second
   row, the poster rises over the list, holds long enough to read, then
   puts itself away. One 13s loop, paused for reduced-motion users.
   ============================================================ */
.mk-c.rn .chip{ margin-top:1.15em; }

.mk-poster{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column;
  background:#cddceb;
  transform:translateY(101%);
  box-shadow:0 -.6em 1.6em rgba(11,28,68,.22);
  animation:mkPoster 13s cubic-bezier(.22,.85,.32,1) infinite;
}
/* up at 22-30%, held to 78%, away by 86%, off for the rest of the loop */
@keyframes mkPoster{
  0%,22%   { transform:translateY(101%); }
  30%,78%  { transform:translateY(0); }
  86%,100% { transform:translateY(101%); }
}

/* poster header — back, title, share */
.mk-poster .sb{ background:#fff; }
.mk-poster .ph{
  display:flex; align-items:center; gap:.55em; flex:none;
  background:#fff; padding:.45em .95em 1em;
}
.mk-poster .ph em{ display:block; width:1.35em; height:1.35em; flex:none; color:#0e1b34; }
.mk-poster .ph b{
  flex:1; font-size:1.45em; font-weight:800; letter-spacing:-.03em; color:#3a4353;
}
.mk-poster .ph .sh{ color:#0e1b34; }

.mk-poster .pbody{ flex:1; min-height:0; overflow:hidden; padding:1.1em .95em; }
.mk-poster .pcard{
  background:#fff; border-radius:1em; padding:1.4em 1.15em 1.3em;
  box-shadow:0 .3em 1em rgba(11,28,68,.10);
}
.mk-poster .pl{
  margin:0 0 1.15em; font-size:1em; font-weight:600; line-height:1.4; color:#1b2434;
}
.mk-poster .pl b{ color:var(--mk-b); font-weight:700; }

/* label / value pairs — the label column is fixed so the values line up */
.mk-poster .pfacts{ display:flex; flex-direction:column; gap:.86em; }
.mk-poster .pfacts > div{ display:flex; align-items:baseline; gap:.6em; }
.mk-poster .pfacts i{
  font-style:normal; flex:0 0 8.4em; font-size:.76em; font-weight:700; color:var(--mk-b);
  line-height:1.25;
}
.mk-poster .pfacts s{
  flex:1; min-width:0; text-decoration:none; font-size:.76em; font-weight:600;
  color:#1b2434; line-height:1.25;
}

/* the agent's card at the foot — who the reminder came from */
.mk-poster .pagent{
  margin-top:1.5em; display:flex; align-items:center; gap:.75em;
  background:#f0f2f5; border-radius:.7em; padding:.75em .8em;
}
.mk-poster .pav{
  width:3.8em; height:3.8em; flex:none; border-radius:.6em; overflow:hidden;
  background:#c6cad1; display:grid; place-items:center;
}
.mk-poster .pav svg{ width:118%; height:118%; margin-top:.5em; }
.mk-poster .pagent b{ display:block; font-size:.92em; font-weight:800; color:#1b2434; }
.mk-poster .pagent i{
  font-style:normal; display:block; font-size:.76em; font-weight:600; color:#3f4a5c;
  line-height:1.5; word-break:break-word;
}

/* the tap that opens it: the button presses in just before the poster rises */
.mk-renew .rem.tap{
  position:relative; overflow:hidden;
  animation:mkPress 13s ease infinite;
}
@keyframes mkPress{
  0%,15%    { transform:scale(1);    background:#eaf0fb; }
  19%       { transform:scale(.965); background:#cfdefa; }
  23%,100%  { transform:scale(1);    background:#eaf0fb; }
}
/* ripple from the middle of the button on the same beat */
.mk-renew .rem.tap::after{
  content:""; position:absolute; left:50%; top:50%; width:1.4em; height:1.4em;
  margin:-.7em 0 0 -.7em; border-radius:50%; background:rgba(18,61,143,.28);
  transform:scale(0); opacity:0;
  animation:mkRipple 13s ease-out infinite;
}
@keyframes mkRipple{
  0%,16%  { transform:scale(0);  opacity:0; }
  18%     { transform:scale(0);  opacity:.9; }
  26%     { transform:scale(9);  opacity:0; }
  100%    { transform:scale(9);  opacity:0; }
}

/* Motion is decoration here — the still list already tells the story. */
@media (prefers-reduced-motion:reduce){
  .mk-poster,
  .mk-renew .rem.tap,
  .mk-renew .rem.tap::after{ animation:none; }
  .mk-poster{ transform:translateY(101%); }
}

/* ---- screen 4: Deals ----
   Name on top, contact and pipeline beneath, and the stage selector floating
   right as its own raised card — the control an agent taps to move the deal on. */
.mk-d{background:#fff;border-radius:.9em;padding:.9em .8em;flex:none;
  box-shadow:0 .3em 1em rgba(11,28,68,.07)}
.mk-d>b{display:block;font-size:1.06em;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-d .dr{display:flex;align-items:center;gap:.5em;margin-top:.55em}
.mk-d .di{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3em}
.mk-d .di div{display:flex;align-items:center;gap:.4em;color:#5b6b85}
.mk-d .di em{display:block;width:.9em;height:.9em;flex:none}
.mk-d .di i{font-style:normal;font-size:.75em;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-d .sel{flex:none;display:flex;align-items:center;gap:.4em;background:#fff;border-radius:.7em;
  padding:.75em .8em;font-size:.8em;font-weight:700;color:#3a4353;
  box-shadow:0 .25em .8em rgba(11,28,68,.13)}
.mk-d .sel s{width:.5em;height:.5em;border-radius:50%;background:#1aa053;text-decoration:none;flex:none}
.mk-d .sel em{display:block;width:.9em;height:.9em;flex:none;color:#5b6b85}

/* ---- screen 5: Clients ----
   Photo, name with live status, then the phone and email an agent calls from. */
.mk-cl{background:#fff;border-radius:.9em;padding:.9em .8em;flex:none;
  display:flex;align-items:center;gap:.7em;box-shadow:0 .3em 1em rgba(11,28,68,.07)}
.mk-cl .cav{width:3.8em;height:3.8em;border-radius:50%;flex:none;overflow:hidden;background:#e6e9ee}
.mk-cl .cav svg{width:100%;height:100%}
.mk-cl .ci{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3em}
.mk-cl .nm{display:flex;align-items:center;gap:.45em;min-width:0}
.mk-cl .nm b{font-size:1.06em;font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-cl .pill{flex:none;display:flex;align-items:center;gap:.28em;background:#d8f3e0;color:#177245;
  border-radius:99px;padding:.26em .55em;font-size:.66em;font-weight:800}
.mk-cl .pill s{width:.5em;height:.5em;border-radius:50%;background:#1aa053;text-decoration:none}
.mk-cl .ci>div:not(.nm){display:flex;align-items:center;gap:.4em;color:#5b6b85}
.mk-cl .ci em{display:block;width:.9em;height:.9em;flex:none}
.mk-cl .ci i{font-style:normal;font-size:.75em;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   TICKET THREAD  (.mk-tkt)
   Status strip, a two-sided conversation with attachments, and the
   reply bar pinned at the foot. Client messages sit right, the
   agency's left — the same sides the app uses.
   ============================================================ */
.mk-tkt{ background:#eff2f7; }
.mk-tkt .sb,.mk-tkt .hdr{ background:#fff; }
.mk-tkt .hdr{ display:flex; align-items:center; gap:.55em; padding:.5em .95em .95em; }
.mk-tkt .hdr em{ display:block; width:1.35em; height:1.35em; flex:none; color:#0e1b34; }
.mk-tkt .hdr b{ font-size:1.45em; font-weight:800; letter-spacing:-.03em; color:#3a4353; }

/* status / priority / raised-at */
.mk-tkt .tstate{
  flex:none; display:flex; align-items:center; gap:.85em;
  margin:.75em .95em .2em; padding:.7em .8em;
  background:#f6f8fb; border:1px solid #e6ecf5; border-radius:.8em;
}
.mk-tkt .tstate .p{
  display:flex; align-items:center; gap:.36em;
  font-size:.78em; font-weight:800; white-space:nowrap;
}
.mk-tkt .tstate .p s{ width:.5em; height:.5em; border-radius:50%; text-decoration:none; flex:none; }
.mk-tkt .tstate .open{ background:#fde4e7; color:#d81e46; border-radius:99px; padding:.32em .7em; }
.mk-tkt .tstate .open s{ background:#d81e46; }
.mk-tkt .tstate .low{ color:#17914b; }
.mk-tkt .tstate .low s{ background:#22b45f; }
.mk-tkt .tstate .when{
  display:flex; align-items:center; gap:.32em; margin-left:auto;
  font-size:.72em; font-weight:600; color:#67758d; white-space:nowrap;
}
.mk-tkt .tstate .when em{ display:block; width:.9em; height:.9em; flex:none; }

/* the conversation */
.mk-tkt .thread{
  flex:1; min-height:0; overflow:hidden;
  padding:.7em .95em 0; display:flex; flex-direction:column; gap:.75em;
}
.mk-tkt .msg{ display:flex; flex-direction:column; flex:none; }
.mk-tkt .msg.out{ align-items:flex-end; }
.mk-tkt .msg .who{ display:flex; align-items:center; gap:.4em; margin-bottom:.35em; }
.mk-tkt .msg .who b{ font-size:.84em; font-weight:800; color:#16233c; white-space:nowrap; }
.mk-tkt .msg .av{
  width:1.9em; height:1.9em; flex:none; border-radius:50%;
  background:#dbe4f7; color:var(--mk-b);
  display:grid; place-items:center; font-size:.7em; font-weight:800; letter-spacing:.02em;
}
.mk-tkt .msg .dots{ display:flex; flex-direction:column; gap:.16em; flex:none; padding:0 .1em; }
.mk-tkt .msg .dots s{ width:.24em; height:.24em; border-radius:50%; background:#5b6b85; text-decoration:none; }

/* bubbles — agency white on the left, client tinted on the right */
.mk-tkt .msg .bub{
  max-width:78%; padding:.62em .8em; font-size:.82em; font-weight:600; line-height:1.35;
  color:#16233c; word-break:break-word;
}
.mk-tkt .msg.in .bub{
  background:#fff; border-radius:.2em .85em .85em .85em;
  box-shadow:0 .18em .6em rgba(11,28,68,.09);
}
.mk-tkt .msg.out .bub{
  background:#c6d2e2; border-radius:.85em .2em .85em .85em;
  box-shadow:0 .18em .6em rgba(11,28,68,.10);
}

/* an attachment rides under its message */
.mk-tkt .msg .att{
  display:flex; align-items:center; gap:.42em; margin-top:.4em; max-width:78%;
  background:#fff; border:1px solid #e2e9f4; border-radius:.6em; padding:.5em .65em;
  font-size:.76em; font-weight:700; color:#26364f;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-tkt .msg .att em{ display:block; width:1.05em; height:1.05em; flex:none; color:var(--mk-b); }
.mk-tkt .msg .tm{
  font-style:normal; margin-top:.35em; font-size:.7em; font-weight:600; color:#7a8699;
}

/* reply bar — pinned, so the thread scrolls under it */
.mk .tfoot{
  flex:none; display:flex; align-items:center; gap:.7em;
  background:#fff; padding:.75em .95em .8em;
  box-shadow:0 -.3em .9em rgba(11,28,68,.08);
}
.mk .tfoot .c,
.mk .tfoot .r{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.4em;
  border-radius:99px; padding:.78em .6em; font-size:.92em; font-weight:800; white-space:nowrap;
}
.mk .tfoot .c{ border:1px solid #d5dded; color:#16233c; }
.mk .tfoot .r{ background:var(--mk-b); color:#fff; box-shadow:0 .3em .8em rgba(18,61,143,.34); }
.mk .tfoot .r em{ display:block; width:1.05em; height:1.05em; flex:none; }

/* ============================================================
   BROADCAST COMPOSE  (.mk-bc)
   Variable hint, title, audience switch and the rich-text body.
   Reuses .tfoot from the ticket screen for the action bar.
   ============================================================ */
.mk-bc{ background:#eff2f7; }
.mk-bc .sb,.mk-bc .hdr{ background:#fff; }
.mk-bc .hdr{ display:flex; align-items:center; gap:.55em; padding:.5em .95em .95em; }
.mk-bc .hdr em{ display:block; width:1.35em; height:1.35em; flex:none; color:#0e1b34; }
.mk-bc .hdr b{ font-size:1.3em; font-weight:800; letter-spacing:-.03em; color:#16233c; }

.mk-bc .bcbody{ flex:1; min-height:0; overflow:hidden; padding:.8em .8em 0; }
.mk-bc .bccard{
  background:#f7f9fc; border:1px solid #e6ecf5; border-radius:.9em; padding:.95em .85em;
}
.mk-bc .bccard h5{
  margin:0 0 .8em; font-size:1.12em; font-weight:800; letter-spacing:-.025em; color:#16233c;
}

/* the token hint — the two variables are the point, so they carry the weight */
.mk-bc .hint{
  background:#e7eefb; border:1px solid #c6d6f2; border-radius:.6em;
  padding:.65em .7em; font-size:.74em; font-weight:600; line-height:1.5; color:#5d6b83;
}
.mk-bc .hint u{ color:var(--mk-b); font-weight:800; text-decoration:underline; white-space:nowrap; }

.mk-bc label{
  display:block; margin:.85em 0 .45em; font-size:.9em; font-weight:600; color:#2b3446;
}
.mk-bc label i{ font-style:normal; color:#2b3446; }
.mk-bc .fld{
  background:#fff; border-radius:.55em; padding:.8em .75em;
  font-size:.88em; font-weight:600; color:#2b3446;
}

/* audience switch — one track, the live segment lifted out of it */
.mk-bc .seg{
  display:flex; background:#eef1f7; border-radius:.6em; padding:.28em;
}
.mk-bc .seg span{
  flex:1; text-align:center; padding:.62em .2em; border-radius:.45em;
  font-size:.86em; font-weight:600; color:#5d6b83;
}
.mk-bc .seg .on{
  background:#fff; color:var(--mk-b); font-weight:800;
  box-shadow:0 .15em .5em rgba(11,28,68,.10);
}

/* rich-text field: toolbar over the document */
.mk-bc .ed{ background:#fff; border-radius:.55em; overflow:hidden; }
.mk-bc .tb{
  display:flex; align-items:center; gap:.3em; padding:.55em .5em;
  border-bottom:1px solid #eef1f7;
}
.mk-bc .tb .g{
  width:1.85em; height:1.85em; flex:none; border-radius:.35em;
  display:grid; place-items:center;
  font-size:.92em; font-weight:800; color:#16233c;
}
.mk-bc .tb .g.on{ background:#dfe8fb; color:var(--mk-b); }
.mk-bc .tb .g em{ display:block; width:1.15em; height:1.15em; }
.mk-bc .tb .g.i{ font-style:italic; font-family:Georgia,'Times New Roman',serif; }
.mk-bc .tb .g.u{ text-decoration:underline; text-underline-offset:.15em; }
.mk-bc .tb .g.b{ font-family:Georgia,'Times New Roman',serif; }
.mk-bc .tb s{
  width:1px; height:1.5em; flex:none; margin:0 .28em;
  background:#dde3ee; text-decoration:none;
}
.mk-bc .doc{ padding:.85em .8em 1em; }
.mk-bc .doc p{
  margin:0 0 .7em; font-size:.86em; font-weight:500; line-height:1.5; color:#16233c;
}
.mk-bc .doc p:last-child{ margin-bottom:0; }
.mk-bc .doc p.ind{ text-indent:1.6em; }
.mk-bc .doc b{ font-weight:800; }

/* ---- screen 6: Settings ----
   Identity card on the brand gradient, then grouped rows of workspace areas.
   The list scrolls in the real app, so the last group is cut by the fold. */
.mk-set{background:#f4f7fc}
.mk-set .sbody{flex:1;min-height:0;overflow:hidden;padding:0 .95em;display:flex;flex-direction:column}
.mk-set h4{font-size:1.9em;font-weight:800;letter-spacing:-.04em;margin:0 0 .35em;padding:0 .1em}
/* signed-in identity */
.mk-set .me{display:flex;align-items:center;gap:.7em;border-radius:1em;padding:.75em .8em;
  background:linear-gradient(115deg,#123d8f,#2f6fdc);box-shadow:0 .3em .9em rgba(18,61,143,.28)}
.mk-set .ma{width:2.9em;height:2.9em;border-radius:.8em;flex:none;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.mk-set .ma svg{width:1.5em;height:1.5em}
.mk-set .mi{flex:1;min-width:0}
.mk-set .mi b{display:block;font-size:1.15em;font-weight:800;color:#fff;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-set .mi i{font-style:normal;display:block;font-size:.75em;font-weight:700;color:#dbe6fb;margin-top:.1em}
.mk-set .med{flex:none;font-size:.78em;font-weight:800;color:#fff;border-radius:99px;
  padding:.4em .8em;background:rgba(255,255,255,.22)}
/* group label + the card of rows under it */
.mk-set .grp{display:block;margin:.75em 0 .35em;padding:0 .25em;font-size:.62em;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#7c8ba3}
.mk-set .rowsc{background:#fff;border-radius:.9em;overflow:hidden;flex:none;
  box-shadow:0 .25em .8em rgba(11,28,68,.06)}
.mk-set .srow{display:flex;align-items:center;gap:.6em;padding:.62em .7em;border-top:1px solid #eef2f8}
.mk-set .rowsc .srow:first-child{border-top:0}
.mk-set .si{width:2.1em;height:2.1em;border-radius:.6em;flex:none;display:grid;place-items:center;
  background:#dbe6fb;color:#173a8c}
.mk-set .si svg{width:1.15em;height:1.15em}
.mk-set .st{flex:1;min-width:0}
.mk-set .st b{display:block;font-size:.95em;font-weight:800;letter-spacing:-.02em}
.mk-set .st i{font-style:normal;display:block;font-size:.66em;font-weight:600;color:#6b7a94;
  margin-top:.05em;line-height:1.3}
.mk-set .srow>em{display:block;width:.85em;height:.85em;flex:none;color:#9aa7bc}

/* ============================================================
   COMMISSION REPORT  (.mk-com)
   Period filter, the paid / pending pair, the agent-or-admin
   switch, then a card per payout.
   ============================================================ */
.mk-com{ background:#eff2f7; }
.mk-com .sb,.mk-com .hdr{ background:#fff; }
.mk-com .hdr{ display:flex; align-items:center; gap:.55em; padding:.5em .95em .95em; }
.mk-com .hdr em{ display:block; width:1.35em; height:1.35em; flex:none; color:#0e1b34; }
.mk-com .hdr b{ font-size:1.42em; font-weight:800; letter-spacing:-.03em; color:#3a4353; }

/* period row: calendar, the range field, then the filter funnel */
.mk-com .cfil{ flex:none; display:flex; align-items:center; gap:.6em; padding:.85em .95em 0; }
.mk-com .cfil .ic{
  width:2.9em; height:2.9em; flex:none; border-radius:.7em;
  background:#fff; display:grid; place-items:center; color:#22375f;
  box-shadow:0 .15em .5em rgba(11,28,68,.07);
}
.mk-com .cfil .ic.on{ background:#dbe6fb; color:var(--mk-b); box-shadow:none; }
.mk-com .cfil .ic em{ display:block; width:1.3em; height:1.3em; }
.mk-com .cfil .range{
  flex:1; min-width:0; background:#fff; border-radius:.7em; padding:.88em .8em;
  font-size:.88em; font-weight:500; color:#93a1b8;
  box-shadow:0 .15em .5em rgba(11,28,68,.07);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* the two headline figures — the watermark reads as texture, not an icon */
.mk-com .ctiles{ flex:none; display:flex; gap:.65em; padding:.7em .95em 0; }
.mk-com .ctiles .t{
  flex:1; min-width:0; position:relative; overflow:hidden;
  border-radius:.9em; padding:.95em .85em 1em; color:#fff;
}
.mk-com .ctiles .paid{ background:linear-gradient(150deg,#22a05f,#12854a); }
.mk-com .ctiles .due{ background:linear-gradient(150deg,#e8a417,#cf8506); }
.mk-com .ctiles .t b{
  display:block; font-size:1.55em; font-weight:800; letter-spacing:-.035em; line-height:1.1;
}
.mk-com .ctiles .t i{
  font-style:normal; display:block; margin-top:.25em;
  font-size:.8em; font-weight:700; opacity:.95;
}
.mk-com .ctiles .wm{
  position:absolute; right:-.5em; bottom:-.9em; width:3.6em; height:3.6em;
  opacity:.26; pointer-events:none;
}
.mk-com .ctiles .wm svg{ stroke:#fff; stroke-width:2.6; }

/* agent / admin */
.mk-com .seg{
  flex:none; display:flex; margin:.75em .95em 0;
  background:#f2f5fa; border-radius:.75em; padding:.3em;
}
.mk-com .seg span{
  flex:1; text-align:center; padding:.72em .2em; border-radius:.55em;
  font-size:.95em; font-weight:600; color:#5d6b83;
}
.mk-com .seg .on{
  background:#fff; color:var(--mk-b); font-weight:800;
  box-shadow:0 .18em .55em rgba(11,28,68,.12);
}

/* one payout */
.mk-com .crows{
  flex:1; min-height:0; overflow:hidden;
  padding:.75em .95em 0; display:flex; flex-direction:column; gap:.7em;
}
.mk-com .crow{
  flex:none; background:#fff; border-radius:1em; padding:.85em .8em;
  box-shadow:0 .2em .7em rgba(11,28,68,.07);
}
.mk-com .ch{ display:flex; align-items:center; gap:.65em; }
.mk-com .ch .av{
  width:2.6em; height:2.6em; flex:none; border-radius:50%;
  background:#dbe4f7; color:var(--mk-b);
  display:grid; place-items:center; font-size:.95em; font-weight:800;
}
.mk-com .ch .id{ flex:1; min-width:0; }
.mk-com .ch .id b{
  display:block; font-size:1.05em; font-weight:800; letter-spacing:-.02em; color:#16233c;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-com .ch .id i{
  font-style:normal; display:block; margin-top:.1em;
  font-size:.78em; font-weight:600; color:#67758d;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-com .ch .st{
  flex:none; display:flex; align-items:center; gap:.34em;
  border-radius:99px; padding:.42em .7em; font-size:.8em; font-weight:800;
}
.mk-com .ch .st s{ width:.5em; height:.5em; border-radius:50%; text-decoration:none; flex:none; }
.mk-com .ch .ok{ background:#d8f3e0; color:#177245; }
.mk-com .ch .ok s{ background:#1aa053; }
.mk-com .ch .sel{ background:#fff; border:1px solid #d9e1ee; color:#3a4353; }
.mk-com .ch .sel s{ background:#e8b020; }
.mk-com .ch .sel em{ display:block; width:.95em; height:.95em; margin-left:.1em; color:#5d6b83; }

/* the figures behind the header, two to a row */
.mk-com .cg{
  margin-top:.75em; background:#f5f7fb; border-radius:.7em; padding:.8em .8em .85em;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85em .8em;
}
.mk-com .cg i{
  font-style:normal; display:block; font-size:.78em; font-weight:600; color:#67758d;
}
.mk-com .cg b{
  display:block; margin-top:.22em; font-size:1.02em; font-weight:800;
  letter-spacing:-.025em; color:#16233c;
}

/* trailing value on a settings row (Language -> English, About -> v1.1.18) */
.mk-set .srow>u{flex:none;text-decoration:none;font-size:.78em;font-weight:700;color:#5b6b85}

/* The real list scrolls, and there is far more of it than one frame shows, so
   the mock walks down it: top, middle, bottom, back. translateY(-100%) lifts
   the content by its own height, and +79cqh (the body's share of the screen)
   brings the last row back to the fold — so the travel is exact whatever the
   list grows to, with no hardcoded distance to keep in sync. */
@supports (height:1cqh){
  .mk-set .sscroll{animation:mkSetScroll 22s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes mkSetScroll{
    0%,14%  {transform:translateY(0)}
    30%,44% {transform:translateY(calc((-100% + 79cqh) * .5))}
    60%,86% {transform:translateY(calc(-100% + 79cqh))}
    100%    {transform:translateY(0)}
  }
}
@media(prefers-reduced-motion:reduce){.mk-set .sscroll{animation:none}}

/* ============================================================
   NOTIFICATION CENTRE  (.mk-not)
   Every alert the app raises. Unread rows carry a navy rail and a
   dot; rows that open a record carry a chevron, acknowledgements
   do not — the same two cues the app uses.
   ============================================================ */
.mk-not{ background:#fff; }
.mk-not .hdr{ display:flex; align-items:center; gap:.55em; padding:.5em .95em .9em; }
.mk-not .hdr em{ display:block; width:1.35em; height:1.35em; flex:none; color:#0e1b34; }
.mk-not .hdr b{ flex:1; font-size:1.5em; font-weight:800; letter-spacing:-.035em; color:#16233c; }
.mk-not .hdr .allread{
  width:2.5em; height:2.5em; flex:none; border-radius:.6em;
  background:#eaf0fb; display:grid; place-items:center;
}
.mk-not .hdr .allread em{ width:1.25em; height:1.25em; color:var(--mk-b); }

/* All / Unread, each with its own count */
.mk-not .nfil{ flex:none; display:flex; gap:.55em; padding:0 .95em .3em; }
.mk-not .nfil span{
  display:flex; align-items:center; gap:.45em; border-radius:99px;
  padding:.5em .85em; font-size:.9em; font-weight:700;
  background:#fff; border:1px solid #dde4ef; color:#16233c;
}
.mk-not .nfil s{
  text-decoration:none; border-radius:99px; padding:.05em .45em;
  background:#eef1f7; color:#5d6b83; font-size:.85em; font-weight:800;
}
.mk-not .nfil .on{ background:var(--mk-b); border-color:var(--mk-b); color:#fff; }
.mk-not .nfil .on s{ background:rgba(255,255,255,.24); color:#fff; }

.mk-not .nrows{
  flex:1; min-height:0; overflow:hidden;
  padding:.55em .95em 0; display:flex; flex-direction:column; gap:.55em;
}
.mk-not .nrow{
  flex:none; position:relative; display:flex; align-items:flex-start; gap:.7em;
  background:#fff; border:1px solid #e6ecf5; border-radius:.75em;
  padding:.8em .75em .8em .95em; overflow:hidden;
}
/* unread: tinted, with the navy rail down the leading edge */
.mk-not .nrow.un{ background:#f3f6fb; }
.mk-not .nrow.un::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:.32em;
  background:var(--mk-b);
}
.mk-not .ni{
  width:2.6em; height:2.6em; flex:none; border-radius:.6em;
  display:grid; place-items:center;
}
.mk-not .ni em{ display:block; width:1.3em; height:1.3em; }
.mk-not .ni.blue{ background:#dfe8fb; color:#2b7cf6; }
.mk-not .ni.green{ background:#dcf2e3; color:#1a9b52; }

.mk-not .nb{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.22em; }
.mk-not .nb b{
  font-size:.95em; font-weight:800; letter-spacing:-.02em; color:#16233c; line-height:1.25;
}
.mk-not .nb i{
  font-style:normal; font-size:.8em; font-weight:500; color:#5d6b83; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-not .nb u{
  display:flex; align-items:center; gap:.32em; margin-top:.12em; text-decoration:none;
  font-size:.78em; font-weight:600; color:#7a8699;
}
.mk-not .nb u em{ display:block; width:.92em; height:.92em; flex:none; }

/* unread dot over the chevron, both hard right */
.mk-not .nr{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:.5em;
  padding-top:.15em; min-width:.9em;
}
.mk-not .nr s{
  width:.62em; height:.62em; border-radius:50%; background:var(--mk-b); text-decoration:none;
}
.mk-not .nr em{ display:block; width:.95em; height:.95em; color:#b6c0d1; }

/* ============================================================
   CLIENT PORTAL HOME  (.mk-por)
   The client's own view: their cover at a glance, the renewal that
   needs attention, the few things they can do without ringing the
   office, and the split of what they hold.
   Motion: the ring draws itself and the due-soon bar breathes, both
   on one 9s loop so the screen never sits completely still.
   ============================================================ */
.mk-por{ background:#eef1f7; }
.mk-por .top{ background:linear-gradient(180deg,#c9d5ea,#dde4f1); padding-bottom:.7em; }
.mk-por .hd{ padding:.45em .8em .5em; }
.mk-por .hd .rnd{ background:#fff; }

.mk-por .who{ display:flex; flex-direction:column; align-items:center; gap:.05em; }
.mk-por .av{
  width:4.3em; height:4.3em; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,#2aa7d8,#5b3fa8);
  border:.28em solid #fff; box-shadow:0 .25em .7em rgba(11,28,68,.16);
  display:grid; place-items:center;
}
.mk-por .av svg{ width:118%; height:118%; margin-top:.55em; }
.mk-por .av svg circle,.mk-por .av svg path{ fill:#fff !important; }
.mk-por .who i{ font-style:normal; margin-top:.25em; font-size:.85em; font-weight:500; color:#4c5a72; }
.mk-por .who b{ font-size:1.4em; font-weight:800; letter-spacing:-.03em; color:#16233c; line-height:1.15; }
.mk-por .who s{ text-decoration:none; font-size:.82em; font-weight:600; color:#5d6b83; }

.mk-por .kpi{
  margin:.7em 1.05em 0; display:flex; background:#fff; border-radius:.9em;
  padding:.6em .3em; box-shadow:0 .25em .8em rgba(11,28,68,.10);
}
.mk-por .kpi div{ flex:1; text-align:center; position:relative; }
.mk-por .kpi div+div::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:1px; background:#e2e8f2;
}
.mk-por .kpi b{ display:block; font-size:1.3em; font-weight:800; color:#16233c; line-height:1.1; }
.mk-por .kpi i{ font-style:normal; font-size:.8em; font-weight:600; color:#5d6b83; }
.mk-por .kpi .due b{ color:#e0a11a; }
.mk-por .kpi .exp b{ color:#dc2626; }

.mk-por .body{ flex:1; min-height:0; overflow:hidden; padding:.7em .8em 0;
  display:flex; flex-direction:column; gap:.62em; }

/* the call to action — it breathes so the eye lands on it first */
.mk-por .due-bar{
  flex:none; display:flex; align-items:center; gap:.6em;
  background:linear-gradient(105deg,#1b4fc4,#2f76e8); border-radius:.85em;
  padding:.8em .75em; color:#fff; box-shadow:0 .3em .9em rgba(22,80,200,.34);
  animation:porBreathe 9s ease-in-out infinite;
}
.mk-por .due-bar em{ display:block; width:1.7em; height:1.7em; flex:none; color:#ffd15c; }
.mk-por .due-bar div{ flex:1; min-width:0; }
.mk-por .due-bar b{ display:block; font-size:.95em; font-weight:800; line-height:1.2; }
.mk-por .due-bar i{
  font-style:normal; display:block; margin-top:.15em;
  font-size:.76em; font-weight:500; line-height:1.35; opacity:.92;
}
.mk-por .due-bar u{
  flex:none; text-decoration:none; background:#fff; color:var(--mk-b);
  border-radius:99px; padding:.5em .9em; font-size:.9em; font-weight:800;
}
@keyframes porBreathe{
  0%,72%,100%{ box-shadow:0 .3em .9em rgba(22,80,200,.34); }
  82%        { box-shadow:0 .3em 1.5em rgba(22,80,200,.62); }
}

/* the six things a client can do */
.mk-por .grid{
  flex:none; background:#fff; border-radius:.95em; padding:.8em .5em .85em;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8em .2em;
  box-shadow:0 .25em .8em rgba(11,28,68,.08);
}
.mk-por .grid a{ display:flex; flex-direction:column; align-items:center; gap:.45em; text-decoration:none; }
.mk-por .grid a span{
  width:2.7em; height:2.7em; border-radius:.75em; background:#e6ecf9;
  display:grid; place-items:center; color:var(--mk-b);
}
.mk-por .grid a span em{ display:block; width:1.35em; height:1.35em; }
.mk-por .grid a b{ font-size:.76em; font-weight:800; color:#25324a; text-align:center; }

/* the split of what they hold */
.mk-por .ins{
  flex:none; background:#fff; border-radius:.95em; padding:.95em .85em 1.1em;
  box-shadow:0 .25em .8em rgba(11,28,68,.08);
}
.mk-por .ins h5{ margin:0 0 .7em; font-size:1.15em; font-weight:800; letter-spacing:-.025em; color:#16233c; }
.mk-por .ring{ display:flex; align-items:center; gap:.9em; position:relative; }
.mk-por .ring svg{ width:6.6em; height:6.6em; flex:none; transform:rotate(-90deg); }
.mk-por .ring circle{ fill:none; stroke-width:12; }
.mk-por .ring .tr{ stroke:#eef1f7; }
/* r=46 -> circumference 289; each half is 144.5 */
.mk-por .ring .a1{ stroke:#2f6fe0; stroke-dasharray:0 289; animation:porArc1 9s ease-out infinite; }
.mk-por .ring .a2{ stroke:#12327a; stroke-dasharray:0 289; stroke-dashoffset:-144.5;
  animation:porArc2 9s ease-out infinite; }
@keyframes porArc1{ 0%{ stroke-dasharray:0 289 } 22%,100%{ stroke-dasharray:144.5 289 } }
@keyframes porArc2{ 0%,14%{ stroke-dasharray:0 289 } 36%,100%{ stroke-dasharray:144.5 289 } }
.mk-por .ring .mid{
  position:absolute; left:0; top:0; width:6.6em; height:6.6em;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
}
.mk-por .ring .mid b{ font-size:1.45em; font-weight:800; color:#16233c; line-height:1.05; }
.mk-por .ring .mid i{ font-style:normal; font-size:.65em; font-weight:600; color:#7a8699; }
.mk-por .ring .leg{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.55em; }
.mk-por .ring .leg div{
  display:flex; align-items:center; gap:.5em; font-size:.92em; font-weight:600; color:#25324a;
}
.mk-por .ring .leg s{ width:.7em; height:.7em; border-radius:.2em; text-decoration:none; flex:none; }
.mk-por .ring .leg .c1{ background:#2f6fe0; }
.mk-por .ring .leg .c2{ background:#12327a; }
.mk-por .ring .leg b{ margin-left:auto; font-weight:800; color:#16233c; }

.mk-por .fab.call{ bottom:5.6em; background:linear-gradient(160deg,#2f76e8,#1b4fc4); border-radius:50%; }

@media (prefers-reduced-motion:reduce){
  .mk-por .due-bar{ animation:none; }
  .mk-por .ring .a1,.mk-por .ring .a2{ animation:none; stroke-dasharray:144.5 289; }
}

/* ============================================================
   BROADCAST PREVIEW  (.mk-prev, over .mk-bc.has-prev)
   The compose form's Send is tapped, the preview rises with the
   variables resolved and the creative attached, holds long enough
   to read, then puts itself away. Same beat as the renewal poster.
   ============================================================ */
.mk-prev{ background:#eef1f7; }
.mk-prev .sb{ background:#fff; }
.mk-prev .hdr{ display:flex; align-items:center; gap:.55em; flex:none;
  background:#fff; padding:.45em .95em .95em; }
.mk-prev .hdr em{ display:block; width:1.35em; height:1.35em; flex:none; color:#0e1b34; }
.mk-prev .hdr b{ font-size:1.24em; font-weight:800; letter-spacing:-.03em; color:#16233c; }

.mk-prev .pbody{ flex:1; min-height:0; overflow:hidden; padding:.8em .75em 0; }
.mk-prev .prev-card{ background:#fff; border-radius:.9em; padding:1em .9em 1.1em;
  box-shadow:0 .25em .8em rgba(11,28,68,.08); }
.mk-prev h6{ margin:0 0 .3em; font-size:1.02em; font-weight:800; color:#1b3f8f; }
.mk-prev h6+.prev-v{ margin-bottom:.9em; }
.mk-prev .prev-v{ margin:0 0 .55em; font-size:.86em; font-weight:500; line-height:1.5; color:#26364f; }
.mk-prev .prev-v b{ font-weight:800; color:#16233c; }

/* ---- the attached creative ---- */
.mk-prev .crv{
  position:relative; margin-top:.85em; border-radius:.55em; overflow:hidden;
  background:linear-gradient(170deg,#eaf4fd 0%,#dcecfb 55%,#f7e6bf 100%);
  padding:.9em .8em 0;
}
.mk-prev .crv .crv-sky{ position:absolute; inset:0; overflow:hidden; }
.mk-prev .crv .crv-sky s{ position:absolute; border-radius:50%; text-decoration:none; }
.mk-prev .crv .crv-sky .b1{ width:9em; height:9em; right:-3em; bottom:-3.4em; background:#f5c14b; opacity:.75; }
.mk-prev .crv .crv-sky .b2{ width:5.4em; height:5.4em; left:-2em; top:2.6em; background:#d9a6e8; opacity:.5; }
.mk-prev .crv .crv-ttl{ position:relative; text-align:center; }
.mk-prev .crv .crv-ttl b{
  display:block; font-family:Georgia,'Times New Roman',serif;
  font-size:1.5em; font-weight:700; letter-spacing:-.01em; color:#1b3f8f; line-height:1.1;
}
.mk-prev .crv .crv-ttl i{
  font-style:normal; display:block; margin-top:.1em;
  font-size:.72em; font-weight:500; color:#5d6b83;
}
.mk-prev .crv .crv-scene{ position:relative; display:block; width:100%; height:auto; margin:.2em 0 -.2em; }
.mk-prev .crv .crv-scene *{ stroke:none; }
.mk-prev .crv .crv-scene [stroke]{ stroke:#2f6fe0; }

/* the white panel of selling points */
.mk-prev .crv .crv-pts{
  position:relative; background:rgba(255,255,255,.94); border-radius:.55em;
  padding:.65em .7em; display:flex; flex-direction:column; gap:.34em;
}
.mk-prev .crv .crv-pts div{ display:flex; align-items:flex-start; gap:.42em;
  font-size:.68em; font-weight:600; color:#2b3446; line-height:1.3; }
.mk-prev .crv .crv-pts em{ display:block; width:.85em; height:.85em; flex:none;
  color:#e8a33d; margin-top:.05em; }
.mk-prev .crv .crv-pts em svg{ stroke-width:3.4; }

/* the agent strip along the foot */
.mk-prev .crv .crv-foot{
  position:relative; margin:.7em -.8em 0; padding:.6em .8em .65em;
  background:rgba(255,255,255,.92); display:flex; align-items:center; gap:.7em;
}
.mk-prev .crv .crv-foot .crv-nm{ flex:none; }
.mk-prev .crv .crv-foot .crv-nm b{ display:block; font-size:.76em; font-weight:800; color:#16233c;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.15; }
.mk-prev .crv .crv-foot .crv-nm i{ font-style:normal; display:block; font-size:.62em;
  font-weight:600; color:#67758d; }
.mk-prev .crv .crv-foot .crv-cn{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.18em; }
.mk-prev .crv .crv-foot .crv-cn span{ display:flex; align-items:center; gap:.32em;
  font-size:.66em; font-weight:700; color:#2b3446; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.mk-prev .crv .crv-foot .crv-cn em{ display:block; width:.8em; height:.8em; flex:none; color:#e8a33d; }

/* ---- a broadcast can carry a video link and attachments ------------------- */
.mk-prev h6.gap{ margin-top:1em; }
.mk-prev .vid{
  position:relative; margin-top:.45em; border-radius:.5em; overflow:hidden;
  background:linear-gradient(150deg,#2b3446,#4a5568 60%,#7c8ba3);
  aspect-ratio:16/10;
}
.mk-prev .vid .vh{ position:absolute; top:.5em; left:.5em; right:.5em;
  display:flex; align-items:center; gap:.4em; }
.mk-prev .vid .ch{ width:1.5em; height:1.5em; border-radius:50%; flex:none;
  background:linear-gradient(150deg,#fff,#dbe4f7); text-decoration:none; }
.mk-prev .vid .vh div{ min-width:0; }
.mk-prev .vid .vh b{ display:block; font-size:.66em; font-weight:800; color:#fff; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-prev .vid .vh i{ font-style:normal; display:block; font-size:.58em; font-weight:600;
  color:rgba(255,255,255,.78); }
/* the play target sits dead centre, the way an embed renders it */
.mk-prev .vid .pl{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:2.6em; height:1.85em; border-radius:.4em; background:#e8202a;
  display:grid; place-items:center; box-shadow:0 .2em .6em rgba(0,0,0,.3);
}
.mk-prev .vid .pl em{ display:block; width:1.15em; height:1.15em; color:#fff; }
.mk-prev .vid .wa{
  position:absolute; left:50%; bottom:.6em; transform:translateX(-50%);
  display:flex; align-items:center; gap:.28em; white-space:nowrap;
  background:rgba(28,34,46,.72); color:#fff; border-radius:99px;
  padding:.3em .6em; font-size:.6em; font-weight:700;
}
.mk-prev .vid .wa em{ display:block; width:.75em; height:.75em; color:#ff4b4b; }
.mk-prev .vid .sh{
  position:absolute; left:.55em; bottom:.55em;
  width:1.6em; height:1.6em; border-radius:50%; background:rgba(255,255,255,.24);
  display:grid; place-items:center;
}
.mk-prev .vid .sh em{ display:block; width:.85em; height:.85em; color:#fff; }

.mk-prev .fls{ margin-top:.45em; display:flex; gap:.6em; }
.mk-prev .fl{ width:4.2em; }
.mk-prev .fl .xl{
  display:grid; place-items:center; height:3.4em; border-radius:.4em;
  background:linear-gradient(160deg,#1f9d55,#137a40);
  color:#fff; font-size:.66em; font-weight:800; letter-spacing:.03em;
}
.mk-prev .fl i{
  font-style:normal; display:block; margin-top:.3em; font-size:.58em; font-weight:600;
  color:#67758d; line-height:1.25; word-break:break-all;
}

/* ============================================================
   WHATSAPP REMINDER  (.mk-wa, .dk for the dark theme)
   The message the app actually sends — the agent's follow-up and
   the client's renewal notice share one template, so one block of
   rules covers both and only the palette differs.
   ============================================================ */
.mk-wa{
  --wa-bg:#e9e2db; --wa-head:#f3f1ec; --wa-bub:#fff; --wa-ink:#111b21;
  --wa-mut:#5c6b73; --wa-line:#e4e2dd; --wa-lk:#0a7c6b; --wa-act:#0a7c6b;
  background:var(--wa-bg);
}
.mk-wa.dk{
  --wa-bg:#0c1317; --wa-head:#1f2c33; --wa-bub:#202c33; --wa-ink:#e9edef;
  --wa-mut:#8696a0; --wa-line:#2a3942; --wa-lk:#53bdeb; --wa-act:#25d366;
}
/* the chat wallpaper, kept faint so the message stays the subject */
.mk-wa .thread{
  flex:1; min-height:0; overflow:hidden; padding:.7em .7em 0;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  background-size:1.6em 1.6em; color:rgba(128,128,128,.13);
}

.mk-wa .sb{ background:var(--wa-head); color:var(--wa-ink); }
.mk-wa .sb .l svg,.mk-wa .sb .r svg{ stroke:var(--wa-ink); }
.mk-wa .sb span{ color:var(--wa-ink); }
.mk-wa .wh{
  flex:none; display:flex; align-items:center; gap:.6em;
  background:var(--wa-head); padding:.5em .8em .6em;
}
.mk-wa .wh em{ display:block; width:1.3em; height:1.3em; flex:none; color:var(--wa-ink); }
.mk-wa .wh .av{
  width:2.3em; height:2.3em; flex:none; border-radius:50%; background:#fff;
  display:grid; place-items:center; overflow:hidden;
}
.mk-wa .wh .av svg{ width:62%; height:62%; }
.mk-wa .wh b{ flex:1; font-size:1.15em; font-weight:700; color:var(--wa-ink); letter-spacing:-.01em; }
.mk-wa .wh .dots{ display:flex; flex-direction:column; gap:.18em; flex:none; }
.mk-wa .wh .dots s{ width:.26em; height:.26em; border-radius:50%; background:var(--wa-ink);
  text-decoration:none; opacity:.8; }

.mk-wa .day{
  display:block; width:max-content; margin:0 auto .7em; color:var(--wa-ink);
  background:var(--wa-head); border-radius:.5em; padding:.32em .7em;
  font-size:.72em; font-weight:600; opacity:.92;
}

/* the message itself */
.mk-wa .bub{
  background:var(--wa-bub); color:var(--wa-ink); border-radius:.6em;
  padding:.7em .75em .5em; box-shadow:0 .1em .3em rgba(0,0,0,.14);
}
.mk-wa .bub .ti{ display:block; font-size:.98em; font-weight:700; margin-bottom:.3em; }
.mk-wa .bub p{ margin:0 0 .55em; font-size:.82em; font-weight:400; line-height:1.4; }
.mk-wa .bub p.sg{ margin-bottom:.2em; }
.mk-wa .bub .lk{ color:var(--wa-lk); text-decoration:underline; }

/* one detail row: emoji, label, value */
.mk-wa .rows{ margin:0 0 .55em; display:flex; flex-direction:column; gap:.28em; }
.mk-wa .rows div{ display:flex; align-items:baseline; gap:.4em; font-size:.82em; line-height:1.35; }
.mk-wa .rows s{ text-decoration:none; flex:none; font-size:.95em; }
.mk-wa .rows i{ font-style:normal; flex:none; }
.mk-wa .rows u{ text-decoration:none; min-width:0; word-break:break-word; }
.mk-wa .rows u.lk{ color:var(--wa-lk); text-decoration:underline; }

.mk-wa .tm{ display:block; text-align:right; font-size:.66em; color:var(--wa-mut); margin-bottom:.15em; }

/* the tappable buttons the template carries */
.mk-wa .acts{ margin:0 -.75em -.5em; }
.mk-wa .acts a{
  display:flex; align-items:center; justify-content:center; gap:.4em;
  border-top:1px solid var(--wa-line); padding:.62em .5em;
  color:var(--wa-act); font-size:.85em; font-weight:600; text-decoration:none;
}
.mk-wa .acts em{ display:block; width:.95em; height:.95em; flex:none; }

/* the composer, present but inert */
.mk-wa .wf{
  flex:none; display:flex; align-items:center; gap:.55em;
  background:var(--wa-bg); padding:.5em .6em .6em;
}
.mk-wa .wf .fld{
  flex:1; background:var(--wa-head); border-radius:99px; padding:.65em .9em;
  font-size:.85em; color:var(--wa-mut);
}
.mk-wa .wf .mic{
  width:2.5em; height:2.5em; flex:none; border-radius:50%; background:#25d366;
}

/* ============================================================
   REMINDER FAN-OUT  (.rm-fan) — renewals feature page
   One renewal falling due, branching to the people it concerns:
   the agent chased twice, the client notified once. Drawn as a
   vertical tree so it sits in a .panel beside its copy, the way
   every other block on this page is laid out.
   ============================================================ */
.rm-fan{
  --rm-agent:#1f6feb; --rm-client:#0a9d6e;
  --rm-dk:#202c33; --rm-dk-ink:#e9edef; --rm-dk-lk:#53bdeb; --rm-dk-act:#25d366;
  --rm-lt:#fff;     --rm-lt-ink:#111b21; --rm-lt-lk:#0a7c6b; --rm-lt-act:#0a7c6b;
}

/* the event everything hangs off */
.rm-trig{
  background:linear-gradient(150deg,#1b4fc4,#2f76e8); color:#fff;
  border-radius:13px; padding:11px 14px; box-shadow:0 10px 24px rgba(22,80,200,.26);
}
.rm-trig .e{ display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; opacity:.9 }
.rm-trig .e s{ width:8px; height:8px; border-radius:50%; background:#7ee2b8; text-decoration:none;
  animation:rmBeat 3.2s ease-in-out infinite }
@keyframes rmBeat{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.5); opacity:.55 } }
.rm-trig b{ display:block; margin:4px 0 1px; font-size:14.5px; font-weight:800; letter-spacing:-.02em }
.rm-trig i{ font-style:normal; font-size:11px; opacity:.9 }

/* the two branches, drawn as a tree rail down the left */
.rm-lanes{ position:relative; margin-left:14px; padding-left:20px; padding-top:2px }
.rm-lanes::before{
  content:""; position:absolute; left:0; top:0; bottom:auto; height:calc(100% - 62px); width:2px;
  background:linear-gradient(180deg,var(--rm-agent),var(--rm-client));
}
.rm-lane{ position:relative }
.rm-lane + .rm-lane{ margin-top:13px }
/* the stub from the rail into each recipient */
.rm-lane::before{
  content:""; position:absolute; left:-22px; top:13px; width:18px; height:2px;
}
.rm-lane.ag::before{ background:var(--rm-agent) }
.rm-lane.cl::before{ background:var(--rm-client) }
.rm-lane::after{
  content:""; position:absolute; left:-8px; top:9px; width:10px; height:10px;
  border-radius:50%; border:2px solid #fff;
}
.rm-lane.ag::after{ background:var(--rm-agent) }
.rm-lane.cl::after{ background:var(--rm-client) }


.rm-who{ display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap }
.rm-who s{ width:22px; height:22px; border-radius:50%; text-decoration:none; flex:none;
  display:grid; place-items:center; color:#fff; font-size:9.5px; font-weight:800 }
.rm-who.ag s{ background:var(--rm-agent) } .rm-who.cl s{ background:var(--rm-client) }
.rm-who b{ font-size:12.5px; font-weight:800; color:var(--ink) }
.rm-who i{ font-style:normal; font-size:11.5px; font-weight:800 }
.rm-who.ag i{ color:var(--rm-agent) } .rm-who.cl i{ color:var(--rm-client) }
.rm-who .cnt{ text-decoration:none; border:1px solid var(--line); border-radius:99px;
  padding:2px 10px; font-size:10.5px; font-weight:800; color:var(--muted); background:#fff }

/* the message cards — real WhatsApp styling, no device around them */
.rm-stack{ position:relative; max-width:400px }
.rm-msg{ border-radius:11px; padding:9px 11px 7px; box-shadow:0 8px 22px rgba(11,28,68,.13) }
.rm-msg.dk{ background:var(--rm-dk); color:var(--rm-dk-ink) }
.rm-msg.lt{ background:var(--rm-lt); color:var(--rm-lt-ink) }
/* the agent's second message peeks out from behind the first */
.rm-msg.back{ position:absolute; inset:0; z-index:0; opacity:.85;
  transform:translate(10px,-10px) scale(.985) }
.rm-msg.front{ position:relative; z-index:1 }
.rm-msg b.t{ display:block; font-size:12px; font-weight:700; margin-bottom:4px }
.rm-msg p{ margin:0 0 5px; font-size:10.5px; line-height:1.4 }
.rm-msg .r{ display:flex; gap:5px; font-size:10.5px; line-height:1.42 }
.rm-msg .r s{ text-decoration:none; flex:none }
.rm-msg .lk{ text-decoration:underline }
.rm-msg.dk .lk{ color:var(--rm-dk-lk) } .rm-msg.lt .lk{ color:var(--rm-lt-lk) }
.rm-msg .rm-btn{ display:block; margin:7px -11px -7px;
  border-top:1px solid rgba(128,128,128,.25);
  text-align:center; padding:6px 0; font-size:11px; font-weight:700 }
.rm-msg.dk .rm-btn{ color:var(--rm-dk-act) } .rm-msg.lt .rm-btn{ color:var(--rm-lt-act) }

@media(prefers-reduced-motion:reduce){
  .rm-wire path.fl,.rm-trig .e s{ animation:none }
}
/* the block that frames the fan-out on the renewals page */
.rm-block{ margin:34px 0 30px }
.rm-head{ max-width:62ch; margin-bottom:22px }
.rm-head h2{ font-size:28px; font-weight:800; letter-spacing:-.025em; margin-top:14px }
.rm-head p{ font-size:15.5px; line-height:1.7; color:var(--slate); margin-top:12px }
.rm-note{ margin-top:12px; font-size:11.5px; color:var(--muted) }
.rm-msg p.o{ margin-top:8px }
.rm-msg p.sg{ margin-bottom:2px }

/* this row's card is naturally taller than its copy — centre the copy so the
   leftover height splits above and below instead of pooling underneath */
.split.rm-split{ align-items:center }
.split.rm-split .split-copy{ align-self:center }