/* ═══════════════════════════════════════════════════════════════════════
   THE APPROVED COMMAND CENTER STYLESHEET
   Extracted verbatim from cc-mockups/command-center-editorial.html
   (md5 8aea5450df) — the design Chek approved on 24 Jul.

   This file is the SOURCE OF TRUTH for how the Command Center looks.
   Production used to carry five competing .card definitions and its own
   :root, and every attempt to 'match the mockup' was CSS written to make
   different markup resemble a screenshot of this file. That is why it never
   matched. Now production loads this, and app.js emits markup that fits it.

   Do not edit to 'fix' a page. Fix the markup app.js emits instead.
   ═══════════════════════════════════════════════════════════════════════ */


:root{
  --bg:#F7F5F1;--card:#FFFFFF;--ink:#1C1A17;--ink2:#4A463F;--muted:#837D73;
  --line:#E9E5DD;--line-soft:#F1EEE7;
  --gold:#A87E2F;--gold-2:#C6A15B;--gold-bg:#F7F0E1;--gold-line:#E7D9BB;
  --pine:#2F6B4F;--pine-bg:#EAF2EC;--pine-line:#CADFCF;
  --teal:#3E7E79;--teal-bg:#E9F1F0;--teal-line:#CFE2E0;
  --red:#A4483F;--red-bg:#F9ECEA;
  --serif:'Fraunces',Georgia,serif;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sh:0 1px 2px rgba(28,26,23,.04),0 10px 26px -16px rgba(28,26,23,.14);
  --sh-lg:0 2px 6px rgba(28,26,23,.05),0 26px 56px -28px rgba(28,26,23,.2);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

/* ===== SIDEBAR ===== */
.side{background:#141217;color:#C7C0B5;padding:20px 15px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:4px 9px 15px;border-bottom:1px solid #2A2630;margin-bottom:8px}
.brand .wm{font-size:17px;font-weight:700;color:#F3EEE6;letter-spacing:.01em}
.brand .wm b{color:var(--gold-2)}
.brand .biz{font-size:11.5px;font-weight:500;color:#8B857B;margin-top:3px}
.navsec{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6E685E;padding:14px 11px 5px}
.navbtn{display:flex;align-items:center;gap:12px;width:100%;padding:9px 11px;border:0;background:none;border-radius:9px;font-family:inherit;font-size:13.5px;color:#B7B0A5;cursor:pointer;text-align:left;transition:background .15s,color .15s;position:relative}
.navbtn svg{width:16px;height:16px;stroke:#7C766C;fill:none;stroke-width:1.7;flex:none;transition:stroke .15s}
.navbtn:hover{background:rgba(255,255,255,.045);color:#F3EEE6}
.navbtn:hover svg{stroke:#C7C0B5}
.navbtn.on{background:rgba(198,161,91,.13);color:#F5EFE4;font-weight:600;box-shadow:inset 2px 0 0 var(--gold-2)}
.navbtn.on svg{stroke:var(--gold-2)}
.navbtn .badge{margin-left:auto;background:var(--gold-2);color:#231C0D;font-size:10px;font-weight:700;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.side-user{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 10px;border-top:1px solid #2A2630}
.side-user .ava{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#8F6A24);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.side-user b{font-size:13px;color:#F3EEE6;display:block}
.side-user small{font-size:11px;color:#8B857B}
.side-power{font-size:10.5px;color:#6E685E;text-align:center;padding-top:10px;letter-spacing:.02em}
.side-power b{color:var(--gold-2)}

/* ===== MAIN ===== */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:rgba(247,245,241,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:11px 30px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;min-height:58px}
.topbar .search{flex:1 1 auto;max-width:420px;min-width:0}
.topbar .tright{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.topbar select{border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-family:inherit;font-size:12.5px;background:#fff;color:var(--ink);cursor:pointer;flex:none}
.search{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:#A39C90;font-size:13px;max-width:440px;display:flex;align-items:center;gap:8px}
.topdate{font-size:12.5px;color:var(--muted);white-space:nowrap}
.topava{width:30px;height:30px;border-radius:50%;background:var(--gold-bg);color:var(--gold);display:grid;place-items:center;font-size:12.5px;font-weight:600;border:1px solid var(--gold-line)}
.content{padding:28px 30px 48px;max-width:1200px;width:100%;margin:0 auto}

/* page switching */
.page{display:none;animation:fade .25s ease}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* header */
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap}
.dhead>div:first-child{min-width:0;flex:1 1 380px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:700}
.eyebrow::before{content:'';width:14px;height:1.5px;background:var(--gold-2);border-radius:2px;flex:none}
.dhead h1{font-family:var(--serif);font-size:40px;font-weight:500;letter-spacing:-.022em;color:var(--ink);margin:9px 0 13px;line-height:1.02}
.dhead h1 em{font-style:italic;color:var(--gold)}
.dhead .sub{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 16px 7px 13px;box-shadow:0 1px 2px rgba(28,26,23,.03);max-width:100%}
.dhead .sub b{color:var(--ink);font-weight:600}
.sdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--gold-2);box-shadow:0 0 0 3px var(--gold-bg)}
.hcta{flex:none;padding-top:22px}
.hcta{display:flex;gap:10px}
.btn{border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;border:1px solid transparent}
.btn.ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--gold-line)}
.btn.solid{background:var(--ink);color:#F7F0E1}
.btn.solid:hover{background:#2A2630}
.btn.sm{padding:7px 13px;font-size:12px}
.hair{height:1px;background:linear-gradient(90deg,var(--gold-2) 0%,var(--gold-line) 22%,transparent 72%);margin:26px 0 24px;opacity:.9}

/* ===== VAYLA INSIGHT STRIP ===== */
.vayla{display:flex;align-items:center;gap:18px;background:radial-gradient(120% 160% at 0% 0%,#FCF7EC 0%,var(--card) 55%);border:1px solid var(--gold-line);border-radius:18px;padding:18px 22px;box-shadow:var(--sh);margin-bottom:22px;position:relative;overflow:hidden}
.vayla::after{content:'';position:absolute;top:-40px;right:-30px;width:150px;height:150px;background:radial-gradient(circle,var(--gold-bg),transparent 70%);opacity:.7;pointer-events:none}
.v-ava{width:44px;height:44px;border-radius:13px;flex:none;background:linear-gradient(135deg,var(--gold),#8F6A24);color:#FBF5E8;display:grid;place-items:center;font-size:20px;box-shadow:0 8px 20px -8px rgba(168,126,47,.6);position:relative;z-index:1}
.v-body{flex:1;min-width:0;position:relative;z-index:1}
.v-lb{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.v-body p{font-family:var(--serif);font-size:16.5px;font-weight:400;color:var(--ink);line-height:1.42;margin-top:4px;letter-spacing:-.003em}
.v-body p b{font-weight:600;font-style:italic;color:var(--gold)}
.v-act{flex:none;position:relative;z-index:1;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;background:var(--ink);color:#F7F0E1;border:0;transition:.15s;white-space:nowrap}
.v-act:hover{background:#2A2630}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;top:-34px;right:-34px;width:96px;height:96px;background:radial-gradient(circle,var(--gold-bg),transparent 68%);opacity:.55;pointer-events:none}
.kpi .lb{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;position:relative}
.kpi .num{font-family:var(--serif);font-size:32px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-top:10px;line-height:1;position:relative}
.kpi .num .star{font-size:18px;color:var(--gold-2);margin-left:1px}
.kpi .ctx{font-size:11.5px;color:var(--ink2);margin-top:7px;position:relative}
.kpi .foot{display:flex;align-items:center;gap:8px;margin-top:11px;min-height:18px;position:relative}
.tr{font-size:11.5px;font-weight:600}
.tr.up{color:var(--pine)}.tr.down{color:var(--red)}.tr.amber{color:var(--gold)}
.vs{font-size:11px;color:var(--muted)}
.spark{width:52px;height:18px;margin-left:auto}
.spark polyline{fill:none;stroke:var(--gold-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spark.pine polyline{stroke:var(--pine)}

/* grid + cards */
.grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-top:22px;align-items:start}
.grid.even{grid-template-columns:1fr 1fr}
.col{display:flex;flex-direction:column;gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--sh)}
.card.pad0{padding:0;overflow:hidden}
.chead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:12px}
.chead h3{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.chead a{font-size:12.5px;color:var(--gold);font-weight:600;cursor:pointer;text-decoration:none}
.chead a:hover{text-decoration:underline}
.mt22{margin-top:22px}

/* generic list rows */
.frow{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.frow:last-child{border-bottom:0}
.fic{width:36px;height:36px;border-radius:11px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);display:grid;place-items:center;font-size:15px;flex:none}
.fic.pine{background:var(--pine-bg);color:var(--pine);border-color:var(--pine-line)}
.fic.teal{background:var(--teal-bg);color:var(--teal);border-color:var(--teal-line)}
.ft{flex:1;min-width:0}
.ft b{font-size:14px;font-weight:600;color:var(--ink);display:block;letter-spacing:-.006em}
.ft span{font-size:12px;color:var(--muted)}
.tag{font-size:10.5px;font-weight:600;border-radius:999px;padding:4px 12px;white-space:nowrap}
.tag.gold{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line)}
.tag.teal{background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal-line)}
.tag.pine{background:var(--pine-bg);color:var(--pine);border:1px solid var(--pine-line)}
.tag.red{background:var(--red-bg);color:var(--red);border:1px solid #EAD2CE}
.tag.mute{background:#F1EEE8;color:var(--muted);border:1px solid var(--line)}
/* 28 Jul — closes the "left as a density decision" deferral. The objection
   was that 44px-tall links would gap every card header; the answer is a
   44px HIT AREA with zero layout change: an invisible ::after catches the
   tap. Headers look identical; thumbs get the floor the guidelines ask for. */
.lk{font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none;position:relative}
.lk::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}
.lk:hover{color:var(--gold)}
/* 28 Jul — the per-icon judgment the 26 Jul deferral asked for. Of the 14
   flagged contrasts: ring tracks and wireframe fills are decorative (the
   filled arc + label carry the information) — exempt and recorded. The one
   real failure was THIS: white initials (text, 4.5:1 bar) on a gradient
   whose light end is decorative gold at 2.43:1. Same fix .side-user .ava
   already had — start from the AA gold. 5.13:1 across the whole surface. */
.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--gold),#8F6A24)}
.avatar.a2{background:linear-gradient(135deg,#6f9a8a,var(--pine))}
.avatar.a3{background:linear-gradient(135deg,#9a8ab0,#6c5b8a)}
.avatar.a4{background:linear-gradient(135deg,#c0895b,#a4552f)}

/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 16px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:15px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px;color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#FCFAF6}
.tbl .nm{display:flex;align-items:center;gap:12px}
.tbl .nm b{font-weight:600}
.tbl .nm div span{font-size:11.5px;color:var(--muted);display:block}
.tbl .nm .avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 4px 10px -4px rgba(28,26,23,.35)}
/* thumbnails */
.thumb{width:46px;height:46px;border-radius:11px;flex:none;background-size:cover;background-position:center;border:1px solid var(--line);box-shadow:var(--sh)}
.thumb.sm{width:40px;height:40px;border-radius:9px}
.tbl .svc{display:flex;align-items:center;gap:13px}
.tbl .svc b{font-weight:600}
/* browser preview frame */
.browser{border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg);background:#fff}
.browser-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:#FBFAF7}
.browser-bar .dots{display:flex;gap:5px}
.browser-bar .dots i{width:9px;height:9px;border-radius:50%;background:#DED8CD;display:block}
.browser-url{font-size:11.5px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:7px;padding:4px 12px;flex:1;text-align:center;letter-spacing:.01em}
.browser-view{position:relative;background:#faf7f2}
.pv-hero{height:230px;background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;justify-content:space-between}
.pv-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:#fff}
.pv-nav b{font-family:var(--serif);font-size:16px;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.pv-nav .lnks{display:flex;gap:16px;font-size:11.5px;font-weight:500;opacity:.95;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pv-hero-txt{padding:0 22px 22px;position:relative;z-index:1}
.pv-hero-txt h4{font-family:var(--serif);font-size:26px;font-weight:500;color:#fff;line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.45);max-width:70%}
.pv-hero-txt .pill{display:inline-block;margin-top:12px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:600;padding:8px 16px;border-radius:999px}
.pv-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,.28),transparent 34%,rgba(20,16,14,.55));pointer-events:none}
.pv-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 20px;background:#fff}
.pv-svc{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.pv-svc .pi{height:56px;background-size:cover;background-position:center}
.pv-svc .pc{padding:8px 10px}
.pv-svc .pc b{font-size:11.5px;font-weight:600;display:block}
.pv-svc .pc span{font-size:10.5px;color:var(--muted)}
/* edit chips overlaid on preview */
.editchip{position:absolute;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:7px;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);display:flex;align-items:center;gap:5px;z-index:2}
.editchip .d{width:6px;height:6px;border-radius:50%;background:var(--gold-2)}
.num-cell{font-variant-numeric:tabular-nums;font-weight:600}

/* calendar */
.cal{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.cal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.cal-hd h3{font-family:var(--serif);font-size:19px;font-weight:500}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink2);font-size:14px}
.cal-nav button:hover{border-color:var(--gold-line)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.dow span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 12px;text-align:left}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{min-height:98px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:8px 9px;display:flex;flex-direction:column;gap:4px}
.cal-day:nth-child(7n){border-right:0}
.cal-day .dnum{font-size:12px;color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums}
.cal-day.out{background:#FBFAF7}.cal-day.out .dnum{color:#C4BDB1}
.cal-day.today .dnum{background:var(--gold);color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.chip{font-size:11px;font-weight:600;border-radius:7px;padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid}
.chip.appt{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-line)}
.chip.done{background:var(--pine-bg);color:var(--pine);border-color:var(--pine-line)}
.chip.post{background:var(--teal-bg);color:var(--teal);border-color:var(--teal-line)}
.chip.email{background:#EEEBF5;color:#6c5b8a;border-color:#DAD2E8}
.chip.promo{background:var(--red-bg);color:var(--red);border-color:#EAD2CE}

/* inbox split */
.split{display:grid;grid-template-columns:300px 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);overflow:hidden;min-height:520px}
.conv-list{border-right:1px solid var(--line);overflow-y:auto}
.conv{display:flex;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .15s}
.conv:hover{background:#FCFAF6}
.conv.on{background:var(--gold-bg)}
.conv .cbody{flex:1;min-width:0}
.conv .cbody .cn{display:flex;justify-content:space-between;gap:8px}
.conv .cbody b{font-size:13.5px;font-weight:600}
.conv .cbody .cw{font-size:11px;color:var(--muted);white-space:nowrap}
.conv .cbody p{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .undot{width:8px;height:8px;border-radius:50%;background:var(--gold-2);flex:none;margin-top:6px}
.thread{display:flex;flex-direction:column}
.thread-hd{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.thread-hd b{font-size:14.5px;font-weight:600}
.thread-hd span{font-size:12px;color:var(--muted)}
.thread-body{flex:1;padding:22px;display:flex;flex-direction:column;gap:14px;background:#FCFAF7}
.bubble{max-width:78%;padding:12px 15px;border-radius:14px;font-size:13.5px;line-height:1.5}
.bubble.them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.bubble.me{align-self:flex-end;background:var(--pine-bg);border:1px solid var(--pine-line);border-bottom-right-radius:4px;color:#1f3d2f}
.bubble .bw{font-size:10.5px;color:var(--muted);margin-top:5px}
.waiting{margin:0 22px 16px;background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:12px;padding:12px 15px;font-size:12.5px;color:var(--gold)}
.waiting b{font-weight:700}
.draftbox{border-top:1px solid var(--line);padding:16px 22px;background:#fff}
.draftbox .dlabel{font-size:11px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.draftbox .dtext{background:#FCFAF7;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--ink2);line-height:1.55}
.draftbox .drow{display:flex;justify-content:flex-end;gap:9px;margin-top:11px}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh);background:var(--card)}
.tile .img{aspect-ratio:1;background-size:cover;background-position:center;position:relative}
.tile .cap{padding:11px 13px;font-size:12px;color:var(--ink2);display:flex;justify-content:space-between;align-items:center}
.tile .cap b{font-weight:600;color:var(--ink);font-size:12.5px}
.tile.new{display:grid;place-items:center;border-style:dashed;border-color:var(--gold-line);background:var(--gold-bg);cursor:pointer;min-height:180px;text-align:center;color:var(--gold);font-weight:600;font-size:13px}
.promptbar{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--sh);align-items:center}
.promptbar .pi{font-size:13px;color:#A39C90;flex:1}

/* bar chart */
.bars{display:flex;align-items:flex-end;gap:12px;height:160px;padding:12px 4px 0}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.bars .bar{width:100%;max-width:34px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--gold-2),var(--gold-bg))}
.bars .bl{font-size:11px;color:var(--muted);font-weight:600}
.legend{display:flex;gap:16px;margin-top:6px}
.legend span{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* toggle */
.tgl{width:38px;height:22px;border-radius:999px;background:var(--pine);position:relative;flex:none;cursor:pointer}
.tgl.off{background:#D8D2C7}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl.off::after{left:2px}.tgl:not(.off)::after{left:18px}

/* quick actions */
.qa-wrap{margin-top:22px}
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.qa{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;box-shadow:var(--sh);transition:.15s}
.qa:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.qa .qic{width:32px;height:32px;border-radius:10px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);display:grid;place-items:center;font-size:15px;flex:none}
.qsub{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:1px}

/* schedule bits */
.sbody{display:flex;align-items:center;gap:16px;padding:8px 0 16px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.clockring{position:relative;width:50px;height:50px;flex:none;display:grid;place-items:center}
.clockring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.clockring circle{fill:none;stroke-width:3.2}
.clockring .bg{stroke:var(--line)}
.clockring .fg{stroke:var(--gold-2);stroke-dasharray:132;stroke-dashoffset:132;stroke-linecap:round}
.clockring span{position:relative;font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink2)}
.sbody b{font-size:14px;font-weight:600;color:var(--ink)}
.sbody p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.wklabel{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:4px 0 2px}
.slot{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.slot:last-child{border-bottom:0}
.slot .tm{font-size:12px;font-weight:600;color:var(--ink2);width:56px;flex:none;font-variant-numeric:tabular-nums}
.slot b{font-size:13.5px;font-weight:600;color:var(--ink);display:block}
.slot span{font-size:11.5px;color:var(--muted)}
.hrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.hrow:last-child{border-bottom:0}
.led{width:9px;height:9px;border-radius:50%;flex:none}
.led.pine{background:var(--pine);box-shadow:0 0 0 3px var(--pine-bg)}
.led.amber{background:var(--gold-2);box-shadow:0 0 0 3px var(--gold-bg)}
.ht{flex:1}.ht b{font-size:13.5px;font-weight:600;color:var(--ink);display:block}.ht span{font-size:11.5px;color:var(--muted)}
.arow{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.arow:last-child{border-bottom:0}
.aic{width:30px;height:30px;border-radius:50%;background:var(--pine-bg);color:var(--pine);border:1px solid var(--pine-line);display:grid;place-items:center;font-size:13px;flex:none}
.arow .at{flex:1;font-size:13px;color:var(--ink);font-weight:500}
.arow .aw{font-size:11.5px;color:var(--muted);white-space:nowrap}

footer.credit{text-align:center;color:var(--muted);font-size:11.5px;padding:34px 0 8px;letter-spacing:.02em}

/* ===================== MODAL / WIZARD SYSTEM ===================== */
.scrim{position:fixed;inset:0;background:rgba(24,20,16,.5);backdrop-filter:blur(4px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.scrim.on{display:flex;animation:fade .2s ease}
.sheet{background:var(--bg);border-radius:20px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);width:100%;max-width:1000px;overflow:hidden;animation:rise .28s cubic-bezier(.2,.8,.3,1)}
.sheet.sm{max-width:620px}.sheet.md{max-width:800px}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
.sh-hd{display:flex;align-items:center;gap:14px;padding:20px 24px;background:var(--card);border-bottom:1px solid var(--line)}
.sh-hd .shi{width:42px;height:42px;border-radius:12px;flex:none;background:linear-gradient(135deg,var(--gold),#8F6A24);color:#FBF5E8;display:grid;place-items:center;font-size:19px}
.sh-hd h3{font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:-.005em}
.sh-hd p{font-size:12.5px;color:var(--muted);margin-top:2px}
.sh-x{margin-left:auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink2);font-size:16px;flex:none}
.sh-x:hover{border-color:var(--gold-line)}
.sh-body{padding:22px 24px;max-height:70vh;overflow-y:auto}
.sh-ft{display:flex;align-items:center;gap:10px;padding:16px 24px;background:var(--card);border-top:1px solid var(--line)}
.sh-ft .sp{margin-left:auto;display:flex;gap:10px}
/* stepper */
.stepper{display:flex;align-items:center;gap:8px;padding:14px 24px;background:#FCFAF7;border-bottom:1px solid var(--line);flex-wrap:wrap}
.stp{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.stp i{width:22px;height:22px;border-radius:50%;background:#EDE8DF;color:var(--muted);display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:700}
.stp.on{color:var(--ink)}.stp.on i{background:var(--gold);color:#fff}
.stp.done i{background:var(--pine);color:#fff}
.stp-sep{color:#CFC8BC;font-size:12px}
/* wizard two-pane */
.wiz{display:grid;grid-template-columns:1fr 380px;gap:0}
.wiz-form{padding:22px 24px;max-height:64vh;overflow-y:auto}
.wiz-prev{background:#F1EDE6;border-left:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:12px}
.wiz-prev .pvlb{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.wiz-prev .pvnote{font-size:11px;color:var(--muted);line-height:1.5;margin-top:auto}
/* form fields */
.fld{margin-bottom:16px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.fld .hint{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:-3px;margin-bottom:6px}
.inp{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:13px;color:var(--ink);background:#fff}
.inp::placeholder{color:#AEA79B}
.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,161,91,.15)}
textarea.inp{resize:vertical;min-height:64px;line-height:1.5}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cnt{font-size:10.5px;color:var(--muted);text-align:right;margin-top:3px;font-variant-numeric:tabular-nums}
/* option tiles */
.opts{display:grid;gap:9px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 14px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:.15s}
.opt:hover{border-color:var(--gold-line)}
.opt.on{border-color:var(--gold);background:var(--gold-bg);box-shadow:0 0 0 2px rgba(198,161,91,.18)}
.opt span{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chipbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.chipbtn.on{border-color:var(--gold);background:var(--gold-bg);color:var(--gold)}
.chipbtn:hover{border-color:var(--gold-line)}
.aibtn{width:100%;border:1px solid var(--gold-line);background:linear-gradient(135deg,#FCF6E9,var(--gold-bg));color:var(--gold);border-radius:11px;padding:12px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:16px}
.aibtn:hover{box-shadow:0 6px 18px -8px rgba(168,126,47,.5)}
.note-band{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:11px;padding:12px 14px;font-size:12px;color:var(--ink2);line-height:1.55}
.note-band b{color:var(--gold)}
.note-band.pine{background:var(--pine-bg);border-color:var(--pine-line)}
.note-band.pine b{color:var(--pine)}
.ready li{font-size:12.5px;color:var(--red);padding:4px 0 4px 18px;position:relative;list-style:none}
.ready li::before{content:'!';position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:var(--red-bg);color:var(--red);font-size:9px;font-weight:700;display:grid;place-items:center}
/* mini ad previews */
.g-ad{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.g-ad .spon{font-size:10.5px;font-weight:700;color:var(--ink2)}
.g-ad .gt{color:#1a0dab;font-size:15px;font-weight:500;margin-top:5px;line-height:1.3}
.g-ad .gu{color:#0f7b32;font-size:11.5px;margin-top:3px;word-break:break-all}
.g-ad .gd{font-size:12px;color:#4d5156;margin-top:5px;line-height:1.5}
.m-ad{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.m-ad .mh{display:flex;align-items:center;gap:9px;padding:11px 13px}
.m-ad .mav{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}
.m-ad .mh b{font-size:12.5px;font-weight:600;display:block}
.m-ad .mh span{font-size:10.5px;color:var(--muted)}
.m-ad .mtxt{font-size:12.5px;color:var(--ink);padding:0 13px 11px;line-height:1.5}
.m-ad .mimg{height:150px;background-size:cover;background-position:center}
.m-ad .mcta{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:#F2EFE9;gap:10px}
.m-ad .mcta b{font-size:12px;font-weight:600}
.m-ad .mcta .mb{background:#E4E0D8;border-radius:7px;padding:6px 12px;font-size:11.5px;font-weight:600;white-space:nowrap}
/* staff cards */
.staffgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--sh);cursor:pointer;transition:.16s;position:relative;overflow:hidden}
.scard:hover{transform:translateY(-2px);border-color:var(--gold-line)}
.scard::after{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:radial-gradient(circle,var(--gold-bg),transparent 68%);opacity:.6}
.scard .sic{font-size:24px;position:relative}
.scard b{display:block;font-size:14.5px;font-weight:600;margin-top:10px;position:relative}
.scard .srole{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;position:relative;min-height:34px}
.scard .sst{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--pine);margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft);position:relative}
.scard .sst i{width:7px;height:7px;border-radius:50%;background:var(--pine);flex:none;box-shadow:0 0 0 3px var(--pine-bg)}
.scard .smeet{font-size:12px;font-weight:600;color:var(--gold);margin-top:9px;position:relative}
/* identity layers */
.lay{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin-bottom:12px;box-shadow:var(--sh)}
.lay .lh{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.lay .lh b{font-family:var(--serif);font-size:15.5px;font-weight:500}
.lay .lh span{font-size:11.5px;color:var(--muted)}
.lay .ln{width:22px;height:22px;border-radius:6px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}
/* mission rows */
.msn{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.msn:last-child{border-bottom:0}
.msn:hover .mt b{color:var(--gold)}
.msn .mic{width:38px;height:38px;border-radius:11px;background:#F4F1EA;border:1px solid var(--line);display:grid;place-items:center;font-size:17px;flex:none}
.msn .mt{flex:1;min-width:0}
.msn .mt b{font-size:13.8px;font-weight:600;display:block}
.msn .mt span{font-size:11.5px;color:var(--muted)}
.msn .mmeta{font-size:11px;color:var(--muted);white-space:nowrap;text-align:right}
/* progress */
.prog{height:9px;border-radius:999px;background:#EDE8DF;overflow:hidden}
.prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
/* tabs */
.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab{border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--gold)}
/* settings rows */
.srow{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.srow:last-child{border-bottom:0}
.srow .si{width:30px;font-size:15px;flex:none;text-align:center}
.srow .sl{font-size:12.5px;color:var(--muted);width:130px;flex:none}
.srow .sv{font-size:13.5px;color:var(--ink);font-weight:500;flex:1;min-width:0}
.sw{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sw i{width:30px;height:30px;border-radius:8px;display:block;border:1px solid var(--line)}
.dayt{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dayt div{background:#FCFAF7;border:1px solid var(--line);border-radius:10px;padding:9px 6px;text-align:center}
.dayt div b{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted);font-weight:700}
.dayt div span{font-size:11.5px;color:var(--ink);font-weight:500}
/* help two-pane */
.helpwrap{display:grid;grid-template-columns:250px 1fr;gap:0;min-height:520px}
.help-nav{border-right:1px solid var(--line);padding:16px 12px;max-height:64vh;overflow-y:auto;background:#FCFAF7}
.help-nav .hgrp{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:14px 10px 5px}
.help-nav button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;font-family:inherit;font-size:12.8px;color:var(--ink2);padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left}
.help-nav button:hover{background:#F2EEE6}
.help-nav button.on{background:var(--gold-bg);color:var(--ink);font-weight:600}
.help-art{padding:24px 26px;max-height:64vh;overflow-y:auto}
.help-art h2{font-family:var(--serif);font-size:24px;font-weight:500;margin:10px 0 5px}
.help-art .hsub{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.help-art li{list-style:none;font-size:13.5px;color:var(--ink2);padding:9px 0 9px 22px;position:relative;line-height:1.55;border-bottom:1px solid var(--line-soft)}
.help-art li::before{content:'✦';position:absolute;left:0;color:var(--gold)}
@media(max-width:980px){.wiz{grid-template-columns:1fr}.wiz-prev{border-left:0;border-top:1px solid var(--line)}.staffgrid{grid-template-columns:1fr 1fr}.helpwrap{grid-template-columns:1fr}.help-nav{max-height:180px;border-right:0;border-bottom:1px solid var(--line)}}

/* ===== PRO COMPONENTS ===== */
/* segmented control */
.seg{display:inline-flex;background:#EDE9E1;border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 14px;border-radius:8px;cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
/* modal tabs */
.mtabs{display:flex;gap:4px;padding:0 24px;background:#FCFAF7;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mtabs button{border:0;background:none;font-family:inherit;font-size:12.8px;font-weight:600;color:var(--muted);padding:12px 13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.mtabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.mtabs button:hover{color:var(--ink)}
/* range slider */
.rng{width:100%;-webkit-appearance:none;height:5px;border-radius:999px;background:#E4DFD5;outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.rngrow{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px}
/* platform pill w/ icon */
.pfm{display:flex;gap:8px;flex-wrap:wrap}
.pfm button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.pfm button .pd{width:8px;height:8px;border-radius:2px;display:block}
.pfm button.on{border-color:var(--gold);background:var(--gold-bg)}
/* variant card */
.vcard{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff;margin-bottom:10px;cursor:pointer}
.vcard.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(198,161,91,.18)}
.vcard .vh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.vcard .vh b{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.vcard p{font-size:12.8px;color:var(--ink2);line-height:1.55}
.vcard .vm{font-size:11px;color:var(--muted);margin-top:7px}
/* flow builder */
.flow{display:flex;flex-direction:column;gap:0;align-items:stretch}
.fnode{border:1px solid var(--line);background:#fff;border-radius:13px;padding:14px 16px;display:flex;align-items:center;gap:13px;box-shadow:var(--sh)}
.fnode .fi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex:none}
.fnode.trg .fi{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line)}
.fnode.cnd .fi{background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal-line)}
.fnode.act .fi{background:var(--pine-bg);color:var(--pine);border:1px solid var(--pine-line)}
.fnode .fb{flex:1;min-width:0}
.fnode .fb .fl{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.fnode .fb b{display:block;font-size:13.5px;font-weight:600;margin-top:2px}
.fnode .fb span{font-size:11.5px;color:var(--muted)}
.fconn{width:2px;height:20px;background:var(--gold-line);margin-left:34px}
.fadd{border:1px dashed var(--gold-line);background:var(--gold-bg);color:var(--gold);border-radius:13px;padding:12px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;width:100%}
/* section list (website builder) */
.seclist .sec-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;margin-bottom:8px;cursor:grab}
.sec-item .grip{color:#C9C2B6;font-size:14px;letter-spacing:-2px;flex:none}
.sec-item b{font-size:13px;font-weight:600;flex:1}
.sec-item .eye{font-size:13px;color:var(--muted);cursor:pointer}
/* device toggle */
.dev{display:inline-flex;gap:4px;background:#EDE9E1;border-radius:9px;padding:3px}
.dev button{border:0;background:none;padding:6px 11px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--muted)}
.dev button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
/* color picker row */
.cpick{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.cpick i{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);cursor:pointer;display:block}
.cpick i.on{box-shadow:0 0 0 2px var(--gold)}
/* asset toolbar */
.atool{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.atool button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 11px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--ink2);cursor:pointer}
.atool button:hover{border-color:var(--gold-line);color:var(--gold)}
/* voice card */
.voice{background:linear-gradient(135deg,#14121A,#241F2E);color:#EDE7DC;border-radius:18px;padding:24px;position:relative;overflow:hidden}
.voice::after{content:'';position:absolute;top:-50px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(198,161,91,.28),transparent 70%)}
.voice h3{font-family:var(--serif);font-size:21px;font-weight:500;color:#F5EFE4;position:relative}
.voice p{font-size:13px;color:#B5ADA0;line-height:1.6;margin-top:7px;position:relative}
.voice .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;position:relative}
.voice .vg{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px}
.voice .vg .vl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8F887B;font-weight:700}
.voice .vg b{display:block;font-family:var(--serif);font-size:19px;color:var(--gold-2);margin-top:5px}
.voice .vg span{font-size:11px;color:#9A9285}
.wave{display:flex;align-items:center;gap:3px;height:26px;margin-top:4px}
.wave i{width:3px;border-radius:2px;background:var(--gold-2);display:block;animation:wv 1.1s ease-in-out infinite}
@keyframes wv{0%,100%{height:6px;opacity:.5}50%{height:22px;opacity:1}}
/* switchable modal panels */
.mpanel{display:none}
.mpanel.on{display:block}
/* benefit cards */
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 17px;position:relative;overflow:hidden}
.bcard::after{content:'';position:absolute;top:-28px;right:-28px;width:80px;height:80px;background:radial-gradient(circle,var(--gold-bg),transparent 68%);opacity:.6}
.bcard .bi{width:34px;height:34px;border-radius:10px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);display:grid;place-items:center;font-size:15px;position:relative}
.bcard b{display:block;font-size:13.8px;font-weight:600;margin-top:10px;position:relative}
.bcard p{font-size:12.3px;color:var(--muted);line-height:1.55;margin-top:4px;position:relative}
.bcard .bwin{font-size:11.5px;font-weight:700;color:var(--pine);margin-top:9px;position:relative;display:block}
/* big stat row */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.statbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.statbox b{display:block;font-family:var(--serif);font-size:28px;font-weight:500;color:var(--gold);line-height:1}
.statbox span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.45}
/* explainer hero */
.exhero{background:linear-gradient(135deg,#14121A,#241F2E);color:#EDE7DC;padding:30px 32px;position:relative;overflow:hidden}
.exhero::after{content:'';position:absolute;top:-60px;right:-50px;width:260px;height:260px;background:radial-gradient(circle,rgba(198,161,91,.3),transparent 70%)}
.exhero .exk{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);font-weight:700;position:relative}
.exhero h2{font-family:var(--serif);font-size:30px;font-weight:500;color:#F7F2E8;line-height:1.12;margin:10px 0 10px;position:relative;letter-spacing:-.01em}
.exhero h2 em{font-style:italic;color:var(--gold-2)}
.exhero p{font-size:14px;color:#B5ADA0;line-height:1.6;position:relative;max-width:620px}
/* honest limits */
.limit{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.limit:last-child{border-bottom:0}
.limit .lx{color:var(--muted);font-size:14px;flex:none;width:20px;text-align:center}
.limit b{font-size:13.2px;font-weight:600;display:block}
.limit span{font-size:12.2px;color:var(--muted);line-height:1.5}
/* help */
.help-nav .hsearch{position:relative;margin-bottom:8px}
.help-nav .hsearch input{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px 8px 29px;font-family:inherit;font-size:12.3px;background:#fff}
.help-nav .hsearch span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px}
.help-nav button .nu{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.06em;background:var(--gold);color:#fff;border-radius:4px;padding:2px 5px}
.help-art .hstep{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.help-art .hstep:last-child{border-bottom:0}
.help-art .hstep .hn{width:24px;height:24px;border-radius:50%;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.help-art .hstep b{font-size:13.3px;font-weight:600;display:block}
.help-art .hstep span{font-size:12.5px;color:var(--muted);line-height:1.5}
/* settings */
.setwrap{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:start}
.setnav{position:sticky;top:78px}
.setnav .sg{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:14px 10px 5px}
.setnav button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;font-family:inherit;font-size:12.9px;color:var(--ink2);padding:8px 10px;border-radius:9px;cursor:pointer;text-align:left}
.setnav button:hover{background:#F2EEE6}
.setnav button.on{background:var(--gold-bg);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--gold)}
.setnav button .warn{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--gold-2)}
.spanel{display:none}.spanel.on{display:block}
.userrow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.userrow:last-child{border-bottom:0}
.perm{display:grid;grid-template-columns:1.4fr repeat(4,68px);gap:4px;font-size:11.5px;align-items:center}
.perm .ph{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:center;padding-bottom:6px}
.perm .pr{padding:8px 0;border-top:1px solid var(--line-soft);font-weight:600;color:var(--ink)}
.perm .pc{padding:8px 0;border-top:1px solid var(--line-soft);text-align:center}
.perm .yes{color:var(--pine);font-weight:700}.perm .no{color:#D3CDC2}
.danger-z{border:1px solid #EAD2CE;background:var(--red-bg);border-radius:16px;padding:20px 22px}
.danger-z h3{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--red);margin-bottom:4px}
.dzrow{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid rgba(164,72,63,.14)}
.dzrow:last-child{border-bottom:0}
.usebar{height:7px;border-radius:999px;background:#EDE8DF;overflow:hidden;margin-top:6px}
.usebar i{display:block;height:100%;border-radius:999px;background:var(--gold-2)}
.usebar i.hot{background:var(--red)}
/* launch hq */
.nexthero{background:linear-gradient(135deg,#14121A,#241F2E);color:#EDE7DC;border-radius:20px;padding:26px 28px;position:relative;overflow:hidden}
.nexthero::after{content:'';position:absolute;top:-60px;right:-50px;width:240px;height:240px;background:radial-gradient(circle,rgba(198,161,91,.3),transparent 70%)}
.nexthero .nk{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-2);font-weight:700;position:relative}
.nexthero h2{font-family:var(--serif);font-size:26px;font-weight:500;color:#F7F2E8;margin:9px 0 8px;position:relative;line-height:1.15}
.nexthero p{font-size:13.5px;color:#B5ADA0;line-height:1.6;position:relative;max-width:60ch}
.nexthero .nbar{height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:18px 0 9px;position:relative}
.nexthero .nbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.nexthero .nmeta{font-size:11.5px;color:#8F887B;position:relative}
.mstep{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.mstep:last-child{border-bottom:0}
.mstep .mn{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line)}
.mstep .mn.done{background:var(--pine);color:#fff;border-color:var(--pine)}
.mstep .mb2{flex:1;min-width:0}
.mstep .mb2 b{font-size:14.5px;font-weight:600;display:block;letter-spacing:-.006em}
.mstep .mb2 .md{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.unlocks{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.unlocks span{font-size:10.5px;font-weight:600;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);border-radius:6px;padding:3px 8px}
.unlocks span.on{background:var(--pine-bg);color:var(--pine);border-color:var(--pine-line)}
.mstep .mr{flex:none;text-align:right;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.mstep .mt2{font-size:11px;color:var(--muted);white-space:nowrap}
.donebox{background:var(--pine-bg);border:1px solid var(--pine-line);border-radius:16px;padding:18px 20px}
.donebox .dl{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.8px;color:#265640}
.donebox .dl b{font-weight:600}
/* ai staff */
.scard{position:relative}
.scard .sbadge{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:3px 7px;z-index:2}
.sbadge.auto{background:var(--pine-bg);color:var(--pine);border:1px solid var(--pine-line)}
.sbadge.appr{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line)}
.sbadge.pause{background:#F1EEE8;color:var(--muted);border:1px solid var(--line)}
.scard .swork{display:flex;gap:14px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft);position:relative}
.scard .swork div{font-size:10.5px;color:var(--muted)}
.scard .swork b{display:block;font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:500;line-height:1}
.scard.paused{opacity:.6}
.qrow{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.qrow:last-child{border-bottom:0}
.qrow .qa2{width:32px;height:32px;border-radius:9px;background:var(--gold-bg);border:1px solid var(--gold-line);display:grid;place-items:center;font-size:15px;flex:none}
/* reports */
.heat{display:grid;grid-template-columns:44px repeat(7,1fr);gap:3px;margin-top:8px}
.heat span{font-size:9.5px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-align:center;padding:3px 0}
.heat i{height:20px;border-radius:4px;display:block;background:#EDE8DF}
.heat i.l1{background:var(--gold-bg)}.heat i.l2{background:#EBD9B4}.heat i.l3{background:var(--gold-2)}.heat i.l4{background:var(--gold)}
.heat .hr{font-size:9.5px;color:var(--muted);text-align:right;padding-right:5px;line-height:20px}
.brk{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.brk:last-child{border-bottom:0}
.brk .bn{font-size:13px;font-weight:600;flex:1;min-width:0}
.brk .bb{width:120px;height:7px;border-radius:999px;background:#EDE8DF;overflow:hidden;flex:none}
.brk .bb i{display:block;height:100%;border-radius:999px;background:var(--gold-2)}
.brk .bv{font-size:12.5px;font-weight:600;width:64px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.brk .bp{font-size:11px;color:var(--muted);width:38px;text-align:right;flex:none}
.cohort{display:grid;grid-template-columns:64px repeat(5,1fr);gap:3px;font-size:10.5px}
.cohort span{color:var(--muted);font-weight:700;text-align:center;padding:3px 0;font-size:9.5px}
.cohort .cl{text-align:right;padding-right:6px;color:var(--muted);line-height:22px}
.cohort i{height:22px;border-radius:4px;display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--ink);font-style:normal}
.insight{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.insight:last-child{border-bottom:0}
.insight .ii{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex:none}
.insight b{font-size:13.3px;font-weight:600;display:block}
.insight span{font-size:12.3px;color:var(--muted);line-height:1.5}
/* reviews */
.srcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.srccard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;box-shadow:var(--sh);position:relative;cursor:pointer;transition:.14s}
.srccard:hover{border-color:var(--gold-line);transform:translateY(-1px)}
.srccard.off{opacity:.66;background:#FBFAF7}
.srccard .sh{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.srclogo{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:14px;font-weight:700;color:#fff;flex:none}
.srccard b{font-size:13.5px;font-weight:600}
.srccard .sdot2{width:8px;height:8px;border-radius:50%;margin-left:auto;flex:none}
.sdot2.ok{background:var(--pine);box-shadow:0 0 0 3px var(--pine-bg)}
.sdot2.part{background:var(--gold-2);box-shadow:0 0 0 3px var(--gold-bg)}
.sdot2.no{background:#D3CDC2}
.srccard .snum{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1}
.srccard .smeta2{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.srccard .scap{font-size:10.5px;font-weight:700;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft)}
.scap.full{color:var(--pine)}.scap.read{color:var(--gold)}.scap.none{color:var(--muted)}
/* review row */
.revrow{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.revrow:last-child{border-bottom:0}
.revsrc{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none;margin-top:2px}
.revbody{flex:1;min-width:0}
.revhd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.revhd b{font-size:13.8px;font-weight:600}
.revstars{font-size:12px;color:var(--gold-2);letter-spacing:1px}
.revhd .rw{font-size:11px;color:var(--muted);margin-left:auto}
.revtext{font-size:13px;color:var(--ink2);line-height:1.55;margin-top:6px}
.revreply{background:#FCFAF7;border-left:2px solid var(--gold-line);border-radius:0 9px 9px 0;padding:9px 12px;margin-top:9px;font-size:12.3px;color:var(--muted);line-height:1.5}
.revreply b{color:var(--ink2)}
.revact{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* theme bars */
.theme{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.theme:last-child{border-bottom:0}
.theme .tw{font-size:13px;font-weight:600;width:130px;flex:none}
.theme .tbar{flex:1;height:8px;border-radius:999px;background:#EDE8DF;overflow:hidden}
.theme .tbar i{display:block;height:100%;border-radius:999px;background:var(--pine)}
.theme .tbar i.neg{background:var(--red)}
.theme .tn{font-size:11.5px;color:var(--muted);width:52px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
/* services */
.svc-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.svc-search{flex:1 1 240px;max-width:320px;position:relative}
.svc-search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 13px 9px 32px;font-family:inherit;font-size:12.5px;background:#fff}
.svc-search span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}
.catgrp{margin-top:20px}
.cathd{display:flex;align-items:center;gap:10px;padding:0 2px 9px}
.cathd h3{font-family:var(--serif);font-size:16.5px;font-weight:500}
.cathd .cn{font-size:11px;color:var(--muted);font-weight:600;background:#F1EEE8;border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.cathd .ca{margin-left:auto;font-size:12px;color:var(--gold);font-weight:600;cursor:pointer}
.srow2{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:9px;box-shadow:var(--sh);transition:.14s;position:relative}
.srow2:hover{border-color:var(--gold-line);transform:translateY(-1px)}
.srow2.hidden-s{opacity:.55;background:#FBFAF7}
.srow2 .grip{color:#CFC8BC;font-size:13px;letter-spacing:-2px;cursor:grab;flex:none;width:12px}
.srow2 .sthumb{width:52px;height:52px;border-radius:12px;background-size:cover;background-position:center;flex:none;border:1px solid var(--line)}
.srow2 .sinfo{flex:1 1 200px;min-width:0}
.srow2 .sinfo b{font-size:14.5px;font-weight:600;display:block;letter-spacing:-.006em}
.srow2 .sinfo span{font-size:12px;color:var(--muted);display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow2 .smeta{display:flex;gap:22px;flex:none;align-items:center}
.srow2 .smeta div{text-align:right}
.srow2 .smeta .ml{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;display:block}
.srow2 .smeta .mv{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.srow2 .sact{display:flex;gap:6px;align-items:center;flex:none}
.iconbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink2);font-size:13px;display:grid;place-items:center;flex:none}
.iconbtn:hover{border-color:var(--gold-line);color:var(--gold)}
.iconbtn.danger:hover{border-color:#EAD2CE;color:var(--red);background:var(--red-bg)}
.pop{position:absolute;right:14px;top:calc(100% - 6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -14px rgba(28,26,23,.32);padding:6px;z-index:15;min-width:172px;display:none}
.pop.on{display:block}
.pop button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;font-family:inherit;font-size:12.8px;color:var(--ink);padding:9px 11px;border-radius:8px;cursor:pointer;text-align:left}
.pop button:hover{background:#FCFAF6}
.pop button.danger{color:var(--red)}
.pop button.danger:hover{background:var(--red-bg)}
.pop .sep{height:1px;background:var(--line-soft);margin:5px 0}
.addrow{border:1px dashed var(--gold-line);background:var(--gold-bg);color:var(--gold);border-radius:14px;padding:14px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;width:100%;margin-top:2px}
.addrow:hover{background:#F4EBD8}
/* calendar pro */
.cal-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cal-day{position:relative;cursor:pointer;transition:background .12s}
.cal-day:hover{background:#FCF8F0}
.cal-day.sel{background:var(--gold-bg);box-shadow:inset 0 0 0 2px var(--gold)}
.cal-day .addhint{position:absolute;bottom:6px;right:7px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#fff;font-size:12px;line-height:18px;text-align:center;opacity:0;transition:.12s;font-weight:600}
.cal-day:hover .addhint{opacity:1}
.cal-day.out{cursor:default}.cal-day.out:hover{background:#FBFAF7}.cal-day.out .addhint{display:none}
.capbar{height:3px;border-radius:2px;background:#EDE8DF;overflow:hidden;margin:2px 0 3px}
.capbar i{display:block;height:100%;background:var(--gold-2)}
.capbar.full i{background:var(--red)}
.capbar.light i{background:var(--pine)}
.moreN{font-size:10.5px;color:var(--muted);font-weight:600;padding-left:2px}
.chip{cursor:pointer}
.chip:hover{filter:brightness(.97)}
.dayrail .slot-t{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);align-items:center}
.dayrail .slot-t:last-child{border-bottom:0}
.dayrail .slot-t .tm{font-size:11.5px;font-weight:600;color:var(--ink2);width:56px;flex:none;font-variant-numeric:tabular-nums}
.dayrail .slot-t.free{opacity:.72}
.dayrail .slot-t.free .fill{flex:1;border:1px dashed var(--gold-line);border-radius:8px;padding:6px 10px;font-size:11.5px;color:var(--gold);cursor:pointer;background:var(--gold-bg)}
.dayrail .slot-t .bk{flex:1;border-radius:8px;padding:7px 10px;background:var(--pine-bg);border:1px solid var(--pine-line);cursor:pointer}
.dayrail .slot-t .bk b{font-size:12.5px;font-weight:600;display:block;color:#1f3d2f}
.dayrail .slot-t .bk span{font-size:11px;color:var(--muted)}
.dayrail .slot-t .bk.req{background:var(--gold-bg);border-color:var(--gold-line)}
.dayrail .slot-t .bk.req b{color:var(--gold)}
.legend-dot{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.legend-dot i{width:9px;height:9px;border-radius:3px;display:block}
/* feature rows */
.frow-feat{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.frow-feat:last-child{border-bottom:0}
.frow-feat.offst{opacity:.62}
.fdot{width:9px;height:9px;border-radius:50%;flex:none}
.fdot.on{background:var(--pine);box-shadow:0 0 0 3px var(--pine-bg)}
.fdot.warn{background:var(--gold-2);box-shadow:0 0 0 3px var(--gold-bg)}
.fdot.off{background:#D3CDC2}
.fdot.err{background:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.lockpill{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pine);background:var(--pine-bg);border:1px solid var(--pine-line);border-radius:6px;padding:3px 8px}
/* governor bar */
.govbar{display:flex;align-items:center;gap:10px;margin-top:10px}
.govtrack{flex:1;height:8px;border-radius:999px;background:#EDE8DF;overflow:hidden;display:flex;gap:2px}
.govtrack i{display:block;height:100%;background:var(--gold-2)}
.govtrack i.free{background:#E4DFD5}
/* checklist toggle */
.ck{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.ck:last-child{border-bottom:0}
.ck .cb{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;font-size:11px;color:transparent;cursor:pointer}
.ck.done .cb{background:var(--pine);border-color:var(--pine);color:#fff}
.ck.done .cl{color:var(--muted);text-decoration:line-through}
.ck .cl{font-size:13px;color:var(--ink);flex:1}
@media(max-width:980px){.voice .vgrid{grid-template-columns:1fr}}

@media(max-width:980px){.kpis,.kpis.k3{grid-template-columns:1fr 1fr}.grid,.grid.even{grid-template-columns:1fr}.qa-grid,.gal{grid-template-columns:1fr 1fr}.vayla{flex-wrap:wrap}.v-act{width:100%}.split{grid-template-columns:1fr}.conv-list{max-height:220px}}
@media(max-width:980px){.topbar{padding:10px 18px;flex-wrap:wrap;min-height:0}.topbar .search{max-width:none;flex:1 1 100%;order:2}.topbar .tright{margin-left:auto;order:1}}
@media(max-width:760px){.app{grid-template-columns:1fr}.content{padding:20px 16px 40px}
 .dhead h1{font-size:29px;margin:8px 0 11px}.dhead{gap:16px}.hcta{padding-top:4px;width:100%}.hcta .btn{flex:1}
 .dhead .sub{font-size:12.8px;padding:6px 13px 6px 11px}}


/* ---- mobile navigation drawer ---- */
.menubtn{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.menubtn i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px}
.navscrim{display:none;position:fixed;inset:0;background:rgba(24,20,16,.5);backdrop-filter:blur(3px);z-index:60}
.navscrim.on{display:block}
@media(max-width:760px){
  .menubtn{display:flex}
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;left:0;bottom:0;width:270px;z-index:70;transform:translateX(-100%);transition:transform .26s cubic-bezier(.3,.8,.3,1);height:100vh;padding-top:16px}
  .side.open{transform:none;box-shadow:24px 0 60px -20px rgba(0,0,0,.5)}
  .side .navbtn{min-height:46px;font-size:14px}
  .side .navsec{padding:15px 11px 5px}
}
/* ============================================================
   MOBILE AUDIT PASS — every component, every breakpoint
   ============================================================ */
@media(max-width:1100px){
  .grid[style]{grid-template-columns:1fr !important}
  .setwrap{grid-template-columns:180px 1fr}
}
@media(max-width:900px){
  /* layout shells */
  .setwrap{grid-template-columns:1fr;gap:14px}
  .setnav{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .setnav::-webkit-scrollbar{display:none}
  .setnav .sg{display:none}
  .setnav button{white-space:nowrap;width:auto;flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px}
  .setnav button.on{box-shadow:none;border-color:var(--gold)}
  .setnav button .warn{margin-left:6px}
  /* multi-column → single */
  .bgrid,.statrow,.f2,.f3,.opts.two,.opts{grid-template-columns:1fr}
  .srcgrid{grid-template-columns:1fr 1fr}
  .grid[style]{grid-template-columns:1fr !important}
  .qa-grid[style]{grid-template-columns:1fr 1fr !important}
  /* scrolling strips instead of chaotic wrapping */
  .tabs,.mtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar,.mtabs::-webkit-scrollbar{display:none}
  .tabs .tab,.mtabs button{white-space:nowrap;flex:none}
  .seg{flex:none}
  /* wide data tables scroll rather than crush */
  .card.pad0{overflow-x:auto}
  .tbl{min-width:560px}
  .perm{overflow-x:auto;display:block}
  .perm-inner{display:grid;grid-template-columns:1.4fr repeat(4,58px);gap:4px;min-width:420px}
}
@media(max-width:760px){
  /* header + chrome */
  .content{padding:18px 14px 44px}
  .dhead{gap:14px}
  .dhead h1{font-size:28px;margin:8px 0 11px;letter-spacing:-.018em}
  .dhead .sub{font-size:12.6px;padding:6px 13px 6px 11px}
  .hcta{padding-top:2px;width:100%;display:flex;gap:8px}
  .hcta .btn{flex:1 1 0;min-width:0;padding:11px 10px;font-size:12.3px;min-height:44px}
  .hair{margin:18px 0 18px}
  /* every touch target ≥44px */
  .btn,.chipbtn,.opt,.iconbtn,.tab,.navbtn{min-height:44px}
  .iconbtn{width:44px;height:44px}
  .chipbtn{padding:11px 14px}
  .lk{padding:8px 0;display:inline-block}
  .tgl{width:46px;height:27px}
  .tgl::after{width:23px;height:23px}
  .tgl:not(.off)::after{left:21px}
  /* KPIs */
  .kpis,.kpis.k3{grid-template-columns:1fr 1fr;gap:11px}
  .kpi{padding:14px 15px}
  .kpi .num{font-size:26px}
  .kpi .ctx{font-size:11px}
  .kpi .foot{flex-wrap:wrap;gap:6px}
  .spark{display:none}
  /* cards */
  .card{padding:17px 15px;border-radius:15px}
  .chead h3{font-size:16.5px}
  /* rows reflow instead of squeezing */
  .frow,.frow-feat,.hrow,.arow,.userrow,.qrow,.revrow,.msn,.mstep,.insight{flex-wrap:wrap;row-gap:8px}
  .ft,.mb2,.revbody,.ht{flex:1 1 100%;min-width:0}
  .frow .tag,.frow-feat .tag,.msn .tag{order:3}
  /* services */
  .srow2{flex-wrap:wrap;row-gap:10px;padding:13px 13px}
  .srow2 .sinfo{flex:1 1 calc(100% - 80px)}
  .srow2 .smeta{width:100%;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--line-soft)}
  .srow2 .sact{width:100%;justify-content:flex-end;padding-top:4px}
  .pop{right:8px;left:8px;min-width:0}
  /* calendar — keep 7 columns, shrink the cells */
  .cal-day{min-height:60px;padding:5px 4px;gap:2px}
  .cal-day .dnum{font-size:10.5px}
  .cal-day.today .dnum{width:19px;height:19px;font-size:10px}
  .chip{font-size:0;padding:0;height:6px;border-radius:3px;display:block}
  .capbar,.moreN,.addhint{display:none}
  .dow span{font-size:8.5px;padding:7px 2px;text-align:center}
  .cal-hd{padding:13px 14px}
  .cal-hd h3{font-size:16px}
  .cal-toolbar{gap:8px}
  .dayrail .slot-t .tm{width:46px;font-size:11px}
  /* inbox */
  .split{grid-template-columns:1fr;min-height:0}
  .conv-list{max-height:190px;border-right:0;border-bottom:1px solid var(--line)}
  .bubble{max-width:92%}
  /* modals become sheets */
  .scrim{padding:0;align-items:flex-end}
  .sheet,.sheet.sm,.sheet.md{max-width:100%;border-radius:20px 20px 0 0;max-height:94vh;display:flex;flex-direction:column}
  .sh-hd{padding:16px 16px;position:sticky;top:0;z-index:3}
  .sh-hd h3{font-size:17.5px}
  .sh-body,.wiz-form{padding:16px 15px;max-height:none}
  .sh-ft{padding:12px 15px;flex-wrap:wrap;gap:8px;position:sticky;bottom:0}
  .sh-ft .sp{width:100%;display:flex;gap:8px}
  .sh-ft .btn{flex:1 1 0;min-width:0;font-size:12.3px;padding:12px 8px}
  .wiz{grid-template-columns:1fr}
  .wiz-prev{border-left:0;border-top:1px solid var(--line);padding:16px 15px}
  .stepper{padding:11px 15px;overflow-x:auto;flex-wrap:nowrap}
  .stp{white-space:nowrap}
  /* galleries + grids */
  .gal{grid-template-columns:1fr 1fr;gap:11px}
  .staffgrid{grid-template-columns:1fr;gap:11px}
  .srcgrid{grid-template-columns:1fr 1fr;gap:10px}
  .qa-grid,.qa-grid[style]{grid-template-columns:1fr 1fr !important;gap:10px}
  .grid,.grid.even,.grid[style]{grid-template-columns:1fr !important;gap:14px}
  /* reports visualisations */
  .heat{grid-template-columns:32px repeat(7,1fr);gap:2px}
  .heat i{height:16px}
  .heat .hr{font-size:8.5px;line-height:16px;padding-right:3px}
  .heat span{font-size:8.5px}
  .cohort{grid-template-columns:44px repeat(5,1fr);gap:2px}
  .cohort i{height:19px;font-size:9px}
  .cohort .cl{font-size:9px;line-height:19px;padding-right:3px}
  .brk{gap:8px}
  .brk .bb{width:64px}
  .brk .bv{width:56px;font-size:12px}
  .brk .bp{width:32px}
  .bars{height:130px;gap:7px}
  .theme .tw{width:96px;font-size:12px}
  /* settings + team */
  .dayt{grid-template-columns:repeat(4,1fr);gap:6px}
  .srow .sl{width:100px;font-size:11.5px}
  .srow{flex-wrap:wrap;row-gap:4px}
  /* help */
  .helpwrap{grid-template-columns:1fr}
  .help-nav{max-height:none;border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:12px}
  .help-nav .hgrp{display:none}
  .help-nav .hsearch{display:none}
  .help-nav button{white-space:nowrap;width:auto;flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px}
  .help-art{padding:18px 15px;max-height:none}
  .help-art h2{font-size:21px}
  /* launch hq + voice */
  .nexthero,.voice,.exhero{padding:20px 17px;border-radius:16px}
  .nexthero h2{font-size:21px}
  .voice .vgrid{grid-template-columns:1fr;gap:9px}
  .mstep .mr{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding-top:6px}
  .unlocks span{font-size:10px}
  /* vayla band */
  .vayla{flex-wrap:wrap;padding:16px 15px;gap:12px}
  .v-body p{font-size:15px}
  .v-act{width:100%;min-height:46px}
  /* website preview */
  .pv-hero{height:150px}
  .pv-hero-txt h4{font-size:18px;max-width:100%}
  .pv-strip{grid-template-columns:1fr 1fr;gap:7px;padding:11px}
  .browser-url{font-size:9.5px}
  .editchip{font-size:9.5px;padding:3px 7px}
  /* flow builder */
  .fnode{padding:12px 13px}
  .fconn{margin-left:26px}
}
@media(max-width:420px){
  .kpis,.kpis.k3{grid-template-columns:1fr}
  .gal,.srcgrid,.qa-grid,.qa-grid[style]{grid-template-columns:1fr !important}
  .dayt{grid-template-columns:repeat(3,1fr)}
  .dhead h1{font-size:25px}
  .hcta{flex-wrap:wrap}
  .hcta .btn{flex:1 1 100%}
  .cal-day{min-height:52px}
}