:root{
  --ground:#F3EEE6; --surface:#FFFCF7; --surface-2:#F8F3EB; --ink:#2B2622; --ink-2:#554C44; --ink-3:#6F655C;
  --line:#E3D9CC; --line-2:#EDE5DA; --primary:#47604A; --primary-ink:#FFFFFF; --primary-soft:#E3EADF;
  --settled:#5F8466; --activated:#C05C3D; --mid:#A89E90; --activated-soft:#F5E1D8; --danger:#A3412D; --danger-soft:#F4DED6;
  --accent:#C05C3D; --accent-ink:#A94E33; --moss:#26302A; --moss-2:#313D35; --moss-ink:#E9E2D6; --moss-ink-2:#B9C2B4;
  --glass:rgba(255,252,247,.80); --glass-line:rgba(205,190,170,.55);
  --mock:#26302A; --mock-ink:#E9E2D6; --shadow:0 1px 2px rgba(60,45,30,.05), 0 10px 30px rgba(60,45,30,.08);
  --shadow-lg:0 2px 6px rgba(40,30,20,.08), 0 24px 60px rgba(40,30,20,.16);
  --bloom-1:rgba(143,168,140,.30); --bloom-2:rgba(192,92,61,.12); --bloom-3:rgba(214,196,168,.40);
  --photo-veil:rgba(243,238,230,.86);
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius:18px;
  color-scheme: light;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#191612; --surface:#221E19; --surface-2:#2A251F; --ink:#EFE8DE; --ink-2:#CFC5B8; --ink-3:#A89D90;
    --line:#3A332B; --line-2:#2F2923; --primary:#A9C2A6; --primary-ink:#1A1D18; --primary-soft:#2C3529;
    --settled:#93B896; --activated:#E39A7C; --mid:#B5AC9F; --activated-soft:#3D2A22; --danger:#E5937D; --danger-soft:#3A2420;
    --accent:#E39A7C; --accent-ink:#E39A7C; --moss:#141A16; --moss-2:#1D2620; --moss-ink:#E9E2D6; --moss-ink-2:#A9B3A5;
    --glass:rgba(34,30,25,.82); --glass-line:rgba(90,78,64,.55);
    --mock:#0F0D0B; --mock-ink:#E9E2D6; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.3);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.45);
    --bloom-1:rgba(110,140,110,.16); --bloom-2:rgba(192,92,61,.10); --bloom-3:rgba(80,64,46,.30);
    --photo-veil:rgba(25,22,18,.86);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ground:#191612; --surface:#221E19; --surface-2:#2A251F; --ink:#EFE8DE; --ink-2:#CFC5B8; --ink-3:#A89D90;
  --line:#3A332B; --line-2:#2F2923; --primary:#A9C2A6; --primary-ink:#1A1D18; --primary-soft:#2C3529;
  --settled:#93B896; --activated:#E39A7C; --mid:#B5AC9F; --activated-soft:#3D2A22; --danger:#E5937D; --danger-soft:#3A2420;
  --accent:#E39A7C; --accent-ink:#E39A7C; --moss:#141A16; --moss-2:#1D2620; --moss-ink:#E9E2D6; --moss-ink-2:#A9B3A5;
  --glass:rgba(34,30,25,.82); --glass-line:rgba(90,78,64,.55);
  --mock:#0F0D0B; --mock-ink:#E9E2D6; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.3);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.45);
  --bloom-1:rgba(110,140,110,.16); --bloom-2:rgba(192,92,61,.10); --bloom-3:rgba(80,64,46,.30);
  --photo-veil:rgba(25,22,18,.86);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 16px)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:60;background:var(--surface-2)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.005em}
h1{font-size:2rem;line-height:1.15}
h2{font-size:1.35rem;line-height:1.25}
h3{font-size:1.1rem;line-height:1.3}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* mockup bar */
.mockbar{position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;background:var(--mock);color:var(--mock-ink);display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap;font-size:13px}
.mockbar strong{font-weight:600}
.mockbar .note{opacity:.75}
.mockbar nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.mockbar nav a{color:var(--mock-ink);text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid transparent}
.mockbar nav a:hover{border-color:rgba(255,255,255,.25)}
.mockbar nav a[aria-current="true"]{background:rgba(255,255,255,.14)}
.mockbar .reset{background:none;border:1px solid rgba(255,255,255,.25);color:var(--mock-ink);border-radius:999px;padding:5px 10px;cursor:pointer;font-size:12px}

/* app shell */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:env(safe-area-inset-top, 0px);align-self:start;height:calc(100dvh - env(safe-area-inset-top, 0px));display:flex;flex-direction:column;padding:20px 14px;border-right:1px solid var(--line);background:var(--surface-2)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px}
.brand svg{flex:none}
.brand b{font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.15;display:block}
.brand span{font-size:12px;color:var(--ink-3)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--line-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--primary-soft);color:var(--ink)}
.nav a[aria-current="page"] svg{color:var(--primary)}
.nav .count{margin-left:auto;font-size:12px;background:var(--activated-soft);color:var(--ink);border-radius:999px;padding:1px 8px}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid var(--line)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--primary-ink);font-weight:600;font-size:13px;flex:none}
.avatar.sm{width:28px;height:28px;font-size:12px}
.avatar.soft{background:var(--primary-soft);color:var(--ink)}
.me small{display:block;color:var(--ink-3);font-size:12px}
main{padding:32px 40px 64px;min-width:0}
.wrap{max-width:1160px;margin:0 auto}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head p{color:var(--ink-2);margin-top:4px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* controls */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--line-2)}
.btn.sm{min-height:34px;padding:5px 11px;font-size:14px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12.5px;color:var(--ink-3)}
input[type=text],input[type=email],input[type=search],input[type=time],input[type=number],input[type=password],input[type=date],input[type=tel],input[type=url],select,textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;min-height:40px}
textarea{min-height:88px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:0;border-color:transparent}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--surface);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--ink-2);font-weight:500;min-height:34px}
.seg button[aria-pressed="true"]{background:var(--primary-soft);color:var(--ink)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 12px;cursor:pointer;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--primary)}

/* surfaces */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.panel + .panel{margin-top:16px}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.panel-h p{color:var(--ink-3);font-size:13.5px}
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.grid-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.list{list-style:none;margin:0;padding:0}
.list > li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line-2)}
.list > li:first-child{border-top:0;padding-top:4px}
.list .grow{flex:1;min-width:0}
.list .t{font-weight:600}
.list .s{color:var(--ink-3);font-size:13.5px}
.time{font-variant-numeric:tabular-nums;font-weight:600;min-width:64px;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:2px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.chip.ok{background:var(--primary-soft);color:var(--ink)}
.chip.warn{background:var(--activated-soft);color:var(--ink)}
.chip.bad{background:var(--danger-soft);color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}
.num{font-variant-numeric:tabular-nums}
.table-box{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:13px;font-weight:600;color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.link{cursor:pointer}
tbody tr.link:hover{background:var(--surface-2)}
.namecell{display:flex;align-items:center;gap:10px;font-weight:600}
.namecell a{color:var(--ink);text-decoration:none}
.namecell a:hover{text-decoration:underline}

/* rundown, the agent's note */
.rundown{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.rundown .from{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);margin-bottom:10px}
.rundown .lede{font-family:var(--serif);font-size:1.22rem;line-height:1.45;color:var(--ink)}
.rundown .lede + .lede{margin-top:8px}
.draft{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px;background:var(--surface-2)}
.draft .kind{font-size:12.5px;color:var(--ink-3)}
.draft .body{margin:6px 0 10px;color:var(--ink-2);font-size:14.5px}
.draft.done{opacity:.6}

/* the settled line, signature chart */
.trend{display:block;width:100%;height:auto}
.trend .axis{stroke:var(--line);stroke-width:1}
.trend text{fill:var(--ink-3);font-size:11px;font-family:var(--sans)}
.legend-scale{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3)}
.legend-scale i{display:block;width:72px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--activated),var(--mid),var(--settled))}
.spark{display:block}

/* calendar */
.cal{display:grid;grid-template-columns:56px repeat(5,minmax(120px,1fr));border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;min-width:700px}
.cal-box{overflow-x:auto}
.cal .dh{padding:10px 12px;border-bottom:1px solid var(--line);border-left:1px solid var(--line-2);font-weight:600;font-size:14px}
.cal .dh span{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px}
.cal .hours{display:flex;flex-direction:column}
.cal .hours div{height:52px;font-size:11.5px;color:var(--ink-3);text-align:right;padding:2px 8px 0 0;font-variant-numeric:tabular-nums}
.cal .col{position:relative;border-left:1px solid var(--line-2)}
.cal .slot{height:52px;border-top:1px solid var(--line-2);width:100%;display:block;background:none;border-left:0;border-right:0;border-bottom:0;cursor:pointer;padding:0}
.cal .slot.closed{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line-2) 6px 7px);cursor:not-allowed}
.cal .slot:not(.closed):hover{background:var(--primary-soft)}
.ev{position:absolute;left:6px;right:6px;border-radius:9px;padding:6px 9px;font-size:13px;line-height:1.3;border:1px solid var(--primary);background:var(--primary-soft);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden}
.ev.call{border-style:dashed;background:var(--surface)}
.ev.block{border-color:var(--line);background:var(--line-2);color:var(--ink-2)}
.ev b{display:block;font-weight:600}

/* leads board */
.board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px}
.lane{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px;min-height:240px}
.lane h3{font-family:var(--sans);font-size:14px;font-weight:600;display:flex;justify-content:space-between;margin:2px 4px 10px}
.lane h3 span{color:var(--ink-3);font-weight:500}
.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px}
.card .t{font-weight:600}
.card .s{font-size:13px;color:var(--ink-3);margin:2px 0 10px}
.card .row{display:flex;gap:6px;flex-wrap:wrap}

/* library */
.player{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface);cursor:pointer;flex:none;color:var(--primary)}
.player:hover{border-color:var(--primary)}

/* bars chart */
.bars{display:flex;align-items:flex-end;gap:14px;height:180px;padding:8px 4px 0;border-bottom:1px solid var(--line)}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.bars .b i{display:block;width:100%;max-width:56px;border-radius:8px 8px 2px 2px;background:var(--primary)}
.bars .b.now i{background:var(--settled)}
.bars .b span{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bars-x{display:flex;gap:14px;padding:6px 4px 0}
.bars-x span{flex:1;text-align:center;font-size:12.5px;color:var(--ink-3)}

/* stat line */
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:22px}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--ink-3)}

/* modal + toast */
.scrim{position:fixed;inset:0;background:rgba(10,18,18,.45);display:grid;place-items:center;z-index:80;padding:20px}
.modal{background:var(--surface);border-radius:16px;max-width:480px;width:100%;padding:24px;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.modal h2{margin-bottom:6px}
.modal .lead{color:var(--ink-2);margin-bottom:18px}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:11px 18px;border-radius:12px;z-index:90;font-size:14.5px;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,100vw);background:var(--surface);border-left:1px solid var(--line);z-index:80;padding:calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));box-shadow:var(--shadow);overflow:auto}

/* client portal + booking page */
.stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:40px;align-items:start;padding:40px 24px 64px;max-width:1160px;margin:0 auto}
.stage .aside{padding-top:40px;max-width:300px}
.stage .aside h2{margin-bottom:8px}
.stage .aside p{color:var(--ink-2);margin-bottom:12px}
.stage .aside ol{padding-left:18px;color:var(--ink-2);margin:0}
.stage .aside li{margin-bottom:8px}
.phone{width:390px;height:800px;border-radius:44px;border:10px solid var(--ink);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.pscroll{flex:1;overflow-y:auto;padding:22px 20px 20px}
.ptabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--surface-2)}
.ptabs a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 12px;font-size:11.5px;color:var(--ink-3);text-decoration:none;min-height:56px}
.ptabs a[aria-current="page"]{color:var(--primary);font-weight:600}
.phead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.phead .logo{font-family:var(--serif);font-size:1rem}
.pcard{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;background:var(--surface)}
.pcard.feature{background:var(--primary-soft);border-color:transparent}
.pcard .k{font-size:12.5px;color:var(--ink-3)}
.pcard .v{font-family:var(--serif);font-size:1.25rem;line-height:1.3;margin:2px 0 10px}
.crisis{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:12px;margin-top:16px}
.crisis.loud{background:var(--activated-soft);color:var(--ink);border:0;border-radius:12px;padding:12px 14px}
.scale{width:100%;accent-color:var(--primary)}
.scale-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3)}
.scale-read{font-family:var(--serif);font-size:1.6rem;text-align:center;margin:6px 0 2px}
.body-map{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.body-map svg .zone{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1.2;cursor:pointer}
.body-map svg .zone.on{fill:var(--activated);fill-opacity:.55;stroke:var(--activated)}
.zones{display:flex;flex-wrap:wrap;gap:6px}
.zones button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer;min-height:34px}
.zones button[aria-pressed="true"]{background:var(--activated-soft);border-color:var(--activated)}
.progress{height:4px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:var(--primary);width:0;transition:width .3s linear}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.slots button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 6px;cursor:pointer;min-height:44px;font-variant-numeric:tabular-nums}
.slots button[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}

/* public booking page */
.public{max-width:980px;margin:0 auto;padding:48px 24px 72px}
.public .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.public .hero h1{font-size:2.6rem;line-height:1.1;margin:14px 0 14px}
.public .hero .tag{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:1.1rem}
.public .hero p.copy{color:var(--ink-2);font-size:1.05rem;max-width:42ch}
.public .facts{margin-top:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink-2);font-size:14.5px}
.public .facts div{display:flex;gap:10px;align-items:center}
.day-h{font-weight:600;margin:14px 0 8px;font-size:14px}
.day-h:first-child{margin-top:0}

/* video room */
.room{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:20px;align-items:start}
.video{position:relative;aspect-ratio:16/10;border-radius:16px;background:#1F2E30;overflow:hidden;display:grid;place-items:center;color:#E8EEEB}
.video .big{width:120px;height:120px;border-radius:50%;background:#2E4A4B;display:grid;place-items:center;font-family:var(--serif);font-size:2.6rem}
.video .who{position:absolute;left:14px;bottom:12px;font-size:13.5px;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:8px}
.video .self{position:absolute;right:14px;bottom:14px;width:24%;aspect-ratio:4/3;border-radius:10px;background:#36504F;display:grid;place-items:center;font-size:13px;border:2px solid rgba(255,255,255,.25);text-align:center;padding:4px}
.video .self.off{background:#24302F}
.rec-pill{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.5);padding:5px 11px;border-radius:999px;font-size:13px;font-variant-numeric:tabular-nums}
.rec-pill i{width:9px;height:9px;border-radius:50%;background:#E5533D;display:block}
.rec-pill.wait i{background:#E2A954}
.rec-pill.paused i{background:#9AA7A5}
.call-time{position:absolute;right:14px;top:12px;font-size:13px;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
.controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--primary-ink)}
.btn.rec-on{border-color:var(--danger);color:var(--danger)}
.steps{list-style:none;padding:0;margin:0 0 6px}
.steps li{display:flex;gap:10px;align-items:center;padding:6px 0;color:var(--ink-3)}
.steps li.done{color:var(--ink)}
.steps .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.steps li.done .tick{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.drafted{background:var(--primary-soft);color:var(--ink);font-size:12px;border-radius:999px;padding:1px 8px;margin-left:6px;font-weight:500}
.field.flag textarea{border-color:var(--activated);border-width:1.5px}
.pvideo{position:relative;height:360px;border-radius:18px;background:#1F2E30;color:#E8EEEB;display:grid;place-items:center;overflow:hidden;margin-bottom:12px}
.pvideo .big{width:96px;height:96px;border-radius:50%;background:#2E4A4B;display:grid;place-items:center;font-family:var(--serif);font-size:2rem}
.pvideo .self{position:absolute;right:12px;bottom:12px;width:32%;aspect-ratio:3/4;border-radius:10px;background:#36504F;display:grid;place-items:center;font-size:12px;border:2px solid rgba(255,255,255,.25);text-align:center}
.pvideo .self.off{background:#24302F}
.pvideo .who{position:absolute;left:12px;bottom:12px;font-size:13px;background:rgba(0,0,0,.4);padding:3px 9px;border-radius:8px}

@media (max-width: 1100px){
  .room{grid-template-columns:minmax(0,1fr)}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .stage{grid-template-columns:minmax(0,1fr);justify-items:center}
  .stage .aside{padding-top:0;max-width:520px}
  .stage .aside.right{order:3}
}
@media (max-width: 860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:env(safe-area-inset-top, 0px);height:auto;flex-direction:row;align-items:center;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);z-index:40;overflow-x:auto;gap:8px}
  .brand{padding:0 6px 0 0}
  .brand div{display:none}
  .nav{flex-direction:row}
  .nav a{padding:8px 10px;white-space:nowrap}
  .nav a .lbl{font-size:14px}
  .nav .count{display:none}
  .me{display:none}
  main{padding:22px 16px 56px}
  h1{font-size:1.65rem}
  .grid-even{grid-template-columns:minmax(0,1fr)}
  .public .hero{grid-template-columns:minmax(0,1fr)}
  .mockbar .note{display:none}
  .mockbar{position:relative;top:auto;flex-wrap:nowrap;overflow-x:auto}
  .mockbar strong,.mockbar .reset{white-space:nowrap}
  .mockbar nav{flex-wrap:nowrap;margin-left:0}
  .mockbar nav a{white-space:nowrap}
  .side{top:env(safe-area-inset-top, 0px)}
}
@media (max-width: 440px){
  .phone{width:100%;max-width:390px;height:760px;border-width:6px;border-radius:32px}
  .stage{padding:20px 8px 48px}
  .body-map{grid-template-columns:120px 1fr}
}
@media (prefers-reduced-motion: reduce){ .progress i{transition:none} }

/* ---- live build additions ---- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.auth .card h1{font-size:1.7rem;margin:18px 0 6px}
.auth .card p.lead{color:var(--ink-2);margin-bottom:18px}
.err{color:var(--danger);font-size:14px;min-height:1.2em;margin-bottom:8px}
.testnote{background:var(--activated-soft);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:14px}
.me .out{margin-left:auto}
.pwrap{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--surface)}
.pwrap .pscroll{flex:1;padding:20px 18px calc(96px + env(safe-area-inset-bottom, 0px))}
.pwrap .ptabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;padding-bottom:env(safe-area-inset-bottom, 0px);z-index:30}
@media (min-width:560px){ .pwrap{border-left:1px solid var(--line);border-right:1px solid var(--line)} }
.video-ph{border:1px dashed var(--line);border-radius:16px;padding:28px;text-align:center;color:var(--ink-2);background:var(--surface-2)}
.danger-zone{border-color:var(--danger)}
audio{width:100%;margin-top:8px}
.mode-portal .toast{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
/* ---- live video ---- */
.vcall{border-radius:16px;overflow:hidden;background:#1F2E30;color:#E8EEEB}
.vstage{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:#1F2E30}
.vstage video.remote{width:100%;height:100%;object-fit:cover;background:#1F2E30}
.vstage video.selfv{position:absolute;right:12px;bottom:12px;width:26%;max-width:220px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.3);background:#36504F;transform:scaleX(-1)}
.vstage .vwait{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-size:15px}
.vstage .vstat{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.5);padding:5px 11px;border-radius:999px;font-size:13px;display:flex;gap:8px;align-items:center}
.vstage .vstat i{width:9px;height:9px;border-radius:50%;background:#E2A954;display:block}
.vstage .vstat.ok i{background:#6BBAAF}
.vstage .vstat.bad i{background:#E5533D}
.vstage .vtime{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:8px;font-size:13px;font-variant-numeric:tabular-nums}
.vbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px;background:#17221F}
.vbar .btn{background:#2A3B3A;border-color:#2A3B3A;color:#E8EEEB}
.vbar .btn[aria-pressed="true"]{background:#E8EEEB;color:#17221F}
.vbar .btn.end{background:#C4553F;border-color:#C4553F;color:#fff}
.mode-portal .vstage{aspect-ratio:3/4}
.mode-join .vstage{aspect-ratio:16/10}
@media (max-width:560px){ .vstage{aspect-ratio:3/4} .vstage video.selfv{width:34%} }

/* =========================================================
   Calm theme: linen, sage, walnut and terracotta, matched to
   gracefulalignment.com (Playfair Display + Plus Jakarta Sans)
   ========================================================= */
body{
  font-size:15px;font-weight:400;letter-spacing:.005em;
  background-color:var(--ground);
  background-image:
    radial-gradient(1100px 700px at -8% -10%, var(--bloom-1), transparent 60%),
    radial-gradient(900px 650px at 108% 104%, var(--bloom-2), transparent 62%),
    radial-gradient(800px 600px at 70% -20%, var(--bloom-3), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment:fixed;
}
body::before{background:var(--ground)}
h1,h2,h3{font-weight:400;letter-spacing:0}
h1{font-size:2.25rem;line-height:1.15}
h2{font-size:1.4rem}
em.accent,.accent{font-style:italic;color:var(--accent)}
::selection{background:var(--primary-soft)}
a{color:var(--primary)}

/* logo mark + wordmark */
img.mark{width:40px;height:40px;border-radius:50%;flex:none;display:block;box-shadow:0 2px 8px rgba(40,28,18,.25), 0 0 0 2px rgba(255,252,247,.6)}
.brand-row{display:flex;align-items:center;gap:12px}
.wordmark{font-family:var(--serif);font-size:1.25rem;line-height:1.15;color:var(--ink)}
.wordmark small{display:block;font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--ink-3);margin-top:2px}

/* sidebar: deep moss */
.shell{grid-template-columns:252px minmax(0,1fr)}
@media (max-width:860px){ .shell{grid-template-columns:minmax(0,1fr)} }
/* (sidebar), a whisper of the forest photo */
.side{
  background:linear-gradient(180deg, rgba(38,48,42,.93), rgba(30,38,33,.97)), url("img/forest.jpg") 30% center/cover;
  border-right:0;color:var(--moss-ink);box-shadow:inset -1px 0 0 rgba(255,255,255,.04)
}
:root[data-theme="dark"] .side{background:linear-gradient(180deg, rgba(20,26,22,.95), rgba(16,20,17,.98)), url("img/forest.jpg") 30% center/cover}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .side{background:linear-gradient(180deg, rgba(20,26,22,.95), rgba(16,20,17,.98)), url("img/forest.jpg") 30% center/cover} }
.brand{padding:6px 8px 26px}
.brand b{color:var(--moss-ink);font-size:1.08rem;white-space:nowrap}
.brand span{color:var(--moss-ink-2)}
.side .nav a{color:var(--moss-ink-2);border-radius:12px;padding:10px 12px;transition:background .2s ease,color .2s ease}
.side .nav a:hover{background:rgba(233,226,214,.07);color:var(--moss-ink)}
.side .nav a[aria-current="page"]{background:rgba(233,226,214,.13);color:#fff;box-shadow:inset 3px 0 0 #C9876C}
.side .nav a[aria-current="page"] svg{color:#C9D8C4}
.side .nav .count{background:rgba(192,92,61,.85);color:#fff}
.side .me{border-top:1px solid rgba(233,226,214,.12)}
.side .me b{color:var(--moss-ink)}
.side .me small{color:var(--moss-ink-2)}
.side .avatar{background:#8FA88C;color:#1A1D18}
.side .btn.ghost{color:var(--moss-ink-2)}
.side .btn.ghost:hover{background:rgba(233,226,214,.08);color:var(--moss-ink)}

/* page band: the sage-and-stone photo fading into linen */
main{position:relative;isolation:isolate;padding-top:40px}
main::before{content:"";position:absolute;inset:0 0 auto 0;height:300px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, var(--photo-veil) 0%, var(--ground) 100%), url("img/stone.jpg") center 40%/cover;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);opacity:.9}
.head{margin-bottom:28px}
.head p{color:var(--ink-2);margin-top:6px}

/* soft glass surfaces */
.panel,.rundown,.table-box,.cal,.lane,.pcard,.video-ph{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);backdrop-filter:blur(12px) saturate(1.05)
}
.panel{padding:22px 24px}
.panel + .panel{margin-top:18px}
.lane{background:color-mix(in srgb, var(--surface-2) 60%, transparent)}
.card{border-radius:14px;border-color:var(--line);box-shadow:0 1px 2px rgba(60,45,30,.04)}
.rundown{background:linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 75%, transparent), var(--glass) 55%);padding:24px 28px}
.rundown .lede{font-size:1.25rem}
.draft{border-radius:14px;background:color-mix(in srgb, var(--surface-2) 70%, transparent)}
.stat b{font-weight:400;font-size:1.9rem}
.list > li{border-top-color:var(--line-2)}
tbody tr.link:hover{background:color-mix(in srgb, var(--primary-soft) 40%, transparent)}

/* controls: pill buttons, soft inputs */
.btn{border-radius:999px;padding:8px 18px;border-color:var(--line);background:var(--surface);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease}
.btn:hover{border-color:var(--mid);box-shadow:0 2px 10px rgba(60,45,30,.08)}
.btn:active{transform:translateY(1px)}
.btn.sm{border-radius:999px;padding:5px 14px}
.btn.primary{background:linear-gradient(180deg,#4F6A52,#425A45);border-color:#425A45;box-shadow:0 4px 14px rgba(71,96,74,.25)}
:root[data-theme="dark"] .btn.primary{background:var(--primary);border-color:var(--primary);box-shadow:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.primary{background:var(--primary);border-color:var(--primary);box-shadow:none} }
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:none;box-shadow:none}
.btn.danger{background:var(--danger);border-color:var(--danger)}
input[type=text],input[type=email],input[type=search],input[type=time],input[type=number],input[type=password],input[type=date],input[type=tel],input[type=url],select,textarea{
  border-radius:12px;border-color:var(--line);background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent)}
.seg{border-radius:999px;background:var(--glass)}
.seg button{border-radius:999px}
.tabs{border-bottom-color:var(--line)}
.tabs button[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--ink)}
.chip{background:var(--line-2)}
.testnote{background:linear-gradient(90deg,var(--activated-soft),color-mix(in srgb, var(--activated-soft) 40%, transparent));border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);border-radius:14px}

/* calendar events */
.ev{border-radius:12px;border-color:color-mix(in srgb, var(--primary) 50%, transparent);background:linear-gradient(180deg,var(--primary-soft),color-mix(in srgb, var(--primary-soft) 75%, transparent))}
.cal .slot:not(.closed):hover{background:color-mix(in srgb, var(--primary-soft) 60%, transparent)}

/* modals, drawers, toasts */
.scrim{background:rgba(30,26,20,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal{border-radius:22px;padding:28px;box-shadow:var(--shadow-lg);border:1px solid var(--glass-line);animation:rise .28s ease-out}
.drawer{border-left-color:var(--glass-line);box-shadow:var(--shadow-lg)}
.toast{background:var(--moss);color:var(--moss-ink);border-radius:999px;padding:12px 22px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* sign-in screens: forest photo behind a linen card */
.auth{position:relative;isolation:isolate;flex-direction:column;gap:16px;
  background:linear-gradient(160deg, rgba(26,29,28,.35), rgba(26,29,28,.55)), url("img/forest.jpg") center 35%/cover;background-attachment:fixed}
.auth .card{background:rgba(255,252,247,.90);border:1px solid rgba(255,255,255,.6);border-radius:26px;padding:34px 32px;max-width:440px;
  box-shadow:0 30px 80px rgba(10,12,10,.35);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:rise .4s ease-out}
:root[data-theme="dark"] .auth .card{background:rgba(34,30,25,.90);border-color:rgba(255,255,255,.08)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .auth .card{background:rgba(34,30,25,.90);border-color:rgba(255,255,255,.08)} }
.auth .card h1{font-size:2rem;margin:26px 0 8px}
.auth-foot{color:rgba(255,255,255,.8);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* client portal: a calm phone-sized space */
body.mode-portal{background-image:
    linear-gradient(180deg, var(--photo-veil), var(--ground) 420px),
    url("img/stone.jpg");background-size:auto, 100% auto;background-repeat:no-repeat;background-position:top,top center;background-attachment:scroll}
.pwrap{background:transparent}
@media (min-width:560px){ .pwrap{border-left:0;border-right:0} }
.phead{margin-bottom:22px}
.phead .logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.05rem}
.phello{font-size:2rem;margin:4px 0 16px}
.pcard{border-radius:20px;padding:18px}
.pcard.feature{background:linear-gradient(140deg, var(--primary-soft), var(--glass));border-color:color-mix(in srgb, var(--primary) 18%, transparent)}
.pcard .v{font-size:1.3rem}
.pwrap .ptabs{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--glass-line)}
.ptabs a[aria-current="page"]{color:var(--accent-ink)}
.crisis{border-top-color:var(--line)}
.scale{accent-color:var(--primary)}
.zones button{border-radius:999px}
.slots button{border-radius:12px;transition:background .15s ease,border-color .15s ease}
.slots button:hover{border-color:var(--primary)}

/* booking + join pages: sage-and-stone photo, veiled */
body.mode-book,body.mode-join{background-image:
    linear-gradient(180deg, var(--photo-veil), rgba(243,238,230,.94)),
    url("img/stone.jpg");background-size:auto,cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body.mode-book,:root[data-theme="dark"] body.mode-join{background-image:linear-gradient(180deg,var(--photo-veil),rgba(25,22,18,.95)),url("img/stone.jpg")}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.mode-book, :root:not([data-theme="light"]) body.mode-join{background-image:linear-gradient(180deg,var(--photo-veil),rgba(25,22,18,.95)),url("img/stone.jpg")} }
.public{padding-top:56px}
.public .hero h1{font-size:2.9rem;font-weight:400}
.public .hero .tag{color:var(--accent-ink)}
.public .facts div svg{color:var(--primary)}
.public .panel{padding:26px 28px}

/* video: walnut and moss instead of teal */
.vcall{background:#1E2420;border-radius:20px;box-shadow:var(--shadow-lg)}
.vstage,.vstage video.remote{background:radial-gradient(circle at 50% 40%, #2C3630, #1A1F1B)}
.vstage video.selfv{background:#313D35;border-radius:14px}
.vbar{background:#161B17}
.vbar .btn{background:#2B342E;border-color:#2B342E;color:#E9E2D6}
.vbar .btn.end{background:#B4553A;border-color:#B4553A}

@media (max-width: 860px){
  .side{background:linear-gradient(90deg, rgba(38,48,42,.97), rgba(30,38,33,.97))}
  img.mark{width:34px;height:34px}
  main{padding-top:24px}
  main::before{height:220px}
  h1{font-size:1.8rem}
  .public .hero h1{font-size:2.2rem}
  .auth .card{padding:28px 22px}
}
@media (prefers-reduced-motion: reduce){ .modal,.auth .card{animation:none} .btn{transition:none} }