/* HC Client Hub styles. Base = the approved mockup hub3.src.html (18 Oct 2026 copy, unchanged),
   additions for the live Hub at the end of the file. */
/* Layout: GHL-portal shape (light icon sidebar, stat cards, tabbed finances, calendar) rebuilt with Apple materials:
   translucent top bar, sheets that slide from their trigger side, press feedback on pointer-down. Phone: bottom tab bar + More sheet. */
:root{
  --bg:#F3F4F6; --surface:#FFFFFF; --raised:#FFFFFF; --sunken:#EEF0F3; --side:#FAFAFB;
  --ink:#0D0D0D; --ink-2:#3C4048; --muted:#6B7280; --faint:#9AA0A9; --line:rgba(13,13,13,.08); --line-2:rgba(13,13,13,.12);
  --accent:#2563EB; --accent-ink:#FFFFFF; --accent-soft:#EAF1FE; --accent-text:#1D4FC4;
  --good:#16794A; --good-soft:#E5F4EB; --warn:#9A5B0B; --warn-soft:#FCF0DE; --bad:#B42318; --bad-soft:#FDECEA;
  --hero:#0D0D0D; --hero-2:#1B1D21; --hero-ink:#FFFFFF; --hero-muted:#9CA3AF;
  --bar:rgba(243,244,246,.72); --scrim:rgba(13,13,13,.32);
  --ui:system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --display:"Rubik",system-ui,-apple-system,sans-serif;
  --r-lg:20px; --r:14px; --r-sm:10px;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --shadow:0 1px 1px rgba(13,13,13,.03),0 6px 20px -10px rgba(13,13,13,.12);
  --shadow-lg:0 24px 60px -20px rgba(13,13,13,.28),0 2px 6px rgba(13,13,13,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1012; --surface:#17191C; --raised:#1D2024; --sunken:#202328; --side:#131416;
  --ink:#F2F3F5; --ink-2:#C9CDD3; --muted:#959BA5; --faint:#6E747D; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --accent:#4C82F2; --accent-ink:#FFFFFF; --accent-soft:#17233D; --accent-text:#93B4F8;
  --good:#4CC384; --good-soft:#12291C; --warn:#E5A853; --warn-soft:#2D2312; --bad:#F27166; --bad-soft:#2F1614;
  --hero:#08090A; --hero-2:#16181B; --bar:rgba(15,16,18,.72); --scrim:rgba(0,0,0,.55);
  --shadow:0 1px 1px rgba(0,0,0,.3),0 6px 20px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1012; --surface:#17191C; --raised:#1D2024; --sunken:#202328; --side:#131416;
  --ink:#F2F3F5; --ink-2:#C9CDD3; --muted:#959BA5; --faint:#6E747D; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --accent:#4C82F2; --accent-ink:#FFFFFF; --accent-soft:#17233D; --accent-text:#93B4F8;
  --good:#4CC384; --good-soft:#12291C; --warn:#E5A853; --warn-soft:#2D2312; --bad:#F27166; --bad-soft:#2F1614;
  --hero:#08090A; --hero-2:#16181B; --bar:rgba(15,16,18,.72); --scrim:rgba(0,0,0,.55);
  --shadow:0 1px 1px rgba(0,0,0,.3),0 6px 20px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--ui);-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}
.ico{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:30}
.skip:focus{left:8px}

.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100%}

/* Sidebar: light, like the GHL portal you liked */
.side{position:sticky;top:0;height:100vh;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px 14px;gap:14px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px}
.brand img{width:32px;height:32px;border-radius:50%}
.brand b{font:600 15px/1.15 var(--display);display:block}
.brand b span{color:var(--accent)}
.brand small{font-size:12px;color:var(--muted)}
.ws{display:flex;align-items:center;gap:10px;margin:2px 4px 0;padding:10px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.ws .av{width:30px;height:30px;border-radius:9px;background:#2B2118;color:#F3D9B1;display:grid;place-items:center;font:600 12px var(--display)}
.ws b{font-size:13px;font-weight:600;display:block;line-height:1.2}
.ws small{font-size:12px;color:var(--muted)}
.grp{font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;padding:10px 10px 4px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--ink-2);transition:background-color .15s ease,color .15s ease}
.nav button .ico{color:var(--muted)}
@media (hover:hover) and (pointer:fine){.nav button:hover{background:var(--sunken)}}
.nav button[aria-current="page"]{background:var(--accent);color:#fff}
.nav button[aria-current="page"] .ico{color:#fff}
.badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:11px;font-weight:600;display:grid;place-items:center}
.nav button[aria-current="page"] .badge{background:rgba(255,255,255,.22);color:#fff}
.me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.me .rh{width:34px;height:34px;border-radius:50%;background:var(--hero);color:#fff;display:grid;place-items:center;font:600 12px var(--display);position:relative}
.me .rh::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22C55E;border:2px solid var(--surface)}
.me b{font-size:13px;display:block}
.me small{font-size:12px;color:var(--muted);line-height:1.35;display:block}

/* Top bar: translucent material, content scrolls under */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;align-items:center;gap:12px;padding:12px clamp(16px,3vw,36px);background:var(--bar);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(var(--bar),transparent);pointer-events:none}
.top h1{font:600 18px/1.2 var(--display);letter-spacing:-.01em}
.top .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:500;white-space:nowrap}
.chip.sample{background:var(--warn-soft);color:var(--warn)}
.iconbtn{position:relative;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2);transition:transform .1s var(--ease-out)}
.iconbtn:active{transform:scale(.96)}
.dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--surface)}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 10px 5px 5px;white-space:nowrap}
.switch i{width:30px;height:18px;border-radius:999px;background:var(--line-2);position:relative;transition:background-color .2s ease}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .25s var(--ease-out)}
.switch[aria-pressed="true"] i{background:#22C55E}
.switch[aria-pressed="true"] i::after{transform:translateX(12px)}

.main{min-width:0;padding:8px clamp(16px,3vw,36px) 72px}
.view{display:none;max-width:1180px;margin:0 auto}
.view.on{display:block;animation:in .18s var(--ease-out)}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0 18px}
.ph h2{font:600 clamp(24px,2.6vw,30px)/1.1 var(--display);letter-spacing:-.02em}
.ph p{color:var(--muted);margin-top:6px;max-width:62ch}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);min-width:0}
.card h3{font:600 15px/1.3 var(--ui);letter-spacing:-.01em}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:12px}
.link{border:0;background:none;color:var(--accent-text);font-weight:500;font-size:13px;padding:4px 2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;border:1px solid transparent;padding:10px 16px;font-weight:600;font-size:14px;white-space:nowrap;transition:transform .1s var(--ease-out),background-color .15s ease,border-color .15s ease,opacity .15s ease}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.plain{background:var(--sunken);color:var(--ink)}
.btn.line{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
@media (hover:hover) and (pointer:fine){.btn.primary:hover{filter:brightness(1.06)}.btn.line:hover,.btn.plain:hover{border-color:var(--line-2)}}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.info{background:var(--accent-soft);color:var(--accent-text)} .pill.neutral{background:var(--sunken);color:var(--ink-2)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.src{display:none;margin-top:12px;font:500 11px/1.4 ui-monospace,"SF Mono",monospace;color:var(--accent-text);background:var(--accent-soft);border-radius:8px;padding:5px 8px;width:fit-content;max-width:100%}
body.annot .src{display:block}
.seg{display:inline-flex;background:var(--sunken);border-radius:11px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-2);transition:background-color .15s ease}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:var(--shadow)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}.c3{grid-column:span 3}
.list>*+*{border-top:1px solid var(--line)}
.li{display:flex;align-items:center;gap:12px;padding:12px 0}
.li .t{flex:1;min-width:0}
.li b{font-weight:600;font-size:14px;display:block}
.li small{display:block;font-size:12px;color:var(--muted)}
.ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 36px}
.ic.blue{background:var(--accent-soft);color:var(--accent-text)} .ic.amber{background:var(--warn-soft);color:var(--warn)} .ic.green{background:var(--good-soft);color:var(--good)} .ic.grey{background:var(--sunken);color:var(--ink-2)}

/* Home */
.hello h2{font:600 clamp(26px,3vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.hero{background:radial-gradient(120% 140% at 100% 0%,#1E3A8A 0%,transparent 55%),linear-gradient(160deg,var(--hero-2),var(--hero));color:var(--hero-ink);border:0;display:flex;flex-direction:column;gap:18px;justify-content:space-between}
.hero .lab{color:var(--hero-muted);font-size:13px}
.mer{font:600 64px/1 var(--display);letter-spacing:-.035em}
.mer small{font-size:22px;color:var(--hero-muted);margin-left:2px}
.gauge{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:visible}
.gauge .fill{position:absolute;left:0;top:0;bottom:0;width:68%;border-radius:999px;background:linear-gradient(90deg,#3B82F6,#60A5FA);transform-origin:left;transform:scaleX(var(--g,1));transition:transform .45s var(--ease-out)}
.gauge .be{position:absolute;top:-6px;left:40%;width:2px;height:20px;border-radius:2px;background:#fff}
.gkey{display:flex;justify-content:space-between;font-size:12px;color:var(--hero-muted);margin-top:8px}
.hero-row{display:flex;gap:22px;flex-wrap:wrap}
.hero-row div small{display:block;color:var(--hero-muted);font-size:12px}
.hero-row div b{font:600 18px var(--display)}
.okpill{background:rgba(74,222,128,.14);color:#86EFAC}
.note{display:flex;flex-direction:column;gap:12px}
.note .who{display:flex;gap:10px;align-items:center}
.note .who .rh{width:36px;height:36px;border-radius:50%;background:var(--hero);color:#fff;display:grid;place-items:center;font:600 12px var(--display)}
.note p.body{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:64ch}
.kpi .v{font:600 26px/1.15 var(--display);letter-spacing:-.02em;margin-top:6px}
.delta{font-size:12px;font-weight:500;margin-top:4px}
.up{color:var(--good)} .down{color:var(--bad)} .flat{color:var(--muted)}
.spark{display:block;width:100%;height:28px;margin-top:10px}
.spark path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.next-call .when{font:600 22px/1.2 var(--display);letter-spacing:-.01em;margin:6px 0 2px}
.prog{height:6px;border-radius:999px;background:var(--sunken);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:999px;transform-origin:left;transition:transform .45s var(--ease-out)}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:14px}
.st{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.st i{width:16px;height:16px;border-radius:50%;border:1.6px solid var(--line-2);flex:0 0 16px;margin-top:1px;display:grid;place-items:center}
.st.done{color:var(--ink-2)} .st.done i{background:var(--accent);border-color:var(--accent)}
.st.done i::after{content:"";width:6px;height:3px;border:solid #fff;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg) translate(1px,-1px)}
.work .li .pill{flex:0 0 auto}
.nps{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;margin:12px 0 8px}
.nps button{border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:7px 0;font-size:13px;font-weight:600;color:var(--ink-2);transition:transform .1s var(--ease-out),background-color .15s ease,color .15s ease}
.nps button:active{transform:scale(.95)}
.nps button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.refer{background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%)}

/* Results */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font:11px var(--ui)}
.chart .gl{stroke:var(--line-2);stroke-width:1}
.chart .bel{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 4}
.chart .ser{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--accent);opacity:.08}
.chart .end{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.chart .hit{fill:transparent}
.chart .xh{stroke:var(--line-2);stroke-width:1}
.chart .bet{fill:var(--ink-2);font-weight:600}
.cw{position:relative}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;line-height:1.4;padding:8px 10px;border-radius:10px;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap;opacity:0;transition:opacity .12s ease}
.tip.on{opacity:1}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:16px;height:2px;background:var(--accent)} .legend i.d{background:repeating-linear-gradient(90deg,var(--ink-2) 0 4px,transparent 4px 8px)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:12px;font-weight:500;color:var(--muted);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 10px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
tbody tr+tr td{border-top:1px solid var(--line)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags button{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;color:var(--ink-2);transition:background-color .15s ease,color .15s ease,transform .1s var(--ease-out)}
.tags button:active{transform:scale(.95)}
.tags button[aria-pressed="true"][data-q="good"]{background:var(--good-soft);color:var(--good);border-color:transparent}
.tags button[aria-pressed="true"][data-q="area"]{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.tags button[aria-pressed="true"][data-q="junk"]{background:var(--bad-soft);color:var(--bad);border-color:transparent}

/* Approvals */
.ads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ad{display:flex;flex-direction:column;gap:14px;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.ad.gone{opacity:0;transform:scale(.97)}
.post{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--raised)}
.ph2{display:flex;gap:10px;align-items:center;padding:10px 12px}
.ph2 .av{width:30px;height:30px;border-radius:50%;background:#2B2118;color:#F3D9B1;display:grid;place-items:center;font:600 11px var(--display)}
.ph2 b{font-size:13px;display:block;line-height:1.2}
.ph2 small{font-size:11px;color:var(--muted)}
.ptext{padding:0 12px 10px;font-size:13px;color:var(--ink-2)}
.creative{aspect-ratio:1/1;position:relative;display:grid;place-items:end start;padding:18px;color:#fff;overflow:hidden;max-width:100%}
.creative.c1{background:radial-gradient(120% 90% at 70% 30%,#E9B872 0%,#B4642F 40%,#3A1E12 100%)}
.creative.c2{background:radial-gradient(110% 80% at 30% 25%,#9CC5B0 0%,#3F7A63 45%,#13281F 100%)}
.jar{position:absolute;right:18%;top:22%;width:26%;aspect-ratio:3/4;border-radius:10px 10px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.jar.b{right:46%;top:34%;width:21%}
.creative strong{font:600 clamp(18px,2.2vw,24px)/1.1 var(--display);max-width:70%}
.pf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:var(--sunken)}
.pf small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.pf b{font-size:13px}
.pf span{border-radius:7px;background:var(--line-2);padding:6px 10px;font-size:12px;font-weight:600}
.why{font-size:14px;color:var(--ink-2)}
.acts{display:flex;gap:8px;flex-wrap:wrap}

/* Timeline */
.tl{position:relative;padding-left:24px}
.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.ev{position:relative;padding-bottom:22px}
.ev::before{content:"";position:absolute;left:-24px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.ev.auto::before{border-color:var(--faint)}
.ev .when{font-size:12px;color:var(--muted)}
.ev h4{margin:2px 0 6px;font-size:15px}
.ev dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:0;font-size:14px}
.ev dt{color:var(--muted)} .ev dd{margin:0;color:var(--ink-2)}
.month{font:600 13px var(--ui);color:var(--muted);margin:4px 0 12px}

/* Calendar */
.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.calg .dn{font-size:11px;color:var(--muted);font-weight:600;padding:4px 0}
.calg button{aspect-ratio:1/1;max-width:100%;border:0;background:none;border-radius:12px;font-size:14px;color:var(--ink-2);position:relative;transition:background-color .15s ease}
.calg button:disabled{color:var(--faint);cursor:default}
.calg button.today{color:var(--accent-text);font-weight:700}
.calg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600}
.calg button.has::after{content:"";position:absolute;left:50%;bottom:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
.calg button[aria-pressed="true"].has::after{background:#fff}
@media (hover:hover) and (pointer:fine){.calg button:not(:disabled):not([aria-pressed="true"]):hover{background:var(--sunken)}}
.slots{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.slots button{border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500;transition:transform .1s var(--ease-out)}
.slots button:active{transform:scale(.96)}
.slots button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.dt{width:52px;flex:0 0 52px;border-radius:12px;overflow:hidden;text-align:center;border:1px solid var(--line)}
.dt small{display:block;background:var(--bad);color:#fff;font-size:10px;font-weight:700;padding:2px 0;text-transform:uppercase;letter-spacing:.06em}
.dt b{display:block;font:600 20px var(--display);padding:3px 0}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600}
input[type=text],input[type=number],input[type=email],select,textarea{width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:10px 12px;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.help{font-size:12px;color:var(--muted)}
.big{font:600 52px/1 var(--display);letter-spacing:-.03em}
.big small{font-size:20px;color:var(--muted)}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:22px;text-align:center;color:var(--muted);transition:border-color .15s ease,background-color .15s ease}
.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.lesson{display:flex;gap:12px;align-items:center;padding:12px 0}
.lesson .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--sunken);color:var(--ink-2);flex:0 0 28px}
.lesson.done .n{background:var(--accent);color:#fff}
.course-cover{border-radius:14px;aspect-ratio:16/7;max-width:100%;background:radial-gradient(90% 120% at 90% 10%,#1E3A8A,transparent 60%),linear-gradient(160deg,#1B1D21,#0D0D0D);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;margin-bottom:14px}
.course-cover b{font:600 24px/1.1 var(--display)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 14px;color:var(--ink-2);max-width:64ch}
.faq details+details{border-top:1px solid var(--line)}

/* Sheets, popover, toast */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:20}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--raised);box-shadow:var(--shadow-lg);z-index:21;transform:translateX(100%);transition:transform .38s var(--ease-drawer);display:flex;flex-direction:column;border-left:1px solid var(--line)}
.sheet.on{transform:none}
.sh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sh h3{font:600 17px var(--display)}
.sb{padding:18px;overflow-y:auto;flex:1}
.sf{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px}
.bub{max-width:85%;padding:10px 12px;border-radius:16px;font-size:14px;margin-bottom:8px}
.bub.them{background:var(--sunken);border-bottom-left-radius:6px}
.bub.me{background:var(--accent);color:#fff;margin-left:auto;border-bottom-right-radius:6px}
.bubt{font-size:11px;color:var(--muted);margin:-4px 0 12px}
.bubt.r{text-align:right}
.pop{position:absolute;top:calc(100% + 8px);right:0;width:min(340px,calc(100vw - 32px));background:var(--raised);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;transform-origin:top right;transform:scale(.96);opacity:0;pointer-events:none;transition:transform .16s var(--ease-out),opacity .16s var(--ease-out);z-index:15}
.pop.on{transform:none;opacity:1;pointer-events:auto}
.pop .li{padding:10px 8px;border-radius:10px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);opacity:0;visibility:hidden;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:14px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);transition:transform .3s var(--ease-out),opacity .2s ease,visibility 0s linear .3s;z-index:25;max-width:calc(100% - 32px)}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .3s var(--ease-out),opacity .2s ease}
.tabbar{display:none}

/* Phone */
@media (max-width:920px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .bento>*{grid-column:span 12}
  .kpis>*{grid-column:span 6}
  .ads{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .switch span.lbl{display:none}
  .top .chip.sample{display:none}
  .main{padding-bottom:110px}
  .mer{font-size:54px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:12;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--bar);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--line)}
  .tabbar button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:500;color:var(--muted);padding:6px 0;position:relative}
  .tabbar button .ico{width:22px;height:22px}
  .tabbar button[aria-current="page"]{color:var(--accent)}
  .tabbar .badge{position:absolute;top:2px;left:calc(50% + 6px);margin:0;background:var(--bad);color:#fff;min-width:16px;height:16px;font-size:10px}
  .sheet{top:auto;left:0;width:100%;height:min(86vh,720px);border-radius:20px 20px 0 0;transform:translateY(100%);border-left:0}
  .sheet.on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .view.on{animation:none}
  .sheet,.pop,.toast,.ad,.gauge .fill,.prog i{transition:opacity .2s ease!important;transform:none!important}
  .switch i::after{transition:none}
  .sheet:not(.on),.pop:not(.on){opacity:0;pointer-events:none}
}
@media (prefers-reduced-transparency:reduce){.top,.tabbar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* v3: client-type switch, leads inbox, lead-to-job funnel, roofing creatives */
.mockline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:14px auto 0;max-width:1180px}
.top .seg.mode button{padding:6px 11px}
.funnel{display:grid;gap:12px}
.flab{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-bottom:5px}
.fbar{height:8px;border-radius:999px;background:var(--accent);transform-origin:left}
.creative.c3{background:radial-gradient(120% 90% at 70% 20%,#A9C4D6 0%,#4A6A80 45%,#141E26 100%)}
.creative.c4{background:radial-gradient(110% 80% at 30% 25%,#D9A37A 0%,#8A4A2B 45%,#24130C 100%)}
.house{position:absolute;right:12%;top:16%;width:46%;aspect-ratio:1/1}
.roofshape{position:absolute;left:0;right:0;top:0;height:46%;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12))}
.wall{position:absolute;left:14%;right:14%;top:46%;bottom:12%;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (max-width:920px){.top h1{font-size:16px}.top .btn.primary .lbl{display:none}.top .btn.primary{padding:9px}.top{gap:8px}}
@media (max-width:420px){.top h1{display:none}}

/* ---------- Live Hub additions (18 Oct 2026). Same tokens, radii and curves as the mockup. ---------- */
/* Boot + sign-in */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:40;transition:opacity .2s var(--ease-out)}
.boot img{border-radius:50%;opacity:.9}
.boot.off{opacity:0;pointer-events:none}
.signin{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(90% 60% at 100% 0%,var(--accent-soft),transparent 60%),var(--bg)}
.signin-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px 24px;display:flex;flex-direction:column;gap:18px;animation:in .3s var(--ease-out)}
.signin-card .brand{padding:0}
.signin-h{font:600 24px/1.15 var(--display);letter-spacing:-.02em;margin-bottom:6px}
.signin form{margin-top:18px}
#signin-err{color:var(--bad)}
.btn[disabled]{opacity:.55;cursor:default}

/* Honest empty states */
.empty{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:4px 0}
.empty h3{font:600 17px/1.3 var(--display);letter-spacing:-.01em}
.empty p{color:var(--muted);font-size:14px;max-width:60ch}
.empty .ic{margin-bottom:2px}
.nextlist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.nextlist li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.nextlist li i{width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:1.6px solid var(--line-2);margin-top:2px;display:grid;place-items:center}
.nextlist li.done i{background:var(--accent);border-color:var(--accent)}
.nextlist li.done i::after{content:"";width:6px;height:3px;border:solid #fff;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg) translate(1px,-1px)}
.nextlist li small{display:block;color:var(--muted);font-size:12px}
.hero .big-state{font:600 40px/1.05 var(--display);letter-spacing:-.03em}
.hero .hero-row div b{font-size:16px}
.stamp{font-size:12px;color:var(--muted)}
.lesson{cursor:pointer;border-radius:10px}
@media (hover:hover) and (pointer:fine){.lesson:hover .t b{color:var(--accent-text)}}
.guide p{color:var(--ink-2);margin-bottom:12px;max-width:62ch}
.guide ul{margin:0 0 12px;padding-left:18px;color:var(--ink-2)}
.upl{font-size:12px;color:var(--muted);margin-top:10px}
@media (prefers-reduced-motion:reduce){.signin-card{animation:none}.boot{transition:none}}
.iconbtn:disabled{opacity:.4;cursor:default}
/* Session 2: the calendar card header (month stepper + call type) wraps on phones instead of
   pushing the call-type select past the card and widening the page. */
#v-calendar .card-h{flex-wrap:wrap;row-gap:12px}

/* 19 Oct 2026: client self-booking. Meeting-type cards (GHL-portal "pick a meeting" flow, mockup cards),
   then a day and time, then a confirm sheet. Motion: the picker card fades and rises 6px in 220ms
   (transform + opacity only); selection changes are colour only. Reduced motion: opacity only. */
.bk-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.bk-type{display:flex;flex-direction:column;gap:8px;transition:border-color .15s ease}
.bk-type[aria-current="true"]{border-color:var(--accent)}
.bk-type h3{margin-top:4px}
.bk-type>p{max-width:42ch}
.bk-top{display:flex;align-items:center;justify-content:space-between}
.bk-left{display:flex;align-items:center;gap:10px;margin-top:6px}
.pips{display:inline-flex;gap:4px;flex:0 0 auto}
.pips i{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.pips i.used{background:var(--line-2)}
.bk-type .acts{margin-top:auto;padding-top:10px}
.bk-what{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bk-pick{opacity:0;transform:translateY(6px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.bk-pick.in{opacity:1;transform:none}
.bk-acts{display:flex;gap:4px;margin-left:auto}
.bk-sum{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--sunken)}
.bk-sum .when{font:600 20px/1.25 var(--display);letter-spacing:-.01em;margin-top:6px}
.bk-time{font:600 30px/1.1 var(--display);letter-spacing:-.02em;margin:2px 0 8px}
.bk-frame{display:block;width:100%;height:1080px;border:0;border-radius:12px;background:#fff}
.sheet.wide{width:min(520px,100%)}
.sheet.wide .sb{padding:10px}
#v-calendar .card-h{flex-wrap:wrap;row-gap:12px}
@media (max-width:920px){.sheet.wide{width:100%}}
@media (prefers-reduced-motion:reduce){.bk-pick{transform:none;transition:opacity .2s ease}}