/* Customer app. Direction: a quiet private-bank concierge. Ivory paper, petrol ink, one brass accent, serif numerals, hairlines instead of boxes.
   Big, calm, one idea per screen; thumb-reachable navigation on phones. */
.app{max-width:68rem;padding-bottom:calc(var(--s-9) + env(safe-area-inset-bottom))}
.app h1,.app h2{letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums lining-nums}

/* Navigation: bottom bar on phones (thumb reach), centred top bar on larger screens */
.tabs-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs-bar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;color:var(--ink-muted,#4a5a58);text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.01em}
.tabs-bar a svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.tabs-bar a:hover{color:var(--deep)}
.tabs-bar a[aria-current="page"]{color:var(--deep)}
.tabs-bar a[aria-current="page"]::before{content:"";position:absolute;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--brass)}
.tabs-bar a[aria-current="page"] svg{transform:translateY(-1px);stroke-width:2}
.tabs-bar a:focus-visible{outline:2px solid var(--petrol);outline-offset:-4px;border-radius:var(--r-md)}
@media (min-width:760px){
 .tabs-bar{position:sticky;top:0;bottom:auto;grid-template-columns:repeat(5,auto);justify-content:center;gap:var(--s-5);border-top:0;border-bottom:1px solid var(--line);padding-bottom:0}
 .tabs-bar a{flex-direction:row;gap:var(--s-2);min-height:56px;padding:0 var(--s-4);font-size:var(--fs-sm)}
 .tabs-bar a[aria-current="page"]::before{top:auto;bottom:-1px;width:100%;height:3px;border-radius:0}
 .app{padding-bottom:var(--s-9)}
}

/* Opening */
.hello{margin:var(--s-6) 0 var(--s-5)}
.eyebrow-s{display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink,#8a6a38);font-weight:700;margin-bottom:var(--s-2)}
.hello h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);line-height:1.08;margin:0}
.hello p{margin:var(--s-2) 0 0;color:var(--ink-muted,#4a5a58);font-size:var(--fs-base)}

/* Hero number */
.hero{position:relative;overflow:hidden;display:grid;gap:var(--s-5);grid-template-columns:1fr;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:clamp(1.25rem,1rem + 1.5vw,2rem);box-shadow:var(--shadow-2);margin-bottom:var(--s-5)}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brass),rgba(184,146,90,.25))}
.hero__label{font-size:var(--fs-sm);color:var(--ink-muted,#4a5a58);font-weight:600}
.hero__n{font-family:var(--font-display);font-size:clamp(3.4rem,2.4rem + 5vw,5.5rem);line-height:.95;color:var(--deep);margin:var(--s-1) 0 var(--s-3)}
.delta{display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-sm);font-weight:700;padding:.3em .8em;border-radius:var(--r-pill)}
.delta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.delta--up{background:var(--ok-bg);color:var(--ok-fg)}
.delta--down{background:var(--check-bg);color:var(--check-fg)}
.delta--flat{background:var(--off-bg);color:var(--off-fg)}
.hero__sub{display:block;margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--ink-muted,#4a5a58)}
.hero__chart svg{width:100%;height:auto;display:block;overflow:visible}
@media (min-width:760px){.hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:end}}
.area-line{fill:none;stroke:var(--petrol);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.area-fill{fill:url(#g-area)}
.ga{stop-color:var(--petrol);stop-opacity:.22}
.gb{stop-color:var(--petrol);stop-opacity:0}

/* Channel tiles */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-bottom:var(--s-5)}
.stat{position:relative;display:flex;flex-direction:column;gap:var(--s-1);min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);text-decoration:none;color:inherit;box-shadow:var(--shadow-1);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
a.stat:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.chip{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:var(--s-2)}
.chip svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chip.c-phone{background:var(--petrol)}.chip.c-email{background:var(--brass)}.chip.c-forms{background:#5b8f86}.chip.c-other{background:#9aa9a6}
.stat b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);line-height:1;color:var(--deep)}
.stat .l{font-weight:700;font-size:var(--fs-sm)}
.stat small{color:var(--ink-muted,#4a5a58);font-size:var(--fs-xs);line-height:1.35}
.stat .spark{margin-top:var(--s-2);width:100%;height:28px}
.spark rect{rx:1}
@media (max-width:480px){.stat{padding:var(--s-3)}.chip{width:34px;height:34px}.chip svg{width:18px;height:18px}.stat .spark{display:none}}

/* Chart cards */
.pair{display:grid;gap:var(--s-5);margin-bottom:var(--s-5)}
@media (min-width:900px){.pair{grid-template-columns:1.5fr 1fr}}
.chart{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-1)}
.chart h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-xl);margin:0 0 var(--s-1)}
.chart .cap-s{margin:0 0 var(--s-4);font-size:var(--fs-sm);color:var(--ink-muted,#4a5a58)}
.chart svg.days{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-4) 0 0;padding:0;list-style:none;font-size:var(--fs-sm)}
.legend i{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.45em}
.c-phone{fill:var(--petrol);background:var(--petrol)}
.c-email{fill:var(--brass);background:var(--brass)}
.c-forms{fill:#5b8f86;background:#5b8f86}
.c-other{fill:#9aa9a6;background:#9aa9a6}
.grid-l{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.axis{stroke:var(--line-strong);stroke-width:1}
.tick{font-size:9px;fill:var(--ink-muted,#4a5a58)}
.bar{transform-box:fill-box;transform-origin:50% 100%;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Where leads come from */
.split{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;background:#e7ecea;margin:var(--s-2) 0 var(--s-4)}
.split span{display:block;height:100%}
.split span+span{margin-left:2px}
.src{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-top:1px solid var(--line)}
.src:first-of-type{border-top:0}
.src i{width:.8em;height:.8em;border-radius:50%}
.src .pct{color:var(--ink-muted,#4a5a58);font-size:var(--fs-sm);min-width:2.8em;text-align:right}

/* Leads */
.leads{list-style:none;margin:0;padding:0}
.lead{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-4) 0;border-top:1px solid var(--line)}
.lead:first-child{border-top:0}
.lead .chip{margin:0;width:38px;height:38px}
.lead strong{display:block;font-size:var(--fs-base)}
.lead small{display:block;color:var(--ink-muted,#4a5a58);overflow-wrap:anywhere}
.lead q{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink);quotes:none;overflow-wrap:anywhere}
.lead .pill{white-space:nowrap}
.lead--missed::before{content:"";position:absolute;left:-1rem;top:var(--s-3);bottom:var(--s-3);width:3px;border-radius:3px;background:var(--brass)}
.panel-list{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-2) var(--s-5);box-shadow:var(--shadow-1)}
.empty-big{display:grid;justify-items:center;gap:var(--s-3);text-align:center;background:var(--paper);border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:var(--s-8) var(--s-5)}
.empty-big .chip{width:64px;height:64px;margin:0;background:var(--sunk)}
.empty-big .chip svg{width:30px;height:30px;stroke:var(--petrol)}
.empty-big p{margin:0;max-width:26rem;color:var(--ink-muted,#4a5a58)}
.empty-big strong{font-family:var(--font-display);font-weight:400;font-size:var(--fs-xl);color:var(--deep)}
.page-title{margin:var(--s-6) 0 var(--s-4)}
.page-title h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,1.3rem + 1.8vw,2.4rem);margin:0}
.page-title p{margin:var(--s-1) 0 0;color:var(--ink-muted,#4a5a58)}
.page-title .count{display:inline-block;margin-left:var(--s-2);vertical-align:middle}

/* Loading and entrance */
.sk{background:linear-gradient(90deg,#eef2f0,#f8faf9,#eef2f0);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-lg)}
.sk--hero{height:210px;margin-bottom:var(--s-5)}.sk--row{height:130px}
@keyframes shimmer{to{background-position:-200% 0}}
.rise>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.rise>*:nth-child(2){animation-delay:.06s}.rise>*:nth-child(3){animation-delay:.12s}.rise>*:nth-child(4){animation-delay:.18s}.rise>*:nth-child(5){animation-delay:.24s}.rise>*:nth-child(6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bar,.rise>*,.sk{animation:none}.stat,.tabs-bar a svg{transition:none}a.stat:hover{transform:none}}

/* Top bar sign-out */
.topbar .topnav button{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--on-petrol);min-height:var(--tap);padding:0 var(--s-4);border-radius:var(--r-pill);font:inherit;font-weight:600;cursor:pointer}
.topbar .topnav button:hover{background:rgba(255,255,255,.1)}
.staffbar{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:space-between;background:var(--deep);color:var(--on-petrol);padding:var(--s-2) var(--gutter);font-size:var(--fs-sm);border-bottom:2px solid var(--brass)}
.staffbar a{color:#fff;font-weight:700}
.chart-h{font-family:var(--font-display);font-weight:400;font-size:var(--fs-xl);margin:0 0 var(--s-3)}
#biz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:520px){#biz{display:none}}
@media (max-width:640px){.topbar .topnav{margin:0 0 0 auto;padding:0;width:auto;border-top:0;overflow:visible}}
/* Backend client page */
.ac-hero{display:grid;gap:var(--s-4);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:clamp(1.25rem,1rem + 1.5vw,2rem);box-shadow:var(--shadow-2);position:relative;overflow:hidden;margin:var(--s-4) 0 var(--s-5)}
.ac-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brass),rgba(184,146,90,.25))}
.ac-hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);line-height:1.08;margin:0}
.ac-hero .meta{margin:var(--s-1) 0 0}
.ac-banner{display:flex;gap:var(--s-3);align-items:flex-start;border-radius:var(--r-md);padding:var(--s-3) var(--s-4);font-size:var(--fs-sm)}
.ac-banner svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.ac-banner--ok{background:var(--ok-bg);color:var(--ok-fg)}
.ac-banner--warn{background:var(--check-bg);color:var(--check-fg)}
.ac-banner ul{margin:var(--s-1) 0 0;padding-left:1.1em}
.ac-head{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:flex-start;justify-content:space-between}
.ac-sec{font-family:var(--font-display);font-weight:400;font-size:var(--fs-xl);margin:var(--s-6) 0 var(--s-3)}
.ac-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:var(--s-3)}
.ac-tile{display:flex;flex-direction:column;gap:var(--s-1);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);text-decoration:none;color:inherit;box-shadow:var(--shadow-1);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ac-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.ac-tile:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.ac-tile .chip{background:var(--petrol)}
.ac-tile strong{color:var(--deep)}
.ac-tile span{color:var(--ink-muted,#4a5a58);font-size:var(--fs-sm)}
.ac-rows{list-style:none;margin:0;padding:var(--s-2) var(--s-5);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.ac-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-top:1px solid var(--line)}
.ac-row:first-child{border-top:0}
.ac-row .chip{margin:0}
.ac-row strong{display:block}
.ac-row small{display:block;color:var(--ink-muted,#4a5a58)}
.ac-row .spark{width:84px;height:26px}
@media (max-width:560px){.ac-row{grid-template-columns:auto minmax(0,1fr) auto}.ac-row .spark{display:none}}
.ac-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
@media (prefers-reduced-motion:reduce){.ac-tile{transition:none}.ac-tile:hover{transform:none}}

/* Backend dashboard */
.hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.fact{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:var(--s-4)}
.fact .l{font-size:var(--fs-sm);color:var(--ink-muted,#4a5a58);font-weight:600}
.fact b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);color:var(--deep)}
.fact small{color:var(--ink-muted,#4a5a58);font-size:var(--fs-xs)}
@media (max-width:560px){.hero__facts{grid-template-columns:1fr}.fact{border-left:0;border-top:1px solid var(--line);padding:var(--s-3) 0 0}}
.crow-list{list-style:none;margin:0;padding:0}
.crow{display:grid;grid-template-columns:minmax(10rem,1.1fr) 2.4fr auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow__name{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.crow__name strong{color:var(--deep);font-size:var(--fs-lg)}
.crow__name:hover strong{text-decoration:underline}
.crow small{color:var(--ink-muted,#4a5a58)}
.crow__nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.crow__nums span{display:flex;flex-direction:column}
.crow__nums b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-xl);color:var(--deep)}
@media (max-width:760px){.crow{grid-template-columns:1fr auto}.crow__nums{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr))}}
.funnel{display:grid;gap:var(--s-2)}
.frow{display:grid;grid-template-columns:7.5rem 1fr 3rem;gap:var(--s-3);align-items:center}
.frow>b{text-align:right}
.fbar{height:12px;background:#e7ecea;border-radius:var(--r-pill);overflow:hidden}
.fbar span{display:block;height:100%;border-radius:var(--r-pill);background:var(--petrol)}
.fbar .k-won{background:var(--ok-dot,#2f7d6b)}.fbar .k-lost{background:#b9776a}.fbar .k-positive_replies,.fbar .k-meetings,.fbar .k-proposals{background:var(--brass)}
.chart .stats{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
@media (max-width:560px){.frow{grid-template-columns:5.6rem 1fr 2.4rem}}
.mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:var(--s-4) 0}
.mstats span{display:flex;flex-direction:column;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.mstats b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-2xl,1.9rem);color:var(--deep)}
.mstats small{color:var(--ink-muted,#4a5a58);font-size:var(--fs-xs)}
.client h3{margin:var(--s-5) 0 var(--s-2);font-size:var(--fs-lg)}
@media (max-width:420px){.mstats span{padding:var(--s-2) var(--s-3)}.mstats b{font-size:1.5rem}}
@media (max-width:640px){.topbar--backend .topnav{flex-wrap:nowrap;justify-content:space-between;gap:0}.topbar--backend .topnav a{flex:1 1 auto;justify-content:center;padding:0 .35rem;font-size:var(--fs-sm);white-space:nowrap}}

/* ===== Motion. Weighting: Jakub (polish) primary, Emil (fast controls) secondary, Jhey (milestones only).
   Frequent controls: 120 to 160 ms. Entrances: about 480 ms. Rare celebration: expressive. Transform and opacity only.
   No looping attention pulses. Everything below is switched off under prefers-reduced-motion. ===== */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-settle:cubic-bezier(.16,1,.3,1)}
.rise>*{animation:rise .48s var(--ease-out) both}
.rise>*:nth-child(n){animation-delay:calc(var(--i,0)*0ms)}
.rise>*:nth-child(2){animation-delay:.05s}.rise>*:nth-child(3){animation-delay:.1s}.rise>*:nth-child(4){animation-delay:.15s}.rise>*:nth-child(5){animation-delay:.2s}.rise>*:nth-child(6){animation-delay:.25s}.rise>*:nth-child(7){animation-delay:.3s}.rise>*:nth-child(8){animation-delay:.35s}.rise>*:nth-child(9){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
/* Alive controls */
.live,.stat,.tabs-bar a,.btn,button{-webkit-tap-highlight-color:transparent}
.has-ripple{overflow:hidden}
.live,.btn,.stat,.ac-tile,.tabs-bar a{transition:transform .14s var(--ease-out),box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.live:active,.btn:active,.stat:active,.ac-tile:active,.tabs-bar a:active{transform:scale(.97)}
.ripple{position:absolute;border-radius:50%;background:rgba(14,58,64,.16);transform:scale(0);opacity:1;pointer-events:none;animation:ripple .55s var(--ease-out) forwards}
.btn-primary .ripple,.topbar .ripple{background:rgba(255,255,255,.28)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.tabs-bar a[aria-current="page"] svg{animation:pop .42s var(--ease-settle) both}
@keyframes pop{from{transform:scale(.82)}to{transform:scale(1)}}
/* Live chip: static dot; it pings once when a new lead is found */
.livechip{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-sm);font-weight:600;color:var(--ok-fg);background:var(--ok-bg);padding:.3em .8em;border-radius:var(--r-pill);margin-bottom:var(--s-3)}
.livechip .dot{width:.55em;height:.55em;border-radius:50%;background:var(--ok-dot,#2f7d6b)}
/* Toasts and confetti */
#toasts{position:fixed;z-index:60;left:var(--s-3);right:var(--s-3);bottom:calc(76px + env(safe-area-inset-bottom));display:grid;gap:var(--s-2);justify-items:center;pointer-events:none}
@media (min-width:760px){#toasts{left:auto;right:var(--s-5);bottom:auto;top:var(--s-5);justify-items:end}}
.toast{pointer-events:auto;display:flex;gap:var(--s-3);align-items:center;background:var(--deep);color:#fff;border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);box-shadow:var(--shadow-2);max-width:24rem;animation:toastin .36s var(--ease-settle) both}
.toast small{display:block;color:var(--on-petrol-muted)}
.toast .chip{margin:0;width:34px;height:34px}
.toast--gold{border:1px solid var(--brass)}
.chip--gold{background:var(--brass)}
.toast--out{animation:toastout .3s ease both}
@keyframes toastin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(8px)}}
#confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:70;overflow:hidden}
#confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall 2.2s var(--ease-out) forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx,0),105vh) rotate(var(--r,360deg));opacity:.9}}
/* Hero chart */
.hero{grid-template-columns:1fr}
@media (min-width:760px){.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}}
.hc-wrap{position:relative}
.hc{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.prev-line{fill:none;stroke:var(--line-strong);stroke-width:1.6;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.cross{stroke:var(--brass);stroke-width:1;vector-effect:non-scaling-stroke}
.cdot{fill:var(--paper);stroke:var(--petrol);stroke-width:2}
.tip{position:absolute;top:-8px;transform:translate(-50%,-100%);background:var(--deep);color:#fff;border-radius:var(--r-md);padding:var(--s-1) var(--s-3);font-size:var(--fs-sm);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-2)}
.tip small{display:block;color:var(--on-petrol-muted)}
.lg-now,.lg-prev{display:inline-block;width:1.2em;height:0;border-top:2px solid var(--petrol);margin-right:.5em;vertical-align:middle}
.lg-prev{border-top:2px dashed var(--line-strong)}
.value{margin-top:var(--s-3)}
.value__line{margin:0 0 var(--s-1);font-size:var(--fs-sm);color:var(--ink-muted,#4a5a58)}
.value__line b{color:var(--deep)}
/* Rings */
.pair--even{grid-template-columns:1fr}
@media (min-width:900px){.pair--even{grid-template-columns:1fr 1fr}}
.rings__row{display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:var(--s-5);align-items:center}
@media (max-width:420px){.rings__row{grid-template-columns:1fr;justify-items:center}}
.rings__svg{width:100%;max-width:170px;height:auto}
.rtrack{fill:none;stroke:#e7ecea;stroke-width:8}
.rarc{fill:none;stroke-width:8;stroke-linecap:round}
.rarc.r1{stroke:var(--petrol)}.rarc.r2{stroke:var(--brass)}.rarc.r3{stroke:#5b8f86}
.rings__c{font-family:var(--font-display);font-size:15px;fill:var(--deep)}
.rings__leg{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);width:100%}
.rings__leg li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-3);align-items:center}
.rings__leg small{display:block;color:var(--ink-muted,#4a5a58);font-size:var(--fs-xs)}
.rd{width:.8em;height:.8em;border-radius:50%}.rd.r1{background:var(--petrol)}.rd.r2{background:var(--brass)}.rd.r3{background:#5b8f86}
.goal-btn{margin-top:var(--s-3)}
/* Calendar */
.cal__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:var(--s-2) 0 var(--s-4)}
.cal__d{aspect-ratio:1;border-radius:5px;background:#eef2f0;animation:cellin .38s var(--ease-out) both}
.cal__d.l1{background:#cfe0dc}.cal__d.l2{background:#9bc0b8}.cal__d.l3{background:#5b8f86}.cal__d.l4{background:var(--petrol)}
@keyframes cellin{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.week__dots{display:flex;gap:var(--s-2);margin-bottom:var(--s-2)}
.wd{flex:1;display:grid;justify-items:center;gap:4px}
.wd::before{content:"";width:100%;max-width:34px;aspect-ratio:1;border-radius:50%;border:2px solid var(--line-strong);background:transparent;transition:background-color .3s ease}
.wd.on::before{background:var(--brass);border-color:var(--brass)}
.wd small{font-size:var(--fs-xs);color:var(--ink-muted,#4a5a58);order:2}
/* Milestones */
.mile__row{list-style:none;margin:var(--s-3) 0 var(--s-4);padding:0;display:flex;gap:var(--s-3);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s-1)}
.mile__row::-webkit-scrollbar{display:none}
.badge{flex:none;display:grid;justify-items:center;gap:2px;min-width:64px;opacity:.5}
.badge.got{opacity:1}
.badge__c{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px dashed var(--line-strong)}
.badge__c svg{width:22px;height:22px;fill:none;stroke:var(--ink-muted,#4a5a58);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge.got .badge__c{border:0;background:var(--brass)}
.badge.got .badge__c svg{stroke:#fff;fill:#fff}
.badge b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lg);color:var(--deep)}
.badge small{font-size:var(--fs-xs);color:var(--ink-muted,#4a5a58)}
.mile__bar{height:10px;border-radius:var(--r-pill);background:#e7ecea;overflow:hidden}
.mile__bar span{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--petrol),var(--brass));border-radius:var(--r-pill);transition:transform 1s var(--ease-out)}
/* When leads arrive */
.hrs__call{margin:var(--s-2) 0 var(--s-4);font-size:var(--fs-base)}
.hrs__call b{font-family:var(--font-display);font-weight:400;font-size:2rem;color:var(--deep);margin-right:.15em}
.hrs__open{fill:rgba(14,58,64,.05)}
/* Ask dialog */
dialog.ask{border:0;border-radius:var(--r-lg);padding:var(--s-5);width:min(92vw,26rem);box-shadow:var(--shadow-2);animation:toastin .3s var(--ease-out) both}
dialog.ask::backdrop{background:rgba(8,42,47,.45);backdrop-filter:blur(3px)}
dialog.ask h2{font-family:var(--font-display);font-weight:400;margin:0 0 var(--s-1)}
dialog.ask label{display:block;margin-top:var(--s-3);font-weight:600}
dialog.ask input{width:100%;margin-top:var(--s-1)}
dialog.ask .actions{display:flex;gap:var(--s-3);margin-top:var(--s-4)}
@media (prefers-reduced-motion:reduce){
 .rise>*,.cal__d,.bar,.tabs-bar a[aria-current="page"] svg,.toast,dialog.ask,#confetti i{animation:none!important}
 .ripple{display:none}
 .live,.btn,.stat,.ac-tile,.tabs-bar a,.mile__bar span,.wd::before{transition:none!important}
 .live:active,.btn:active,.stat:active,.ac-tile:active,.tabs-bar a:active{transform:none}
 .mile__bar span{transform:scaleX(1)}
}

/* ===== Motion tiers.  T1 subtle: rise, hover, press, tooltips.  T2 noticeable: line draw, rings, bars, count-up, calendar.
   T3 emphasized (rare, earned): new-lead ping and bump, badge shine, confetti and gold toast. ===== */
/* Scroll: blocks reveal once as they enter the screen. Only active when the browser supports it, so nothing can stay hidden. */
.js-io .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.js-io .reveal.in{opacity:1;transform:none}
.js-io .reveal:not(.in) .bar,.js-io .reveal:not(.in) .cal__d{animation-play-state:paused}
.prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:linear-gradient(90deg,var(--petrol),var(--brass));transform-origin:left center;transform:scaleX(0);pointer-events:none}
.tabs-bar{transition:transform .22s var(--ease-out),box-shadow .2s ease}
.tabs-bar.away{transform:translateY(100%)}
@media (min-width:760px){.tabs-bar.stuck{box-shadow:0 6px 18px rgba(8,42,47,.08)}}
/* T3 */
.livechip .dot{position:relative}
.livechip .dot.ping::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;border:2px solid var(--ok-dot,#2f7d6b);animation:pingone 1.1s var(--ease-out) 1 both}
@keyframes pingone{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.hero__n.bump{animation:bump .6s var(--ease-settle) both}
@keyframes bump{from{transform:scale(1.12)}to{transform:scale(1)}}
.badge.fresh .badge__c{animation:shine 1.4s var(--ease-out) 1 both}
@keyframes shine{0%{transform:scale(.7);box-shadow:0 0 0 0 rgba(184,146,90,.7)}55%{transform:scale(1.14);box-shadow:0 0 0 14px rgba(184,146,90,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(184,146,90,0)}}
/* Older or slower phones: same content, no show. Lite mode is chosen by the script (low memory, few cores, data saver). */
.lite *,.lite *::before,.lite *::after{animation:none!important;transition:none!important}
.lite .ripple,.lite #confetti,.lite .prog{display:none}
.lite .tabs-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
.lite .reveal{opacity:1;transform:none}
.lite .mile__bar span{transform:scaleX(1)}
/* Fallbacks for browsers without these features */
@supports not (aspect-ratio:1){.cal__d::before{content:"";display:block;padding-top:100%}.wd::before{height:34px}}
dialog.ask:not([open]){display:none}
dialog.ask[open]{display:block}
@supports not (backdrop-filter:blur(1px)){.tabs-bar{background:#fff}}
@media (prefers-reduced-motion:reduce){.prog{display:none}.tabs-bar.away{transform:none}.reveal{opacity:1!important;transform:none!important}.livechip .dot.ping::after,.hero__n.bump,.badge.fresh .badge__c{animation:none!important}}

/* ===== Premium finish: depth, drawn icons, and a call to action worth pressing. Layered offset shadows, hairline edges, one brass accent. ===== */
::selection{background:rgba(184,146,90,.38);color:var(--deep)}
html{scrollbar-color:#b4c3bf transparent;scrollbar-width:thin}
input,select,textarea,button{accent-color:var(--petrol);caret-color:var(--petrol)}
.app a{text-underline-offset:.22em;text-decoration-thickness:1px}
/* Icon family: soft fill under a clean line */
.ic{display:block}
.ic-d{fill:currentColor;stroke:none;opacity:.2}
.ic-l{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.chip svg{color:#fff;stroke:none;fill:none}
.chip .ic-l{stroke:#fff;stroke-width:1.7}
.chip .ic-d{fill:#fff;opacity:.34}
.chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.18),0 8px 14px -8px rgba(8,42,47,.6)}
.chip.c-phone{background:linear-gradient(150deg,#21616c 0%,#0e3a40 55%,#082a2f 100%)}
.chip.c-email{background:linear-gradient(150deg,#dcba85 0%,#b8925a 55%,#94703b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.16),0 8px 14px -8px rgba(148,112,59,.75)}
.chip.c-forms{background:linear-gradient(150deg,#86b8ae 0%,#5b8f86 55%,#3f7268 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.16),0 8px 14px -8px rgba(63,114,104,.75)}
.chip.c-other{background:linear-gradient(150deg,#b9c6c3,#8c9c98)}
.chip--gold{background:linear-gradient(150deg,#e3c28e,#b8925a 60%,#94703b)}
.ac-tile .chip{background:linear-gradient(150deg,#21616c 0%,#0e3a40 55%,#082a2f 100%)}
.ac-tile .chip svg,.ac-tile .ic-l{stroke-width:1.7}
.tabs-bar .ic{width:25px;height:25px;stroke-width:1.7}
.tabs-bar a svg{fill:none;stroke:none}
.tabs-bar .ic-l{stroke:currentColor;stroke-width:1.7}
.tabs-bar .ic-d{fill:currentColor;opacity:.16}
.tabs-bar a[aria-current="page"] .ic-d{fill:var(--brass);opacity:.5}
.tabs-bar a[aria-current="page"] .ic-l{stroke:var(--deep);stroke-width:1.9}
.lead .chip,.toast .chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 10px -6px rgba(8,42,47,.55)}
.badge.got .badge__c{background:linear-gradient(150deg,#e3c28e,#b8925a 55%,#94703b);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.15),0 8px 14px -8px rgba(148,112,59,.8)}
.badge .badge__c svg{fill:none;stroke:none}
.badge .ic-l{stroke:var(--ink-muted,#4a5a58);stroke-width:1.7}
.badge .ic-d{fill:var(--ink-muted,#4a5a58);opacity:.14}
.badge.got .ic-l{stroke:#fff}.badge.got .ic-d{fill:#fff;opacity:.4}
.empty-big .chip{width:64px;height:64px}
.empty-big .chip svg{width:30px;height:30px}
.empty-big .chip{background:linear-gradient(150deg,#21616c,#082a2f)}
.empty-big .chip .ic-l{stroke:#fff}.empty-big .chip .ic-d{fill:#fff}
.delta svg,.cta__go svg{fill:none}
.delta .ic-l{stroke:currentColor;stroke-width:2.4}
/* The call to action */
.cta,.btn-primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:0 1.6em;border:0;border-radius:var(--r-pill);color:#fff;font-family:var(--font-body);font-weight:700;font-size:var(--fs-base);line-height:1;letter-spacing:.005em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
 background:linear-gradient(180deg,#1a5560 0%,#0e3a40 52%,#0a2f35 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.28),0 1px 2px rgba(8,42,47,.4),0 14px 26px -12px rgba(8,42,47,.65);
 transition:transform .16s var(--ease-out),box-shadow .22s ease,filter .2s ease}
.cta{padding:0 .6em 0 1.6em}
.cta::before,.btn-primary::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.cta:hover::before,.btn-primary:hover::before{transform:translateX(330%) skewX(-18deg);transition:transform .85s var(--ease-out)}
.cta:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.28),0 2px 4px rgba(8,42,47,.35),0 18px 30px -12px rgba(8,42,47,.7);color:#fff}
.cta:active,.btn-primary:active{transform:translateY(0) scale(.98);box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 4px 10px -6px rgba(8,42,47,.6)}
.cta:focus-visible,.btn-primary:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.btn-primary:disabled,.btn-primary[aria-busy="true"]{opacity:.6;filter:saturate(.6);cursor:not-allowed;box-shadow:none;transform:none}
.cta__go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,#e3c28e,#b8925a 60%,#94703b);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px -3px rgba(0,0,0,.4);transition:transform .2s var(--ease-out)}
.cta__go svg{width:18px;height:18px;stroke:#082a2f;stroke-width:2.2}
.cta__go .ic-l{stroke:#082a2f;stroke-width:2.2}
.cta:hover .cta__go{transform:translateX(3px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.4em;border-radius:var(--r-pill);background:#fff;color:var(--deep);border:1px solid rgba(14,58,64,.2);font-family:var(--font-body);font-weight:650;font-size:var(--fs-base);cursor:pointer;box-shadow:0 1px 1px rgba(8,42,47,.06),0 8px 16px -12px rgba(8,42,47,.35);transition:transform .16s var(--ease-out),border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn-ghost:hover{border-color:var(--petrol);background:var(--sunk);transform:translateY(-1px)}
.btn-ghost:active{transform:scale(.98)}
.btn{border-radius:var(--r-pill);background:linear-gradient(180deg,#fff,#f5f8f7);border:1px solid rgba(14,58,64,.2);box-shadow:0 1px 1px rgba(8,42,47,.06),0 8px 16px -12px rgba(8,42,47,.35)}
.btn:hover{border-color:var(--petrol)}
.btn-primary{background:linear-gradient(180deg,#1a5560 0%,#0e3a40 52%,#0a2f35 100%);border:0}
.btn-primary:hover{background:linear-gradient(180deg,#1a5560 0%,#0e3a40 52%,#0a2f35 100%)}
/* Hero: one sentence, the number inside it */
.hero{background:radial-gradient(520px 220px at 100% 0,rgba(184,146,90,.13),transparent 70%),linear-gradient(180deg,#fff,#fdfcf9);border-color:rgba(14,58,64,.14)}
.hero__copy{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.hero__s{font-family:var(--font-display);font-weight:400;font-size:clamp(1.55rem,1.15rem + 2vw,2.4rem);line-height:1.18;margin:0;color:var(--ink);text-wrap:balance}
.hero__s .big{font-weight:400;font-size:1.5em;line-height:1;color:var(--deep);padding:0 .06em;letter-spacing:-.02em}
.trend--up{color:var(--ok-fg)}.trend--down{color:var(--check-fg)}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
@media (max-width:420px){.hero__acts>*{flex:1 1 100%}}
.value__line{margin:0;font-size:var(--fs-sm);color:var(--ink-muted,#4a5a58)}
/* Tiles: a clear way in */
.stat{background:linear-gradient(180deg,#fff,#fcfbf8);border:1px solid rgba(14,58,64,.12);box-shadow:0 1px 1px rgba(8,42,47,.05),0 12px 24px -16px rgba(8,42,47,.35)}
a.stat:hover{box-shadow:0 2px 3px rgba(8,42,47,.08),0 18px 30px -16px rgba(8,42,47,.45)}
.stat__go{position:absolute;top:var(--s-3);right:var(--s-3);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sunk);border:1px solid var(--line);color:var(--deep);transition:transform .2s var(--ease-out),background-color .2s ease,color .2s ease}
.stat__go svg{width:15px;height:15px;fill:none}
.stat__go .ic-l{stroke:currentColor;stroke-width:2.2}
a.stat:hover .stat__go{transform:translateX(2px);background:var(--petrol);color:#fff;border-color:var(--petrol)}
.chart,.panel-list,.ac-rows,.ac-tile{border-color:rgba(14,58,64,.12);box-shadow:0 1px 1px rgba(8,42,47,.05),0 14px 28px -20px rgba(8,42,47,.4)}
/* A missed call is a quiet tint and a pill, not a coloured bar */
.lead--missed::before{display:none}
.lead--missed{background:linear-gradient(90deg,rgba(184,146,90,.11),rgba(184,146,90,0) 75%);margin:0 calc(var(--s-5) * -1);padding-left:var(--s-5);padding-right:var(--s-5)}
.toast{background:linear-gradient(180deg,#0f3b42,#082a2f);box-shadow:0 2px 4px rgba(8,42,47,.3),0 18px 34px -14px rgba(8,42,47,.7)}
.lite .cta::before,.lite .btn-primary::before{display:none}
@media (prefers-reduced-motion:reduce){.cta::before,.btn-primary::before{display:none}.cta,.btn-primary,.btn-ghost,.cta__go,.stat__go{transition:none!important}.cta:hover,.btn-primary:hover,.btn-ghost:hover{transform:none}}
.cta,.btn-primary,.btn-ghost{white-space:nowrap;line-height:1.15}
.cta{justify-content:space-between}
@media (max-width:420px){.cta{padding-left:1.3em;font-size:var(--fs-sm)}.btn-ghost{font-size:var(--fs-sm)}}