/* Labourix marketing site — same design language as the app (navy + teal, Inter). */
:root{
  --navy:#0B1426; --navy2:#0F1C33; --ink:#0F172A; --text2:#475569; --text3:#94A3B8;
  --teal:#0D9488; --teal-bright:#2DD4BF; --teal-soft:#E6F4F2;
  --sky:#7DD3FC; /* light blue — the "you clicked this" state on the top menu */
  --border:#E2E8F0; --surface:#FFFFFF; --surface2:#F1F5F9; --bg:#F7F9FB;
  --r:16px; --shadow:0 1px 3px rgba(15,23,42,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,20,38,.92);backdrop-filter:blur(8px);color:#fff}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
/* The wordmark is "Labour" + "ix". The bare text node and the .ix span are two separate
   flex items, so a flex `gap` would push "ix" away from "Labour". Keep gap at 0 and space
   the icon with a margin instead, so the wordmark reads as one word. */
.brand{display:inline-flex;align-items:center;gap:0;font-weight:800;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:28px;height:28px;flex:none;margin-right:10px}
.brand .ix{color:var(--teal-bright);margin-left:0}
.nav-links{display:flex;gap:22px;font-size:14px;font-weight:600;color:#A9B8D1}
.nav-links a:hover{color:#fff}
.nav-links a.on{color:var(--teal-bright)}
.nav .cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;
  border-radius:11px;font-size:14.5px;font-weight:700;cursor:pointer;border:none;transition:.15s}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:#0B8076;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-out{background:#fff;color:var(--ink);border:1.5px solid var(--border)}
.btn-out:hover{border-color:var(--teal);color:var(--teal)}
.btn-lg{height:50px;padding:0 28px;font-size:16px;border-radius:13px}

/* hero — futuristic grid + glow, still on-brand */
.hero{background:linear-gradient(115deg,#0B1220,#12213A 55%,#0E2E33);color:#fff;
  padding:88px 0 96px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(45,212,191,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(45,212,191,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 90% at 30% 40%,#000 30%,transparent 100%);
          mask-image:radial-gradient(70% 90% at 30% 40%,#000 30%,transparent 100%)}
.hero::after{content:"";position:absolute;width:560px;height:560px;right:-140px;top:-220px;
  background:radial-gradient(circle,rgba(45,212,191,.16),transparent 60%);pointer-events:none}
.btn-teal{box-shadow:0 0 0 rgba(45,212,191,0)}
.btn-teal:hover{box-shadow:0 8px 26px rgba(45,212,191,.35)}
.card{transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:rgba(13,148,136,.4);box-shadow:0 10px 30px rgba(13,148,136,.10)}

/* product media (screenshots / short videos) */
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
@media(max-width:900px){.media-grid{grid-template-columns:1fr}}
.shot{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.shot .frame{position:relative;background:linear-gradient(115deg,#0B1220,#12213A);aspect-ratio:16/9;display:grid;place-items:center}
.shot .frame video,.shot .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .frame .ph{color:#5B7089;font-size:13px;font-weight:600;text-align:center;padding:20px}
.shot .cap{padding:14px 18px}
.shot .cap b{font-size:14.5px}
.shot .cap span{display:block;font-size:13px;color:var(--text2);margin-top:2px}

/* article / landing pages */
.article{max-width:780px;margin:0 auto;padding:56px 24px 72px}
.article h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.article .meta{margin-top:10px;font-size:13.5px;color:var(--text3)}
.article h2{font-size:22px;font-weight:800;margin:36px 0 10px;letter-spacing:-.01em}
.article h3{font-size:17px;font-weight:800;margin:26px 0 8px}
.article p,.article li{font-size:16px;color:var(--text2);margin-top:10px}
.article ul{padding-left:22px}
.article .hl{background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:0 12px 12px 0;
  padding:16px 20px;margin:24px 0;color:var(--ink);font-size:15.5px}
.article .cta-box{margin:36px 0;background:linear-gradient(115deg,#0B1220,#12213A 60%,#0E2E33);color:#fff;
  border-radius:18px;padding:28px;text-align:center}
.article .cta-box h3{margin:0 0 6px;color:#fff}
.article .cta-box p{color:#9FB6CE;margin:0 0 18px}
.faq{margin-top:16px}
.faq details{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-top:10px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;padding:14px 0;color:var(--ink)}
.faq details p{padding-bottom:14px;margin-top:0}

/* blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.post-card .thumb{aspect-ratio:16/8;background:linear-gradient(115deg,#0B1220,#12213A 60%,#0E2E33);display:grid;place-items:center;color:var(--teal-bright);font-size:34px}
.post-card .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .tagline{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.post-card h3{font-size:17px;font-weight:800;line-height:1.3}
.post-card p{font-size:14px;color:var(--text2);flex:1}
.post-card .read{font-size:13.5px;font-weight:700;color:var(--teal)}

/* ---------- animated product mockups (no video needed) ---------- */
.app-window{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(15,23,42,.14)}
.app-window .bar{display:flex;align-items:center;gap:6px;background:var(--navy);padding:9px 14px}
.app-window .bar i{width:10px;height:10px;border-radius:50%;display:inline-block}
.app-window .bar .url{margin-left:10px;background:rgba(255,255,255,.08);color:#8fa3bd;font:500 11px/1 Inter;
  padding:5px 12px;border-radius:7px;flex:1;max-width:320px}
.aw{display:grid;grid-template-columns:150px 1fr;min-height:340px}
@media(max-width:700px){.aw{grid-template-columns:1fr}.aw-side{display:none}}
.aw-side{background:linear-gradient(180deg,#0B1426,#0F1C33);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.aw-side .it{display:flex;align-items:center;gap:8px;color:#a9b8d1;font:600 11px Inter;padding:7px 9px;border-radius:8px}
.aw-side .it.on{background:rgba(45,212,191,.14);color:#2DD4BF}
.aw-side .it i{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.7}
.aw-main{padding:16px;background:var(--bg)}
.aw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.aw-stat{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.aw-stat .l{font:600 9.5px Inter;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.aw-stat .v{font:700 20px Inter;margin-top:3px}
.aw-cols{display:grid;grid-template-columns:1fr 130px;gap:10px;margin-top:10px}
.aw-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px}
.aw-card .t{font:700 11px Inter;margin-bottom:8px}
.aw-bar{height:7px;border-radius:4px;background:var(--surface2);overflow:hidden;margin-top:7px}
.aw-bar i{display:block;height:100%;border-radius:4px;background:var(--teal);width:0;animation:growbar 2.4s ease forwards}
.aw-bar:nth-child(3) i{animation-delay:.3s;background:#2DD4BF}
.aw-bar:nth-child(4) i{animation-delay:.6s;background:#0EA5E9}
@keyframes growbar{to{width:var(--w,70%)}}
.aw-ring{width:84px;height:84px;margin:0 auto;position:relative}
.aw-ring svg{transform:rotate(-90deg)}
.aw-ring circle.fg{stroke:var(--teal);stroke-dasharray:0 100;animation:ringfill 2.2s .4s ease forwards}
@keyframes ringfill{to{stroke-dasharray:68 32}}
.aw-ring .mid{position:absolute;inset:0;display:grid;place-items:center;font:700 17px Inter}
.aw-chiprow{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.aw-chip{font:600 9.5px Inter;padding:3px 8px;border-radius:999px;opacity:0;animation:chippop .4s ease forwards}
.aw-chip.g{background:#EAF7EF;color:#15803D}.aw-chip.a{background:#FFF3E0;color:#B45309}.aw-chip.t{background:var(--teal-soft);color:var(--teal)}
.aw-chip:nth-child(1){animation-delay:1s}.aw-chip:nth-child(2){animation-delay:1.25s}.aw-chip:nth-child(3){animation-delay:1.5s}
@keyframes chippop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* LIMOSA extension autofill animation */
.ext-anim{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(15,23,42,.14)}
.ext-head{display:flex;align-items:center;gap:8px;background:#F4F6FA;border-bottom:1px solid var(--border);padding:10px 14px;font:700 12px Inter}
.ext-head .badge{margin-left:auto;background:var(--teal);color:#fff;font:700 9.5px Inter;padding:3px 9px;border-radius:999px;
  opacity:0;animation:chippop .4s 3.6s ease forwards}
.ext-body{padding:16px}
.ext-row{margin-bottom:11px}
.ext-row label{display:block;font:600 9.5px Inter;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.ext-row .field{border:1.5px solid var(--border);border-radius:8px;padding:8px 11px;font:600 12.5px 'Cascadia Code',ui-monospace,monospace;
  min-height:34px;color:var(--ink);position:relative;background:#fff}
.ext-row .field.done{border-color:rgba(13,148,136,.55);background:var(--teal-soft)}
.ext-row .field .val::after{content:"";display:inline-block;width:2px;height:12px;background:var(--teal);margin-left:2px;
  vertical-align:-2px;animation:blink .7s steps(1) infinite}
.ext-row .field.done .val::after{display:none}
@keyframes blink{50%{opacity:0}}
.ext-send{margin-top:4px;width:100%;border:none;border-radius:9px;padding:10px;font:700 13px Inter;background:var(--surface2);color:var(--text3);transition:.3s}
.ext-send.ready{background:var(--teal);color:#fff;box-shadow:0 6px 20px rgba(13,148,136,.35)}
.anim-note{font:500 12px Inter;color:var(--text3);margin-top:10px;text-align:center}

/* ---------- live map + geofence ---------- */
.geo-wrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);height:420px}
.geo-wrap .leaflet-container{height:100%;width:100%}
.geo-legend{position:absolute;left:14px;bottom:14px;z-index:600;background:rgba(255,255,255,.95);border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;font:500 12px Inter;color:var(--text2);box-shadow:var(--shadow)}
.geo-legend div{display:flex;align-items:center;gap:8px;margin-top:4px}
.geo-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.geo-legend .fence{width:14px;height:14px;border:2px dashed var(--teal);border-radius:50%;background:rgba(13,148,136,.12)}
.pulse-dot{width:14px;height:14px;border-radius:50%;background:#16A34A;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);position:relative}
.pulse-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #16A34A;opacity:.7;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{from{transform:scale(.5);opacity:.8}to{transform:scale(1.5);opacity:0}}

/* ---------- photography (duotone-treated slots) ---------- */
.hero-photo{position:absolute;right:0;top:0;bottom:0;width:52%;background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%);opacity:.45;pointer-events:none}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(11,18,32,.55),rgba(14,46,51,.35))}
.photo-band{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:40px}
@media(max-width:900px){.photo-band{grid-template-columns:1fr}}
.photo{border-radius:16px;min-height:240px;background-size:cover;background-position:center;position:relative;overflow:hidden;
  background-color:var(--surface2);border:1px solid var(--border)}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,38,0) 40%,rgba(11,20,38,.72));mix-blend-mode:multiply}
.photo .cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff;font:700 14px Inter;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.photo .cap span{display:block;font:500 12px Inter;color:#cfe0e9;margin-top:2px}

/* ---------- worker-app phone animation ---------- */
.phone{width:248px;margin:0 auto;background:#0B1426;border-radius:34px;padding:12px 10px;box-shadow:0 18px 50px rgba(15,23,42,.22)}
.phone .scr{background:var(--bg);border-radius:24px;overflow:hidden}
.ph-head{background:linear-gradient(100deg,#0B1426,#0F1C33);color:#fff;padding:14px 14px 12px;font:700 13px Inter}
.ph-head small{display:block;color:#9FB6CE;font-weight:500;font-size:10.5px;margin-top:2px}
.ph-body{padding:12px;text-align:center}
.ph-clock{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
.ph-clock .site{font:600 10.5px Inter;color:var(--text3)}
.ph-btn{margin:10px auto 0;width:92px;height:92px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font:800 13px Inter;position:relative;animation:pressbtn 6s ease infinite}
.ph-btn::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--teal);opacity:0;animation:pressring 6s ease infinite}
@keyframes pressbtn{0%,20%{transform:scale(1)}24%{transform:scale(.9)}28%,100%{transform:scale(1)}}
@keyframes pressring{0%,22%{opacity:0}26%{opacity:.8;transform:scale(.9)}48%{opacity:0;transform:scale(1.4)}100%{opacity:0}}
.ph-pill{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:#EAF7EF;color:#15803D;font:700 10.5px Inter;padding:5px 11px;border-radius:999px;opacity:0;animation:pillin 6s ease infinite}
@keyframes pillin{0%,28%{opacity:0;transform:translateY(4px)}34%,94%{opacity:1;transform:none}100%{opacity:0}}
.ph-pill i{width:7px;height:7px;border-radius:50%;background:#16A34A;display:inline-block}
.ph-card{margin-top:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center;text-align:left}
.ph-card .qr{width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:4px;
  background:
    linear-gradient(#0B1426,#0B1426) 3px 3px/10px 10px no-repeat,
    linear-gradient(#0B1426,#0B1426) 31px 3px/10px 10px no-repeat,
    linear-gradient(#0B1426,#0B1426) 3px 31px/10px 10px no-repeat,
    repeating-linear-gradient(90deg,#0B1426 0 3px,#fff 0 6px) 16px 18px/14px 3px no-repeat,
    repeating-linear-gradient(#0B1426 0 3px,#fff 0 6px) 20px 16px/3px 16px no-repeat,#fff}
.ph-card .t{font:700 11px Inter}.ph-card .s{font:500 9.5px Inter;color:var(--text3)}

/* ---------- Check-in-at-work day-register animation ---------- */
.ciaw-anim{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(15,23,42,.14)}
.ciaw-anim .rows{padding:6px 16px 10px}
.ciaw-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--border);font:600 12.5px Inter;opacity:0;animation:rowin .5s ease forwards}
.ciaw-row:nth-child(1){animation-delay:.4s}.ciaw-row:nth-child(2){animation-delay:1.2s}
.ciaw-row:nth-child(3){animation-delay:2s}.ciaw-row:nth-child(4){animation-delay:2.8s}
.ciaw-row:last-child{border-bottom:none}
@keyframes rowin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.ciaw-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ciaw-row .tm{font:600 11px ui-monospace,monospace;color:var(--text3)}
.ciaw-row .okk{width:19px;height:19px;flex:none;border-radius:50%;background:#EAF7EF;color:#15803D;display:grid;place-items:center;font:800 11px Inter}
.ciaw-foot{border-top:1px solid var(--border);background:var(--surface2);padding:9px 16px;font:600 11px Inter;color:var(--text2)}

/* ---------- live translation chat animation ---------- */
.tr-chat{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(15,23,42,.14)}
.tr-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.tr-msg{max-width:86%;border-radius:14px;padding:9px 13px;font:500 12.5px Inter;line-height:1.45;opacity:0;animation:rowin .5s ease forwards}
.tr-msg.w{align-self:flex-start;background:#fff;border:1px solid var(--border)}
.tr-msg.m{align-self:flex-end;background:var(--teal);color:#fff}
.tr-msg .who{font:700 10px Inter;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:3px;display:flex;align-items:center;gap:6px}
.tr-msg.m .who{color:rgba(255,255,255,.75)}
.tr-msg .orig{color:var(--text3);font-size:11px;margin-top:5px;padding-top:5px;border-top:1px dashed var(--border)}
.tr-msg.m .orig{color:rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.3)}
.tr-tag{display:inline-flex;align-items:center;gap:4px;background:var(--teal-soft);color:var(--teal);font:700 9px Inter;padding:2px 7px;border-radius:999px}
.tr-msg.m .tr-tag{background:rgba(255,255,255,.18);color:#fff}
.tr-msg .att{display:inline-flex;align-items:center;gap:6px;background:#FEF2F2;color:#B91C1C;font:700 10.5px Inter;padding:4px 9px;border-radius:8px;margin-top:6px}
.tr-msg:nth-child(1){animation-delay:.3s}.tr-msg:nth-child(2){animation-delay:1.4s}.tr-msg:nth-child(3){animation-delay:2.6s}

/* ---------- feature spotlight rows ---------- */
.fsplit{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:44px 0;border-bottom:1px solid var(--border)}
.fsplit:last-child{border-bottom:none}
.fsplit.rev .fs-visual{order:2}
@media(max-width:900px){.fsplit{grid-template-columns:1fr;gap:24px}.fsplit.rev .fs-visual{order:0}}
.fs-num{font:800 13px Inter;color:var(--teal);letter-spacing:.1em}
.fs-text h3{font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.015em;margin-top:6px}
.fs-text p{margin-top:10px;font-size:15.5px;color:var(--text2)}
.fs-text ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.fs-text li{display:flex;gap:9px;font-size:14px;color:var(--text2)}
.fs-text li::before{content:"";width:17px;height:17px;flex:none;margin-top:1px;border-radius:50%;
  background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/10px no-repeat}
.fs-visual{min-width:0;display:flex;justify-content:center;align-items:flex-start}
/* Screenshots are a mix of wide dashboards and tall phone shots. Cap the height so a
   portrait phone screenshot doesn't blow up to full column width, and centre it. */
.fs-visual .shot-real{display:none;border-radius:16px;border:1px solid var(--border);
  box-shadow:0 18px 50px rgba(15,23,42,.14);
  width:auto;max-width:100%;max-height:520px;object-fit:contain;margin:0 auto}
@media(max-width:900px){.fs-visual .shot-real{max-height:420px}}
/* screenshot gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
@media(max-width:900px){.gallery{grid-template-columns:1fr}}
.gallery .shot .frame{aspect-ratio:16/9.6;background:var(--surface2)}

/* ---------- ROI calculator (why page) ---------- */
.roi{background:linear-gradient(115deg,#0B1220,#12213A 60%,#0E2E33);border-radius:22px;color:#fff;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
@media(max-width:900px){.roi{grid-template-columns:1fr}}
.roi h3{font-size:22px;font-weight:800;letter-spacing:-.01em}
.roi p{color:#9FB6CE;font-size:14px;margin-top:8px}
.roi .ctl{margin-top:22px}
.roi label{font:700 12px Inter;letter-spacing:.06em;text-transform:uppercase;color:#9FB6CE;display:flex;justify-content:space-between}
.roi label b{color:#2DD4BF;font-size:15px}
.roi input[type=range]{width:100%;margin-top:10px;accent-color:#2DD4BF}
.roi-out{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px}
.roi-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.12);font-size:14px;color:#CFE0E9}
.roi-row:last-of-type{border-bottom:none}
.roi-row b{font-family:ui-monospace,monospace}
.roi-total{margin-top:12px;padding-top:12px;border-top:2px solid rgba(45,212,191,.5);display:flex;justify-content:space-between;align-items:center}
.roi-total .l{font:700 13px Inter;color:#9FB6CE}
.roi-total .v{font:800 26px Inter;color:#2DD4BF}
.roi .fine{font-size:11px;color:#7E92AC;margin-top:12px}

/* stat band on light pages */
.numband{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
@media(max-width:900px){.numband{grid-template-columns:1fr 1fr}}
.numband .n{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center}
.numband .n .v{font:800 28px Inter;letter-spacing:-.02em;color:var(--teal)}
.numband .n .l{font:600 12.5px Inter;color:var(--text2);margin-top:4px}

/* ---------- full dashboard glance (homepage) ---------- */
.dg{background:var(--bg);padding:14px;display:flex;flex-direction:column;gap:12px}
.dg .dg-agent{display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,#0B1220,#12213A 60%,#0E2E33);border-radius:12px;padding:10px 16px;color:#fff}
.dg .dg-agent .hx{width:34px;height:34px;flex:none;display:grid;place-items:center;background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.3);border-radius:9px}
.dg .dg-agent .t{font:700 13px Inter}.dg .dg-agent .s{font:500 10.5px Inter;color:#9FB6CE}
.dg .dg-agent .drop{margin-left:auto;border:1px dashed rgba(255,255,255,.25);border-radius:8px;padding:6px 14px;font:600 10.5px Inter;color:#D3E3F2}
.dg-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
@media(max-width:900px){.dg-grid{grid-template-columns:1fr}}
.dg-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.dg-card .h{display:flex;align-items:baseline;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border)}
.dg-card .h .t{font:700 12.5px Inter}.dg-card .h .s{font:500 10px Inter;color:var(--text3)}
.dg-card .h a{font:700 11px Inter;color:var(--teal);text-decoration:none}
.dg-map{position:relative;height:100%;min-height:250px;background:#E9EEF3 url('https://a.basemaps.cartocdn.com/rastertiles/voyager/8/131/86.png') center/cover}
.dg-pin{position:absolute;width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.dg-house{position:absolute;width:18px;height:18px;border-radius:5px;background:#7C3AED;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);display:grid;place-items:center}
.dg-fence{position:absolute;width:74px;height:74px;border-radius:50%;border:2px dashed var(--teal);background:rgba(13,148,136,.10);transform:translate(-50%,-50%)}
.dg-legend{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:9px;padding:7px 10px;font:600 9.5px Inter;color:var(--text2)}
.dg-legend div{display:flex;align-items:center;gap:6px;margin-top:2px}
.dg-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.dg-side{display:flex;flex-direction:column;gap:12px}
.dg-wf{display:flex;align-items:center;gap:14px;padding:12px 14px}
.dg-wf .legend{flex:1;display:flex;flex-direction:column;gap:5px;font:600 11px Inter;color:var(--text2)}
.dg-wf .legend div{display:flex;align-items:center;gap:7px}
.dg-wf .legend i{width:8px;height:8px;border-radius:50%;flex:none}
.dg-wf .legend b{margin-left:auto;font-family:ui-monospace,monospace}
.dg-wx{display:grid;grid-template-columns:repeat(7,1fr);padding:8px 10px 12px;text-align:center}
.dg-wx .d{font:700 8.5px Inter;color:var(--text3);text-transform:uppercase}
.dg-wx .tp{font:700 11.5px Inter;margin-top:2px}
.dg-wx .th{width:5px;height:26px;border-radius:3px;background:var(--surface2);margin:4px auto 0;position:relative;overflow:hidden}
.dg-wx .th i{position:absolute;left:0;right:0;bottom:0;border-radius:3px}
.dg-wx .rn{width:16px;height:4px;border-radius:2px;background:var(--surface2);margin:4px auto 0;overflow:hidden}
.dg-wx .rn i{display:block;height:100%;background:#3B82F6}
.dg-sig{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.dg-sig{grid-template-columns:1fr 1fr}}
.dg-sig .sgi{display:flex;align-items:center;gap:9px;padding:11px 13px;border-right:1px solid var(--border);min-width:0}
.dg-sig .sgi:last-child{border-right:none}
.dg-sig .ic2{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;font-size:12px}
.dg-sig .nm2{min-width:0;font:700 11px Inter;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-sig .nm2 small{display:block;font:500 9.5px Inter;color:var(--text3)}
.dg-sig .ch2{margin-left:auto;flex:none;font:700 9px Inter;padding:3px 8px;border-radius:999px}
.dg-tbl{width:100%;border-collapse:collapse;font:500 11.5px Inter}
.dg-tbl th{text-align:left;font:700 9px Inter;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);padding:8px 14px;border-bottom:1px solid var(--border)}
.dg-tbl td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text2)}
.dg-tbl tr:last-child td{border-bottom:none}
.dg-tbl .pn2{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.dg-tbl .pn2 i
/* ---------- forms / lead capture ---------- */
.form{display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.form .row{grid-template-columns:1fr}}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.field .hint{margin-top:5px;font-size:12.5px;color:var(--text3)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-note{font-size:12.5px;color:var(--text3)}
.form-msg{border-radius:12px;padding:12px 14px;font-size:14px;display:none}
.form-msg.ok{display:block;background:var(--teal-soft);border-left:4px solid var(--teal);color:var(--ink)}
.form-msg.err{display:block;background:rgba(220,38,38,.08);border-left:4px solid #DC2626;color:#991B1B}

/* card used by contact + calculator */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- calculator ---------- */
.calc-out{background:linear-gradient(115deg,#0B1220,#12213A 60%,#0E2E33);color:#fff;border-radius:18px;padding:26px}
.calc-out .big{font-size:clamp(30px,4.6vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#fff}
.calc-out .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7FE3D6}
.calc-out .vs{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.calc-out .muted{color:#9FB6CE;font-size:14px;margin-top:6px}
.calc-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.12);font-size:14.5px;color:#D7E3F0}
.calc-line:last-child{border-bottom:0}
.calc-line b{color:#fff;white-space:nowrap}
.range{width:100%}

/* ---------- social proof ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center}
.stat b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.stat span{font-size:13px;color:var(--text3)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px}
.quote p{font-size:15.5px;color:var(--text2);margin:0 0 14px}
.quote .who{display:flex;align-items:center;gap:10px}
.quote .av{width:36px;height:36px;border-radius:50%;background:var(--teal-soft);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.quote .who b{display:block;font-size:14px;color:var(--ink)}
.quote .who span{font-size:12.5px;color:var(--text3)}
op:32px;display:flex;gap:12px;flex-wrap:wrap}
.hero .note{margin-top:14px;font-size:13px;color:#7E92AC}
.badges{margin-top:44px;display:flex;gap:28px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:#A9B8D1}
.badges b{color:var(--teal-bright);font-weight:800}

/* sections */
section{padding:72px 0}
section.alt{background:var(--surface)}
.kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
h2.title{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.015em;margin-top:8px}
p.lead{margin-top:12px;font-size:17px;color:var(--text2);max-width:640px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.grid3,.grid2{grid-template-columns:1fr}.hero-art{display:none}.nav-links{display:none}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal);
  display:grid;place-items:center;margin-bottom:16px}
.card .ic svg{width:22px;height:22px;stroke:currentColor}
.card h3{font-size:17px;font-weight:800;letter-spacing:-.01em}
.card p{margin-top:8px;font-size:14.5px;color:var(--text2)}
.card .more{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--teal)}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:22px;width:32px;height:32px;
  border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:15px;display:grid;place-items:center}
.step h3{font-size:16px;font-weight:800;margin-top:6px}
.step p{margin-top:6px;font-size:14px;color:var(--text2)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:30px;display:flex;flex-direction:column}
.plan.hot{border-color:var(--teal);box-shadow:0 12px 34px rgba(13,148,136,.16);position:relative}
.plan.hot .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:5px 14px;border-radius:999px;text-transform:uppercase}
.plan h3{font-size:18px;font-weight:800}
.plan .for{font-size:13.5px;color:var(--text3);margin-top:3px}
.plan .price{margin-top:18px;font-size:38px;font-weight:800;letter-spacing:-.02em}
.plan .price small{font-size:14px;font-weight:600;color:var(--text3)}
.plan .per{font-size:13.5px;color:var(--text2);margin-top:2px}
.plan ul{margin:22px 0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--text2)}
.plan ul li{display:flex;gap:9px;align-items:flex-start}
.plan ul li::before{content:"";width:18px;height:18px;flex:none;margin-top:1px;border-radius:50%;
  background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .btn{margin-top:auto;width:100%}

/* misc */
.quoteband{background:linear-gradient(115deg,#0B1220,#12213A 60%,#0E2E33);color:#fff;text-align:center;padding:76px 0}
.quoteband h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.015em}
.quoteband p{margin-top:12px;color:#9FB6CE;font-size:16.5px}
.quoteband .actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.check-table{margin-top:36px;width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:14.5px}
.check-table th,.check-table td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--border)}
.check-table th{background:var(--surface2);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.check-table tr:last-child td{border-bottom:none}
.ok{color:var(--teal);font-weight:800}
.no{color:var(--text3)}

/* footer */
footer{background:var(--navy);color:#A9B8D1;padding:52px 0 40px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
footer .brand{color:#fff}
footer .cols{display:flex;gap:56px;flex-wrap:wrap}
footer h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
footer li{list-style:none;margin-bottom:8px}
footer a:hover{color:#fff}
footer .fine{width:100%;margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;color:#7E92AC;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ============================================================
   RESTORED BLOCK — these rules were lost in a bad write and are
   re-added here. Without .lix-* the chat assistant renders as an
   invisible unstyled button, which is why it "disappeared".
   ============================================================ */
.dg-tbl .pn2 i{width:7px;height:7px;border-radius:50%;flex:none}
.dg-note{text-align:center;font:500 12px Inter;color:var(--text3);padding:4px 0 0}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.chip-row a{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;
  font:600 13px Inter;color:var(--text2);text-decoration:none;transition:.15s}
.chip-row a:hover{border-color:var(--teal);color:var(--teal)}
.hero-art{position:absolute;right:-40px;top:40px;width:520px;opacity:.55;pointer-events:none}
.hero-scene{position:absolute;right:0;top:0;bottom:0;height:100%;max-width:48%;object-fit:cover;
  object-position:left center;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
@media(max-width:900px){.hero-scene,.hero-art{display:none}}

/* site agent (Lix) */
.lix-fab{position:fixed;bottom:22px;right:22px;z-index:90;display:flex;align-items:center;gap:10px;
  background:var(--teal);color:#fff;border:none;border-radius:999px;padding:12px 20px 12px 14px;
  font:700 15px Inter,sans-serif;cursor:pointer;box-shadow:0 10px 30px rgba(13,148,136,.4);transition:.15s}
.lix-fab:hover{transform:translateY(-2px)}
.lix-panel{position:fixed;bottom:22px;right:22px;z-index:95;width:360px;max-width:92vw;height:520px;max-height:78vh;
  background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.35);
  display:none;flex-direction:column;overflow:hidden;font-family:Inter,sans-serif}
.lix-panel.open{display:flex}
.lix-head{background:linear-gradient(100deg,#0B1220,#0E2E33);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.lix-head .t{font-weight:800;font-size:15px}
.lix-head .s{font-size:11.5px;color:#9FB6CE}
.lix-head button{margin-left:auto;background:none;border:none;color:#9FB6CE;font-size:16px;cursor:pointer}
.lix-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.lix-msg{max-width:85%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;white-space:pre-wrap}
.lix-msg.bot{background:#fff;border:1px solid var(--border);color:var(--ink);align-self:flex-start}
.lix-msg.me{background:var(--teal);color:#fff;align-self:flex-end}
.lix-quick{display:flex;flex-wrap:wrap;gap:6px}
.lix-quick button{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 12px;
  font:600 12.5px Inter,sans-serif;color:var(--text2);cursor:pointer}
.lix-quick button:hover{border-color:var(--teal);color:var(--teal)}
.lix-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#fff}
.lix-input input{flex:1;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font:14px Inter,sans-serif;outline:none}
.lix-input input:focus{border-color:var(--teal)}
.lix-input button{background:var(--teal);color:#fff;border:none;border-radius:10px;padding:0 16px;font:700 13.5px Inter,sans-serif;cursor:pointer}
/* On a phone the FAB must not sit under the thumb bar or cover the CTA */
@media(max-width:700px){
  .lix-fab{bottom:16px;right:14px;padding:11px 16px 11px 12px;font-size:14px}
  .lix-panel{bottom:0;right:0;left:0;width:auto;max-width:none;height:82vh;max-height:82vh;border-radius:20px 20px 0 0}
}

/* ============================================================
   NAV — active state + Android / small-phone sizing
   ============================================================ */

/* Clicked / current menu item brightens to a light blue. */
.nav-links a{padding:7px 11px;border-radius:9px;transition:color .15s,background .15s}
.nav-links a:hover{color:#fff;background:rgba(125,211,252,.10)}
.nav-links a.on,
.nav-links a:active,
.nav-links a[aria-current="page"]{color:var(--sky);background:rgba(125,211,252,.14)}
.nav-links a:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* Language switcher (injected by agent.js — every page gets it) */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  font:700 13px Inter,sans-serif;cursor:pointer;transition:.15s}
.lang-btn:hover{background:rgba(125,211,252,.16);border-color:var(--sky)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 18px 44px rgba(15,23,42,.28);padding:6px;display:none;z-index:120}
.lang-menu.open{display:block}
.lang-menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;
  font:600 13.5px Inter,sans-serif;color:var(--ink);text-decoration:none}
.lang-menu a:hover{background:var(--teal-soft);color:var(--teal)}
.lang-menu a b{font-weight:800;min-width:22px;color:var(--text3)}
.lang-menu a.on b{color:var(--teal)}

/* Burger — only on phones (injected by agent.js) */
.nav-burger{display:none;width:42px;height:42px;flex:none;align-items:center;justify-content:center;
  border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;cursor:pointer}

@media(max-width:900px){
  .nav .wrap{gap:12px}
  .nav-burger{display:inline-flex}
  /* Slide-down panel replaces the desktop link row (which the old rule hid entirely). */
  .nav-links{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:4px;
    background:#0B1426;border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 40px rgba(0,0,0,.4);padding:10px 20px 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 12px;font-size:15px;min-height:44px;display:flex;align-items:center}
}

/* Android phones are commonly 360–412px wide. The two full-size CTA buttons
   overflowed the 64px bar; shrink them and drop the secondary label. */
@media(max-width:520px){
  .nav .wrap{height:60px;gap:8px}
  .nav .cta{gap:6px}
  .nav .cta .btn{height:38px;padding:0 12px;font-size:13.5px;border-radius:10px}
  .nav .cta .btn-lg{height:38px;padding:0 12px;font-size:13.5px}
  .lang-btn{height:38px;padding:0 9px;font-size:12.5px}
  .nav-burger{width:38px;height:38px}
  .brand{font-size:17px}
  .brand svg{width:24px;height:24px;margin-right:8px}
  .nav-links{top:60px}
  /* keep tap targets >=44px tall per WCAG even though the chrome is 38px */
  .nav .cta .btn::after{content:"";position:absolute;inset:-4px 0}
  .nav .cta .btn{position:relative}
}
@media(max-width:380px){
  /* on the narrowest phones keep only the primary CTA — "Sign in" still lives in the burger menu */
  .nav .cta .btn-ghost{display:none}
}

/* ============================================================
   INTERACTION ANIMATIONS — show the product doing the boring
   admin work, so the visitor sees how little time it takes.
   ============================================================ */
.demo{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;overflow:hidden;
  box-shadow:var(--shadow)}
.demo-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--surface2);
  border-bottom:1px solid var(--border)}
.demo-bar i{width:10px;height:10px;border-radius:50%;background:#D7DEE8;flex:none}
.demo-bar span{margin-left:8px;font:600 12px Inter;color:var(--text3)}
.demo-stage{position:relative;padding:22px;min-height:196px;background:var(--bg)}

/* the phone / row that animates */
.dm-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;font:600 14px Inter;color:var(--ink);
  opacity:0;transform:translateY(10px);animation:dmIn .5s ease forwards}
.dm-row+.dm-row{margin-top:10px}
.dm-row .av{width:30px;height:30px;border-radius:50%;background:var(--teal-soft);color:var(--teal);
  display:grid;place-items:center;font:800 12px Inter;flex:none}
.dm-row .ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 12.5px Inter;color:#0F9D58;
  opacity:0;animation:dmPop .4s cubic-bezier(.2,1.4,.4,1) forwards}
.dm-row .ok::before{content:"";width:16px;height:16px;border-radius:50%;background:#0F9D58;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat}

/* a cursor that taps the button — sells "one tap, done" */
.dm-tap{position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid var(--teal);
  background:rgba(13,148,136,.18);pointer-events:none;opacity:0}
.dm-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:12px;
  background:var(--teal);color:#fff;font:800 14.5px Inter;border:none}

/* progress bar that fills — "the paperwork writes itself" */
.dm-bar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden;margin-top:14px}
.dm-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-bright))}
.dm-cap{margin-top:10px;font:600 12.5px Inter;color:var(--text3)}
.dm-clock{display:inline-flex;align-items:center;gap:6px;font:800 12.5px Inter;color:var(--teal)}

/* Only animate once the demo scrolls into view (class added by agent.js). */
.demo .dm-row,.demo .dm-row .ok,.demo .dm-tap,.demo .dm-bar i{animation-play-state:paused}
.demo.run .dm-row,.demo.run .dm-row .ok,.demo.run .dm-tap,.demo.run .dm-bar i{animation-play-state:running}
.demo.run .dm-tap{animation:dmTap 2.6s ease-in-out infinite}
.demo.run .dm-bar i{animation:dmFill 2.2s ease-out forwards}

@keyframes dmIn{to{opacity:1;transform:none}}
@keyframes dmPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes dmTap{0%,60%{opacity:0;transform:translate(0,14px) scale(.8)}
  70%{opacity:1;transform:translate(0,0) scale(1)}
  78%{transform:translate(0,0) scale(.72)}
  88%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0}}
@keyframes dmFill{to{width:100%}}

/* people who ask for less motion get none */
@media(prefers-reduced-motion:reduce){
  .demo .dm-row,.demo .dm-row .ok{opacity:1;transform:none;animation:none}
  .demo .dm-tap{display:none}
  .demo .dm-bar i{width:100%;animation:none}
}

/* ============================================================
   TEAM FLOW — the minimal "one job, four people" drawing
   ============================================================ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
@media(max-width:900px){.flow{grid-template-columns:1fr;gap:26px}}
.fl{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:28px 20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center}
.fl .n{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  font:800 10.5px Inter;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap}
.fl .fig{width:60px;height:60px;border-radius:50%;background:var(--teal-soft);color:var(--teal);
  display:grid;place-items:center;margin-bottom:14px}
.fl .fig svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fl h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.fl .who{font:600 12px Inter;color:var(--text3);margin-top:2px}
.fl p{margin-top:10px;font-size:13.5px;color:var(--text2)}
.fl .does{margin-top:13px;font:700 12.5px Inter;color:var(--teal)}
.fl .secs{margin-top:4px;font:600 11.5px Inter;color:var(--text3)}
/* the arrow that carries the job to the next person */
.fl::after{content:"";position:absolute;right:-13px;top:50%;width:9px;height:9px;
  border-top:2px solid #CBD5E1;border-right:2px solid #CBD5E1;
  transform:translateY(-50%) rotate(45deg)}
.fl:last-child::after{display:none}
@media(max-width:900px){
  .fl::after{right:auto;left:50%;top:auto;bottom:-18px;transform:translateX(-50%) rotate(135deg)}
}
.flow-loop{margin-top:22px;text-align:center;font:600 13.5px Inter;color:var(--text2)}
.flow-loop b{color:var(--teal);font-weight:800}