/* ============================================================== SHMEL MVP
   The product surface. Same identity as the marketing site — Cabinet Grotesk,
   Instrument Serif, the seven colours, yellow never as text — but the
   hierarchy is inverted: decision first, evidence second, charts last. */

@font-face{font-family:'Cabinet Grotesk';src:url('/fonts/CabinetGrotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('/fonts/CabinetGrotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('/fonts/CabinetGrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/InstrumentSerif-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  /* ── Colour ──────────────────────────────────────────────────────────────
     EXACTLY the seven brand values. Never tint, shade or invent an in-between.
     Lighter means opacity of one of these, or a gradient between two.        */
  --yellow:#F9E061; --white:#FFFFFF; --ink:#171C2B;
  --slate:#4A4E5C;  --grey:#6E717D;  --mist:#A0A2A8; --cloud:#EDEDED;

  /* aliases used through this sheet, all pointing at the seven */
  --paper:var(--white); --paper-2:var(--cloud); --ink-2:var(--slate);
  --muted:var(--slate); --line:var(--cloud); --line-2:var(--mist);
  --grey-mid:var(--mist); --y:var(--yellow);

  /* surfaces: opacity and gradients only */
  --wash:rgba(23,28,43,.03);        /* the faintest usable ground            */
  --y-15:rgba(249,224,97,.15);
  --y-30:rgba(249,224,97,.30);
  --y-55:rgba(249,224,97,.55);
  --g-dark:linear-gradient(180deg,#171C2B 0%,#171C2B 52%,#4A4E5C 100%);
  --g-art-2:linear-gradient(165deg,#F9E061 0%,#FFFFFF 100%);

  --disp:"Cabinet Grotesk","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --rail:252px;

  /* ── Radius — the system scale, nothing between ───────────────────────── */
  --r-s:12px; --r:18px; --r-m:18px; --r-l:26px; --r-xl:34px; --r-pill:999px;

  /* ── Elevation — always multi-layer, low-opacity ink ──────────────────── */
  --sh-s:0 1px 2px rgba(23,28,43,.05),0 6px 18px -10px rgba(23,28,43,.16);
  --sh-m:0 2px 6px rgba(23,28,43,.06),0 20px 46px -26px rgba(23,28,43,.28);
  --sh-card:0 1px 2px rgba(23,28,43,.04),0 10px 26px -14px rgba(23,28,43,.20),
            0 36px 68px -36px rgba(23,28,43,.26);
  --sh:var(--sh-s);
  --hair:1px solid rgba(23,28,43,.06);

  --ease:cubic-bezier(0,0,0,1);
  --d-hover:120ms; --d-state:220ms;
  color-scheme:light;
}
*{box-sizing:border-box}
/* The `hidden` attribute is only a default of display:none, and any class
   that sets its own display silently beats it. That has now caused three
   separate bugs in this file — the findings screen staying on top of the
   dashboard after it was closed, the account menu opening on page load and
   refusing to shut, and the To do pill that could never reach zero. Fixing
   them one at a time was the mistake; the attribute has to mean what it
   says everywhere, so component display rules cannot override it. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--disp);font-weight:400;color:var(--ink);background:var(--white);background-image:radial-gradient(1200px 680px at 68% -8%,rgba(237,237,237,.55) 0%,rgba(255,255,255,0) 70%);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
button{font:inherit;color:inherit;cursor:pointer}
select,input,textarea{color:var(--ink)}
a{color:inherit}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ shell */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}

.rail{background:var(--g-dark);
  color:#EDEDED;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;padding:22px 16px 18px}
.rail-mark{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;
  font-size:19px;letter-spacing:-.02em;color:#fff;padding:2px 8px 24px}
.rail-fold{margin-left:auto;flex:none;width:30px;height:30px;border:0;border-radius:var(--r-s);
  background:rgba(255,255,255,.08);color:rgba(237,237,237,.85);display:grid;place-items:center;
  cursor:pointer}
.rail-fold:hover{background:rgba(255,255,255,.16);color:#fff}
.rail-fold svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}

/* Folded: icons only, labels become tooltips, and the grid column narrows
   with the rail so the page reflows rather than sliding under it. */
.app.railmin{--rail:76px}
.app.railmin .rail{padding:22px 12px 18px}
.app.railmin .rail-name,.app.railmin .rail-grp,
.app.railmin .rail-who .wh,.app.railmin .rail-who .whoc{display:none}
.app.railmin .rail-mark{flex-direction:column;gap:12px;padding-bottom:18px}
.app.railmin .rail-fold{margin:0}
.app.railmin .rail nav button{justify-content:center;padding:12px 0;gap:0;font-size:0}
.app.railmin .rail nav button .ic{width:20px;height:20px}
.app.railmin .rail nav button .ct{position:absolute;margin:0;transform:translate(14px,-12px);
  font-size:10px;padding:1px 6px}
.app.railmin .rail nav button{position:relative}
.app.railmin .rail-who{justify-content:center;padding-top:14px}
/* Folding the rail gives the screen back to the work: the canvas drops
   its reading width instead of leaving the space empty on the right. */
.app.railmin .canvas{max-width:none}
.rail-mark img{width:20px;height:20px;display:block}
.rail-mark .mk{width:34px;height:34px;border-radius:var(--r-s);background:var(--y);display:grid;
  place-items:center;flex:none}
.rail nav{display:flex;flex-direction:column;gap:2px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.rail nav::-webkit-scrollbar{width:6px}
.rail nav::-webkit-scrollbar-thumb{background:rgba(237,237,237,.22);border-radius:var(--r-pill)}
.rail nav{scrollbar-width:thin;scrollbar-color:rgba(237,237,237,.22) transparent}
.rail-mark,.whowrap{flex:none}
.rail nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--r-s);padding:11px 12px;color:rgba(237,237,237,.9);
  font-weight:700;font-size:14.5px;transition:background .18s var(--ease),color .18s var(--ease)}
.rail nav button .ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.rail nav button[aria-current="true"]{background:var(--y);color:var(--ink)}
.rail nav button .ct{margin-left:auto;background:rgba(23,28,43,.14);color:var(--ink);border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;padding:2px 8px;min-width:20px;text-align:center}
.rail nav button:not([aria-current="true"]) .ct{background:var(--y);color:var(--ink)}
/* One definition only. A second one used to set color:#4A4E5C, which is the
   exact bottom stop of --g-dark — the SETTINGS label was painted in the
   colour of the background directly behind it. */
.rail-grp{margin:18px 8px 6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,237,237,.72);font-weight:700}
.rail nav button.sec{font-weight:500}
.rail-who{padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:11px}
.rail-who .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none}
.rail-who .wh{min-width:0}
.rail-who .wh b{display:block;font-size:14px;color:#fff;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-who .wh span{display:block;font-size:12.5px;color:rgba(237,237,237,.78);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{min-width:0;display:flex;flex-direction:column}

/* -------------------------------------------------------------- top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:16px clamp(18px,3vw,32px)}
/* The clinic's mark beside its name, the same one the rail carries, so the
   header says whose account this is without reading it. */
/* 48px is the height of the two lines beside it, so the mark reads as the
   block's own rather than as something perched above the name. */
.top-av{flex:none;margin-right:-4px;width:48px;height:48px;border-radius:50%;background:var(--wash);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;
  font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.top-av img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.top-acct{display:flex;flex-direction:column;min-width:0}
.top-acct b{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.1;letter-spacing:-.01em}
.top-acct span{font-size:13px;color:var(--muted);margin-top:2px}
.waiting{display:inline-flex;align-items:center;gap:8px;background:var(--y);color:var(--ink);
  border:0;border-radius:var(--r-pill);padding:9px 15px;font-weight:700;font-size:13px;
  transition:background .18s var(--ease),color .18s var(--ease)}
.waiting:hover{background:var(--ink);color:#fff}
.waiting b{font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);padding:6px 12px;
  font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--paper-2);background:var(--paper)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}
.chip.demo{background:var(--paper-2);color:var(--ink-2);border-color:var(--line-2)}
.chip.demo i{background:var(--ink-2)}
.chip.live{background:var(--y);color:var(--ink);border-color:var(--y)}
.chip.live i{background:var(--ink);animation:pulse 2.4s ease-in-out infinite}
.chip.syncing i{animation:pulse .9s ease-in-out infinite}
.chip.error{border-color:var(--ink);color:var(--ink)}
.chip.nodata{color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.top .sync{font-size:12.5px;color:var(--muted);margin-left:2px}
.top .spacer{flex:1}
.btn{border:1px solid var(--paper-2);background:var(--paper);border-radius:var(--r-pill);
  padding:9px 16px;font-weight:700;font-size:13.5px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--paper-2)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.dark:hover{background:var(--ink)}
.btn.y{background:var(--y);border-color:var(--y);color:var(--ink)}
.btn.y:hover{filter:brightness(.95)}
.btn.sm{padding:7px 13px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:default}

/* ---------------------------------------------------------------- canvas */
.canvas{padding:clamp(20px,2.6vw,30px) clamp(18px,3vw,32px) 60px;max-width:1240px;width:100%}
.view{display:none}
.view.on{display:block}
/* Integrations, SEO and Social wrote their titles as a bare h1 inside
   .vhead and so got the browser default sans, next to the serif on every
   other screen. One selector, three screens. */
.ttl,.vhead h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.5rem);
  line-height:1.08;margin:0 0 6px;letter-spacing:-.01em}
.sub{color:var(--ink-2);font-size:15px;margin:0 0 22px;max-width:62ch}
.sec-h{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px}
.sec-h h2{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0}
.sec-h .rule{flex:1;height:1px;background:var(--paper-2)}

/* ------------------------------------------------------- decision cards */
.decks{display:flex;flex-direction:column;gap:12px}
.deck{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);
  display:grid;grid-template-columns:4px minmax(0,1fr);overflow:hidden}
.deck .stripe{background:var(--line-2)}
.deck.attention .stripe{background:var(--y)}
.deck.opportunity .stripe{background:var(--ink)}
.deck-in{padding:20px 22px}
.deck-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.tag{font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:4px 10px;background:var(--paper-2);color:var(--ink-2)}
.tag.attention{background:var(--y);color:var(--ink)}
.tag.opportunity{background:var(--ink);color:#fff}
.tag.conf{border:1px solid var(--paper-2);background:var(--paper);color:var(--muted)}
.tag.src{border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2)}
.deck-name{margin-left:auto;font-size:12.5px;color:var(--muted)}
.deck h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.8vw,1.5rem);
  line-height:1.2;margin:0 0 14px;letter-spacing:-.005em}
.ev{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--paper-2);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px}
.ev-i{flex:1 1 150px;padding:11px 14px;border-right:1px solid var(--paper-2);min-width:0}
.ev-i:last-child{border-right:0}
.ev-i .k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:4px}
.ev-i .v{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em}
.ev-i .d{font-size:12px;color:var(--muted);margin-top:2px}
.ev-i .d .up{color:var(--ink);font-weight:700}
.deck-why{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 16px;max-width:76ch}
.deck-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.deck-state{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:700;color:var(--ink-2)}
.deck-state i{width:8px;height:8px;border-radius:50%;background:var(--y)}
.deck.done .deck-in{opacity:.6}

/* ------------------------------------------------------------------ KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  background:var(--paper-2);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh)}
.kpi{background:var(--paper);padding:15px 16px}
.kpi .k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:6px}
.kpi .v{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.kpi .d{font-size:12px;color:var(--muted);margin-top:3px}
.kpi .d.bad{color:var(--ink);font-weight:700}
.kpi .v.none{color:var(--line-2);font-weight:400;font-size:17px}

.ctrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:20px 0 14px}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--paper-2);
  border-radius:var(--r-pill);padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:var(--r-pill);padding:6px 14px;font-weight:700;
  font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cmp{font-size:13px;color:var(--muted)}

/* ----------------------------------------------------------------- table */
.tblwrap{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:900px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:13px 14px;border-bottom:1px solid var(--paper-2);
  white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--paper-2);font-size:14px;vertical-align:middle}
.tbl tbody tr{cursor:pointer;transition:background .12s}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .cname{font-weight:700;min-width:210px}
.tbl .cname small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-2)}
.st i{width:7px;height:7px;border-radius:50%;background:var(--y)}
.st.paused i{background:var(--line-2)}
.delta{font-size:11.5px;color:var(--muted);display:block;margin-top:1px}
.delta.bad{color:var(--ink);font-weight:700}
.spark{display:block}
.sf{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  background:var(--y);color:var(--ink);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.sf.none{background:var(--paper-2);color:var(--muted)}

/* ---------------------------------------------------------------- drawer */
.scrim{position:fixed;inset:0;background:rgba(23,28,43,.42);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);background:var(--paper);
  z-index:61;transform:translateX(100%);transition:transform .3s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;box-shadow:-16px 0 50px rgba(23,28,43,.18)}
.drawer.on{transform:none}
.dr-h{display:flex;align-items:flex-start;gap:12px;padding:20px 24px;border-bottom:1px solid var(--paper-2)}
.dr-h h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.15;margin:4px 0 0}
.dr-x{margin-left:auto;border:1px solid var(--paper-2);background:var(--paper);border-radius:var(--r-s);
  width:34px;height:34px;flex:none;font-size:17px;line-height:1}
.dr-b{padding:22px 24px;overflow-y:auto;flex:1}
.dr-f{padding:16px 24px;border-top:1px solid var(--paper-2);display:flex;gap:8px;flex-wrap:wrap;
  background:var(--paper)}
.dr-lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:22px 0 9px}
.dr-lab:first-child{margin-top:0}
.dr-b p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.dr-b p.lead{color:var(--ink);font-size:15.5px}
.evrow{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--paper-2)}
.evrow:last-child{border-bottom:0}
.evrow .k{flex:1;font-size:13.5px;color:var(--muted)}
.evrow .now{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.evrow .was{font-size:12.5px;color:var(--muted);min-width:96px;text-align:right}
.mathbox{background:var(--paper-2);border-radius:var(--r);padding:14px 16px;font-size:13.5px;
  line-height:1.6;color:var(--ink-2)}
.mathbox b{color:var(--ink)}

.asksug{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px;max-width:1180px}
.asksug button{border:1px solid var(--paper-2);background:var(--paper);border-radius:var(--r-pill);
  padding:6px 13px;font-size:12.5px;color:var(--ink-2)}
.asksug button:hover{background:var(--paper)}
.answer{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:20px 22px;
  margin-bottom:12px;max-width:1180px}
.answer .who{display:flex;align-items:center;gap:9px;font-weight:700;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.answer .who img{width:18px;height:18px}
.answer p{margin:0 0 10px;font-size:15px;line-height:1.65;white-space:pre-line}
.answer p:last-child{margin-bottom:0}
.answer .cites{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--paper-2)}
.answer .cites span{font-size:11.5px;color:var(--muted)}
.answer .cites button{border:1px solid var(--paper-2);background:var(--paper);border-radius:var(--r-pill);
  padding:4px 11px;font-size:11.5px;font-weight:700}

/* ------------------------------------------------------------------ brain */
.brain{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:center;
  margin-top:8px}
.brain-col{display:flex;flex-direction:column;gap:9px}
.bnode{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:13px 15px}
.bnode b{display:block;font-weight:700;font-size:14.5px}
.bnode .m{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11.5px;color:var(--muted)}
.bnode .m .chip{padding:2px 8px;font-size:9.5px}
.bhub{background:var(--ink);color:#fff;border-radius:var(--r-l);padding:22px 24px;text-align:center;
  min-width:172px}
.bhub img{width:30px;height:30px;margin-bottom:8px}
.bhub b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem}
.bhub span{display:block;font-size:12px;color:#A0A2A8;margin-top:4px}

/* -------------------------------------------------------------- strategy */
.strat{display:flex;flex-direction:column;gap:11px;max-width:820px}
.srow{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:18px 20px;
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:start}
.srow .sl{font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:3px}
.srow .sv{font-size:15px;line-height:1.6}
.srow.k{background:var(--y)}
.srow.k .sl{color:var(--ink)}
.sacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* -------------------------------------------------------------- activity */
.feed{position:relative;padding-left:26px;max-width:860px}
.feed::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--paper-2)}
.fitem{position:relative;padding:0 0 20px}
.fitem::before{content:"";position:absolute;left:-25px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2)}
.fitem.detected::before{border-color:var(--line-2)}
.fitem.recommended::before{border-color:var(--ink)}
.fitem.approved::before{background:var(--y);border-color:var(--y)}
.fitem.rejected::before{background:var(--paper-2);border-color:var(--line-2)}
.fitem .ft{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fitem .fx{font-size:14.5px;line-height:1.55;margin-top:2px}
.fitem .fk{font-weight:700;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-right:8px}

/* ------------------------------------------------------------- misc state */
.empty{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:38px 28px;
  text-align:center;color:var(--ink-2)}
/* The display serif is for figures and page titles. On a one-line empty
   state it reads as a pull quote about nothing. */
.empty b{display:block;font-family:var(--disp);font-weight:700;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:7px}
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,var(--cloud) 50%,var(--paper-2) 75%);
  background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:var(--r-l);height:104px;
  margin-bottom:12px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.banner{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:var(--r);
  box-shadow:var(--sh);padding:13px 16px;margin-bottom:18px;font-size:13.5px;color:var(--ink-2)}
.banner .chip{flex:none}
.err{background:var(--ink);color:#fff;border-radius:var(--r);padding:14px 17px;margin-bottom:16px}
.err b{display:block;margin-bottom:4px}
.err p{margin:0;color:#A0A2A8;font-size:13.5px}

@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;padding:12px}
  .rail-mark{padding:0 10px 0 4px}
  .rail nav{flex-direction:row;overflow-y:visible;min-height:auto}
  .rail nav button{white-space:nowrap}
  .brain{grid-template-columns:1fr}
  .canvas,.askbar,.top{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==================================================== EXTENDED MVP MODULES
   Overview, Intelligence, Organic, Compliance, Analytics. Same system:
   decision first, evidence attached, every figure carrying its source. */

.sec-h .btn{margin-left:auto}

/* ------------------------------------------------------------ closed loop */
.loop{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;background:var(--paper);
  border-radius:var(--r-l);box-shadow:var(--sh);padding:6px;overflow-x:auto}
.lp{flex:1 1 0;min-width:112px;padding:14px 12px;border-radius:var(--r);text-align:center;position:relative}
.lp b{display:block;font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
.lp span{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:4px}
.lp.on{background:var(--y)}
.lp.on span{color:var(--ink-2)}
.lp:not(:last-child)::after{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;
  margin-top:-4px;border-right:1.5px solid var(--line-2);border-top:1.5px solid var(--line-2);
  transform:rotate(45deg);z-index:1}
.lp.dim{opacity:.45}

.feed.compact{padding-left:22px;max-width:none}
.feed.compact .fitem{padding-bottom:13px}
.feed.compact .fx{font-size:13.5px}

/* --------------------------------------------------------------- audit */
.audit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.aud{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:16px 18px}
.aud .h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.aud .h b{font-weight:700;font-size:15px}
.aud .h .pill{margin-left:auto;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;border-radius:var(--r-pill);padding:3px 9px;background:var(--paper-2);color:var(--ink-2)}
.aud .h .pill.attention{background:var(--y);color:var(--ink)}
.aud .h .pill.opportunity{background:var(--ink);color:#fff}
.aud .h .pill.nodata{border:1px solid var(--line-2);background:var(--paper);color:var(--muted)}
.aud p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.auditbar{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:18px 20px;
  margin-bottom:14px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.auditbar .big{font-family:var(--serif);font-size:1.5rem;line-height:1.15}
.auditbar .fig{display:flex;flex-direction:column}
.auditbar .fig b{font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.auditbar .fig span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------------------------------------------------- audience / rivals */
.segs{display:flex;flex-direction:column;gap:9px}
.seg-row{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:13px 16px;
  display:grid;grid-template-columns:minmax(0,1.4fr) 86px 92px minmax(0,2fr);gap:14px;align-items:center}
.seg-row b{font-weight:700;font-size:14px}
.seg-row .bar{height:6px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden}
.seg-row .bar i{display:block;height:100%;background:var(--y)}
.seg-row .cpl{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.seg-row .cpl.none{color:var(--line-2);font-weight:400;font-size:13px}
.seg-row .nt{font-size:12.5px;color:var(--muted);line-height:1.45}
.notebox{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:14px 17px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:12px}
.notebox ul{margin:9px 0 0;padding-left:18px}
.notebox li{margin-bottom:5px}
.opens{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:12px}
/* Scoped to its own grid. A bare `.open` also matched `<tr class="crow open">`
   — an expanded campaign row — and gave a table row a card's padding, radius,
   shadow and left border. Same class of bug as the `.ahead` collision. */
.opens .open{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:15px 17px;
  border-left:3px solid var(--line-2)}
.opens .open.high{border-left-color:var(--y)}
.opens .open b{display:block;font-weight:700;font-size:14.5px;margin-bottom:5px}
.opens .open p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ------------------------------------------------------------- strategy */
.srow .sv ul{margin:8px 0 0;padding-left:18px}
.srow .sv li{margin-bottom:6px;font-size:14.5px;line-height:1.55}
.srow .muted{color:var(--muted);font-size:13px;display:block;margin-top:6px}

/* -------------------------------------------------------------- organic */
.orggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.oc{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:18px 20px;
  display:flex;flex-direction:column}
.oc-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.oc-score{flex:none;width:58px;height:58px;border-radius:var(--r-m);background:var(--y);display:grid;
  place-items:center;text-align:center;line-height:1}
.oc-score b{font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.oc-score span{display:block;font-size:9px;letter-spacing:.06em;color:var(--ink-2);margin-top:2px}
.oc-meta{min-width:0;flex:1}
.oc-meta .fmt{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.oc-meta h3{font-family:var(--disp);font-weight:700;font-size:15.5px;line-height:1.3;margin:0}
.oc-why{border:1px solid var(--paper-2);border-radius:var(--r);overflow:hidden;margin-bottom:13px}
.oc-w{display:grid;grid-template-columns:132px 44px minmax(0,1fr);gap:10px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--paper-2);font-size:12.5px}
.oc-w:last-child{border-bottom:0}
.oc-w .k{color:var(--muted);font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase}
.oc-w .n{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.oc-w .t{color:var(--ink-2);line-height:1.45}
.oc-act{margin-top:auto;display:flex;gap:8px;align-items:center}

.asset{border:1px solid var(--paper-2);border-radius:var(--r);overflow:hidden;margin-top:6px}
.asset-r{padding:13px 15px;border-bottom:1px solid var(--paper-2)}
.asset-r:last-child{border-bottom:0}
.asset-r .k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:5px}
.asset-r .v{font-size:14.5px;line-height:1.6;white-space:pre-line}
.asset-r .v.hook{font-family:var(--serif);font-size:1.2rem;line-height:1.25}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:12px;color:var(--ink-2);background:var(--paper-2);border-radius:var(--r-pill);padding:3px 10px}

/* ------------------------------------------------------------ compliance */
.stt{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 11px}
.stt.passed{background:var(--y);color:var(--ink)}
.stt.review{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.stt.blocked{background:var(--ink);color:#fff}
.risk{font-weight:700;font-size:12px}
.risk.high{color:var(--ink)}
.risk.medium{color:var(--ink-2)}
.risk.low{color:var(--muted)}
/* A bare `.mini` used to live here as a strip of compliance dots. Nothing
   renders it any more, but it matched `table.tbl.mini` — the market table and
   the day-by-day table — and set them to display:inline-flex, which collapses
   a table's layout entirely: the header printed in the middle and the rows
   stacked outside the panel. Dead rules with a generic name are not harmless.
   Anything reinstated here must carry its own name, not a size word. */
.disc{margin-top:16px;font-size:13px;line-height:1.6;color:var(--ink-2);background:var(--paper);
  border-radius:var(--r);box-shadow:var(--sh);padding:14px 17px;border-left:3px solid var(--y)}

.rw{border:1px solid var(--paper-2);border-radius:var(--r);overflow:hidden;margin-bottom:6px}
.rw-r{padding:12px 14px;border-bottom:1px solid var(--paper-2)}
.rw-r:last-child{border-bottom:0}
.rw-r.bad{background:var(--paper-2)}
.rw-r .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;display:block;margin-bottom:5px}
.rw-r .v{font-size:14.5px;line-height:1.6}
.rw-r .v.strike{text-decoration:line-through;text-decoration-color:var(--line-2);color:var(--ink-2)}
.chk{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid var(--paper-2)}
.chk:last-child{border-bottom:0}
.chk .dot{flex:none;width:11px;height:11px;border-radius:3px;margin-top:4px}
.chk .dot.pass{background:var(--y)}
.chk .dot.fail{background:var(--ink)}
.chk .dot.review{background:var(--paper);border:2px solid var(--ink)}
.chk .dot.na{background:var(--paper);border:2px solid var(--paper-2)}
.chk .bd{min-width:0}
.chk b{display:block;font-weight:700;font-size:14px}
.chk .bod{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.chk p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ------------------------------------------------------------- analytics */
.bars{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:20px 22px}
.bar-row{display:grid;grid-template-columns:200px minmax(0,1fr) 96px;gap:14px;align-items:center;
  padding:9px 0}
.bar-row .nm{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .tr{height:20px;background:var(--paper-2);border-radius:5px;overflow:hidden}
.bar-row .tr i{display:block;height:100%;background:var(--ink)}
.bar-row .tr i.y{background:var(--y)}
.bar-row .vv{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px}
.bar-h{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}

@media (max-width:1000px){
  .rail-grp{padding:0 8px;align-self:center}
  .seg-row{grid-template-columns:1fr;gap:6px}
  .oc-w{grid-template-columns:110px 38px minmax(0,1fr)}
  .bar-row{grid-template-columns:130px minmax(0,1fr) 78px}
}

/* ================================================================ ONBOARDING
   The entry. Nobody should meet a dashboard before they have told SHMEL
   what business it is looking at and what that business wants. */

.ob{position:fixed;inset:0;z-index:90;background:var(--paper-2);
  display:grid;grid-template-columns:288px minmax(0,1fr)}
.ob[hidden]{display:none}
.ob-rail{background:var(--ink);color:#EDEDED;padding:24px 20px;display:flex;flex-direction:column}
.ob-steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.ob-steps li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-s);
  font-size:14px;color:#6E717D;transition:background .18s,color .18s}
.ob-steps li .n{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:rgba(255,255,255,.08);color:#A0A2A8}
.ob-steps li.on{background:rgba(255,255,255,.1);color:#fff}
.ob-steps li.on .n{background:var(--y);color:var(--ink)}
.ob-steps li.done{color:#A0A2A8}
.ob-steps li.done .n{background:rgba(249,224,97,.22);color:var(--y)}
.ob-foot{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;line-height:1.6;color:rgba(237,237,237,.66)}
.ob-restart{display:block;margin-top:12px;background:none;border:1px solid rgba(255,255,255,.18);
  color:#A0A2A8;border-radius:var(--r-pill);padding:6px 12px;font-size:11.5px;font-weight:700}
.ob-restart:hover{background:rgba(255,255,255,.07);color:#fff}

.ob-main{display:flex;flex-direction:column;min-width:0;overflow-y:auto}
.ob-body{flex:1;padding:46px 44px;max-width:880px;width:100%}
.ob-nav{position:sticky;bottom:0;background:rgba(237,237,237,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--cloud);padding:16px 44px;display:flex;gap:10px;align-items:center;max-width:880px}
.ob-nav .spacer{flex:1}
.ob-nav .note{font-size:12.5px;color:var(--muted)}

.ob h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.05;
  margin:0 0 12px;letter-spacing:-.015em}
.ob h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;
  margin:0 0 10px}
.ob .lede{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:58ch;margin:0 0 30px}
.ob .eyebrow{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}

.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.f.wide{grid-column:1 / -1}
.f label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.f label em{font-style:normal;font-weight:400;color:var(--muted);margin-left:5px}
.f input,.f select,.f textarea{border:1px solid rgba(23,28,43,.14);background:var(--paper);border-radius:var(--r-s);
  padding:11px 13px;font:inherit;font-size:14.5px;outline:0;transition:border-color .15s,box-shadow .15s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(249,224,97,.4)}
.f textarea{resize:vertical;min-height:74px;line-height:1.55}
.f .hint{font-size:12px;color:var(--muted);line-height:1.5}

.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.pick2{text-align:left;background:var(--paper);border:1.5px solid rgba(23,28,43,.14);border-radius:var(--r);
  padding:15px 17px;transition:border-color .15s,background .15s}
.pick2:hover{border-color:var(--line-2)}
.pick2[aria-pressed="true"]{border-color:var(--ink);background:var(--y)}
.pick2 b{display:block;font-weight:700;font-size:15px}
.pick2 span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}

.svc{display:grid;grid-template-columns:minmax(0,1.5fr) 96px 96px 112px 38px;gap:10px;align-items:end;
  margin-bottom:9px}
.svc .rm{border:1px solid rgba(23,28,43,.14);background:var(--paper);border-radius:var(--r-s);height:42px;font-size:17px;color:var(--muted)}
.svc .rm:hover{border-color:var(--ink);color:var(--ink)}
.star{border:1.5px solid rgba(23,28,43,.14);background:var(--paper);border-radius:var(--r-s);height:42px;font-size:12.5px;
  font-weight:700;color:var(--muted)}
.star[aria-pressed="true"]{border-color:var(--ink);background:var(--y);color:var(--ink)}
.chips-in{display:flex;flex-wrap:wrap;gap:7px;border:1px solid rgba(23,28,43,.14);background:var(--paper);
  border-radius:var(--r-s);padding:8px 10px;min-height:44px;align-items:center}
.chips-in span{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);
  border-radius:var(--r-pill);padding:4px 6px 4px 11px;font-size:13px}
.chips-in span button{border:0;background:none;color:var(--muted);font-size:15px;line-height:1;padding:0 3px}
.chips-in input{flex:1;min-width:120px;border:0;outline:0;font:inherit;font-size:14px;background:none}

.conns{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.conn{background:var(--paper);border:1.5px solid rgba(23,28,43,.14);border-radius:var(--r-l);padding:18px 20px;
  display:flex;flex-direction:column}
.conn.on{border-color:var(--ink);background:var(--y)}
.conn.soon{opacity:.55}
.conn .ch{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.conn .ch img,.conn .ch svg{width:26px;height:26px}
.conn .ch b{font-weight:700;font-size:15.5px}
.conn p{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.conn .btn{margin-top:auto;align-self:flex-start}
.conn .soonlab{margin-top:auto;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}

.build{display:flex;flex-direction:column;gap:10px;max-width:520px;margin-top:26px}
.bl{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:var(--r);
  padding:14px 17px;box-shadow:var(--sh);opacity:.4;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease}
.bl.on{opacity:1;transform:none}
.bl .tick{width:20px;height:20px;border-radius:50%;background:var(--paper-2);flex:none;position:relative}
.bl.on .tick{background:var(--y)}
.bl.on .tick::after{content:"";position:absolute;left:6.5px;top:4px;width:5px;height:9px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(42deg)}
.bl b{font-weight:700;font-size:14.5px}
.bl span{margin-left:auto;font-size:12px;color:var(--muted)}

.sum{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.sum div{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px;min-width:128px}
.sum b{display:block;font-family:var(--serif);font-size:2rem;line-height:1}
.sum span{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-top:5px}

.scanrow{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.scannote{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1;min-width:240px}

/* ------------------------------------------------- overview context strip */
.ctx{display:flex;flex-wrap:wrap;gap:1px;background:var(--paper-2);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh);margin-bottom:20px}
.ctx > div{background:var(--paper);padding:15px 18px;flex:1 1 200px;min-width:0}
.ctx .k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:5px}
.ctx .v{font-weight:700;font-size:15px;line-height:1.35}
.ctx .v.serif{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.ctx .s{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.ctx .s.warn{color:var(--ink);font-weight:700}

@media (max-width:900px){
  .ob{grid-template-columns:1fr}
  .ob-rail{flex-direction:row;align-items:center;gap:10px;overflow-x:auto;padding:12px}
  .ob-steps{flex-direction:row;margin:0}
  .ob-steps li span:not(.n){display:none}
  .ob-foot{display:none}
  .ob-body,.ob-nav{padding-left:18px;padding-right:18px}
  .fgrid{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr 1fr;gap:8px}
}

/* ==================================================== FINAL MVP SURFACES
   Today, Plan, Create, Settings. Decision first, evidence on demand,
   analytics only where they explain a decision. */

.rail-sep{height:1px;background:rgba(255,255,255,.1);margin:14px 12px}
.rail nav button.sec{font-size:14px;color:rgba(237,237,237,.72)}
.rail nav button.sec:hover{color:#EDEDED}

/* -------------------------------------------------------------- greeting */
.greet{margin:6px 0 28px;max-width:56ch}
.greet .hi{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05;letter-spacing:-.015em}
.greet .line{display:block;font-size:17px;line-height:1.55;color:var(--ink-2);margin-top:10px}
.greet .line b{color:var(--ink);font-weight:700}
.banner .warn{color:var(--ink);font-weight:700}

.deck-meta{margin-left:auto;font-size:12px;color:var(--muted)}
.deck-why b{color:var(--ink)}
.deck h3{margin-bottom:16px}
.fine{font-size:12.5px;line-height:1.6;color:var(--muted);margin:14px 0 0}

/* ------------------------------------------------------------------ plan */
.srow .sv .big{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.15;margin-bottom:4px}
.planlist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.planlist li{font-size:15px;line-height:1.55}
.prio{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.prow{display:block;width:100%;text-align:left;background:var(--paper-2);border:0;border-radius:var(--r);
  padding:13px 16px;transition:background .15s}
.prow:hover{background:rgba(23,28,43,.07)}
.prow .pt{display:block;font-weight:700;font-size:14.5px;line-height:1.4}
.prow .pd{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.prow .pm{display:block;font-size:11.5px;color:var(--muted);margin-top:5px}

/* ---------------------------------------------------------------- create */
.seg.big{margin-bottom:24px}
.seg.big button{padding:9px 20px;font-size:14px}
.mkgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
.mkform{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:20px;
  display:flex;flex-direction:column;gap:16px;position:sticky;top:78px}
.mkform .f{gap:6px}
.mkform .hint{font-size:12px;line-height:1.5;color:var(--muted)}
.mkform .hint.warn{color:var(--ink);font-weight:700}
.mkout{min-width:0}

.adcard{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);overflow:hidden}
.adhead{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--paper-2);
  background:var(--paper-2)}
.admeta{font-size:12px;color:var(--muted);line-height:1.45}
.adhead .admeta{margin-left:auto}
.fixbox{padding:18px 20px;border-bottom:1px solid var(--paper-2);background:rgba(249,224,97,.16)}
.fixbox > b{display:block;font-weight:700;font-size:14px;margin-bottom:10px}
.adbody{padding:6px 20px}
.adrow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:14px 0;
  border-bottom:1px solid var(--paper-2);align-items:start}
.adrow:last-child{border-bottom:0}
.adrow .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding-top:3px}
.adrow .v{font-size:15px;line-height:1.6}
.adrow .v.pre{white-space:pre-line}
.sub2{display:block;font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:5px}
.adfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 20px;
  border-top:1px solid var(--paper-2)}
.adfoot .admeta{flex:1 1 220px}
.whylist{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:8px}
.whylist li{font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* -------------------------------------------------------------- settings */
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
/* The full-width cards sat flush against each other: the grid had a gap
   but nothing separated one grid from the next, so two stacked cards read
   as one box with a line through it. */
.setgrid + .setgrid{margin-top:20px}
.setcard{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);padding:20px 22px}
.setcard h3{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.setrow{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--paper-2)}
.setrow:last-child{border-bottom:0}
.setrow .k{flex:none;width:126px;font-size:13px;color:var(--muted)}
.setrow .v{flex:1;min-width:0;font-weight:700;font-size:14.5px}
.setrow .v em{font-style:normal;font-weight:400;color:var(--line-2)}
.setcard .muted{font-size:13.5px;color:var(--muted);margin:0}
.dangerrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;
  background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:15px 18px;
  font-size:13.5px;color:var(--ink-2)}
.dangerrow .btn{margin-left:auto}

/* ----------------------------------------------------- onboarding extras */
.suggest{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.sg{border:1px solid rgba(23,28,43,.14);background:var(--paper);border-radius:var(--r-pill);padding:8px 15px;
  font-size:14px;font-weight:500;transition:border-color .15s,background .15s}
.sg:hover{border-color:var(--line-2)}
.sg.on{background:var(--y);border-color:var(--ink);font-weight:700}
.svclist{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.obdone{margin-top:34px;padding-top:26px;border-top:1px solid rgba(23,28,43,.14)}
.obdone h2{margin-bottom:8px}
.obdone .lede{margin-bottom:20px}
.answer .who .src2{font-weight:400;letter-spacing:0;text-transform:none;margin-left:6px}

@media (max-width:960px){
  .mkgrid{grid-template-columns:1fr}
  .mkform{position:static}
  .adrow{grid-template-columns:1fr;gap:5px}
  .setrow{flex-direction:column;gap:3px}
  .setrow .k{width:auto}
}

/* ==================================================== DEPTH + INTERACTION
   Charts, breakdowns, creative previews, competitor ads. Everything here is
   built to be poked at: hover reveals the number, nothing needs a legend. */

:root{ --ease:cubic-bezier(.32,.72,.28,1); }

/* interaction polish ------------------------------------------------------ */
.btn{transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.seg button:focus-visible,.tbl tbody tr:focus-visible,
.pick2:focus-visible,.sg:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.deck{transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.deck:hover{box-shadow:0 2px 6px rgba(23,28,43,.07),0 14px 38px rgba(23,28,43,.09)}
.kpi{transition:background .16s var(--ease)}
.kpi:hover{background:rgba(23,28,43,.02)}
.view{animation:vin .34s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* panels ------------------------------------------------------------------ */
.pnl{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh);overflow:hidden}
.pnl-h{display:flex;align-items:baseline;gap:12px;padding:16px 20px 0}
.pnl-h h3{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0}
.pnl-h .r{margin-left:auto;font-size:12.5px;color:var(--muted)}
.pnl-b{padding:16px 20px 20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}

/* area chart -------------------------------------------------------------- */
.chart{position:relative}
.chart svg{display:block;width:100%;overflow:visible}
.chart .gl{stroke:var(--paper-2);stroke-width:1}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .ln.y{stroke:var(--ink)}
.chart .ar{fill:url(#gA);opacity:.9}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .cur{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.chart .dot{fill:var(--ink);opacity:0;pointer-events:none}
.chart.live .cur,.chart.live .dot{opacity:1}
.chart .ax{font-size:10.5px;fill:var(--muted);font-weight:700;letter-spacing:.05em}
.tipbox{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:var(--r-s);
  padding:8px 11px;font-size:12px;line-height:1.45;white-space:nowrap;opacity:0;
  transform:translate(-50%,-118%);transition:opacity .12s;z-index:5;box-shadow:0 8px 22px rgba(23,28,43,.25)}
.tipbox.on{opacity:1}
.tipbox b{display:block;font-size:13px;margin-bottom:2px}
.tipbox span{color:#A0A2A8}

/* funnel ------------------------------------------------------------------ */
.fnl{display:flex;flex-direction:column;gap:10px}
.fstep{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:14px;align-items:center}
.fstep .fl{font-size:13px;color:var(--muted);font-weight:700}
.fbar{height:34px;border-radius:var(--r-s);background:var(--paper-2);position:relative;overflow:hidden}
.fbar i{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:var(--r-s);
  transition:width .7s var(--ease)}
.fbar.y i{background:var(--y)}
.fbar b{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13.5px;
  font-weight:700;color:#fff;font-variant-numeric:tabular-nums;z-index:1}
.fbar.y b{color:var(--ink)}
.fbar.out b{color:var(--ink)}
.fstep .fr{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.fstep .fr b{color:var(--ink)}

/* weekday bars ------------------------------------------------------------ */
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:126px}
.dcol{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px;cursor:default}
.dcol .db{border-radius:6px 6px 2px 2px;background:rgba(249,224,97,.32);transition:background .16s}
.dcol:hover .db{background:var(--yellow)}
.dcol.best .db{background:var(--y);box-shadow:inset 0 0 0 1.5px rgba(23,28,43,.18)}
.dcol .dl{text-align:center;font-size:10.5px;color:var(--muted);font-weight:700}
.dcol .dv{text-align:center;font-size:11px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* split bars -------------------------------------------------------------- */
.splt{display:flex;flex-direction:column;gap:9px}
.srow2{display:grid;grid-template-columns:132px minmax(0,1fr) 78px 62px;gap:12px;align-items:center;
  font-size:13.5px;padding:3px 0}
.srow2 .nm2{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow2 .tr2{height:9px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden}
.srow2 .tr2 i{display:block;height:100%;background:var(--ink);transition:width .6s var(--ease)}
.srow2 .n2{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.srow2 .c2{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}
.modelled{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}

/* ad-level table ---------------------------------------------------------- */
.adtbl .angle{display:inline-flex;font-size:11px;font-weight:700;letter-spacing:.05em;
  background:var(--paper-2);border-radius:var(--r-pill);padding:3px 9px;color:var(--ink-2)}
.adtbl .hook{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;max-width:34ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adtbl tr.win td:first-child{box-shadow:inset 3px 0 0 var(--y)}
.adtbl tr.lose td:first-child{box-shadow:inset 3px 0 0 var(--line-2)}

/* contextual ask ---------------------------------------------------------- */
.askpanel{background:var(--ink);border-radius:var(--r-l);padding:20px 22px;color:#EDEDED;margin-top:14px}
.askpanel h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:#fff;margin:0 0 4px}
.askpanel p{margin:0 0 15px;font-size:14px;color:rgba(237,237,237,.8);line-height:1.6}
.askpanel .qs{display:flex;flex-wrap:wrap;gap:8px}
.askpanel .qs button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#EDEDED;border-radius:var(--r-pill);padding:8px 14px;font-size:13px;transition:background .16s}
.askpanel .qs button:hover{background:rgba(255,255,255,.14);color:#fff}
.askpanel .out{margin-top:15px;background:rgba(255,255,255,.07);border-radius:var(--r);padding:15px 17px;
  font-size:14.5px;line-height:1.6;color:#fff;white-space:pre-line}
.askpanel .out .src3{display:block;margin-top:10px;font-size:11.5px;color:#A0A2A8}

/* creative preview -------------------------------------------------------- */
.crival{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cv{background:var(--paper-2);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:9px}
.cv .cvh{display:flex;align-items:baseline;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cv .cvh em{font-style:normal;margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:11.5px}
.cv svg{width:100%;height:auto;display:block;border-radius:var(--r-s);background:var(--paper);
  box-shadow:0 2px 10px rgba(23,28,43,.08)}
.dirlist{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:8px}
.dirlist li{font-size:14px;line-height:1.6;color:var(--ink-2)}

/* competitor ads ---------------------------------------------------------- */
.cads{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:12px}
.cad{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;
  display:flex;flex-direction:column;gap:9px}
.cad .ch2{display:flex;align-items:center;gap:8px}
.cad .ch2 b{font-weight:700;font-size:14.5px}
.cad .ch2 .rt{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cad .cp{font-size:14px;line-height:1.55;color:var(--ink);background:var(--paper-2);
  border-radius:var(--r-s);padding:11px 13px}
.cad .rd{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.cad .tags2{display:flex;gap:6px}
.cad .tags2 span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper-2);border-radius:var(--r-pill);padding:3px 9px;color:var(--ink-2)}
.blockbox{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:15px 18px;
  border-left:3px solid var(--ink);margin-bottom:14px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.blockbox b{display:block;color:var(--ink);margin-bottom:4px}

/* onboarding extras ------------------------------------------------------- */
.steprow{display:flex;align-items:center;gap:8px}
.steprow button{width:40px;height:40px;border:1px solid rgba(23,28,43,.14);background:var(--paper);
  border-radius:var(--r-s);font-size:18px;color:var(--ink-2);transition:border-color .15s}
.steprow button:hover{border-color:var(--ink);color:var(--ink)}
.steprow .val{min-width:56px;text-align:center;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.scanbtn{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.scanbtn .btn{border:1.5px solid var(--ink);background:var(--white);font-weight:700;
  box-shadow:0 1px 2px rgba(23,28,43,.05)}
.scanbtn .btn:hover{background:var(--ink);color:var(--white)}
.chipin{display:flex;flex-wrap:wrap;gap:7px;border:1px solid rgba(23,28,43,.14);background:var(--paper);
  border-radius:var(--r-s);padding:8px 10px;min-height:44px;align-items:center}
.chipin > span{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);
  border-radius:var(--r-pill);padding:4px 6px 4px 11px;font-size:13.5px}
.chipin > span button{border:0;background:none;color:var(--muted);font-size:16px;line-height:1;padding:0 3px}
.chipin > span button:hover{color:var(--ink)}
.chipin input{flex:1;min-width:140px;border:0;outline:0;font:inherit;font-size:14.5px;background:none}

@media (max-width:1000px){
  .grid2,.grid3,.crival{grid-template-columns:1fr}
  .srow2{grid-template-columns:100px minmax(0,1fr) 66px}
  .srow2 .c2{display:none}
  .fstep{grid-template-columns:78px minmax(0,1fr)}
  .fstep .fr{grid-column:2;text-align:right}
}

/* ==================================================== DESIGN PASS — v2
   Panels get borders and layered shadows, severity gets colour, numbers get
   the serif, and everything arrives rather than appearing. */

.pnl,.tblwrap,.setcard,.adcard,.mkform,.oc,.cad,.empty,.answer,.banner,.blockbox{
  border:1px solid var(--line)}
.pnl,.tblwrap,.setcard,.adcard,.oc,.cad{box-shadow:var(--sh)}
.kpis{background:var(--line);border:1px solid var(--line)}

/* ------------------------------------------------- stat cards + sparkline */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.stat2{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  padding:18px 20px 16px;box-shadow:var(--sh);position:relative;overflow:hidden;
  opacity:0;transform:translateY(10px);animation:rise .5s var(--ease) forwards}
.stat2 .lb{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.stat2 .vl{display:block;margin-top:9px;font-family:var(--serif);font-weight:400;
  font-size:2.25rem;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat2 .vl.none{font-size:1.15rem;color:var(--line-2);line-height:2}
.stat2 .dl{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;color:var(--muted)}
.stat2 .dl .ar{font-weight:700}
.stat2 .dl.good .ar{color:var(--good-line)}
.stat2 .dl.bad .ar{color:var(--bad-line)}
.stat2 .sp2{margin-top:12px;height:30px}
.stat2 .sp2 svg{width:100%;height:30px;display:block;overflow:visible}
.stat2 .sp2 path{fill:none;stroke:var(--grey-mid);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat2 .sp2 .f2{fill:rgba(160,162,168,.14);stroke:none}
.stat2.hot{background:var(--y);border-color:var(--y)}
.stat2.hot .lb,.stat2.hot .dl{color:rgba(23,28,43,.72)}
@keyframes rise{to{opacity:1;transform:none}}

/* ------------------------------------------------------- severity alerts */
/* Every to-do card sits on the brand ground, not just the urgent one. The
   severity is still there — it is the left edge, which is what a queue
   needs: a colour you can scan down, not two different card colours. */
.deck{border:1px solid var(--line);border-left:4px solid var(--line-2);
  grid-template-columns:minmax(0,1fr);
  opacity:0;transform:translateY(12px);animation:rise .55s var(--ease) forwards}
.deck .stripe{display:none}
.deck.attention{background:var(--warn-bg);border-color:rgba(249,224,97,.55);border-left-color:var(--warn-line)}
.deck.attention.high{background:var(--bad-bg);border-color:var(--yellow);border-left-color:var(--bad-line)}
.deck.opportunity{background:var(--info-bg);border-color:var(--cloud);border-left-color:var(--info-line)}
.deck.info{background:var(--paper)}
.deck-in{padding:15px 18px}
.deck .tag.attention{background:var(--warn-line);color:#fff}
.deck.high .tag.attention{background:var(--bad-line);color:#fff}
.deck .tag.opportunity{background:var(--info-line);color:#fff}
.deck h3{font-size:clamp(1.2rem,1.9vw,1.55rem);margin-bottom:15px}
.deck .ev{background:rgba(255,255,255,.72);border-color:rgba(23,28,43,.08)}
.deck.info .ev{background:var(--paper)}
.deck-why{background:rgba(255,255,255,.55);border-radius:var(--r-s);padding:11px 14px;
  margin-bottom:15px;font-size:14.5px}
.deck.info .deck-why{background:var(--paper-2)}

/* ---------------------------------------------------------- staggering */
.decks > *:nth-child(1){animation-delay:.02s}
.decks > *:nth-child(2){animation-delay:.08s}
.decks > *:nth-child(3){animation-delay:.14s}
.decks > *:nth-child(4){animation-delay:.2s}
.decks > *:nth-child(5){animation-delay:.26s}
.stats > *:nth-child(1){animation-delay:.02s}
.stats > *:nth-child(2){animation-delay:.07s}
.stats > *:nth-child(3){animation-delay:.12s}
.stats > *:nth-child(4){animation-delay:.17s}
.stats > *:nth-child(5){animation-delay:.22s}
.stats > *:nth-child(6){animation-delay:.27s}
.stats > *:nth-child(7){animation-delay:.32s}

/* --------------------------------------------------------------- polish */
.sec-h h2{font-size:11px;letter-spacing:.12em;color:var(--muted)}
.sec-h{margin:38px 0 14px}
.greet{margin:2px 0 26px}
.greet .hi{font-size:clamp(2rem,3.6vw,2.9rem)}
.banner{border-radius:var(--r-l);padding:14px 18px;box-shadow:none;background:var(--paper)}
.tbl tbody tr{transition:background .14s var(--ease)}
.tbl tbody tr:hover{background:rgba(23,28,43,.02)}
.prow{background:var(--paper);border:1px solid var(--line);transition:border-color .16s,transform .16s}
.prow:hover{background:var(--paper);border-color:var(--line-2);transform:translateX(2px)}
.srow{border:1px solid var(--line);box-shadow:var(--sh)}
.empty{background:var(--paper);border-radius:var(--r-l);box-shadow:none}
.drawer{box-shadow:-20px 0 60px rgba(23,28,43,.22)}
.dr-h{padding:22px 26px}
.dr-b{padding:24px 26px}
.mkform{border-radius:var(--r-l)}

/* the onboarding ground matches the app */
.ob{background:var(--cloud)}
.ob-rail{background:var(--g-dark)}
.ob-nav{background:rgba(255,255,255,.92)}
.pick2{box-shadow:var(--sh)}
.pick2:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
.pick2{transition:border-color .16s var(--ease),background .16s var(--ease),
  transform .16s var(--ease),box-shadow .16s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .stat2,.deck{opacity:1 !important;transform:none !important;animation:none !important}
}

/* ======================================================= REAL CHARTS v3 */
.chart2{position:relative}
.chart2 svg{display:block;width:100%;height:auto}
.chart2 .g2{stroke:var(--line);stroke-width:1}
.chart2 .a2{font-size:10.5px;fill:var(--muted);font-weight:700;font-family:var(--disp)}
.chart2 .b2{fill:var(--yellow);transition:fill .14s}
.chart2:hover .b2{fill:rgba(249,224,97,.82)}
.chart2 .l2{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart2 .e2{fill:var(--ink)}
.chart2 .pv2{fill:none;stroke:var(--grey-mid);stroke-width:1.6;stroke-dasharray:4 4;opacity:.8}
.chart2 .cur2{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.chart2.live .cur2{opacity:.5}
.chart2 .hit2{fill:transparent;cursor:crosshair}
.lg2{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.lg2 span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.sw{width:12px;height:12px;border-radius:3px;flex:none}
.sw.bar{background:var(--yellow)}
.sw.line{height:3px;border-radius:var(--r-pill);background:var(--ink)}
.sw.prev{height:0;border-top:2px dashed var(--grey-mid);background:none;border-radius:0}
.chart2 .tipbox{transform:translate(-50%,0);top:6px}
.chart2 .tipbox .tl{display:flex;align-items:center;gap:7px;margin-top:5px;color:#A0A2A8}
.chart2 .tipbox .tl b{display:inline;color:#fff;margin:0}
.chart2 .tipbox .sw.line{background:#fff}

/* ============================================================ ASK PANEL */
.askfab{position:fixed;right:22px;bottom:22px;z-index:55;display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-pill);padding:13px 20px 13px 15px;
  font-weight:700;font-size:14.5px;box-shadow:0 10px 30px rgba(23,28,43,.28);
  transition:transform .18s var(--ease),opacity .18s var(--ease),box-shadow .18s var(--ease)}
.askfab img{width:22px;height:22px;filter:brightness(0) invert(1)}
.askfab:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(23,28,43,.34)}
.askfab.hid{opacity:0;pointer-events:none;transform:translateY(8px)}

/* Anchored bottom-right so it opens where its own button is. Height is
   explicit rather than top:0/bottom:0, because a window you can shorten
   needs a height to shorten. */
.chat{position:fixed;right:0;bottom:0;width:min(420px,92vw);height:100vh;
  background:var(--paper);
  border-left:1px solid var(--line);z-index:58;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ease);
  box-shadow:-18px 0 56px rgba(23,28,43,.16)}
/* Once it is shorter than the viewport it reads as a window: it gets a top
   border and a corner, which a full-height drawer should not have. */
.chat.floating{border-top:1px solid var(--line);
  border-top-left-radius:var(--r-l);overflow:hidden;
  box-shadow:-18px -8px 56px rgba(23,28,43,.16)}
.chat.on{transform:none}
.chat-h{display:flex;align-items:center;gap:11px;padding:17px 20px;border-bottom:1px solid var(--line)}
.chat-mk{width:34px;height:34px;border-radius:var(--r-s);background:var(--y);display:grid;place-items:center;flex:none}
.chat-mk img{width:20px;height:20px}
.chat-h b{display:block;font-weight:700;font-size:15.5px}
.chat-h span{display:block;font-size:12.5px;color:var(--muted)}
.chat-h .dr-x{margin-left:auto}
.chat-b{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.chat-empty{margin:auto 0;text-align:left;color:var(--ink-2)}
.chat-empty b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;
  color:var(--ink);margin-bottom:8px;line-height:1.2}
.chat-empty p{margin:0;font-size:14px;line-height:1.6}
/* The mark sits level with the end of what it said, the way every chat
   this audience uses places it. */
.chat .msg{display:flex;align-items:flex-end;gap:10px;max-width:100%}
.chat .msg.you{justify-content:flex-end}
.chat .msg.you p{margin:0;background:var(--ink);color:#fff;border-radius:var(--r-m) 16px 4px 16px;
  padding:11px 15px;font-size:14.5px;line-height:1.5;max-width:86%}
/* SHMEL signs its own answers: the mark, not a coloured square. */
.chat .av2{width:28px;height:28px;border-radius:50%;background:var(--y-15) url('/img/bee-mascot-96.webp') center/74% no-repeat;flex:none;margin-bottom:2px}
.chat .bb{background:var(--paper-2);border-radius:var(--r-m) 16px 16px 4px;padding:13px 15px;min-width:0;flex:1}
.chat .bb p{margin:0;font-size:14.5px;line-height:1.6;white-space:pre-line}
.chat .bb.err2{background:var(--bad-bg);color:var(--bad-ink);font-size:14px;line-height:1.55}
.chat .src3{display:block;margin-top:10px;font-size:12px;color:var(--slate)}
.chat .cites{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:11px;
  padding-top:11px;border-top:1px solid rgba(23,28,43,.08)}
.chat .cites > span{font-size:11.5px;color:var(--muted)}
.chat .cites button{border:1px solid var(--line-2);background:var(--paper);border-radius:var(--r-pill);
  padding:4px 11px;font-size:11.5px;font-weight:700}
.chat .cites button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--grey-mid);animation:bl 1.1s infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-sug{display:flex;gap:7px;flex-wrap:wrap;padding:0 20px 12px}
.chat-sug button{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-pill);
  padding:7px 13px;font-size:12.5px;color:var(--ink-2);transition:border-color .15s,background .15s}
.chat-sug button:hover{border-color:var(--ink);color:var(--ink)}
.chat-in{display:flex;gap:9px;padding:14px 20px;border-top:1px solid var(--line);background:var(--paper)}
.chat-in input{flex:1;min-width:0;border:1px solid var(--line);background:var(--white);background-image:radial-gradient(1200px 680px at 68% -8%,rgba(237,237,237,.55) 0%,rgba(255,255,255,0) 70%);background-attachment:fixed;border-radius:var(--r-pill);
  padding:11px 16px;font:inherit;font-size:14.5px;outline:0;transition:border-color .15s,box-shadow .15s}
.chat-in input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(249,224,97,.45)}

/* the ads screen keeps its inline ask, but the panel is the main one now */
.askpanel{margin-top:20px}

@media (max-width:640px){
  .askfab{right:14px;bottom:14px;padding:11px 16px 11px 13px;font-size:13.5px}
}


/* ── The signature detail ───────────────────────────────────────────────────
   Emphasis is never yellow text — #F9E061 on white is 1.32:1. It is a band
   tucked under the letterforms at 86%, text left in ink. This is the most
   recognisable thing in the system and it belongs in the product too. */
.hl{
  color:var(--ink);
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;
  background-size:100% .13em;
  background-position:0 86%;
  padding-bottom:.02em;
}
.greet .hi .hl,.ttl .hl{background-size:100% .12em}

/* Cards carry the layered card shadow, not a flat drop. */
.deck,.stat2,.pnl,.adcard,.setcard,.oc,.cad{box-shadow:var(--sh-s)}
.deck:hover,.oc:hover{box-shadow:var(--sh-m)}
.drawer,.chat{box-shadow:var(--sh-card)}

/* Severity without a second colour system: one yellow, four weights. */
.deck{border-left-width:4px}
/* Only the loudest card carries a fill; the rest earn a yellow edge. Wash
   everything and the wash stops meaning anything. */
/* This is the block that decides a to-do card's colour — two earlier ones
   set the same properties and are overridden here. Every live card is on
   the brand ground now; severity is carried by the left edge alone, which
   is what a queue can be scanned down.
   NB: do not add a fourth layer above. Change these lines. */
.deck.attention,
.deck.attention.high,
.deck.opportunity,
.deck.info{background:var(--y-15);border-color:rgba(249,224,97,.55)}
/* One edge colour. The ink edge on the urgent card made the queue look like
   two kinds of thing when it is one list in priority order. */
.deck.attention,
.deck.attention.high,
.deck.opportunity,
.deck.info{border-left-color:var(--yellow)}

/* Answered: off the brand ground, struck through, parked under the live
   ones so pressing Approve reads as progress rather than disappearance.
   Every combination is spelled out because a grouped selector takes the
   specificity of whichever part matched — `.deck.attention.high` is three
   classes and silently beat a plain `.deck.done`, which is why an approved
   card kept the yellow ground. */
.deck.done,
.deck.attention.done,
.deck.attention.high.done,
.deck.opportunity.done,
.deck.info.done{background:var(--wash);border-color:var(--line);
  border-left-color:var(--mist);box-shadow:none}
.deck.done .deck-in{opacity:.6}
.deck.done h3{text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:var(--grey-mid)}
.deck.done .deck-one{background:transparent;border:1px solid var(--line)}
.deck .tag.attention{background:var(--yellow);color:var(--ink)}
.deck.high .tag.attention{background:var(--ink);color:var(--white)}
.deck .tag.opportunity{background:var(--ink);color:var(--white)}
.stat2 .dl.good .ar,.stat2 .dl.bad .ar{color:var(--ink)}
.stat2 .dl.bad .ar{background:var(--y-55);border-radius:var(--r-pill);padding:1px 7px}

/* ============================================ UNIT ECONOMICS — per the SOP
   The half an ad account cannot show: what the lead turned into. */

.verdict{margin-bottom:14px}
.vd{background:var(--white);border:1px solid var(--cloud);border-left:4px solid var(--mist);
  border-radius:var(--r-l);padding:22px 26px;box-shadow:var(--sh-s)}
.vd.over{background:rgba(249,224,97,.15);border-color:rgba(249,224,97,.55);border-left-color:var(--ink)}
.vd.healthy{border-left-color:var(--yellow)}
.vd.unknown{border-left-style:dashed}
.vd .k{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);font-weight:700;margin-bottom:8px}
.vd b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:9px}
.vd p{margin:0;font-size:14.5px;line-height:1.6;color:var(--slate);max-width:78ch}
.vd p.fine{margin-top:8px;font-size:13px;color:var(--grey)}

.secnote{margin-left:auto;font-size:12.5px;color:var(--slate);text-transform:none;letter-spacing:0;font-weight:400}

.qtbl tr.win td:first-child{box-shadow:inset 3px 0 0 var(--yellow)}
.qtbl tr.lose td:first-child{box-shadow:inset 3px 0 0 var(--mist)}
.qtbl b.pos{background:var(--yellow);color:var(--ink);border-radius:var(--r-pill);padding:2px 9px}
.qtbl b.neg{color:var(--ink);background:var(--cloud);border-radius:var(--r-pill);padding:2px 9px}

/* trust checklist */
.rdhead{font-size:14px;color:var(--slate);margin-bottom:13px}
.rdhead b{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--ink);
  margin-right:5px;vertical-align:-1px}
.rdlist{display:flex;flex-direction:column;gap:11px}
.rd{display:flex;gap:11px;align-items:flex-start}
.rd i{width:16px;height:16px;border-radius:50%;flex:none;margin-top:3px;
  border:2px solid var(--cloud);box-sizing:border-box;position:relative}
.rd.ok i{background:var(--yellow);border-color:var(--yellow)}
.rd.ok i::after{content:"";position:absolute;left:4px;top:2px;width:4px;height:7px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(42deg)}
.rd b{display:block;font-weight:700;font-size:14px}
.rd span{display:block;font-size:12.5px;line-height:1.55;color:var(--slate);margin-top:2px}
.rd:not(.ok) b{color:var(--slate)}

/* daily sheet */
.dailywrap{max-height:330px;overflow-y:auto;padding-top:0}
.tbl.mini{min-width:0}
/* sticky only where the body actually scrolls; elsewhere it floats mid-table */
.dailywrap .tbl.mini th{position:sticky;top:0;z-index:1}
.tbl.mini th{background:var(--white);padding:10px 12px}
.tbl.mini td{padding:9px 12px;font-size:13px}

/* ============================================ ONBOARDING — the real version
   Three columns: where you are, what you are doing, and what SHMEL has
   learned so far. The third one is the point — it fills in as you type, so
   setup feels like building something rather than completing a form. */

.ob{grid-template-columns:268px minmax(0,1fr) 400px;background:var(--white);
  background-image:
    radial-gradient(900px 520px at 78% -12%,rgba(249,224,97,.16) 0%,rgba(255,255,255,0) 68%),
    radial-gradient(1100px 620px at 8% 108%,rgba(237,237,237,.85) 0%,rgba(255,255,255,0) 66%)}

/* ---- step rail ---- */
.ob-rail{background:var(--g-dark);padding:26px 18px 20px}
.ob-steps{gap:3px;margin-top:30px;counter-reset:ob}
.ob-steps li{position:relative;padding:12px 13px;border-radius:var(--r-s);font-size:14.5px;
  color:rgba(237,237,237,.74);transition:color var(--d-state) var(--ease),background var(--d-state) var(--ease)}
.ob-steps li .n{width:24px;height:24px;border-radius:8px;font-size:11.5px;
  background:rgba(255,255,255,.12);color:rgba(237,237,237,.82);
  transition:background var(--d-state) var(--ease),color var(--d-state) var(--ease),
             transform var(--d-state) var(--ease)}
.ob-steps li.done{color:rgba(237,237,237,.78)}
.ob-steps li.done .n{background:rgba(249,224,97,.24);color:var(--yellow)}
.ob-steps li.on{background:rgba(255,255,255,.08);color:#fff;font-weight:700}
.ob-steps li.on .n{background:var(--yellow);color:var(--ink);transform:scale(1.08)}
/* the connecting thread */
.ob-steps li::after{content:"";position:absolute;left:25px;top:36px;width:1.5px;height:9px;
  background:rgba(255,255,255,.12)}
.ob-steps li:last-child::after{display:none}
.ob-steps li.done::after{background:rgba(249,224,97,.35)}

/* ---- the well ---- */
.ob-main{overflow:hidden}
.ob-scroll{flex:1;overflow-y:auto}
.ob-body{padding:clamp(28px,4vw,54px) clamp(24px,4vw,56px) 40px;max-width:760px}
.ob-body > *{animation:obIn .5s var(--ease) both}
.ob-body > *:nth-child(1){animation-delay:.02s}
.ob-body > *:nth-child(2){animation-delay:.07s}
.ob-body > *:nth-child(3){animation-delay:.12s}
.ob-body > *:nth-child(4){animation-delay:.17s}
.ob-body > *:nth-child(5){animation-delay:.22s}
@keyframes obIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ob h1{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.018em;margin:0 0 14px}
.ob h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.04;letter-spacing:-.015em;margin:0 0 12px}
.ob .lede{font-size:17px;line-height:1.6;color:var(--slate);max-width:52ch;margin:0 0 32px}
.ob .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--cloud);color:var(--slate);
  border-radius:var(--r-pill);padding:6px 13px;margin-bottom:18px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ob .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow)}

/* ---- fields with weight ---- */
.fgrid{gap:18px}
.f label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
.f label em{color:var(--grey);font-weight:500}
.f input,.f select,.f textarea{border:1.5px solid var(--cloud);border-radius:var(--r-s);
  padding:14px 16px;font-size:15.5px;background:var(--white);
  box-shadow:0 1px 2px rgba(23,28,43,.04);
  transition:border-color var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease),
             transform var(--d-hover) var(--ease)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--mist)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(249,224,97,.42),0 2px 6px rgba(23,28,43,.06)}
.f input::placeholder,.f textarea::placeholder{color:var(--mist)}

/* ---- welcome choices ---- */
.picks{gap:16px}
.pick2{border:1.5px solid var(--cloud);border-radius:var(--r-l);padding:26px 26px 68px;
  box-shadow:var(--sh-s);position:relative;overflow:hidden;background:var(--white)}
.pick2::after{content:"";position:absolute;inset:auto -40% -60% auto;width:220px;height:220px;
  border-radius:50%;background:rgba(249,224,97,.18);opacity:0;
  transition:opacity var(--d-state) var(--ease),transform var(--d-state) var(--ease);transform:scale(.6)}
.pick2:hover::after{opacity:1;transform:scale(1)}
.pick2:hover{transform:translateY(-3px);box-shadow:var(--sh-m);border-color:var(--mist)}
.pick2 b{font-size:19px;letter-spacing:-.01em;position:relative}
.pick2 span{font-size:14px;line-height:1.55;margin-top:6px;position:relative}
.pick2 .go{position:absolute;left:26px;bottom:24px;width:34px;height:34px;border-radius:50%;
  background:var(--cloud);display:grid;place-items:center;font-size:15px;color:var(--ink);
  transition:background var(--d-state) var(--ease),transform var(--d-state) var(--ease)}
.pick2:hover .go{background:var(--yellow);transform:translateX(4px)}
.pick2[aria-pressed="true"]{border-color:var(--ink);background:rgba(249,224,97,.18)}

/* ---- goal picks, service chips ---- */
.sg{border:1.5px solid var(--cloud);padding:10px 17px;font-size:14.5px;
  box-shadow:0 1px 2px rgba(23,28,43,.04);transition:all var(--d-hover) var(--ease)}
.sg:hover{border-color:var(--mist);transform:translateY(-1px)}
.sg.on{background:var(--yellow);border-color:var(--yellow);font-weight:700;
  box-shadow:0 2px 8px rgba(249,224,97,.5)}
.svc{padding:14px;border:1px solid var(--cloud);border-radius:var(--r-s);background:var(--white);
  box-shadow:0 1px 2px rgba(23,28,43,.03);margin-bottom:10px;animation:obIn .38s var(--ease) both}
.steprow button{border:1.5px solid var(--cloud);border-radius:var(--r-s);height:46px;width:46px;
  box-shadow:0 1px 2px rgba(23,28,43,.04);transition:all var(--d-hover) var(--ease)}
.steprow button:hover{border-color:var(--ink);background:var(--cloud)}
.steprow .val{font-size:22px;font-family:var(--serif);font-weight:400}
.chipin{border:1.5px solid var(--cloud);border-radius:var(--r-s);padding:9px 11px;min-height:50px;
  box-shadow:0 1px 2px rgba(23,28,43,.04)}
.chipin:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(249,224,97,.42)}
.chipin > span{background:var(--cloud);animation:pop .28s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* ---- footer ---- */
.ob-nav{background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(10px);
  border-top:1px solid var(--cloud);padding:18px clamp(24px,4vw,56px);max-width:none}
.ob-nav .btn{padding:13px 26px;font-size:15px}

/* ---- the live panel ---- */
.ob-live{background:var(--g-dark);color:#EDEDED;padding:26px 24px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px}
.ob-live .lv-h{display:flex;align-items:center;gap:10px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.ob-live .lv-h .mk{width:32px;height:32px;border-radius:var(--r-s);background:var(--yellow);
  display:grid;place-items:center;flex:none}
.ob-live .lv-h .mk img{width:19px;height:19px}
.ob-live .lv-h b{font-size:15px}
.ob-live .lv-h b{display:block;font-size:14.5px;color:#fff}
.ob-live .lv-h span{display:block;font-size:12.5px;color:rgba(237,237,237,.72)}
.lv-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-m);padding:16px 18px;transition:all var(--d-state) var(--ease)}
.lv-card.empty{opacity:.72;border-style:dashed;background:rgba(255,255,255,.04)}
.lv-card.fresh{animation:lvPop .5s var(--ease)}
@keyframes lvPop{0%{background:rgba(249,224,97,.22);transform:scale(1.015)}100%{}}
.lv-card .k{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(237,237,237,.78);font-weight:700;margin-bottom:8px}
.lv-card .v{font-size:15.5px;line-height:1.45;color:#fff;font-weight:700}
.lv-card .v.serif{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.15}
.lv-card .s{display:block;font-size:13px;color:rgba(237,237,237,.82);margin-top:6px;line-height:1.55}
.lv-card .dash{color:rgba(237,237,237,.62);font-weight:400;font-style:italic}
.lv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.lv-chips span{font-size:12px;background:rgba(255,255,255,.1);border-radius:var(--r-pill);
  padding:4px 10px;color:#EDEDED;animation:pop .3s var(--ease) both}
.lv-chips span.hi{background:var(--yellow);color:var(--ink);font-weight:700}
.lv-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;line-height:1.6;color:rgba(237,237,237,.72)}
.lv-prog{height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:10px}
.lv-prog i{display:block;height:100%;background:var(--yellow);border-radius:var(--r-pill);
  transition:width .6s var(--ease)}

/* ---- build screen ---- */
.build{max-width:560px;gap:12px}
.bl{border:1px solid var(--cloud);box-shadow:var(--sh-s);border-radius:var(--r-m);padding:16px 19px}
.bl .tick{width:22px;height:22px}
.bl.on{animation:blIn .45s var(--ease) both}
@keyframes blIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.obdone{animation:obIn .55s var(--ease) both}
.obdone h2{margin-bottom:10px}

@media (max-width:1240px){ .ob{grid-template-columns:240px minmax(0,1fr)} .ob-live{display:none} }
@media (max-width:900px){ .ob{grid-template-columns:1fr} }

/* ============================================================== STRATEGY
   Diagnosis, then proposal, then the month. A channel SHMEL can measure gets
   a number; one it cannot gets a milestone and says so. */

.standgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px}
.stand-row{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--cloud)}
.stand-row:last-child{border-bottom:0}
.stand-row span{flex:1;font-size:13.5px;color:var(--slate)}
.stand-row b{font-weight:700;font-size:15px;text-align:right}
.stand-row b.gap{color:var(--slate);background:var(--cloud);border-radius:var(--r-pill);
  padding:3px 11px;font-size:12.5px}
.gaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:14px}
.gapcard{background:var(--white);border:1px solid var(--cloud);border-left:3px solid var(--yellow);
  border-radius:var(--r-m);padding:16px 18px;box-shadow:var(--sh-s)}
.gapcard b{display:block;font-weight:700;font-size:14.5px;margin-bottom:5px}
.gapcard p{margin:0;font-size:13px;line-height:1.55;color:var(--slate)}

/* ---- channel chips ---- */
.ch{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap;
  background:var(--cloud);color:var(--slate)}
.ch.meta{background:var(--ink);color:#fff}
.ch.social{background:var(--yellow);color:var(--ink)}
.ch.seo{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ch.trust,.ch.pos,.ch.setup,.ch.all{background:var(--cloud);color:var(--slate)}

/* ---- issues ---- */
.isslist{display:flex;flex-direction:column;gap:10px}
.iss{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:16px;align-items:start;
  background:var(--white);border:1px solid var(--cloud);border-left:4px solid var(--cloud);
  border-radius:var(--r-m);padding:17px 20px;box-shadow:var(--sh-s);
  opacity:0;transform:translateY(10px);animation:rise .5s var(--ease) forwards;
  animation-delay:calc(var(--d) * .05s)}
.iss.high{border-left-color:var(--ink);background:rgba(249,224,97,.15);border-color:rgba(249,224,97,.55)}
.iss.medium{border-left-color:var(--yellow)}
.iss .ib b{display:block;font-weight:700;font-size:15.5px;line-height:1.35;margin-bottom:5px}
.iss .ib p{margin:0;font-size:14px;line-height:1.6;color:var(--slate)}
.mflag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);white-space:nowrap;padding-top:3px}

/* ---- the proposal ---- */
.props{display:flex;flex-direction:column;gap:14px}
.prop{background:var(--white);border:1px solid var(--cloud);border-radius:var(--r-l);
  padding:24px 26px;box-shadow:var(--sh-s)}
.prop.measured{box-shadow:var(--sh-m)}
.ph2{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pstate{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate)}
.prop h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.15;margin:0 0 14px;letter-spacing:-.01em}
.pacts{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pacts li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.pacts li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;
  background:var(--yellow)}

.pfc{background:rgba(23,28,43,.03);border-radius:var(--r-m);padding:18px 20px}
.pfc-n{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pfc-n > div{min-width:84px}
.pfc-n b{display:block;font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;
  font-variant-numeric:tabular-nums}
.pfc-n span{display:block;font-size:12px;color:var(--slate);margin-top:4px}
.pfc-n .hot b{display:inline-block;background:var(--yellow);border-radius:var(--r-s);padding:2px 12px}
.parr{width:22px;height:8px;position:relative;flex:none;align-self:center;margin-top:-14px}
.parr::before{content:"";position:absolute;left:0;top:3px;width:100%;height:1.5px;background:var(--mist)}
.parr::after{content:"";position:absolute;right:0;top:0;width:8px;height:8px;
  border-right:1.5px solid var(--mist);border-top:1.5px solid var(--mist);transform:rotate(45deg)}
.pfc-w{margin:0 0 9px;font-size:14px;line-height:1.6;color:var(--ink)}
.pfc-c{margin:0;font-size:12.5px;line-height:1.55;color:var(--slate)}
.pfc.none{border:1.5px dashed var(--mist);background:var(--white)}
.pfc.none .k{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);font-weight:700;margin-bottom:7px}
.pfc.none p{margin:0;font-size:14px;line-height:1.6;color:var(--slate)}

/* ---- launch ---- */
.launch{margin-top:22px}
.lnch{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--ink);color:#EDEDED;
  border-radius:var(--r-l);padding:26px 28px;box-shadow:var(--sh-m)}
.lnch .k{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--yellow);font-weight:700;margin-bottom:8px}
.lnch b{display:block;font-family:var(--serif);font-weight:400;font-size:1.75rem;color:#fff;
  line-height:1.15;margin-bottom:8px}
.lnch p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(237,237,237,.85);max-width:62ch}
.lnch .btnrow,.lnch > .btn{margin-left:auto;margin-top:0;flex:none}
.lnch .btn.dark{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.lnch .btn:not(.dark){background:transparent;color:#EDEDED;border-color:rgba(255,255,255,.28)}
.lnch .btn:not(.dark):hover{background:rgba(255,255,255,.1)}
.lnch.done{background:var(--white);color:var(--ink);border:1px solid var(--cloud)}
.lnch.done .k{color:var(--slate)}
.lnch.done b{color:var(--ink)}
.lnch.done p{color:var(--slate)}
.lnch.done .btn{background:var(--white);color:var(--ink);border-color:var(--mist)}

/* ---- the month ---- */
.weeks{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.wk{background:var(--white);border:1px solid var(--cloud);border-radius:var(--r-l);padding:20px 22px;
  box-shadow:var(--sh-s);opacity:0;transform:translateY(10px);
  animation:rise .5s var(--ease) forwards;animation-delay:calc(var(--d) * .07s)}
.wkh{padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--cloud)}
.wkh b{display:block;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--slate)}
.wkh span{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.15;margin-top:5px}
.wk ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.wk li{font-size:14px;line-height:1.55;color:var(--ink)}
.wk li .ch{margin-right:8px;vertical-align:1px}

@media (max-width:1000px){
  .standgrid{grid-template-columns:1fr}
  .iss{grid-template-columns:1fr;gap:9px}
  .mflag{grid-row:1;justify-self:start}
}

/* ======================================== TODAY — the owner's own numbers */
.plainline{background:var(--white);border:1px solid var(--cloud);border-radius:var(--r-l);
  padding:22px 26px;box-shadow:var(--sh-s);margin-bottom:16px}
.plainline p{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.1vw,1.65rem);line-height:1.35;letter-spacing:-.008em;max-width:62ch}
.plainline p b{font-weight:400;font-family:var(--disp);font-size:.92em;font-weight:700}
.pl-note{display:block;margin-top:12px;font-size:12.5px;color:var(--slate)}

.stats.big{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.stats.big .vl{font-size:2.5rem}
.stats.big .stat2{padding:20px 22px 18px}

.substrip{display:flex;flex-wrap:wrap;gap:1px;background:var(--cloud);border:1px solid var(--cloud);
  border-radius:var(--r-m);overflow:hidden;margin-top:12px}
.substrip span{flex:1 1 140px;background:var(--white);padding:12px 16px;display:flex;
  flex-direction:column;gap:3px}
.substrip i{font-style:normal;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);font-weight:700}
.substrip b{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}

/* --- autonomy choice --- */
.autoblock .pick2,.picks.goals .pick2{padding-bottom:22px}
.autoblock .pick2 span:not(.rec),.picks.goals .pick2 span:not(.rec):not(.num2){margin-bottom:0}
.picks.goals{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.picks.goals .pick2 .go{display:none}
.goalpick{padding-left:26px;position:relative}
.goalpick[aria-pressed="true"]{padding-left:56px}
.num2{position:absolute;left:20px;top:26px;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:var(--white);display:grid;place-items:center;
  font-size:12px;font-weight:700;animation:pop .28s var(--ease) both}
.goalpick.lead .num2{background:var(--yellow);color:var(--ink)}
.goalpick .rec{top:auto;bottom:20px;right:20px}
.pick2 .rec{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;background:var(--yellow);color:var(--ink);
  border-radius:var(--r-pill);padding:4px 10px;margin:0}
.autoblock .pick2 .go{display:none}

/* --- the analysis loader --- */
.build{max-width:600px;gap:8px;margin-top:26px}
.bl{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 13px;align-items:center;
  padding:14px 18px;opacity:.32;transform:none;transition:opacity .35s var(--ease)}
.bl b{grid-column:2;font-weight:700;font-size:14.5px}
.bl span:not(.tick){grid-column:2;margin:2px 0 0;font-size:13px;color:var(--slate);line-height:1.5}
.bl .tick{grid-row:1 / span 2;width:22px;height:22px;border-radius:50%;background:var(--cloud);
  position:relative;transition:background .3s var(--ease)}
.bl.on{opacity:1;animation:blIn .4s var(--ease)}
.bl.on .tick{background:var(--yellow)}
.bl.on:not(.done) .tick::before{content:"";position:absolute;inset:4px;border-radius:50%;
  border:2px solid var(--ink);border-right-color:transparent;animation:spin .7s linear infinite}
.bl.done .tick::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(42deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.obdone{margin-top:32px;padding-top:28px;border-top:1px solid var(--cloud)}
.obdone .btnrow{margin-top:22px}

/* ================================================================= INTRO
   Six scenes between "your strategy is ready" and the dashboard. Staged
   entrances, one idea per scene, skippable at any point. */

.intro{position:fixed;inset:0;z-index:95;background:var(--ink);color:#fff;
  display:grid;place-items:center;overflow:hidden;
  background-image:
    radial-gradient(900px 520px at 78% -10%,rgba(249,224,97,.14) 0%,rgba(23,28,43,0) 66%),
    radial-gradient(760px 520px at 12% 106%,rgba(249,224,97,.07) 0%,rgba(23,28,43,0) 62%);
  animation:inFade .5s var(--ease)}
.intro[hidden]{display:none}
.intro.out{animation:inOut .42s var(--ease) forwards}
@keyframes inFade{from{opacity:0}to{opacity:1}}
@keyframes inOut{to{opacity:0;transform:scale(1.02)}}

.in-bar{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1)}
.in-bar i{display:block;height:100%;width:0;background:var(--yellow)}
.in-skip{position:absolute;top:22px;right:26px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);color:#EDEDED;border-radius:var(--r-pill);
  padding:9px 18px;font-size:13.5px;font-weight:700;transition:all var(--d-hover) var(--ease)}
.in-skip:hover{background:rgba(255,255,255,.16);color:#fff}
.in-dots{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:center;gap:9px}
.dot2{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.2);
  transition:all var(--d-state) var(--ease);padding:0}
.dot2.done{background:rgba(249,224,97,.5)}
.dot2.on{background:var(--yellow);width:26px;border-radius:var(--r-pill)}

.in-stage{width:min(860px,88vw);text-align:center;padding:40px 0}
.sc{animation:scIn .6s var(--ease) both}
@keyframes scIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.sc h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.4vw,4.2rem);
  line-height:1.02;letter-spacing:-.02em;margin:0 0 20px;color:#fff}
.sc .hl{color:#fff;background-image:linear-gradient(var(--yellow),var(--yellow));
  background-size:100% .1em;background-position:0 88%}
.sc p{margin:0 auto;max-width:56ch;font-size:clamp(15px,1.7vw,18px);line-height:1.65;
  color:rgba(237,237,237,.82);animation:scIn .6s var(--ease) .18s both}

/* 1 — meet */
/* The mascot flies in rather than appears: from off the left edge of the
   screen, low and small, up over a couple of beats, past the middle, back
   onto it. The path is a zigzag on purpose — a bee does not travel in a
   straight line, and a straight tween here read as a sliding sticker. The
   distance is in vw so it starts off-screen at any width, and the scale
   grows through the flight, which is the only depth cue a flat sprite has.
   Landing, hover and wink are three animations on two elements: the outer
   span flies, the inner one breathes, so neither has to know about the
   other and the eyelid stays pinned to the eye through both. */
.sc-meet .bee{--bee:124px;position:relative;display:block;
  width:var(--bee);height:var(--bee);margin:0 auto 30px;
  animation:beeFly 1.65s cubic-bezier(.33,.75,.35,1) both}
.sc-meet .bee-w{position:relative;display:block;width:100%;height:100%;
  animation:beeHover 3.4s ease-in-out 1.75s infinite}
.sc-meet .bee img{display:block;width:var(--bee);height:var(--bee)}
/* The glow arrives with the landing, not before: it is the ground the bee
   settles onto, and on a dark slide it is the only thing that separates a
   sprite from a cut-out. */
.sc-meet .bee::before{content:'';position:absolute;left:50%;top:52%;
  width:250%;height:250%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(249,224,97,.16) 0%,rgba(249,224,97,.05) 42%,rgba(249,224,97,0) 68%);
  opacity:0;animation:beeGlow 1s var(--ease) 1.3s both;pointer-events:none}
@keyframes beeFly{
  0%{opacity:0;transform:translate(-64vw,15vh) rotate(-24deg) scale(.36)}
  14%{opacity:1}
  30%{transform:translate(-34vw,-7vh) rotate(-11deg) scale(.56)}
  48%{transform:translate(-14vw,6vh) rotate(9deg) scale(.78)}
  64%{transform:translate(3vw,-5vh) rotate(-7deg) scale(1.02)}
  78%{transform:translate(2.5vw,2.5vh) rotate(5deg) scale(1.07)}
  89%{transform:translate(-.6vw,-1.2vh) rotate(-2deg) scale(.985)}
  100%{opacity:1;transform:none}}
@keyframes beeHover{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes beeGlow{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sc-meet .bee-w{animation:none!important}
}

/* The eyelid, cut from the bee's own head. A flat fill will not do: the head
   is shaded, and a solid patch of any one value sits on it as a rectangle.
   So the lid carries the sprite itself, offset 18px down, which puts a clean
   piece of head under the eye's box — real pixels, real shading, no second
   image to ship. The white lash is what reads as "closed" rather than "gone".
   Every figure below is the eye's box in the 192px sprite (x 114, y 69,
   13x15) expressed against the rendered size, so --bee is the only number
   to change. A new mascot file means measuring the eye again. */
.sc-meet .bee-w .bee-wink{position:absolute;
  left:calc(var(--bee) * 114 / 192);
  top:calc(var(--bee) * 69 / 192);
  width:calc(var(--bee) * 13 / 192);
  height:calc(var(--bee) * 15 / 192);
  background-image:url('/img/bee-mascot-192.webp');
  background-repeat:no-repeat;
  background-size:var(--bee) var(--bee);
  background-position:calc(var(--bee) * -114 / 192) calc(var(--bee) * -87 / 192);
  transform-origin:50% 0;opacity:0;transform:scaleY(0);
  animation:beeWink .62s ease-in-out 1.28s both}
.sc-meet .bee-w .bee-wink::after{content:'';position:absolute;left:8%;right:8%;bottom:1px;height:2px;
  border-radius:2px;background:#FFF}
@keyframes beeWink{
  0%{opacity:0;transform:scaleY(0)}
  16%{opacity:1;transform:scaleY(1)}
  58%{opacity:1;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(0)}}

/* --------------------------------------------------- promo-only signal
   Two colours that are NOT in the brandbook's seven. They exist because a
   promo that says "this is wrong" and "this gets better" in the same yellow
   says neither. They are deliberate additions, named for what they mean
   rather than for the hue, and they are used ONLY on these four onboarding
   slides — the product itself still runs on the seven. Do not reach for
   them anywhere else without deciding to, the way these were decided. */
:root{ --promo-bad:#E2645C; --promo-good:#58C08D; }

/* 2 — what the clinic looks like right now */
.pz-bars{display:flex;flex-direction:column;gap:20px;margin:36px auto 0;max-width:660px;text-align:left}
.pz-bar{animation:jobIn .5s var(--ease) both;animation-delay:calc(.3s + var(--n) * .22s)}
.pz-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px}
.pz-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(237,237,237,.66)}
.pz-v{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1;color:#fff}
.pz-v.bad{color:var(--promo-bad)}
/* The track is the whole of what the clinic could have; the fill is what it
   is getting. The gap you can see is the point of the slide. */
.pz-t{position:relative;height:10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);overflow:hidden}
.pz-t i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);
  background:var(--promo-bad);width:0;animation:pzGrow .9s var(--ease) both;
  animation-delay:calc(.45s + var(--n) * .22s)}
.pz-t i.ok{background:rgba(237,237,237,.55)}
@keyframes pzGrow{from{width:0}to{width:var(--w)}}

/* 3 — what it looks like after */
/* 3 — three tiles, one per figure slide 2 called a problem. The pair of
   bars this replaced asked the reader to compare two lengths and then do
   the subtraction; the tile hands over the result and keeps the two
   numbers under it, small, for anyone who wants to check the arithmetic.
   Green is the promo's own signal colour, never the product's. */
.pz-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:14px;max-width:700px;margin:38px auto 0}
.pz-tile{padding:24px 18px;border-radius:var(--r-l);text-align:center;
  background:rgba(88,192,141,.11);border:1px solid rgba(88,192,141,.38);
  animation:pzTile .52s var(--ease) both;animation-delay:calc(.3s + var(--n) * .17s)}
.pz-tile b{display:block;font-size:34px;font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--promo-good)}
.pz-tile span{display:block;margin-top:9px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(237,237,237,.72)}
.pz-tile i{display:block;margin-top:8px;font-style:normal;font-size:13px;
  color:rgba(237,237,237,.5)}
@keyframes pzTile{from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:none}}

.pz-pair{display:flex;flex-direction:column;gap:22px;margin:34px auto 0;max-width:660px;text-align:left}
.pz-gp{animation:jobIn .5s var(--ease) both;animation-delay:calc(.3s + var(--n) * .24s)}
.pz-gk{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(237,237,237,.66);margin-bottom:10px}
/* Two bars, now and projected, on the same scale — the length is the
   argument, so they must share one. */
.pz-r{display:flex;align-items:center;gap:13px;margin-bottom:7px}
.pz-r span{flex:0 0 42px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(237,237,237,.5)}
.pz-b{flex:1 1 auto;height:26px;border-radius:var(--r-s);background:rgba(255,255,255,.1);
  position:relative;overflow:hidden}
.pz-b i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-s);
  background:rgba(237,237,237,.34);width:0;animation:pzGrow .9s var(--ease) both;
  animation-delay:calc(.5s + var(--n) * .24s)}
.pz-r.to .pz-b i{background:var(--promo-good);animation-delay:calc(.75s + var(--n) * .24s)}
.pz-b b{position:absolute;top:0;bottom:0;display:flex;align-items:center;
  left:12px;font-size:14px;font-weight:700;color:#fff}
.pz-up{display:inline-block;margin-top:2px;font-size:12.5px;font-weight:700;
  color:var(--promo-good)}
.sc-fix .modelled{margin:26px auto 0;max-width:56ch;font-size:12px;line-height:1.55;
  color:rgba(237,237,237,.5)}

/* 4 — the channels it works through */
.pz-ring{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:32px auto 0;max-width:680px}
.pz-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:10px 18px;font-weight:700;font-size:14px;color:#fff;
  animation:jobIn .4s var(--ease) both;animation-delay:calc(.25s + var(--n) * .09s)}
.sc-go .btnrow{justify-content:center;margin-top:34px;
  animation:scIn .5s var(--ease) 1.15s both}

/* the last slide keeps the ready badge and the secondary button */
.rdy{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--yellow);color:var(--ink);
  border-radius:var(--r-pill);padding:6px 15px;margin-bottom:22px;
  animation:pulseIn .5s var(--ease) both}
@keyframes pulseIn{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes jobIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
/* 4 — the flat yellow mark over the wordmark, centred, one entrance for
   the pair so they read as a single lockup rather than two things that
   happened to animate. The mascot belongs to the greeting on slide 1; the
   last slide is the product signing its name. */
.sc-go .go-mark{display:flex;align-items:center;justify-content:center;gap:0;
  margin:0 0 4px;animation:jobIn .55s var(--ease) .1s both}
/* The mark sits on the wordmark's own line and is sized from it, so the two
   scale together instead of the bee drifting as the type reflows.
   The negative margins are not a nudge: the sprite is 256px wide and the
   bee inside it is 126px, so a quarter of the file is transparent on each
   side. Set a gap and you get that padding on top of it, which is why the
   mark looked parked away from the word. The pull is measured from the
   rendered width, so it holds at every size, and it is applied to both
   sides so the lockup stays optically centred. Re-export the sprite with
   different padding and these two numbers have to change with it.
   It rides slightly high because the yellow underline belongs to the word,
   not to the lockup, and a bee sitting on it read as a third line. */
.sc-go .go-mark img{--mark:clamp(52px,5.4vw,86px);display:block;flex:none;
  width:var(--mark);height:var(--mark);
  margin-left:calc(var(--mark) * -.13);margin-right:calc(var(--mark) * -.24);
  margin-bottom:.12em}
.sc-go .go-mark h2{margin:0}

.sc-go .btn.white{background:transparent;color:#EDEDED;border:1px solid rgba(255,255,255,.28)}
.sc-go .btn.white:hover{background:rgba(255,255,255,.1);color:#fff}

@media (prefers-reduced-motion:reduce){
  .intro *{animation-duration:.01ms !important;animation-delay:0s !important}
  .in-bar i{transition:none !important}
}

/* ==================================================== TODAY — one hero
   The old version said the same numbers in a greeting, a sentence and five
   cards. Repetition at equal weight is what makes a screen read as filler.
   One thing to look at, one quiet row of support, then the decisions. */


.hero{margin:6px 0 0}
.hero-in{position:relative;background:var(--white);border:1px solid var(--cloud);
  border-radius:var(--r-l);padding:34px 36px 32px;box-shadow:var(--sh-m);overflow:hidden;
  animation:rise .55s var(--ease) both}
.hero-in::after{content:"";position:absolute;inset:auto -12% -70% auto;width:420px;height:420px;
  border-radius:50%;background:rgba(249,224,97,.16);pointer-events:none}
.hero-in.over{background:rgba(249,224,97,.12);border-color:rgba(249,224,97,.55)}
.hero-in.unknown{border-style:dashed}
.hero-k{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);font-weight:700;margin-bottom:16px;position:relative}
.hero-n{font-family:var(--serif);font-weight:400;margin:0 0 26px;position:relative;
  font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.02em;max-width:19ch}
.hero-p{margin:0 0 24px;font-size:16.5px;line-height:1.6;color:var(--slate);
  max-width:56ch;position:relative}
.hero-p b{color:var(--ink);font-weight:700}
.hero-in .btn{position:relative}

/* the gauge: affordable against actual, to scale, each bar labelled at its
   own end so the comparison needs no legend */
.gauge{display:flex;flex-direction:column;gap:12px;margin:0 0 26px;position:relative;max-width:660px}
.grow2{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:center}
.gk{font-size:12.5px;color:var(--slate);font-weight:700}
.gbar{position:relative;height:26px;display:block}
.gafford,.gactual{position:absolute;left:0;top:3px;height:20px;border-radius:var(--r-pill);
  display:block;animation:grow .85s var(--ease) both}
.gafford{background:var(--ink)}
.gactual{background:var(--yellow);animation-delay:.18s}
.gv{position:absolute;top:0;margin-left:12px;font-family:var(--serif);font-weight:400;
  font-size:1.5rem;line-height:26px;font-variant-numeric:tabular-nums;white-space:nowrap;
  animation:scIn .5s var(--ease) .5s both}
.gv.hot2{font-weight:400}
@keyframes grow{from{width:0 !important}}

/* supporting numbers: one quiet row, no cards */
.metabar{display:flex;flex-wrap:wrap;gap:0;margin-top:16px;
  border:1px solid var(--cloud);border-radius:var(--r-m);background:var(--white);overflow:hidden}
.metabar span{flex:1 1 150px;padding:14px 18px;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--cloud)}
.metabar span:last-child{border-right:0}
.metabar i{font-style:normal;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);font-weight:700}
.metabar b{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.metabar b.neg2{background:rgba(249,224,97,.55);border-radius:var(--r-pill);
  padding:1px 10px;align-self:flex-start}
.metabar em{font-style:normal;font-size:11.5px;color:var(--slate)}
.metabar em.bad{color:var(--ink);font-weight:700}

.sec-h{margin:40px 0 14px}

@media (max-width:820px){
  .gauge{grid-template-columns:1fr;gap:10px}
  .gl.right{text-align:left}
  .gtrack{height:46px}
}
@media (prefers-reduced-motion:reduce){
  .gafford,.gactual,.hero-in{animation:none !important}
}

/* ====================================== the campaign table, as a real one
   Sortable headers, a totals row, and campaigns that open to their ads. */
.tbl th.srt{cursor:pointer;user-select:none;transition:color .14s var(--ease)}
.tbl th.srt:hover{color:var(--ink)}
.tbl th.srt.on{color:var(--ink)}
.ar2{font-style:normal;margin-left:5px;font-size:11px}
.tbl td{padding:11px 14px}
.tbl .cname{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tw{flex:none;width:18px;height:18px;border:0;background:none;padding:0;color:var(--slate);
  font-size:15px;line-height:18px;text-align:center;transition:transform .2s var(--ease),color .14s}
button.tw{cursor:pointer;border-radius:5px}
button.tw:hover{background:var(--cloud);color:var(--ink)}
.crow.open button.tw{transform:rotate(90deg);color:var(--ink)}
.tbl .cname small{flex-basis:100%;margin-left:27px}
.krow{background:rgba(23,28,43,.02)}
.krow td{padding-top:9px;padding-bottom:9px;font-size:13px;color:var(--slate)}
.krow .cname{font-weight:500;color:var(--ink)}
.krow .kind{flex:none;width:18px;height:18px;position:relative}
.krow .kind::before{content:"";position:absolute;left:7px;top:-4px;width:1.5px;height:12px;
  background:var(--cloud)}
.krow .kind::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:1.5px;
  background:var(--cloud)}
.krow .st i{background:var(--mist)}
.trow{background:var(--cloud)}
.trow td{font-weight:700;border-bottom:0;padding-top:13px;padding-bottom:13px}
.trow .cname{font-weight:700}
.trow small{color:var(--slate);font-weight:500}
.tbl tbody tr.trow:hover{background:var(--cloud)}
.tbl tbody tr.krow:hover{background:rgba(23,28,43,.04)}

/* ======================================================================
   READING THE CLINIC'S SITE  ·  onboarding step 1
   The result of a real fetch, so it is allowed to look like a result:
   a header naming what was read, the facts, and the compliance hits with
   the sentence each came from. Fields the site did not carry are dimmed
   rather than omitted — "Not on the page" is information.
   ====================================================================== */

.scanres{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--white);box-shadow:var(--sh-card);padding:20px 22px;
  animation:scanIn .34s var(--ease) both}
@keyframes scanIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.scanres{animation:none}}

.scanres.wait{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.scanres.wait b{font-size:15px}
.scanres.wait span:not(.spin){color:var(--grey);font-size:13.5px;flex:1 1 100%}
.spin{width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--y-30);border-top-color:var(--ink);
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

.scanres.bad{border-color:var(--mist)}
.scanres.bad b{display:block;font-size:15px;margin-bottom:4px}
.scanres.bad p{margin:0;color:var(--grey);font-size:13.5px;line-height:1.55}

.scanhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:4px;border-bottom:var(--hair)}
.scanhead b{font-size:15px;letter-spacing:-.01em;word-break:break-all}
.kbadge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--y-30);color:var(--ink);
  font-weight:600;white-space:nowrap}
.warnline{margin:12px 0 0;padding:11px 13px;border-radius:var(--r-s);
  background:var(--y-15);color:var(--ink-2);font-size:13px;line-height:1.55}

.scanfacts{margin:14px 0 0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.scanfacts>div{display:grid;grid-template-columns:150px 1fr;gap:14px;
  background:var(--white);padding:10px 14px}
.scanfacts dt{color:var(--grey);font-size:12.5px;letter-spacing:.01em}
.scanfacts dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.scanfacts .none dd{color:var(--mist)}
@media (max-width:640px){.scanfacts>div{grid-template-columns:1fr;gap:2px}}

.scansvc{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sgchip{font-size:12.5px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--wash);border:1px solid var(--line);color:var(--ink-2)}
.sgchip b{font-weight:600;color:var(--ink)}

.scanscreen{margin-top:16px;border-top:var(--hair);padding-top:14px}
.ssh b{display:block;font-size:14.5px;margin-bottom:2px}
.ssh span{display:block;color:var(--grey);font-size:12.5px;line-height:1.5}
.scanscreen ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.scanscreen li{padding:11px 13px;border-radius:var(--r-s);background:var(--wash);
  border-left:3px solid var(--y-55)}
.scanscreen li .sev{display:inline-block;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:var(--grey);margin-bottom:4px}
.scanscreen li .sev.f{color:var(--ink)}
.scanscreen li b{display:block;font-size:13.5px;margin-bottom:5px}
.scanscreen li q{display:block;color:var(--grey);font-size:12.5px;line-height:1.55;
  font-style:italic;quotes:"\201C" "\201D"}
.scanscreen li:has(.sev.f){border-left-color:var(--yellow)}

.scanact{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:var(--hair)}

/* ======================================================================
   HOW SHMEL OPERATES  ·  onboarding step 6
   Two cards, deliberately equal in weight. Autopilot is not a downgrade
   and supervised is not a limitation, so neither is styled as the lesser
   option; the only asymmetry is the "most clinics start here" note, which
   is a fact about other clinics rather than a nudge.
   ====================================================================== */

.opmodes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media (max-width:820px){.opmodes{grid-template-columns:1fr}}

.opmode{display:flex;flex-direction:column;gap:0;text-align:left;cursor:pointer;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-xl);
  padding:24px 24px 20px;font:inherit;color:inherit;
  transition:border-color var(--d-state) var(--ease),
             box-shadow var(--d-state) var(--ease),
             transform var(--d-hover) var(--ease)}
.opmode:hover{border-color:var(--mist);transform:translateY(-2px);box-shadow:var(--sh-m)}
.opmode:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.opmode.on{border-color:var(--ink);box-shadow:var(--sh-card)}
.opmode.on .om-h b::after{transform:scaleX(1)}

.om-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px}
.om-h b{font-size:20px;letter-spacing:-.02em;position:relative}
.om-h b::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:.42em;
  background:var(--yellow);z-index:-1;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d-state) var(--ease)}
.om-h .rec{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;padding:4px 9px;border-radius:var(--r-pill);
  background:var(--y-30);color:var(--ink);white-space:nowrap}
.om-h .rec.alt{background:var(--wash);color:var(--grey)}

.om-p{color:var(--ink-2);font-size:14px;line-height:1.6;margin-bottom:16px}
.om-l{display:flex;align-items:flex-start;gap:9px;color:var(--grey);
  font-size:12.5px;line-height:1.5;padding:6px 0;border-top:var(--hair)}
.om-l i{flex:0 0 auto;width:6px;height:6px;margin-top:6px;border-radius:50%;
  background:var(--mist)}
.opmode.on .om-l i{background:var(--yellow)}

.opnote{margin-top:22px;padding:16px 18px;border-radius:var(--r);
  background:var(--wash);border:var(--hair);color:var(--grey);
  font-size:13px;line-height:1.65}
.opnote b{color:var(--ink);font-weight:600}

/* ======================================================================
   THE WRITTEN AD  ·  variants, attribution, publishing
   ====================================================================== */

/* Who wrote it. Sits under the form so the answer is visible before the
   clinic clicks, not discovered afterwards. */
.engline{display:flex;align-items:flex-start;gap:9px;margin-top:14px;
  padding-top:14px;border-top:var(--hair);color:var(--grey);
  font-size:12px;line-height:1.55}
.engline .kbadge{background:var(--wash);color:var(--grey);flex:0 0 auto}
.engline.live .kbadge{background:var(--y-30);color:var(--ink)}

/* Three angles, each with its own verdict. A variant whose screen holds it
   says so here, before it is opened. */
.vtabs{display:grid;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.vtab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--white);border:0;padding:13px 22px;cursor:pointer;font:inherit;
  color:inherit;transition:background var(--d-hover) var(--ease)}
.vtab:hover{background:var(--wash)}
.vtab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.vtab.on{background:var(--y-15)}
.vtab .vn{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;
  place-items:center;font-size:11.5px;font-weight:600;
  background:var(--wash);color:var(--grey);font-variant-numeric:tabular-nums}
.vtab.on .vn{background:var(--ink);color:var(--white)}
.vtab .vl{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.vtab .vl b{font-size:13px;letter-spacing:-.005em}
.vtab .vl em{font-style:normal;font-size:12px;color:var(--grey);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtab .stt{flex:0 0 auto}

/* Publishing. The checks are the interface: a clinic that cannot publish is
   told exactly which of the six gates is shut and why. */
.pubbox{margin:0 22px 22px;border:1px solid var(--line);border-radius:var(--r-l);
  padding:18px 20px;background:var(--wash)}
.pubbox.ready{border-color:var(--ink);background:var(--white);box-shadow:var(--sh-card)}
.pb-h b{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:3px}
.pb-h span{display:block;color:var(--grey);font-size:12.5px;line-height:1.55}
.pbchecks{list-style:none;margin:14px 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pbchecks li{display:grid;grid-template-columns:18px 170px 1fr;gap:10px;align-items:baseline;
  background:var(--white);padding:10px 14px;font-size:12.5px;line-height:1.5}
.pbchecks li i{width:9px;height:9px;border-radius:50%;background:var(--mist);
  align-self:center;justify-self:center}
.pbchecks li.ok i{background:var(--yellow)}
.pbchecks li.no i{background:transparent;border:1.5px solid var(--mist)}
.pbchecks li b{font-weight:600;color:var(--ink)}
.pbchecks li.no b{color:var(--grey)}
.pbchecks li span{color:var(--grey)}
@media (max-width:720px){.pbchecks li{grid-template-columns:18px 1fr}
  .pbchecks li span{grid-column:2}}

.puberr{margin-top:14px;padding:13px 15px;border-radius:var(--r-s);
  background:var(--white);border:1px solid var(--mist)}
.puberr b{display:block;font-size:13.5px;margin-bottom:3px}
.puberr span{display:block;color:var(--grey);font-size:12.5px}
.puberr q{display:block;margin-top:7px;color:var(--grey);font-size:12px;
  font-style:italic;line-height:1.55}

/* Created. Real Meta ids, because they are what make it checkable. */
.pubdone{margin:0 22px 22px;border:1px solid var(--ink);border-radius:var(--r-l);
  padding:18px 20px;background:var(--white);box-shadow:var(--sh-card)}
.pd-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pd-h b{font-size:15px;letter-spacing:-.01em}
.pdids{margin:0 0 14px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pdids>div{display:grid;grid-template-columns:100px 1fr;gap:12px;
  background:var(--white);padding:9px 14px}
.pdids dt{color:var(--grey);font-size:12px}
.pdids dd{margin:0;font-size:12.5px;font-variant-numeric:tabular-nums;
  word-break:break-all}
.pubdone p{margin:0 0 14px;color:var(--grey);font-size:12.5px;line-height:1.6}
.pfix{margin:8px 0 0;padding:10px 12px;border-radius:var(--r-s);background:var(--y-15);
  color:var(--ink);font-size:12.5px;line-height:1.55}

/* ======================================================================
   TODAY  ·  a decision queue that empties
   The screen's job is one question: what needs deciding. A finding already
   answered leaves the queue and joins the record below it, which is what
   makes reaching zero possible and visible.
   ====================================================================== */

.btn.ghost{background:transparent;border-color:transparent;color:var(--grey)}
.btn.ghost:hover{background:var(--wash);color:var(--ink)}

.clear{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:52px 28px;border:1px dashed var(--line-2);border-radius:var(--r-xl);
  background:var(--white)}
.clear .cl-b{width:44px;height:44px;margin-bottom:8px;opacity:.5}
.clear .cl-b img{width:100%;height:100%;object-fit:contain}
.clear b{font-family:var(--serif);font-size:26px;line-height:1.05;letter-spacing:-.01em}
.clear p{max-width:44ch;color:var(--grey);font-size:14px;line-height:1.6;margin:2px 0 14px}

.sect-h{font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin:44px 0 14px;
  font-family:var(--disp);font-weight:600}

/* The record. Deliberately quiet — it is reassurance, not a call to act. */
.didlist{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:var(--white)}
.didrow{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:baseline;
  padding:12px 18px;border-bottom:var(--hair);font-size:13.5px;line-height:1.5}
.didrow:last-of-type{border-bottom:0}
.didrow .dk{width:7px;height:7px;border-radius:50%;background:var(--mist);
  align-self:center;justify-self:center}
.didrow .dk.approved{background:var(--yellow)}
.didrow .dk.blocked{background:var(--ink)}
.didrow .dt{color:var(--ink-2)}
.didrow .dw{color:var(--mist);font-size:12px;white-space:nowrap}
.didlist .btn{margin:14px 18px 18px}

/* ======================================================================
   STRATEGY  ·  the audit it came from, and the quarter
   ====================================================================== */

.audit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
  padding:18px 22px;margin:0 0 30px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--wash)}
.audit .au-l{flex:1 1 380px;min-width:0}
.audit b{display:block;font-size:17px;letter-spacing:-.015em;margin:3px 0 4px}
.audit p{margin:0;color:var(--grey);font-size:13px;line-height:1.6;max-width:72ch}

.qrule{padding:13px 16px;margin-bottom:18px;border-radius:var(--r);
  background:var(--y-15);color:var(--ink-2);font-size:13px;line-height:1.6}

.qmonths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media (max-width:1080px){.qmonths{grid-template-columns:1fr}}

.qm{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:24px;box-shadow:var(--sh-card);
  animation:qIn .5s var(--ease) both;animation-delay:calc(var(--d)*80ms)}
@keyframes qIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qm{animation:none}}

.qm-h{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.qm-h .qn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--white);font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums}
.qm-h b{display:block;font-family:var(--serif);font-size:22px;line-height:1.05;letter-spacing:-.01em}
.qm-h span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mist)}
.qm-why{margin:0 0 18px;color:var(--grey);font-size:13px;line-height:1.6}

.qm-ch{display:grid;gap:14px}
.qc{padding:13px 0 0;border-top:var(--hair);position:relative}
.qc ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.qc li{position:relative;padding-left:15px;color:var(--ink-2);font-size:13px;line-height:1.55}
.qc li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--mist)}
.qc.meas li::before{background:var(--yellow)}
.qnm{display:inline-block;margin-top:9px;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mist)}

.qout{margin-top:20px;padding:16px 17px;border-radius:var(--r);background:var(--y-15)}
.qout.none{background:var(--wash)}
.qout .k{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);margin-bottom:6px}
.qout b{display:block;font-size:15px;line-height:1.45;letter-spacing:-.01em}
.qout .qw{margin:9px 0 0;color:var(--ink-2);font-size:12.5px;line-height:1.6}
.qout .qc2{margin:8px 0 0;color:var(--grey);font-size:11.5px;line-height:1.55}
.qout.none p{margin:0;color:var(--grey);font-size:12.5px;line-height:1.6}

/* ======================================================================
   SEARCH  ·  four states, never two
   A green tick on "title present" would be a lie by omission — present is
   not the same as correct. So a check that found something it cannot judge
   reads as "needs a person", and one that needs a tool SHMEL does not have
   reads as "not measured", with what it would take.
   ====================================================================== */

.seostart{max-width:640px;padding:36px 0}
.seostart h2{font-family:var(--serif);font-size:38px;line-height:1.02;letter-spacing:-.02em;margin:0 0 10px}
.seorun{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 10px}
.seorun input{flex:1 1 260px;min-width:0;padding:13px 16px;font:inherit;font-size:15px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--white);color:var(--ink)}
.seorun input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}

.seohead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;justify-content:space-between;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.seohead h2{font-family:var(--serif);font-size:34px;line-height:1.02;letter-spacing:-.02em;margin:4px 0 6px}
.seohead p{margin:0;color:var(--grey);font-size:13px}
.seonote{margin:16px 0 30px;padding:14px 16px;border-radius:var(--r);
  background:var(--y-15);color:var(--ink-2);font-size:13px;line-height:1.6}

.seoblk{margin-bottom:34px}
.sb-h{margin-bottom:14px}
.sb-h h3{font-size:16px;letter-spacing:-.01em;margin:0 0 3px}
.sb-h p{margin:0;color:var(--grey);font-size:12.5px;line-height:1.55;max-width:74ch}

.seochk{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);margin-bottom:8px}
@media (max-width:720px){.seochk{grid-template-columns:1fr;gap:8px}}
.seochk .sc-s{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);text-align:center;white-space:nowrap;
  justify-self:start}
.seochk.issue{border-color:var(--ink)}
.seochk.issue .sc-s{background:var(--yellow);color:var(--ink)}
.seochk.human .sc-s{background:var(--y-30);color:var(--ink)}
.seochk.pass .sc-s{background:var(--wash);color:var(--grey)}
.seochk.nm{background:var(--wash);border-style:dashed}
.seochk.nm .sc-s{background:transparent;color:var(--mist);border:1px solid var(--line-2)}
.seochk .sc-b b{display:block;font-size:14.5px;letter-spacing:-.005em;margin-bottom:4px}
.seochk .sc-b p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.6}
.seochk.nm .sc-b p{color:var(--grey)}
.sc-fix,.sc-need{margin-top:9px!important;font-size:12.5px!important}
.sc-fix i,.sc-need i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);margin-bottom:2px}
.sc-aff{list-style:none;margin:11px 0 0;padding:11px 0 0;border-top:var(--hair);
  display:grid;gap:4px}
.sc-aff li{color:var(--grey);font-size:12px;line-height:1.5;word-break:break-all;
  font-variant-numeric:tabular-nums}

/* ======================================================================
   THE MARKET  ·  real columns only
   Posting frequency and "runs lead ads" are gone: neither is visible from
   outside a clinic, so a table built on them could only be invented. What
   is here is what a crawl of a public site establishes, and every cell can
   be checked by opening the site.
   ====================================================================== */

.mkempty{padding:18px 0}
.mkempty b{display:block;font-size:15px;margin-bottom:6px}
.mkempty p{margin:0 0 10px;color:var(--grey);font-size:13px;line-height:1.6}
.mkempty .hint{color:var(--mist)}
.mkempty .btn{margin-top:6px}

.tbl.mkt td{vertical-align:top}
.tbl.mkt .sb{display:block;color:var(--mist);font-size:11px;margin-top:2px}
.tbl.mkt tr.me{background:var(--y-15)}
.tbl.mkt tr.me td:first-child b{color:var(--ink)}
.tbl.mkt tr.thin{opacity:.66}
.tbl.mkt tr.off{opacity:.5}
.tbl.mkt .no{color:var(--mist);font-size:12px}
.tbl.mkt .ex{color:var(--ink);background:var(--yellow);border-radius:var(--r-pill);
  padding:1px 8px;font-size:12px}
.yn{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px}
.yn.y{background:var(--yellow)}
.yn.n{border:1.5px solid var(--line-2)}

.gapcard.live{border-left:3px solid var(--yellow)}
.gapcard .gl{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);font-weight:600;margin-bottom:5px}

.cantsee{margin-top:12px}
.cantsee summary{cursor:pointer;color:var(--grey);font-size:12.5px;padding:6px 0}
.cantsee summary:hover{color:var(--ink)}
.cantsee ul{list-style:none;margin:6px 0 0;padding:10px 14px;border-radius:var(--r-s);
  background:var(--wash);display:grid;gap:6px}
.cantsee li{color:var(--grey);font-size:12.5px;line-height:1.5;padding-left:14px;position:relative}
.cantsee li::before{content:"\00d7";position:absolute;left:0;color:var(--mist)}

/* ======================================================================
   SETTINGS  ·  editable
   Every card reads as a record until you press Edit, then becomes the same
   fields onboarding used. One shape for a clinic profile, not two.
   ====================================================================== */

.setcard .sc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.setcard .sc-h h3{margin:0}
.setcard .sc-a{display:flex;gap:7px}
.setcard .sc-n{font-size:11.5px;color:var(--grey)}
.setcard.editing{border-color:var(--ink);box-shadow:var(--sh-card)}
.setcard.wide{grid-column:1/-1}
.setgrid.one{grid-template-columns:1fr}

.btn.xs{padding:5px 12px;font-size:12px}

.setform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.setform{grid-template-columns:1fr}}
.sf2{display:flex;flex-direction:column;gap:5px;min-width:0}
.sf2.wide,.setform .hint.wide{grid-column:1/-1}
.sf2 > span{font-size:11.5px;letter-spacing:.04em;color:var(--grey)}
.sf2 input,.sf2 select,.sf2 textarea{width:100%;padding:10px 12px;font:inherit;font-size:14px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--white);color:var(--ink)}
.sf2 textarea{min-height:76px;resize:vertical;line-height:1.55}
.sf2 input:focus,.sf2 select:focus,.sf2 textarea:focus{outline:2px solid var(--ink);
  outline-offset:1px;border-color:transparent}

.sc-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:var(--hair)}
.sc-f .hint{margin:0}
.setcard .hint.warn{color:var(--ink);background:var(--y-15);padding:8px 11px;
  border-radius:var(--r-s);margin-top:10px}

.svcedit{display:grid;gap:8px}
.sve{display:grid;grid-template-columns:1.6fr .8fr .8fr 1fr 28px;gap:7px;align-items:center}
@media (max-width:720px){.sve{grid-template-columns:1fr 1fr;gap:6px}
  .sve .rm{grid-column:2;justify-self:end}}
.sve input,.sve select{width:100%;min-width:0;padding:9px 10px;font:inherit;font-size:13px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--white);color:var(--ink)}
.sve .rm{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--white);color:var(--grey);cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center}
.sve .rm:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

.setrow .tags{display:flex;flex-wrap:wrap;gap:5px}
.setrow .tags span{font-size:11.5px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--wash);border:1px solid var(--line);color:var(--ink-2)}

/* Autonomy, switchable here rather than only at onboarding. */
.autoswitch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
@media (max-width:620px){.autoswitch{grid-template-columns:1fr}}
.asw{text-align:left;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--white);cursor:pointer;font:inherit;color:inherit;
  transition:border-color var(--d-state) var(--ease)}
.asw:hover{border-color:var(--mist)}
.asw.on{border-color:var(--ink);background:var(--y-15)}
.asw b{display:block;font-size:14.5px;margin-bottom:3px}
.asw b i{display:inline-flex;margin-left:7px;padding:2px 7px;border-radius:var(--r-pill);font-style:normal;
  font-size:9px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:#7d6516;
  background:rgba(243,196,67,.18);border:1px solid rgba(184,145,34,.28);vertical-align:2px}
.asw span{display:block;color:var(--grey);font-size:12.5px;line-height:1.5}

/* Autopilot is shown as bounded authority, not a magic on/off switch. */
.apbox{margin:14px 0 12px;padding:18px;border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(255,249,224,.68),rgba(255,255,255,.92))}
.apbox-h{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}
.apbox-h b{display:block;font-size:15px;letter-spacing:-.01em;margin-top:5px}
.apbox-h p{margin:4px 0 0;color:var(--grey);font-size:12.5px;line-height:1.5;max-width:78ch}
.aproad{display:inline-flex;padding:3px 8px;border-radius:var(--r-pill);font-size:9.5px;font-weight:700;
  letter-spacing:.09em;color:#7d6516;background:rgba(243,196,67,.18);border:1px solid rgba(184,145,34,.28)}
.apperms{display:grid;gap:7px}
.aprow{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;
  text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  color:var(--ink);font:inherit;cursor:pointer;transition:border-color var(--d-state) var(--ease),background var(--d-state) var(--ease)}
.aprow:hover{border-color:var(--mist)}
.aprow.on{border-color:rgba(184,145,34,.42);background:rgba(255,248,216,.56)}
.aprow .sw{width:32px;height:18px;border-radius:var(--r-pill);background:#d9dde4;position:relative;display:block}
.aprow .sw i{width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;left:2px;top:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);transition:left var(--d-state) var(--ease)}
.aprow.on .sw{background:var(--ink)}
.aprow.on .sw i{left:16px}
.apcopy b{display:block;font-size:13px;font-weight:650}
.apcopy span{display:block;color:var(--grey);font-size:11.5px;line-height:1.45;margin-top:2px}
.aprow em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.07em;color:var(--mist);white-space:nowrap}
.aprow.on em{color:#836916}
.aplimit{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:12px;padding:13px 14px;
  border:1px dashed var(--line-2);border-radius:var(--r);background:rgba(255,255,255,.72)}
.aplimit b{display:block;font-size:12.5px}
.aplimit span{display:block;color:var(--grey);font-size:11.5px;margin-top:2px}
.apchips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.apchips button{border:1px solid var(--line);background:var(--white);border-radius:var(--r-pill);padding:6px 9px;
  font:600 11px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.apchips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.apguard{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:var(--hair)}
.apguard b{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mist);margin-right:4px}
.apguard span{font-size:10.5px;color:var(--ink-2);padding:4px 8px;border-radius:var(--r-pill);background:var(--wash);border:1px solid var(--line)}
@media (max-width:680px){.aprow{grid-template-columns:36px minmax(0,1fr)}.aprow em{grid-column:2}
  .aplimit{align-items:flex-start;flex-direction:column}.apchips{justify-content:flex-start}}

/* Integrations. What is connected, and for what is not, what it would take. */
.intlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.introw{display:grid;grid-template-columns:190px 96px 1fr;gap:14px;align-items:start;
  background:var(--white);padding:13px 16px}
@media (max-width:820px){.introw{grid-template-columns:1fr auto}
  .introw .i-d{grid-column:1/-1}}
.introw.off{background:var(--wash)}
.introw .i-n{font-size:13.5px;font-weight:600}
.introw.off .i-n{color:var(--grey);font-weight:500}
.introw .i-d{color:var(--grey);font-size:12.5px;line-height:1.55}
.introw .i-w{display:block;margin-top:5px;color:var(--ink-2)}
.introw .i-w i{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mist);margin-right:5px}

/* Name resolved to a website, with the evidence that made it a match. */
.reslist{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:var(--hair)}
.resrow{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.resrow b{font-weight:600;color:var(--ink)}
.resrow span{display:block;color:var(--mist);font-size:11.5px;margin-top:1px}

/* ======================================================================
   META ADS  ·  giving the screen a lead
   Twelve sections at equal weight is what made this read flat. One card in
   the KPI row carries the number the clinic actually cares about, and the
   ranked strip below answers the first question anyone opens an ads manager
   with: which campaign is making money, and which is losing it.
   ====================================================================== */

.kpi{animation:kpiIn .44s var(--ease) both;animation-delay:calc(var(--d)*55ms)}
@keyframes kpiIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kpi{animation:none}}

.kpi.lead{background:var(--y-15);position:relative}
.kpi.lead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--yellow)}
.kpi.lead .v{font-size:1.14em}

/* The ranked strip. Bars run out from a centre line so positive and negative
   return are read as directions, not as two lists. */
.mrank{margin:22px 0 30px;padding:26px 28px;border:1px solid var(--line);
  border-radius:var(--r-xl);background:var(--white);box-shadow:var(--sh-card)}
.mr-h{margin-bottom:22px}
.mr-h h2{font-family:var(--serif);font-size:30px;line-height:1.06;letter-spacing:-.02em;
  margin:6px 0 8px;text-wrap:balance;max-width:24ch}
.mr-h p{margin:0;color:var(--grey);font-size:13px;line-height:1.6;max-width:70ch}

.mr-rows{display:grid;gap:3px}
.mr-row{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(90px,2fr) 72px 78px;
  gap:14px;align-items:center;padding:9px 0;border-bottom:var(--hair)}
.mr-row:last-child{border-bottom:0}
@media (max-width:760px){.mr-row{grid-template-columns:1fr 62px 68px}
  .mr-row .mr-b{grid-column:1/-1;order:3}}
.mr-n{font-size:13.5px;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-b{position:relative;height:12px;background:var(--wash);border-radius:var(--r-pill);
  overflow:hidden}
.mr-b::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:var(--line-2)}
.mr-b i{position:absolute;top:0;bottom:0;display:block;border-radius:var(--r-pill);
  animation:grow .7s var(--ease) both;animation-delay:.12s}
.mr-b i.p{left:50%;background:var(--yellow)}
.mr-b i.n{right:50%;background:var(--ink)}
@keyframes grow{from{width:0!important}}
@media (prefers-reduced-motion:reduce){.mr-b i{animation:none}}
.mr-v{font-size:13.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.mr-row.up .mr-v{color:var(--ink)}
.mr-row.down .mr-v{color:var(--grey)}
.mr-s{font-size:12.5px;color:var(--mist);text-align:right;font-variant-numeric:tabular-nums}

.mr-f{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px;padding-top:16px;
  border-top:var(--hair);color:var(--grey);font-size:12.5px}
.mr-f b{color:var(--ink);font-weight:600}

.reveal{animation:revIn .5s var(--ease) both}
@keyframes revIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}

/* Where a source genuinely is not connected, say so once and offer the thing
   that is. No illustrative content standing in for data. */
.notlive{border:1px dashed var(--line-2);border-radius:var(--r-l);padding:22px 24px;
  background:var(--wash)}
.nl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.nl-h b{font-size:16px;letter-spacing:-.01em}
.nl-h .kbadge{background:transparent;border:1px solid var(--line-2);color:var(--grey)}
.notlive > p{margin:0;color:var(--grey);font-size:13px;line-height:1.6;max-width:78ch}
.nl-have{margin-top:18px;padding-top:16px;border-top:var(--hair)}
.nl-have b{display:block;font-size:13.5px;margin-bottom:4px}
.nl-have p{margin:0 0 12px;color:var(--grey);font-size:13px;line-height:1.6;max-width:74ch}

/* ======================================================================
   SOCIAL  ·  a plan, never a measurement
   No account is connected, so no follower, reach or engagement figure
   appears anywhere on this screen. The cadence is arithmetic and shows its
   working; the pillars are jobs, not categories.
   ====================================================================== */

.socnot{border:1px dashed var(--line-2);border-radius:var(--r-l);padding:20px 22px;
  background:var(--wash);margin-bottom:26px}
.sn-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.sn-h b{font-size:15.5px;letter-spacing:-.01em}
.sn-h .kbadge{background:transparent;border:1px solid var(--line-2);color:var(--grey)}
.socnot > p{margin:0;color:var(--grey);font-size:13px;line-height:1.6;max-width:80ch}
.sn-u{margin-top:16px;padding-top:14px;border-top:var(--hair)}
.sn-u b{display:block;font-size:13px;margin-bottom:7px}
.sn-u ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}
.sn-u li{position:relative;padding-left:16px;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.sn-u li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--mist)}
.sn-u .hint{margin:0}

.sochero{padding:30px 32px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--white);box-shadow:var(--sh-card);margin-bottom:34px}
.sochero h2{font-family:var(--serif);font-size:42px;line-height:1.02;letter-spacing:-.025em;
  margin:6px 0 12px}
.soc-w{margin:0 0 24px;color:var(--ink-2);font-size:13.5px;line-height:1.65;max-width:78ch}

.socbars{display:grid;gap:2px}
.socbar{display:grid;grid-template-columns:150px minmax(60px,1fr) 34px;gap:14px;
  align-items:center;padding:11px 0;border-bottom:var(--hair);
  animation:kpiIn .44s var(--ease) both;animation-delay:calc(var(--d)*60ms)}
.socbar:last-child{border-bottom:0}
@media (prefers-reduced-motion:reduce){.socbar{animation:none}}
.sb-n{font-size:13.5px;letter-spacing:-.005em}
.sb-t{height:10px;background:var(--wash);border-radius:var(--r-pill);overflow:hidden}
.sb-t i{display:block;height:100%;background:var(--yellow);border-radius:var(--r-pill);
  animation:grow .7s var(--ease) both;animation-delay:.15s}
.sb-c{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sb-j{grid-column:1/-1;color:var(--grey);font-size:12px;line-height:1.5;margin-top:-4px}
@media (max-width:640px){.socbar{grid-template-columns:1fr 34px}
  .socbar .sb-t{grid-column:1/-1;order:3}}

.socweeks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.socweeks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.socweeks{grid-template-columns:1fr}}
.socweek{display:grid;gap:8px}
.sw-h{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
  font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line)}

.socslot{border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;
  background:var(--white);transition:border-color var(--d-hover) var(--ease)}
.socslot:hover{border-color:var(--mist)}
.socslot.has{border-color:var(--line-2)}
.ss-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.ss-f{font-size:11px;color:var(--ink-2);font-weight:600}
.ss-d{font-size:11px;color:var(--mist);margin-left:auto}
.ss-s{display:inline-block;font-size:11px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--wash);color:var(--grey);margin-bottom:7px}
.ss-hk{margin:0 0 7px;font-size:13.5px;line-height:1.45;letter-spacing:-.005em;font-weight:500}
.ss-b{margin:0 0 7px;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.ss-y{margin:0;color:var(--mist);font-size:11.5px;line-height:1.5;font-style:italic}

.socact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--line)}
.socact .hint{margin:0}

/* Editing generated copy by hand, and the record of what was approved. */
.edin{width:100%;padding:12px 14px;font:inherit;font-size:14px;line-height:1.6;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--white);color:var(--ink)}
.edin:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
.edin.tall{min-height:190px;resize:vertical}
.appr{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--ink);margin-right:auto}
.appr i{width:8px;height:8px;border-radius:50%;background:var(--yellow)}

.drlist{display:grid;gap:8px}
.drrow{display:grid;grid-template-columns:1fr 250px;gap:20px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
@media (max-width:860px){.drrow{grid-template-columns:1fr}}
.drrow.review{border-left:3px solid var(--y-55)}
.drrow.block{border-left:3px solid var(--ink)}
.dr-k{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);margin-bottom:4px}
.dr-l b{display:block;font-size:14.5px;letter-spacing:-.005em;margin-bottom:4px}
.dr-l p{margin:0;color:var(--grey);font-size:12.5px;line-height:1.55}
.dr-r{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dr-i{color:var(--ink-2);font-size:11.5px;line-height:1.45}
.dr-m{color:var(--mist);font-size:11.5px;line-height:1.45}

/* ======================================================================
   FULL REPORTS  ·  summary on the screen, everything on click
   The two complaints — "it feels flat" and "it is not detailed enough" —
   had one cause: every card tried to be a summary and the whole analysis
   at once, so it succeeded at neither.
   ====================================================================== */

.seochk[data-chk]{cursor:pointer;transition:border-color var(--d-hover) var(--ease),
  transform var(--d-hover) var(--ease)}
.seochk[data-chk]:hover{border-color:var(--ink);transform:translateX(2px)}
.seochk[data-chk]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.seochk[data-chk]::after{content:"\203A";position:absolute;right:16px;top:16px;
  color:var(--mist);font-size:18px;line-height:1}
.seochk{position:relative}

.afflist{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.afflist li{padding:8px 11px;border-radius:var(--r-s);background:var(--wash);
  color:var(--ink-2);font-size:12.5px;line-height:1.5;word-break:break-all;
  font-variant-numeric:tabular-nums}
.evpre,.codeblock{margin:0;padding:14px 16px;border-radius:var(--r-s);background:var(--ink);
  color:var(--white);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.6;overflow-x:auto;white-space:pre}
.evpre{background:var(--wash);color:var(--ink-2)}

.lnklist{display:grid;gap:7px}
.lnkrow{padding:12px 14px;border-radius:var(--r-s);background:var(--wash);
  border-left:3px solid var(--yellow)}
.lnkrow b{display:inline-block;font-size:13px;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--yellow);color:var(--ink);margin-bottom:7px}
.lnkrow .lf,.lnkrow .lt{display:block;font-size:11.5px;color:var(--ink-2);word-break:break-all}
.lnkrow .lt{color:var(--ink);font-weight:600}
.lnkrow .lw{display:block;margin-top:6px;color:var(--grey);font-size:11.5px;line-height:1.5}

.metalist{display:grid;gap:10px}
.metarow{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--white)}
.metarow .mu{display:block;font-size:11.5px;color:var(--mist);word-break:break-all;
  margin-bottom:9px}
.metarow .mv{margin-bottom:9px}
.metarow .mk{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);margin-bottom:3px}
.metarow .mk em{font-style:normal;color:var(--mist)}
.metarow s{display:block;color:var(--mist);font-size:12px;line-height:1.45;margin-bottom:3px}
.metarow i{display:block;color:var(--mist);font-size:12px;font-style:italic;margin-bottom:3px}
.metarow b{display:block;font-size:13.5px;line-height:1.45;font-weight:500}
.metarow .mw{display:block;margin-top:8px;padding-top:8px;border-top:var(--hair);
  color:var(--grey);font-size:11.5px;line-height:1.5}

.pageout{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  background:var(--white)}
.pageout h3{font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-.015em;
  margin:0 0 12px}
.po-m{margin:0 0 18px;padding:12px 14px;border-radius:var(--r-s);background:var(--wash);
  color:var(--ink-2);font-size:12.5px;line-height:1.7}
.po-s{padding:11px 0;border-top:var(--hair)}
.po-s b{display:block;font-size:14px;margin-bottom:4px}
.po-s p{margin:0;color:var(--grey);font-size:12.5px;line-height:1.6}
.po-s.warn{background:var(--y-15);border-radius:var(--r-s);padding:12px 14px;border-top:0;
  margin-top:10px}
.po-q{padding:10px 0;border-top:var(--hair)}
.po-q b{display:block;font-size:13px;margin-bottom:3px}
.po-q p{margin:0;color:var(--grey);font-size:12.5px;line-height:1.6}

/* ======================================================================
   CROSS-FINDINGS  ·  what only the join shows
   Each card names the sources it put together, because that is the whole
   claim: neither source says this on its own.
   ====================================================================== */

.xlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.xcard{position:relative;padding:20px 22px 44px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--white);cursor:pointer;
  box-shadow:var(--sh-card);
  animation:qIn .5s var(--ease) both;animation-delay:calc(var(--d)*70ms);
  transition:border-color var(--d-hover) var(--ease),transform var(--d-hover) var(--ease)}
@media (prefers-reduced-motion:reduce){.xcard{animation:none}}
.xcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.xcard:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.xcard.high{border-left:3px solid var(--ink)}
.xcard.opportunity{border-left:3px solid var(--yellow)}

.xc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.xs{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--wash);color:var(--grey)}
.xcard.high .xs{background:var(--ink);color:var(--white)}
.xcard.opportunity .xs{background:var(--yellow);color:var(--ink)}
.xsrc{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:auto}
.xsrc i{font-style:normal;font-size:10.5px;color:var(--grey);padding:3px 8px;
  border-radius:var(--r-pill);border:1px solid var(--line)}
.xsrc b{color:var(--mist);font-size:11px;font-weight:400}

.xcard h3{font-family:var(--serif);font-size:20px;line-height:1.14;letter-spacing:-.015em;
  margin:0 0 8px;text-wrap:balance}
.xcard p{margin:0;color:var(--grey);font-size:13px;line-height:1.6}
.xmore{position:absolute;left:22px;bottom:18px;font-size:12px;font-weight:600;color:var(--ink)}

.srclist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden}
.srcrow{display:grid;grid-template-columns:150px 1fr;gap:12px;background:var(--white);
  padding:11px 14px}
@media (max-width:620px){.srcrow{grid-template-columns:1fr;gap:3px}}
.sr-f{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);
  font-weight:600}
.sr-s{font-size:13px;line-height:1.5;color:var(--ink)}

/* ======================================================================
   ATTENTION  ·  one severity language, used everywhere
   The brandbook is seven values and forbids inventing an eighth, so urgency
   is carried by WEIGHT rather than by hue: solid ink is the loudest thing
   on a light page, solid yellow is next, a yellow rail is a quieter note.
   That ordering holds for anyone who cannot distinguish red from green,
   which a red/amber system does not.
   ====================================================================== */

.flag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);
  white-space:nowrap}
.flag i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}

.flag.urgent{background:var(--ink);color:var(--white)}
.flag.urgent i{background:var(--yellow);animation:pulse 2s var(--ease) infinite}
.flag.attention{background:var(--yellow);color:var(--ink)}
.flag.attention i{background:var(--ink)}
.flag.opportunity{background:var(--y-30);color:var(--ink)}
.flag.opportunity i{background:var(--ink)}
.flag.quiet{background:var(--wash);color:var(--grey);border:1px solid var(--line)}
.flag.quiet i{background:var(--mist)}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){.flag.urgent i{animation:none}}

/* The rail is the at-a-glance layer: you read the left edge of the column
   before you read a single word. */
.rail-urgent{border-left:4px solid var(--ink)!important}
.rail-attention{border-left:4px solid var(--yellow)!important}
.rail-opportunity{border-left:4px solid var(--y-55)!important}
.rail-quiet{border-left:4px solid var(--line)!important}

/* One card per screen may carry the loudest state. More than one and the
   loudness stops meaning anything. */
.is-urgent{background:var(--ink);color:var(--white);border-color:var(--ink)!important}
.is-urgent h2,.is-urgent h3,.is-urgent b{color:var(--white)}
.is-urgent p,.is-urgent span{color:var(--mist)}
.is-urgent .hl{background:none;color:var(--yellow)}

/* ======================================================================
   ENTRANCE  ·  sections arrive in reading order
   Motion here is doing a job: it walks the eye down the page once, on
   arrival, instead of presenting nine blocks simultaneously. It runs on
   load rather than on scroll, because a pane that suppresses
   IntersectionObserver would otherwise leave half the screen invisible.
   ====================================================================== */

.view.on > .sec-h,
.view.on > #crossBox,
.view.on > #standBox,
.view.on > #issuesBox,
.view.on > #proposalBox,
.view.on > #quarterBox,
.view.on > #monthBox,
.view.on > .launch,
.view.on > #auditStrip{animation:secIn .52s var(--ease) both}
.view.on > *:nth-child(1){animation-delay:.02s}
.view.on > *:nth-child(2){animation-delay:.06s}
.view.on > *:nth-child(3){animation-delay:.10s}
.view.on > *:nth-child(4){animation-delay:.14s}
.view.on > *:nth-child(5){animation-delay:.18s}
.view.on > *:nth-child(6){animation-delay:.22s}
.view.on > *:nth-child(7){animation-delay:.26s}
.view.on > *:nth-child(8){animation-delay:.30s}
.view.on > *:nth-child(n+9){animation-delay:.34s}
@keyframes secIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .view.on > *{animation:none!important}
}

/* ======================================================================
   SCREEN HEADER  ·  what this dashboard answers, and its state right now
   "Meta Ads." is a label. "3 campaigns, $5,148 spent, 1 making money" is
   information, and it is what makes eight screens distinguishable.
   ====================================================================== */

.vstate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 26px}
/* Nothing to say about the source is not a reason to leave 26px of air
   between the heading and the tabs under it. */
.vstate:empty{display:none}
.vstate .vq{color:var(--grey);font-size:13px;line-height:1.5}
.vstate .vfacts{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-left:auto}
.vstate .vfacts span{font-size:12.5px;color:var(--ink-2);padding:0 13px;
  border-left:1px solid var(--line);line-height:1.2}
.vstate .vfacts span:first-child{border-left:0;padding-left:0}
.vstate .vfacts b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:760px){.vstate .vfacts{margin-left:0;width:100%}}

/* ======================================================================
   THE SLOT PACKAGE  ·  everything needed to make one post
   No image model is connected, so SHMEL renders the text-led frame from the
   copy rather than inventing a photograph. That is a deliverable, not a
   placeholder: it is the post, at the size Instagram wants.
   ====================================================================== */

.socslot[data-slot]{cursor:pointer;position:relative}
.socslot[data-slot]:hover{border-color:var(--ink)}
.socslot[data-slot]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.socslot .stt{font-size:9.5px;padding:2px 7px}

.framewrap{margin-bottom:20px}
.frame{display:block;width:100%;max-width:260px;height:auto;margin:0 auto 12px;
  border-radius:var(--r);box-shadow:var(--sh-m);background:var(--ink)}
.framewrap .hint{text-align:center;margin:0}

.scrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;
  border-radius:var(--r-s);background:var(--wash)}
.scrow.review{background:var(--y-15)}
.scrow.blocked{background:var(--ink)}
.scrow.blocked span:not(.stt){color:var(--mist)}
.scrow span:not(.stt){font-size:12.5px;color:var(--ink-2);line-height:1.5}

.beats{margin:0;padding-left:20px;display:grid;gap:7px}
.beats li{color:var(--ink);font-size:14px;line-height:1.45;padding-left:4px}
.beats li::marker{color:var(--mist);font-size:12px}

.capbox{margin:0;padding:15px 17px;border-radius:var(--r-s);background:var(--wash);
  border:1px solid var(--line);font:inherit;font-size:13.5px;line-height:1.65;
  color:var(--ink);white-space:pre-wrap;word-break:break-word}

/* ======================================================================
   THE GATE  ·  a door, not a stack trace
   Somebody following a shared link without a key is the normal case, not an
   error state. They used to meet "NOT_CONNECTED — no ad account is
   connected", which is frightening and also untrue.
   ====================================================================== */

.gate{max-width:560px;margin:0 auto;padding:40px 0;text-align:center}
.gate .gbee{display:block;width:56px;height:56px;margin:0 auto 22px}
.gate .gbee img{width:100%;height:100%;object-fit:contain}
.gate .eyebrow{justify-content:center;margin-bottom:14px}
.gate h1{font-family:var(--serif);font-size:46px;line-height:1.02;letter-spacing:-.025em;
  margin:0 0 14px}
.gate .lede{margin:0 auto 26px;max-width:46ch}
.gate .hint{margin:14px auto 0;max-width:44ch}
.gate .gfoot{margin-top:28px;padding-top:20px;border-top:var(--hair);
  color:var(--mist);font-size:12.5px}
.gate .gfoot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.gatein{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gatein input{flex:1 1 240px;max-width:300px;padding:14px 18px;font:inherit;font-size:15px;
  text-align:center;letter-spacing:.02em;
  border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--white);color:var(--ink)}
.gatein input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}

/* ======================================================================
   ONBOARDING  ·  even cards
   The "what SHMEL knows" cards and the two welcome choices were sized by
   their own copy, so one extra line of explanation made a card taller than
   its neighbour. They are a set; they should read as one.
   ====================================================================== */

/* Even height without centring. An earlier version added
   justify-content:center with a fixed min-height, which looked right while
   every card said "not yet" and collapsed the moment one of them held a
   sentence and three chips — the content spilled out of its own border and
   over the card below. Height is a floor here, never a ceiling. */
.ob-live .lv-card{min-height:96px;text-align:center}
.ob-live .lv-card .k{margin-bottom:6px}
.ob-live .lv-card .s{margin-top:4px}
.ob-live .lv-chips{justify-content:center}

/* Only the two welcome choices, and only their height. An earlier version
   made every .pick2 a flex column, which broke the goal cards: their order
   badge and "Leads" pill are absolutely positioned, and an absolutely
   positioned child of a flex container gets stretched by align-self, so the
   badge landed on top of the title and the pill grew into a 109px block. */
.picks.welcome .pick2{min-height:148px}

/* ======================================================================
   INTEGRATIONS + SHARING  ·  onboarding steps 7 and 8
   ====================================================================== */

.intpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:8px 0 18px}
.ipk{text-align:left;padding:16px 18px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--white);cursor:pointer;font:inherit;color:inherit;
  animation:kpiIn .4s var(--ease) both;animation-delay:calc(var(--d)*50ms);
  transition:border-color var(--d-hover) var(--ease)}
@media (prefers-reduced-motion:reduce){.ipk{animation:none}}
.ipk:hover{border-color:var(--mist)}
.ipk.on{border-color:var(--ink);background:var(--y-15)}
.ipk.soon{opacity:.72}
.ipk-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ipk-h b{font-size:15px}
.ipk-s,.ipk-f{font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:3px 8px;border-radius:var(--r-pill)}
.ipk-s{background:var(--wash);color:var(--mist);border:1px solid var(--line)}
.ipk-f{background:var(--y-30);color:var(--ink)}
.ipk-w{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.55;margin-bottom:6px}
.ipk-n{display:block;color:var(--mist);font-size:11.5px;line-height:1.45}

.scgroup{margin-bottom:24px}
.scg-h{margin-bottom:10px}
.scg-h b{display:block;font-size:14px;letter-spacing:-.005em}
.scg-h span{display:block;color:var(--grey);font-size:12.5px;line-height:1.5}

.scrow2{display:grid;grid-template-columns:44px 1fr;gap:12px;width:100%;text-align:left;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);
  cursor:pointer;font:inherit;color:inherit;margin-bottom:6px;
  transition:border-color var(--d-hover) var(--ease)}
.scrow2:hover{border-color:var(--mist)}
.scrow2.locked{cursor:default;background:var(--wash)}
.scrow2 .sw{width:38px;height:22px;border-radius:var(--r-pill);background:var(--line-2);
  position:relative;align-self:center;transition:background var(--d-state) var(--ease)}
.scrow2 .sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--white);transition:transform var(--d-state) var(--ease)}
.scrow2.on .sw{background:var(--ink)}
.scrow2.on .sw i{transform:translateX(16px)}
.scrow2.locked.on .sw{background:var(--yellow)}
.scrow2.locked.on .sw i{background:var(--ink)}
.scrow2 .sc-b b{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13.5px;margin-bottom:2px}
.scrow2 .sc-b code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  color:var(--mist);font-weight:400;background:var(--wash);padding:1px 6px;border-radius:4px}
.scrow2 .sc-b > span{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.5}
.scrow2 .sc-b em{display:block;color:var(--grey);font-size:11.5px;font-style:normal;margin-top:3px}
.scrow2 .sc-l{display:block;margin-top:5px;color:var(--ink);font-size:11.5px;
  background:var(--y-15);padding:6px 9px;border-radius:4px;line-height:1.45}

.scoff{margin-top:20px;padding:16px 18px;border-radius:var(--r);background:var(--ink);color:var(--white)}
.scoff b{color:var(--white);font-size:13.5px}
.scoff ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.scoff li{color:var(--mist);font-size:12.5px;line-height:1.55}
.scoff li b{color:var(--yellow);font-weight:600}

/* ======================================================================
   TAP TO FILL  ·  onboarding
   Five empty textareas asking a clinic owner to describe their own voice
   is where onboarding gets abandoned. Every suggestion is real, usable
   text — and worded the way copy that survives a compliance screen is
   worded, so the first thing they learn is what safe sounds like.
   ====================================================================== */

.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.sg-l{flex-basis:100%;font-size:11px;letter-spacing:.04em;color:var(--grey);margin-bottom:2px}
.sgx{font:inherit;font-size:12px;line-height:1.35;text-align:left;
  padding:7px 12px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line-2);background:var(--white);color:var(--ink-2);
  transition:border-color var(--d-hover) var(--ease),background var(--d-hover) var(--ease)}
.sgx:hover{border-color:var(--ink);background:var(--y-15);color:var(--ink)}
.sgx:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ======================================================================
   GOAL CARDS  ·  repairing a cascade collision
   Two rules further up the file win on source order at equal specificity
   and break these cards:
     .pick2 span{position:relative}  beats  .num2{position:absolute}
     .pick2 .rec{top:18px}          beats  .goalpick .rec{top:auto}
   The second is the worse one: with both top and bottom set, an absolutely
   positioned element stretches, so the "Leads" pill grew into a 98px block.
   Fixed here with enough specificity to settle it, rather than by editing
   the earlier rules and risking every other .pick2 on the product.
   ====================================================================== */

.picks.goals .goalpick .num2{position:absolute;top:22px;left:20px;
  width:24px;height:24px;margin-top:0;line-height:1;font-size:12px}
.picks.goals .goalpick .rec{position:absolute;top:auto;bottom:18px;right:18px;
  height:auto;margin-top:0;width:auto}
.picks.goals .goalpick b{display:block;margin:0}
.picks.goals .goalpick[aria-pressed="true"]{padding-left:56px}
.picks.goals .goalpick{padding-bottom:46px}

/* Integration marks. Inline SVG in currentColor — nothing to load, nothing
   to fail, and no request to a third party on every page view. */
.ipk-i,.i-i{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 auto;color:var(--ink-2)}
.ipk-i svg,.i-i svg{width:20px;height:20px}
.ipk.on .ipk-i{color:var(--ink)}
.ipk.soon .ipk-i{color:var(--mist)}
.i-i{width:22px;height:22px;margin-right:9px;vertical-align:-5px}
.i-i svg{width:17px;height:17px}
.introw.off .i-i{color:var(--mist)}

/* The step rail is navigation: anything already reached can be returned to. */
.ob-steps li.can button{display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-align:left;border-radius:var(--r-s)}
.ob-steps li.can button:hover .n{background:var(--yellow);color:var(--ink)}
.ob-steps li.can button:hover span:last-child{color:#fff}
.ob-steps li.can button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* Connect control on an integration card. The card is the button; this is
   the state it reports back. */
.ipk{position:relative;padding-bottom:46px}
.ipk-c{position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.01em;
  padding:6px 13px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--white);color:var(--ink)}
.ipk.on .ipk-c{background:var(--ink);color:var(--white);border-color:var(--ink)}
.ipk.on .ipk-c i{width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.ipk:hover .ipk-c{border-color:var(--ink)}

/* Designed, not shipped. Said once, on the card. */
.opmode.soon{opacity:.55;cursor:not-allowed}
.opmode.soon:hover{border-color:var(--line);transform:none;box-shadow:none}
.opmode.soon .om-h .rec.alt{background:var(--ink);color:var(--white)}

/* What SHMEL never touches. Concrete and checkable, rather than a badge. */
.phinote{margin:18px 0 26px;padding:18px 20px;border-radius:var(--r-l);
  background:var(--ink);color:var(--white)}
.ph-k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--yellow);margin-bottom:12px}
.ph-l{display:flex;flex-wrap:wrap;gap:7px}
.ph-l i{font-style:normal;font-size:12.5px;padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#EDEDED;
  position:relative;padding-left:26px}
.ph-l i::before{content:"\00d7";position:absolute;left:12px;color:var(--yellow);font-weight:700}
.ph-f{display:block;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);
  color:var(--mist);font-size:12px;line-height:1.6}

/* An error that carries its own fix. */
.oberr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;
  padding:14px 18px;border-radius:var(--r);background:var(--ink);color:var(--white)}
.oe-k{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--yellow);white-space:nowrap}
.oe-k i{width:7px;height:7px;border-radius:50%;background:var(--yellow);
  animation:pulse 2s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){.oe-k i{animation:none}}
.oe-m{flex:1 1 220px;font-size:13px;line-height:1.5;color:#EDEDED}
.oberr .btn{margin-left:auto}

/* Order badges: yellow on every pick, not only the leading one. The number
   alone carries the order — a second "Leads" pill said the same thing twice
   and was the tallest element on the card. */
.picks.goals .goalpick .num2{background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;
  line-height:1;padding:0;text-align:center}
.picks.goals .goalpick.lead .num2{background:var(--yellow);color:var(--ink)}
.picks.goals .goalpick{padding-bottom:20px}

/* Money fields: the currency mark inside the box, not in the label. */
.moneyin{position:relative;display:block}
.moneyin > i{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-style:normal;color:var(--mist);font-size:15px;pointer-events:none;line-height:1}
.moneyin input{padding-left:30px!important;font-variant-numeric:tabular-nums}
.moneyin:focus-within > i{color:var(--ink)}
.sf2 .moneyin input{padding-left:28px!important}
[data-money]{font-variant-numeric:tabular-nums}

/* Real brand assets sit at their own size; drawn marks inherit the text
   colour. Where Google's mark would repeat across three cards, the product
   is drawn beside it so the cards stay tellable apart. */
.ipk-i img,.i-i img{display:block;width:100%;height:100%;object-fit:contain}
.mk2{position:relative;display:inline-flex;width:100%;height:100%}
.mk2 img{width:74%;height:74%}
.mk2 i{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--white);box-shadow:0 0 0 1.5px var(--white);color:var(--ink)}
.mk2 i svg{width:11px;height:11px;stroke-width:2.2}
.ipk.on .mk2 i{background:var(--y-15);box-shadow:0 0 0 1.5px var(--y-15)}
.i-i .mk2 i{width:11px;height:11px}
.i-i .mk2 i svg{width:9px;height:9px}

/* ======================================================================
   WHAT SHMEL KNOWS  ·  one placeholder, one treatment
   The empty state is the same sentence on every card, so it has to look the
   same on every card. It is styled in its own right rather than inheriting
   whatever the filled state of that particular card happens to be.
   ====================================================================== */

.ob-live .lv-card .v .dash,
.ob-live .lv-card .v.serif .dash{
  font-family:var(--disp);font-size:15px;font-weight:400;font-style:italic;
  line-height:1.45;letter-spacing:0;color:rgba(237,237,237,.55)}

/* Long values wrap inside the card instead of running to its edge. */
.ob-live .lv-card{overflow:hidden}
.ob-live .lv-card .v,
.ob-live .lv-card .s{overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.ob-live .lv-card .s{padding:0 2px}

/* ======================================================================
   INTEGRATIONS  ·  its own page
   Connecting is ongoing work: accounts get added, revoked, re-authorised.
   Grouped by state because the first question here is always "what is
   missing", and the honest answer today is most of it.
   ====================================================================== */

.icards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;
  margin-bottom:10px}
#view-integrations .vhead{margin-bottom:14px}
.icard{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--white);box-shadow:var(--sh-card)}
/* Connected is said on the card in words. An ink outline on top of that
   made one card in a grid read as selected rather than as connected. */
.icard.on{border-color:var(--line)}
.ic-h{display:flex;align-items:flex-start;gap:13px;margin-bottom:12px}
.ic-m{width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;color:var(--ink-2)}
.ic-m img{width:100%;height:100%;object-fit:contain}
/* A drawn mark fills the same box a real logo does, so the two kinds sit at
   one size in a grid of cards. The composed marks (a logo with a small glyph
   on it) keep their own sizing below. */
.ic-m > svg{width:100%;height:100%}
/* The state belongs to the name above it, so it sits under it rather than a
   line away from it. */
.ic-h b{display:block;font-size:15.5px;letter-spacing:-.01em;margin-bottom:0;line-height:1.25}
.ic-s{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--grey)}
.ic-o{color:var(--mist)}
.ic-w{color:var(--ink);background:var(--y-15);padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px}
.ic-why{margin:0 0 10px;color:var(--ink-2);font-size:13px;line-height:1.6}
.ic-needs{margin:0;color:var(--grey);font-size:12px;line-height:1.55}
.ic-needs i{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mist);margin-right:6px}
/* Three of these can stack now, so they need room between them rather than
   running together as one grey paragraph. */
.ic-needs + .ic-needs{margin-top:7px}
/* What SHMEL deliberately does not ask for is the line an owner is
   actually looking for, so it is not the same grey as the rest. */
.ic-never{color:var(--ink-2)}
.ic-never i{color:var(--slate)}
.ic-act{margin-top:16px;padding-top:14px;border-top:var(--hair)}
.ic-done{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
.ic-done i{width:8px;height:8px;border-radius:50%;background:var(--yellow)}

/* The secondary nav items are declared after the selected state at equal
   specificity, so their light grey won on source order and the current item
   rendered near-white on yellow. Selected wins here, for every item. */
.rail nav button.sec[aria-current="true"],
.rail nav button[aria-current="true"]{background:var(--y);color:var(--ink)}
.rail nav button.sec[aria-current="true"] .ic{color:var(--ink)}

/* ======================================================================
   THE OTHER CHANNELS
   ====================================================================== */

.reftbl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:6px}
.refrow{display:grid;grid-template-columns:minmax(120px,1.6fr) 80px 70px 90px 100px;gap:12px;
  background:var(--white);padding:12px 16px;align-items:baseline}
@media (max-width:820px){.refrow{grid-template-columns:1fr 1fr 1fr}}
.refrow span{font-size:13px;font-variant-numeric:tabular-nums}
.rf-n{font-weight:600;letter-spacing:-.005em}
.rf-p,.rf-m{color:var(--grey);text-align:right}
.rf-g{color:var(--ink-2);text-align:right}
/* The ceiling figure is the one number in the table that is a limit rather
   than a fact: everything left of it describes the treatment, this says how
   far the clinic can go before the referral stops paying for itself. Red is
   the same value the Pause control uses, and it appears nowhere else on a
   figure in the product. */
.rf-r{font-weight:700;text-align:right;color:#C0453C}
.rf-w{grid-column:1/-1;color:var(--grey);font-size:12px;line-height:1.55;
  padding-top:6px;border-top:var(--hair);margin-top:4px}
.refhead{display:grid;grid-template-columns:minmax(120px,1.6fr) 80px 70px 90px 100px;gap:12px;
  padding:0 16px 8px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.refhead span:not(:first-child){text-align:right}
@media (max-width:820px){.refhead{display:none}}

.emailcard{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  background:var(--white);margin-bottom:6px}
.em-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.em-h b{font-size:15px;letter-spacing:-.01em;flex:1 1 auto}
.em-p{display:block;color:var(--mist);font-size:12px;margin-bottom:10px}
.em-c{display:block;margin-top:9px;color:var(--ink);background:var(--y-15);
  padding:7px 11px;border-radius:var(--r-s);font-size:11.5px;line-height:1.5}
.em-j{display:block;margin-top:9px;color:var(--grey);font-size:11.5px;font-style:italic}

/* ====================================================== CREATE, IN CHANNEL
   Create stopped being a destination of its own. Each channel now opens the
   maker that belongs to it, so the bar sits at the top of the channel and
   says what this particular channel can actually produce. `.off` is the
   honest state: the bar is there, and so is the reason it cannot run yet. */
/* ---------------------------------------------------------------- referral
   Four figures, a chart, the offer as the client receives it, and the
   record. The order is not decorative: what it produced, how it moved, what
   it says, who it was. */
.reftiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;margin:30px 0 16px}
.rt{display:flex;gap:14px;padding:18px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-l)}
/* One yellow disc for all four: a colour per figure made the row read as
   four unrelated widgets, and the brand's attention colour is not something
   to spend four ways on one line. */
.rt-i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;
  place-items:center;background:var(--y-30);color:var(--ink)}
.rt-i svg{width:21px;height:21px}
.rt-b{min-width:0}
.rt-b b{display:block;font-size:24px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.rt-k{display:block;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.rt-f{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:9px}
.rt-d{font-size:12.5px;font-weight:700}
.rt-d.up{color:var(--promo-good)}
.rt-d.down{color:var(--promo-bad)}
.rt-d.flat{font-weight:500;color:var(--muted)}
.rt-f i{font-style:normal;font-size:11.5px;color:var(--muted)}

.refgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:16px;margin:0 0 16px;align-items:start}
.refcol{display:flex;flex-direction:column;gap:16px}
@media (max-width:900px){ .refgrid{grid-template-columns:minmax(0,1fr)} }

.refcard{padding:18px 20px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-s)}
.rc-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.rc-h b{display:block;font-size:15px;font-weight:700;line-height:1.25}
/* A one-line title sits level with the icon beside it; the default
   top alignment is for headers that carry a subtitle under the name. */
.rc-h-mid{align-items:center}
.rc-h > div > span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.rc-chart{overflow-x:auto}
.rc-chart svg{width:100%;height:auto;display:block}
/* The chart's own furniture: a scale a reader can use, and a line heavy
   enough to be the subject rather than the border of the fill. */
.refsvg .rc-g{stroke:var(--line);stroke-width:1}
.refsvg .rc-a{fill:var(--y-30)}
.refsvg .rc-l{fill:none;stroke:var(--yellow);stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round}
.refsvg .rc-p{fill:var(--yellow)}
.refsvg .rc-y,.refsvg .rc-x{fill:var(--muted);font-size:12px;font-family:inherit}
.refsvg .rc-y{text-anchor:end}
.refsvg .rc-x{text-anchor:middle}
.rc-src{margin-left:auto}
/* The hover furniture on a chart that is 230px tall rather than 46: the
   tooltip goes inside the plot instead of above the card, where the card's
   own heading already is, and the marker takes the line's colour so it
   reads as a point on it rather than as a second series. */
.refw{cursor:crosshair}
.refw .mch-tip{bottom:auto;top:6px}
.refw .mch-pt{width:9px;height:9px;background:var(--ink);border-color:var(--paper)}
.refw .mch-rule{background:var(--line-2)}

/* The offer card is the one yellow surface on the screen, because it is the
   only thing on it the clinic can change. */
.refoffer{position:relative;overflow:hidden;padding:20px 22px 22px;
  background:var(--y-15);border:1px solid var(--y-30);border-radius:var(--r-xl)}
.ro-t b{display:block;font-size:15px;font-weight:700}
.ro-t span{display:block;margin:4px 0 14px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ro-m{padding:14px 16px;background:var(--paper);border-radius:var(--r-l);margin-bottom:14px}
.ro-mk{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ro-m p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.ro-ed{margin-top:12px}
.ro-ed textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-s);font:inherit;font-size:13.5px;line-height:1.55;resize:vertical}
.ro-ed .hint{margin:8px 0 10px;font-size:11.5px;line-height:1.45;color:var(--muted)}
/* The amounts sit beside the message because they are the same decision. */
.ro-amt{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ro-amt label{flex:1 1 140px;display:flex;align-items:center;gap:6px;font-size:12px;
  color:var(--muted)}
.ro-amt label span{font-weight:700;color:var(--ink)}
.ro-amt input{width:78px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:13.5px}
/* The handset: a drawn frame, not a screenshot, so it cannot go stale when
   the offer changes. It hides below the width where it would crop. */
.ro-ph{position:absolute;right:-26px;bottom:-30px;width:150px;height:230px;
  padding:10px;border-radius:26px;background:var(--ink);box-shadow:0 18px 40px rgba(23,28,43,.28)}
.ph-scr{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;height:100%;border-radius:18px;text-align:center;padding:14px 12px;
  background:linear-gradient(170deg,#FFFFFF 0%,#F4E7B8 100%)}
.ph-n{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ph-scr b{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.1;color:var(--ink)}
.ph-b{margin-top:4px;padding:6px 12px;border-radius:var(--r-pill);background:var(--ink);
  color:#fff;font-size:9.5px;font-weight:700}
@media (max-width:1150px){ .ro-ph{display:none} }

.reftable{overflow-x:auto}
.rtb-h,.rtb-r{display:grid;grid-template-columns:1.1fr 1fr .9fr 1fr 1.1fr;gap:12px;
  align-items:center;padding:11px 4px}
.rtb-h{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.rtb-r{font-size:13px;border-bottom:1px solid var(--line)}
.rtb-r:last-child{border-bottom:0}
.rtb-s{display:inline-flex;align-items:center;gap:7px}
.rtb-s i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.rtb-s.ok i{background:var(--promo-good)}
.rtb-s.wait i{background:var(--yellow)}
.rtb-s.off i{background:var(--mist)}

.refsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.refsteps li{display:flex;gap:12px}
.refsteps li > span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--y-30);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink)}
.refsteps b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.refsteps p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* Price and margin are fields, so they sit in the row like figures rather
   than like a form: no visible box until the pointer or the keyboard is on
   them, and the same tabular figures as the columns they line up with. */
.rf-p,.rf-m{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.rf-p i,.rf-m i{font-style:normal;color:var(--muted)}
.rf-in{width:64px;padding:4px 6px;border:1px solid transparent;border-radius:var(--r-s);
  background:transparent;font:inherit;font-size:inherit;color:var(--ink-2);text-align:right;
  font-variant-numeric:tabular-nums}
.rf-in:hover{border-color:var(--line)}
.rf-in:focus{border-color:var(--ink);background:var(--paper);color:var(--ink);outline:none}
.rf-in::-webkit-outer-spin-button,.rf-in::-webkit-inner-spin-button{opacity:.35}
.refsave{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding:12px 16px;background:var(--y-15);border-radius:var(--r-l)}
.refsave span{flex:1 1 260px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* The handset illustrates the offer; while the offer is being edited the
   fields under it matter more. */
.refoffer.editing .ro-ph{display:none}
/* Pausing a live programme is the one destructive control on the screen. */
.btn.danger{background:var(--paper);border:1px solid rgba(226,100,92,.5);color:#C0453C}
.btn.danger:hover{border-color:#C0453C;background:rgba(226,100,92,.08)}

/* The two accounts, above the plan. Two columns while there is room for
   two, because the comparison between the channels is half the point, and
   one column the moment there is not — a stat tile at 120px wide tells
   nobody anything.
   Each account is ONE card, not three stacked ones: the header, the figures
   and the posts are three readings of a single account, and three separate
   surfaces made the screen look like six unrelated widgets. Inside, hairline
   rules do the separating that gaps used to. */
.socacc{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:16px;margin:0 0 26px}
.sa{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden}
/* The head wraps rather than squeezes: at one column the account and the
   link both fit on the line, at two the link drops under the name instead
   of eating it a character at a time. */
.sa-h{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.sa-m{flex:none;width:34px;height:34px;display:grid;place-items:center}
.sa-m svg{width:32px;height:32px;display:block}
.sa-n{flex:1 1 150px;min-width:0}
.sa-n b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.sa-n span{display:flex;align-items:center;gap:8px;margin-top:2px;
  font-size:12.5px;color:var(--muted);min-width:0}
.sa-n span em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The source, in the place a live account would say LIVE. It is not
   decoration: every figure in the panel under it came from there. */
.sa-src{flex:none;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--y-30);
  border-radius:var(--r-pill);padding:2px 7px}
/* Sentence case, not the shouting caps the small ghost button uses
   elsewhere: this one carries an account's own name. */
.sa-h .btn{flex:none;text-transform:none;letter-spacing:0;font-size:12.5px}

.sa-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--line)}
.sa-s{padding:16px 16px 14px;border-left:1px solid var(--line)}
.sa-s:first-child{border-left:0}
.sa-s b{display:block;font-size:21px;font-weight:700;line-height:1.1;letter-spacing:-.015em}
.sa-s span{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--muted)}
.sa-d{display:block;margin-top:8px;font-size:11.5px;font-weight:700}
.sa-d.up{color:var(--promo-good)}
.sa-d.down{color:var(--promo-bad)}

.sa-p{padding:16px 18px 18px}
.sa-ph{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.sa-ph b{font-size:14px;font-weight:700}
.sa-pn{margin-left:auto;font-size:11.5px;color:var(--muted)}
.sa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sa-c{margin:0}
/* The tile is drawn, not photographed. Three grounds, all built from the
   seven values, so a post reads as a post without the product shipping a
   stock face it would then have to defend. */
.sa-t{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  gap:6px;aspect-ratio:4/5;padding:12px;border-radius:var(--r-s);overflow:hidden}
.sa-t.ink{background:linear-gradient(165deg,#171C2B 0%,#4A4E5C 100%);color:#fff}
.sa-t.sand{background:linear-gradient(165deg,#F9E061 0%,#FFFFFF 100%);color:var(--ink)}
.sa-t.warm{background:linear-gradient(165deg,#EDEDED 0%,#A0A2A8 100%);color:var(--ink)}
.sa-t b{font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.14;
  letter-spacing:-.01em}
.sa-k{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);color:var(--ink)}
.sa-t.ink .sa-k{background:rgba(255,255,255,.9)}
.sa-pl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.sa-c figcaption{margin-top:8px}
.sa-dt{display:block;font-size:11.5px;color:var(--muted)}
/* Three counts under a 96px tile: the row is laid out to the space it has
   rather than to the space it would like. It wraps before it clips, because
   a truncated engagement figure is worse than a second line. */
.sa-e{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:5px;
  font-size:11px;line-height:1.4;color:var(--ink-2)}
.sa-e span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.sa-e i{font-style:normal;opacity:.5;font-size:10px}
@media (max-width:560px){
  .sa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa-c:last-child{display:none}
}

/* The goal and the composer share a line: the target, and the thing that
   acts on it. Either one alone takes the row. */
.socrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;align-items:stretch;margin:0 0 26px}
.socrow .goalbar,.socrow .mkbar{margin:0;height:100%}
/* In half the width the composer stops being a bar: the button goes under
   the sentence rather than squeezing it into four words a line.
   The text block carries flex:1 1 320px for the row layout, where 320px is
   a width. Turned upright that basis becomes a height and the card grew to
   410px of mostly nothing, so it is reset here rather than changed there. */
.socrow .mkbar{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  justify-content:center}
.socrow .mkbar .mkbar-t{flex:0 0 auto}
.socrow .mkbar .btn{align-self:flex-start}

/* ============================================ APPOINTMENT REMINDERS
   One number leads: the share of booked patients who did not arrive. The
   rest of the screen either explains it or is the machinery that moves it. */
.remtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:24px 0 18px}
.remt .cmpt-i.booked{background:var(--wash);color:var(--ink)}
.remt .cmpt-i.sent{background:var(--wash);color:var(--ink)}
.remt .cmpt-i.ok{background:rgba(88,192,141,.18);color:#2E7D58}
.remt .cmpt-i.wait{background:var(--y-30);color:var(--ink)}
.remt .cmpt-i.miss{background:rgba(226,100,92,.16);color:#C0453C}
/* Both classes in the selector: .cmpgrid sets its own columns further down
   the file and would otherwise win on source order. */
.cmpgrid.remgrid{grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr)}
@media (max-width:1000px){ .cmpgrid.remgrid{grid-template-columns:minmax(0,1fr)} }
/* --remw is read only where two columns exist, for the same reason the
   compliance table's width is. */
@media (min-width:1001px){
  .cmpgrid.remgrid{grid-template-columns:var(--remw,minmax(0,1.25fr)) minmax(280px,1fr)}
}
.remchart{position:relative}
/* Narrowing the card hides the chart sideways instead of squashing it: the
   bars keep the width they were drawn at and the card shows as much of them
   as it has room for. Below its natural width the strip scrolls; above it,
   it grows with the card as usual. */
.remchart .rc-chart{overflow-x:auto;overscroll-behavior-x:contain}
.remchart .remsvg{min-width:820px}
/* Both axes: sideways sets the card's width, down and up redraws the chart
   at a new height. */
.remcorner{cursor:nwse-resize}

.remrate{margin-left:auto;display:flex;align-items:baseline;gap:9px}
.remrate b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.remrate i{font-style:normal;font-size:13px;font-weight:700}
.remrate i.good{color:var(--promo-good)}
.remrate i.bad{color:var(--promo-bad)}
/* Bars, not a line: these are counts of people, and a count is a column.
   The column is the day's bookings in yellow; the red foot is the part of
   it that did not arrive, so the eye reads the share, not just the count. */
.remsvg .rem-all{fill:var(--yellow)}
.remsvg .rem-miss{fill:#C0453C}
.remleg{display:flex;gap:18px;margin:2px 0 0 40px;font-size:11.5px;color:var(--muted)}
.remleg span{display:inline-flex;align-items:center;gap:6px}
.remleg span::before{content:'';width:9px;height:9px;border-radius:2px}
.remleg-b::before{background:var(--yellow)}
.remleg-m::before{background:#C0453C}

/* The lead tile is the one figure the screen exists to move. */
/* Specificity, not order: the shared `.cmpt` block is further down the file
   and would otherwise paint the tile white again. */
.remtiles .remt-lead{box-shadow:none}
.remtiles .remt-lead .tnum{font-size:30px}
/* The same green as the "SHMEL recommends" pill: a wash, no border, and
   the type carries the colour. */
.remtiles .remt-lead.good{background:rgba(88,192,141,.16);border-color:transparent}
.remtiles .remt-lead.good .tnum,
.remtiles .remt-lead.good .cmpt-k{color:#2E7D58}
.remtiles .remt-lead.good .cmpd-n{color:rgba(46,125,88,.78)}
.remtiles .remt-lead.good .cmpt-i{background:rgba(88,192,141,.22);color:#2E7D58}
.remtiles .remt-lead.bad{background:rgba(226,100,92,.14);border-color:transparent}
.remtiles .remt-lead.bad .tnum,
.remtiles .remt-lead.bad .cmpt-k{color:#C0453C}
.remtiles .remt-lead.bad .cmpd-n{color:rgba(192,69,60,.78)}
.remtiles .remt-lead.bad .cmpt-i{background:rgba(226,100,92,.20);color:#C0453C}

.remrec{margin-left:auto;padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(88,192,141,.16);font-size:11px;font-weight:700;color:#2E7D58;white-space:nowrap}
/* The left column stacks: the chart, and the rules under it. */
.remcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.remcol > .refcard{margin:0}
/* Three short rules do not need the width of a chart. In a column, a card
   that sets its own cross-axis alignment stops stretching and takes the
   width of what is inside it. */
.remcol > .remfu{align-self:flex-start;max-width:100%}
/* The sequence card is as tall as the reader wants it; the list scrolls
   inside and the grip at the card's foot sets the height. */
.remseq-w{overflow-y:auto;overscroll-behavior:contain;min-height:140px}
.remres{margin:14px -6px -8px;padding:6px 0;display:grid;place-items:center;
  cursor:ns-resize;touch-action:none}
.remres::before{content:'';width:48px;height:4px;border-radius:var(--r-pill);
  background:var(--line-2);opacity:.5;transition:opacity var(--d-hover) var(--ease)}
.remres:hover::before,.remres:focus-visible::before{opacity:1}
.remres:focus-visible{outline:2px solid var(--y-55);outline-offset:2px;border-radius:var(--r-pill)}
body.rs-drag{cursor:ns-resize;user-select:none}
.remseq{list-style:none;margin:0;padding:0}
.remseq li{position:relative;display:flex;gap:14px;padding:0 0 18px 0}
/* The line down the left is the sequence itself: three moments in order,
   not three settings in a list. */
.remseq li::before{content:'';position:absolute;left:5px;top:16px;bottom:0;width:2px;
  background:var(--line)}
.remseq li:last-child{padding-bottom:0}
.remseq li:last-child::before{display:none}
.remseq-d{flex:none;width:12px;height:12px;margin-top:4px;border-radius:50%;
  background:var(--yellow);position:relative;z-index:1}
.remseq b{display:block;font-size:14px;font-weight:700}
.remseq-c{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;
  color:var(--muted)}
.remseq-c svg{width:15px;height:15px}
.remseq-t{margin:7px 0 0;padding:9px 12px;background:var(--wash);border-radius:var(--r-s);
  font-size:13px;line-height:1.5;font-style:italic;color:var(--ink-2)}
.remseq-a{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}

.remrobot{flex:none;width:38px;height:38px;display:grid;place-items:center;color:var(--ink)}
.remrobot img{width:30px;height:30px;display:block}
.remrules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
/* Paused rules stay readable — they are what will resume — but they
   stop looking like something that is happening. */
.remrules.off{opacity:.5;filter:saturate(.35)}
/* The condition and the consequence stay on one line while they fit and
   break as a pair when they do not — an "if" stranded above its "then" is
   two facts instead of one rule. */
.remrules li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;
  line-height:1.45}
.remrules li > span:last-child{flex:1 1 150px;min-width:0}
.remrule-i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.remrule-i svg{width:16px;height:16px}
.remrule-i.ok{background:rgba(88,192,141,.18);color:#2E7D58}
.remrule-i.wait{background:var(--y-30);color:var(--ink)}
.remrule-i.miss{background:rgba(226,100,92,.16);color:#C0453C}
.remrules b{font-weight:700;white-space:nowrap}
.remrules i{font-style:normal;color:var(--muted)}
.remrules span:last-child{color:var(--ink-2)}

/* The edit window. Plain fields in the order the message is written:
   when it goes, where it goes, what it says. */
.remed{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.remed-s{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--paper)}
.remed-h{display:flex;align-items:center;gap:10px}
.remed-w{flex:1 1 auto;min-width:0;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r-pill);font:inherit;font-weight:700;font-size:14px;color:var(--ink);
  background:var(--white)}
.remed-x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:var(--wash);
  font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.remed-x:hover{background:rgba(226,100,92,.14);color:#C0453C}
.remed-ch{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.remed-c{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.remed-c.on{border-color:var(--y-55);background:var(--y-15);color:var(--ink);font-weight:700}
.remed-c input{accent-color:var(--ink);margin:0}
.remed-l{display:block;margin:12px 0 5px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.remed-t{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);background:var(--white);
  resize:vertical}
.remed-w:focus,.remed-t:focus{outline:2px solid var(--y-55);outline-offset:1px;border-color:transparent}

/* ==================================================== SOCIAL OVERVIEW
   Five readings across the top, then the shape of them, then what has gone
   out and what is about to. The figures are the synthetic DEMO set; the
   chip by the title is what says so. */
.socbar2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}
.socchips{display:flex;gap:10px;flex-wrap:wrap;margin-right:auto}
/* The text sits next to its mark, not a gap away from it. */
.socchip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);
  text-decoration:none;color:var(--ink);box-shadow:var(--sh-s)}
.socchip:hover{border-color:var(--line-2)}
/* Picked: the screen under it is that account alone, so the chip is the
   one thing on the row that looks switched on. */
.socchip.on{border-color:rgba(23,28,43,.32);box-shadow:var(--sh-s)}
/* Two ways out of a filtered screen: drop the filter, or go and look at the
   account itself. They sit side by side, so they are the same control. */
.socclear,.socvisit{display:inline-flex;align-items:center;align-self:center;
  padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);
  font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;
  cursor:pointer}
.socclear:hover,.socvisit:hover{border-color:var(--ink);color:var(--ink)}
.socchip svg{width:24px;height:24px;flex:none}
.socchip span{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  line-height:1.2}
.socchip b{font-size:13.5px;font-weight:700}
.socchip em{font-style:normal;font-size:11.5px;color:var(--muted)}
.socchip-s{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11.5px;
  color:var(--muted)}
.socchip-s::before{content:'';width:7px;height:7px;border-radius:50%;background:#58C08D}
.socchip-s.demo::before{background:var(--yellow)}

.soctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;
  margin:22px 0 16px}
.soct{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:16px 18px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);transition:border-color var(--d-hover) var(--ease)}
.soct:hover{border-color:var(--line-2)}
/* The lit tile is the subject of everything under it — clear enough to
   find, quiet enough not to outshout the figure it holds. A full-ink ring
   read as a modal in a row of cards. */
.soct.on{border-color:rgba(23,28,43,.32);box-shadow:var(--sh-s)}
.soct-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.soct-h span{font-size:12.5px;color:var(--muted)}
.soct-i{flex:none;margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--wash);
  display:grid;place-items:center;color:var(--ink)}
.soct-i svg{width:16px;height:16px}
.soct b{display:block;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.soct .sa-d{margin-top:8px}
.soct-n{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}

.cmpgrid.socgrid{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);align-items:stretch}
@media (max-width:1000px){ .cmpgrid.socgrid{grid-template-columns:minmax(0,1fr)} }
/* --socw is the width the chart was dragged to, read only where the two
   columns exist. Same rule as the compliance table and the reminders chart. */
@media (min-width:1001px){
  .cmpgrid.socgrid{grid-template-columns:var(--socw,minmax(0,1.55fr)) minmax(280px,1fr)}
}
.socchart{position:relative}
.socpanel{display:flex;flex-direction:column;min-width:0}
.soclegend{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.soclegend i{width:9px;height:9px;border-radius:2px;background:var(--yellow)}
.soclegend i.line{width:14px;height:3px;border-radius:2px;background:var(--mist)}
.socsel-w{position:relative;margin-left:auto}
.socsel{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper);font:inherit;font-size:12.5px;
  font-weight:700;color:var(--ink);cursor:pointer}
.socsel:hover{border-color:var(--line-2)}
.socsel svg{width:13px;height:13px}
/* The tooltip hangs below the top edge rather than above the wrapper:
   above it, the card's own overflow cuts it off and the reader gets a
   rule and a dot with nothing attached. Same rule the referral and
   reminder charts use. */
.socw .mch-tip{bottom:auto;top:6px}
.socsvg .socb{fill:var(--y-55)}
.socsvg .socline{fill:none;stroke:var(--mist);stroke-width:2.2;stroke-linejoin:round;
  stroke-linecap:round}
.socsvg .socpt{fill:var(--mist)}
.socsvg .rc-y2{text-anchor:start}

/* The yellow panel reads as a note from SHMEL, so the mascot signs it. */
.socwork{padding:20px 22px;border-radius:var(--r-xl);border:1px solid var(--y-55);
  background:var(--y-15)}
/* The heading is written here rather than borrowed from the .pnl header,
   whose own padding was pushing it 20px right of everything under it. */
.socwork-h{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-family:var(--disp);
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--slate)}
/* The mascot signs the panel it is speaking in. One rule for every screen
   that carries this panel — Overview, Meta, Google Ads and Social. */
.socwork-h::before,.pnl.working .pnl-h h3::before{content:'';flex:none;width:26px;height:26px;
  background:url('/img/bee-mascot-96.webp') center/contain no-repeat}
.pnl.working .pnl-h h3{display:flex;align-items:center;gap:10px}
.socwork .wkl{padding:14px 16px;background:var(--paper);border-radius:var(--r-l);
  box-shadow:var(--sh-s)}

.socmore{margin-left:auto;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink);cursor:pointer;padding:4px 2px}
.socmore:hover{text-decoration:underline}
.socposts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px}
.socpost{margin:0}
.socpost-t{position:relative;aspect-ratio:1;border-radius:var(--r-l);padding:12px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.socpost-t b{font-family:var(--serif);font-weight:400;font-size:1.05rem;line-height:1.2}
.socpost-k{margin-top:6px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  opacity:.72}
.socpost-n{position:absolute;right:9px;top:9px;width:18px;height:18px}
.socpost-n svg{width:18px;height:18px}
.socpost-t.ink{background:var(--g-dark);color:var(--white)}
.socpost-t.sand{background:var(--g-art-2);color:var(--ink)}
.socpost-t.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}
.socpost figcaption{display:flex;gap:12px;margin-top:8px;font-size:12px;color:var(--muted)}

.socplan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.socplan li{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.socplan li:last-child{border-bottom:0}
.socplan-d{flex:none;width:34px;font-size:12px;color:var(--muted)}
.socplan-m{flex:none;width:34px;height:34px;border-radius:var(--r-s);display:grid;
  place-items:center;font-size:13px;font-weight:700;background:var(--wash);color:var(--ink)}
.socplan-m.seo{background:var(--y-30)}
.socplan-m.social{background:rgba(88,192,141,.18);color:#2E7D58}
.socplan-m.trust{background:var(--wash)}
.socplan-m.meta{background:rgba(24,119,242,.12);color:#1155B8}
.socplan-t{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.socplan-t b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.socplan-t em{font-style:normal;font-size:11.5px;color:var(--muted)}
.socplan-x{margin-left:auto;border:0;background:none;font-size:16px;line-height:1;
  color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:var(--r-s)}
.socplan-x:hover{background:var(--wash);color:var(--ink)}
.socact2{margin-top:14px}

/* The content goal: what was posted against what was planned. */
.sgoal-bars{display:flex;flex-direction:column;gap:9px;margin:2px 0 6px}
.sgoal-r{display:flex;align-items:center;gap:12px}
.sgoal-n{flex:none;min-width:168px;font-size:13px;color:var(--ink-2)}
.sgoal-n b{display:inline;font-family:var(--disp);font-size:19px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink)}
.sgoal-t{flex:1 1 auto;height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.75);
  overflow:hidden}
.sgoal-t i{display:block;height:100%;border-radius:inherit;background:var(--yellow)}
.goalbar .btn.xs{margin-left:auto;align-self:center;flex:none}
.sgoal-h{width:100%}
.sgoal-e{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;width:100%}
.sgoal-e label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--muted)}
.sgoal-e input{width:96px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--paper)}
.goalbar .hint{flex-basis:100%;margin:10px 0 0}
@media (max-width:700px){ .sgoal-n{min-width:0} }

/* The profile preview: what the account looks like to someone who lands on
   it. Chrome, not a dashboard — avatar, name, bio, highlights, grid. */
.socprevs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;
  margin-bottom:22px}
.sprev{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-s)}
/* Pinned to the card's own corner rather than to the header row: Facebook
   has a cover and Instagram does not, so in the flow the two links sat at
   different heights. */
.sprev > .btn.ghost{position:absolute;right:18px;top:16px;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px)}
.sprev-cover{height:104px;background:var(--g-art-2);background-size:cover;
  background-position:center}
.sprev-top{display:flex;align-items:center;gap:14px;padding:18px 20px 0}
/* Facebook: the avatar sits on the cover and the name beside it lines up
   with it. The row is pulled up by exactly the difference between the two
   heights, so the avatar overlaps the picture and the type still starts at
   the cover's edge rather than on top of it. */
.sprev.facebook .sprev-top{align-items:flex-end;padding-top:0;margin-top:-30px}
.sprev.facebook .sprev-av{width:74px;height:74px;position:relative;z-index:2}
.sprev-av{flex:none;width:62px;height:62px;border-radius:50%;background:var(--wash);
  border:3px solid var(--paper);box-shadow:var(--sh-s);display:grid;place-items:center;
  font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--ink);overflow:hidden}
.sprev-av img{width:100%;height:100%;object-fit:cover}
.mkprev-av img,.spk-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mkprev-av,.spk-av{overflow:hidden}
.crec-p.ph,.ctr-p.ph{background-size:cover;background-position:center}
.sprev-id{min-width:0;flex:1 1 auto}
.sprev-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sprev-h b{font-size:15px;font-weight:700}
.sprev-net svg{width:16px;height:16px;display:block}
.sprev-n{display:flex;gap:16px;margin-top:5px;font-size:12px;color:var(--muted)}
.sprev-n b{color:var(--ink);font-weight:700}
.sprev-bio{padding:12px 20px 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.sprev-bio b{display:block;font-size:13.5px;color:var(--ink)}
.sprev-bio span{display:block}
.sprev-hl{display:flex;gap:14px;padding:16px 20px 4px;overflow-x:auto}
.sprev-hc{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);max-width:66px;text-align:center}
.sprev-hc i{width:52px;height:52px;border-radius:50%;border:1px solid var(--line)}
.sprev-acts{display:flex;gap:8px;padding:14px 20px 0}
.sprev-act{flex:1 1 0;text-align:center;padding:8px 10px;border-radius:var(--r-s);
  background:var(--wash);font-size:12.5px;font-weight:700;color:var(--ink)}
.sprev-act.y{background:var(--yellow)}
.sprev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:16px 20px 20px}
.sprev-c{position:relative;margin:0;aspect-ratio:1;border-radius:var(--r-s);padding:10px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.sprev-c b{font-family:var(--serif);font-weight:400;font-size:.98rem;line-height:1.2}
.sprev-k{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.86);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.sprev-c figcaption{display:flex;gap:10px;margin-top:6px;font-size:11px;opacity:.78}
.sprev-c.ink{background:var(--g-dark);color:var(--white)}
.sprev-c.sand{background:var(--g-art-2);color:var(--ink)}
.sprev-c.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}

/* The content summary. Flat tiles: these are a reading of the posts under
   them, not buttons that change anything. */
.socsum{margin:0 0 14px}
.soct-flat{cursor:default}
.soct-flat:hover{border-color:var(--line)}
/* The inbox, grouped. A theme, how much of it there was, and the shape of
   the question people actually type. */
/* The line SHMEL writes when the tab opens: it needs a height while the
   dots are in it, or the panel jumps when the sentence lands. */
.socsum-t{min-height:3.2em}
.socsum-t .dots{display:inline-flex;gap:4px;align-items:center;height:1.4em}
.socsum-t .dots i{width:6px;height:6px;border-radius:50%;background:var(--mist);
  animation:bl 1.2s infinite ease-in-out}
.socsum-t .dots i:nth-child(2){animation-delay:.15s}
.socsum-t .dots i:nth-child(3){animation-delay:.3s}

.socvoice{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.socvoice li{display:flex;flex-direction:column;gap:5px}
.socvoice-h{display:flex;align-items:baseline;gap:10px;font-size:13px}
.socvoice-h b{font-weight:700}
.socvoice-h em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--muted)}
.socvoice-t{height:6px;border-radius:var(--r-pill);background:var(--wash);overflow:hidden}
.socvoice-t i{display:block;height:100%;border-radius:inherit;background:var(--yellow)}
.socvoice-e{font-size:11.5px;font-style:italic;color:var(--muted)}
.socwork .socvoice-w{padding:14px 16px;background:var(--paper);border-radius:var(--r-l);
  box-shadow:var(--sh-s);margin-top:12px}
.socwork .socvoice{margin-top:0}
.socwork .socvoice-t{background:var(--wash)}

/* The two Community panels, split wherever the reader drags. */
.comcard{position:relative}
@media (min-width:1001px){
  .cmpgrid.comgrid{grid-template-columns:var(--comw,minmax(0,1.15fr)) minmax(300px,1fr)}
}
/* Three panels the reader can put in any order and size themselves. */
.comgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;
  align-items:start;margin-bottom:22px}
.comcard{display:flex;flex-direction:column;position:relative}
.comcard.dragging{opacity:.45}
.comcard.over{outline:2px dashed var(--y-55);outline-offset:3px}
.comhead{display:flex;align-items:flex-start;gap:10px;cursor:grab}
.comhead:active{cursor:grabbing}
.comgrip{margin-left:auto;font-size:18px;line-height:1;color:var(--mist);letter-spacing:2px}
.comcard:hover .comgrip{color:var(--ink-2)}
/* No grip here: the lists are five rows long and the same length as each
   other, so a resize handle was furniture on a box nobody needed to size. */
.combox{overflow-y:auto;min-height:140px}
.socwork .combox{padding:14px 16px;background:var(--paper);border-radius:var(--r-l);
  box-shadow:var(--sh-s);margin-top:12px}
.socwork .combox .socvoice{margin-top:0}

/* The list and the calendar, side by side: the same question asked of the
   past and of the month ahead. They stack under each other only when there
   is not room for both. */
.cmpgrid.soccols{grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);align-items:start}
/* The same breakpoint every other two-column grid here uses, so the whole
   screen changes shape at one width rather than at two. */
@media (max-width:1000px){ .cmpgrid.soccols{grid-template-columns:minmax(0,1fr)} }
@media (min-width:1001px){
  .cmpgrid.soccols{grid-template-columns:var(--colw,minmax(0,1.15fr)) minmax(300px,1fr)}
}
.colcard{position:relative}
/* Both axes now: sideways splits the row, down and up sets how much of the
   list is on screen. */
#colCorner,#comCorner{cursor:nwse-resize}
.socrank-w,.socvoice-w{overflow-y:auto;overscroll-behavior:contain;min-height:160px}
.soccols > .socsum{grid-column:1 / -1}
.soccal .socweeks{margin-bottom:0;padding-bottom:10px}
/* All three controls in the card's right-hand corner, in a row. */
.soccal-h .socsel-w{margin-left:auto}
.soccal-h .socseg-end,.soccal .socweeks-nav{margin-left:10px}

/* Recent or upcoming: two halves of one question, so one control. */
.socseg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--wash)}
.socseg button{border:0;background:none;padding:6px 14px;border-radius:var(--r-pill);font:inherit;
  font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.socseg button.on{background:var(--paper);color:var(--ink);box-shadow:var(--sh-s)}
.socrank-l{margin:2px 0 10px;font-size:12px;color:var(--muted)}
.socrankc .socsel-w{margin-left:8px}
.socrankc .rc-h{flex-wrap:wrap;row-gap:10px}
.socrankc .rc-h > div{min-width:0}

/* The ranking. A row is a button: everything on it opens the post. */
.socrankc{margin-bottom:22px}
.socrank{display:flex;flex-direction:column}
.socrank-r{display:flex;align-items:center;gap:14px;width:100%;padding:12px 4px;border:0;
  background:none;font:inherit;text-align:left;color:inherit;cursor:pointer;
  border-top:1px solid var(--line)}
.socrank-r:first-child{border-top:0}
.socrank-r:hover{background:var(--wash)}
.socrank-n{flex:none;width:22px;font-size:12.5px;font-weight:700;color:var(--muted)}
.socrank-dt{width:34px;display:flex;flex-direction:column;align-items:center;line-height:1.05}
.socrank-dt b{font-size:16px;font-weight:700;color:var(--ink)}
.socrank-dt em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.socrank-t{flex:none;width:40px;height:40px;border-radius:var(--r-s);display:grid;
  place-items:center;background:var(--wash)}
.socrank-t svg{width:18px;height:18px}
.socrank-t.ink{background:var(--g-dark)}
.socrank-t.sand{background:var(--g-art-2)}
.socrank-t.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%)}
.socrank-b{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.socrank-b b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.socrank-b em{font-style:normal;font-size:11.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* The network mark, beside the figures rather than over the picture. */
.socrank-net{flex:none;display:inline-flex;gap:3px;align-items:center}
.socrank-net svg{width:17px;height:17px;display:block}
.socrank-f{flex:none;display:flex;gap:12px;font-size:12px;color:var(--muted)}
.socrank-f i{font-style:normal}
.socrank-s{flex:none;display:flex;flex-direction:column;align-items:flex-end;min-width:104px}
.socrank-s b{font-size:17px;font-weight:700}
.socrank-s em{font-style:normal;font-size:11px}
.socrank-s em.up{color:#2E7D58}
.socrank-s em.down{color:#C0453C}
.socrank-x{flex:none;font-size:12px;font-weight:700;color:var(--muted)}
.socrank-r:hover .socrank-x{color:var(--ink)}
/* The row is sized by the card, not by the window: dragging the split
   narrow used to leave the meta line wrapping one word per line and "Learn
   more" hanging off the end. Container queries ask the card how wide it
   actually is. */
.socrankc{container-type:inline-size}
@container (max-width:720px){ .socrank-f{display:none} }
@container (max-width:560px){ .socrank-x{display:none} }
@container (max-width:440px){
  .socrank-r{gap:10px}
  .socrank-t{width:32px;height:32px}
  .socrank-s{min-width:0}
}
@media (max-width:900px){ .socrank-f,.socrank-x{display:none} }

/* One post, in the drawer. */
.spost-t{aspect-ratio:2/1;border-radius:var(--r-l);padding:16px;display:flex;
  flex-direction:column;justify-content:flex-end;gap:6px;margin-bottom:16px}
.spost-t span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:.75}
.spost-t b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.15}
.spost-t.ink{background:var(--g-dark);color:var(--white)}
.spost-t.sand{background:var(--g-art-2);color:var(--ink)}
.spost-t.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}
.spost-f{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:6px}
.spost-f div{padding:12px 14px;background:var(--wash);border-radius:var(--r-s)}
.spost-f b{display:block;font-size:19px;font-weight:700}
.spost-f span{font-size:11.5px;color:var(--muted)}
.spost-l{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.spost-l li{font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* How it performed: a score you can see from across the room, and the four
   figures behind it beside it. */
.spost-sc{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;
  margin-bottom:16px}
/* The ring carries the verdict: 1–3 red, 4–6 yellow, 7 and up green. */
.scdial{position:relative;width:120px;height:120px;border-radius:50%;display:grid;
  place-items:center;cursor:default;--scc:var(--yellow);
  background:conic-gradient(var(--scc) var(--sc,180deg),var(--wash) 0)}
.scdial.good{--scc:#58C08D}
.scdial.mid{--scc:var(--yellow)}
.scdial.bad{--scc:#E08A76}
.scdial::before{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--paper)}
.scn{position:relative;display:flex;align-items:baseline;gap:1px}
.scn b{font-size:34px;font-weight:700;line-height:1}
.scn em{font-style:normal;font-size:13px;color:var(--muted)}
.scwhy{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(4px);
  width:260px;padding:12px 14px;border-radius:var(--r-m);background:var(--ink);color:var(--white);
  opacity:0;visibility:hidden;transition:opacity .14s,transform .14s;z-index:5;pointer-events:none}
.scdial:hover .scwhy,.scdial:focus .scwhy,.scdial:focus-visible .scwhy{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.scwhy b{display:block;font-size:12px;margin-bottom:4px}
.scwhy p{margin:0;font-size:12px;line-height:1.5;opacity:.82}
.spost-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.spost-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.spost-rows li:last-child{border-bottom:0}
.sr-k{font-size:12.5px;font-weight:700}
.sr-v{grid-row:1;grid-column:2;font-size:14px;font-weight:700;text-align:right}
.sr-v.up{color:#2E7D58}
.sr-v.down{color:#C2543F}
.sr-w{grid-column:1/-1;font-size:11.5px;color:var(--muted)}

.socbest{padding:18px 20px;background:var(--y-15);border:1px solid var(--y-55);
  border-radius:var(--r-l);margin-bottom:22px;display:flex;gap:22px;flex-wrap:wrap;
  align-items:center}
.socbest > div:first-child{min-width:0;flex:1 1 220px}
.socbest b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem;
  line-height:1.2;margin-top:4px}
.socbest > div:first-child > span:last-child{display:block;margin-top:4px;font-size:12px;
  color:var(--muted)}
.socbest-f{display:flex;gap:18px}
.socbest-f span{display:flex;flex-direction:column;font-size:11.5px;color:var(--muted)}
.socbest-f b{font-family:var(--disp);font-size:19px;font-weight:700;margin:0}
.socbest-w{flex:1 1 100%;margin:0;padding-top:12px;border-top:1px solid var(--y-55);
  font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* The month. Four columns that scroll sideways rather than wrap: a week
   that starts under the previous week is not a calendar. */
/* The column for this week is pulled up ten pixels to sit proud of the rest.
   The strip scrolls sideways, and a scroll container clips anything above
   its padding box — which took the top border and the rounded corners off
   that column. The padding gives the lift somewhere to go. */
.socweeks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);gap:14px;
  overflow-x:auto;padding-top:14px;padding-bottom:6px;margin-bottom:22px;
  scroll-snap-type:x proximity}
.socweek{min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.sw-h2{display:flex;align-items:baseline;gap:8px;padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.sw-h2 b{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.sw-h2 span{font-size:11.5px;color:var(--mist)}
.socweek-e{margin:0;padding:14px 0;font-size:12.5px;color:var(--mist)}
.socday{display:flex;flex-direction:column;gap:7px;width:100%;padding:13px 14px;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);font:inherit;
  color:inherit;cursor:pointer;transition:border-color var(--d-hover) var(--ease)}
.socday:hover{border-color:var(--line-2)}
.socday b{font-size:13.5px;font-weight:700;line-height:1.3}
.socday-h{display:flex;align-items:center;gap:8px}
.socday-d{font-size:11.5px;font-weight:700;color:var(--muted)}
.socday-nets{display:inline-flex;gap:3px}
.socday-nets svg{width:15px;height:15px;display:block}
.socday-st{margin-left:auto;padding:3px 9px;border-radius:var(--r-pill);background:var(--wash);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.socday-st.ok{background:rgba(88,192,141,.18);color:#2E7D58}
.socday-st.late{background:rgba(226,100,92,.16);color:#C0453C}
.socday-m{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted)}
.socday-m em{font-style:normal;font-weight:700;color:var(--ink-2)}
.socday-m i{font-style:normal}
/* Due this week: worth noticing, not an alarm. Nothing in the past is ever
   marked this way — a day that has gone is what happened. */
.socday.due{border-color:var(--y-55);background:var(--y-15)}
.socday.sched{border-style:solid;border-color:var(--y-55);background:var(--y-08,#FEFBEC)}
.socday-st.sched{background:var(--y-15);color:var(--ink)}
.socday-st.due{background:var(--yellow);color:var(--ink)}
.socday.posted{background:var(--paper)}
/* Past weeks are settled: they stay readable but stop competing with the
   week the clinic can still act on. */
.socweek.past .socday{background:var(--wash);border-color:transparent}
/* The week you are in: a yellow column with a yellow rule over it, and its
   own name in the header. */
.socweek.now{background:var(--y-15);border-radius:var(--r-l);padding:10px;margin:-10px -10px 0;
  border-top:3px solid var(--yellow)}
.socweek.now .sw-h2{border-bottom-color:var(--y-55)}
.socweek.now .sw-h2 b{color:var(--ink)}
.socweeks-h{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px}
.socweeks-h .sub{margin:0;flex:1 1 auto}
.socweeks-nav{flex:none;display:inline-flex;gap:6px}
.socweeks-nav button{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;
  background:var(--paper);font-size:14px;line-height:1;color:var(--ink);cursor:pointer}
.socweeks-nav button:hover{border-color:var(--ink)}

/* ============================================== THE COMPOSER
   Three columns in the order the work happens: what you want, what SHMEL
   wrote, and what it will look like on the account. */
.mkcols{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(320px,1.1fr) minmax(300px,.95fr);
  gap:16px;align-items:start}
.mkcols.mkcols-2{grid-template-columns:minmax(260px,.75fr) minmax(0,1.6fr)}
@media (max-width:1180px){ .mkcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:820px){ .mkcols{grid-template-columns:minmax(0,1fr)} }
.mkcol{padding:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-s)}
.mk-h{display:flex;align-items:center;margin:0;font-family:var(--serif);font-weight:400;
  font-size:1.5rem;line-height:1.15}
.mk-s{margin:4px 0 16px;font-size:12.5px;color:var(--muted)}
.mk-mh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mk-mh .mk-h{flex:1 1 auto}
.mk-mh .mk-s{margin-bottom:0}
.mk-l{display:block;margin:14px 0 7px;font-size:12px;font-weight:700;color:var(--ink)}
.mk-l em{font-style:normal;font-weight:400;color:var(--muted)}
.mktypes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mktype{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);font:inherit;
  font-size:11.5px;color:var(--ink);cursor:pointer}
.mktype:hover{border-color:var(--line-2)}
.mktype.on{border-color:var(--y-55);background:var(--y-15);font-weight:700}
.mktype-i svg{width:20px;height:20px;display:block}
.mk-sel,.mk-in{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:13.5px;color:var(--ink);background:var(--paper)}
.mk-sel:focus,.mk-in:focus,.mk-ta textarea:focus{outline:2px solid var(--y-55);outline-offset:1px;
  border-color:transparent}
.mk-hint{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.mk-ta{display:block}
/* The box drags open vertically; the counter sits under it rather than in
   the corner, so the grip has the corner to itself. */
.mk-ta textarea{display:block;width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-s);font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);
  background:var(--paper);resize:vertical;min-height:84px}
.mk-topic{margin-top:8px}
.mk-count{display:block;margin:4px 2px 0 0;text-align:right;font-size:11px;color:var(--mist)}
.mk-go{width:100%;margin-top:18px}
.mk-retry{display:inline-flex;align-items:center;gap:6px}
.mk-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  flex:none;margin-right:10px;border-radius:50%;background:var(--yellow);
  font-family:var(--sans);font-size:11.5px;font-weight:700;line-height:1;color:var(--ink)}

/* The account, as a profile rather than a document. */
.spk{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;
  align-items:start;margin-top:4px}
.spk-ph{border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.spk-top{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.spk-av{width:56px;height:56px;border-radius:50%;background:var(--y-15);display:grid;
  place-items:center;font-size:15px;font-weight:700;flex:none}
.spk-nums{display:flex;gap:18px}
.spk-nums span{display:flex;flex-direction:column;font-size:11px;color:var(--muted)}
.spk-nums b{font-size:14px;color:var(--ink)}
.spk-name{display:block;font-size:13px;line-height:1.4}
.spk-bio{margin:4px 0 6px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.spk-link{font-size:12.5px;font-weight:700;color:#3A6FB0}
.spk-hls{display:flex;gap:10px;margin:14px 0 4px;overflow:hidden}
.spk-hl{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;
  color:var(--ink-2);width:52px;text-align:center}
.spk-hl i{width:46px;height:46px;border-radius:50%;border:1px solid var(--line)}
.spk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:12px}
.spk-t{aspect-ratio:1;border-radius:4px;background:var(--wash);display:flex;align-items:flex-end;
  padding:8px;overflow:hidden}
.spk-t b{font-family:var(--serif);font-weight:400;font-size:.8rem;line-height:1.2}
.spk-t.ink{background:var(--g-dark);color:var(--white)}
.spk-t.sand{background:var(--g-art-2);color:var(--ink)}
.spk-t.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}

/* A photograph behind a headline needs a floor under the type, or the words
   land on whatever the picture happens to be doing there. One scrim, three
   places. */
.ph{position:relative;background-size:cover;background-position:center;color:var(--white)}
.hlart.ph{border-color:transparent}

/* Drawn highlight covers: a mark on a tint, in place of an empty circle. */
.hlart{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
.hlart svg{width:46%;height:46%}
.hlart.sand{background:var(--g-art-2);color:var(--ink)}
.hlart.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}
.hlart.ink{background:var(--g-dark);color:var(--white);border-color:transparent}
.spk-side{padding-top:4px;display:flex;flex-direction:column}
.spk-seg{align-self:flex-start;margin-bottom:12px}
.spk-at{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.spk-none{display:block;margin:4px 0;font-size:12.5px;color:var(--mist)}
/* The packaging panel already sits in the composer's own card: a card
   inside a card inside a card was three borders for one thing. */
.mkmid .socpack{border:0;box-shadow:none;padding:0;background:none}
.refcard .refcard{box-shadow:none}
.spk-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.spk-wait{border:1px solid var(--line);border-radius:var(--r-l);padding:24px 12px;
  display:flex;align-items:center;justify-content:center;min-height:420px}
.spk-q{margin:0 0 12px;font-size:15px;font-weight:700}
.spk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.spk-chip{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--paper);font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.spk-chip:hover{border-color:var(--line-2)}
.spk-chip.on{background:var(--y-15);border-color:var(--y-55);font-weight:700}
.spk-side .mkchat-t{max-height:180px}
.spk-side .mkchat-in{margin-top:auto}
@media (max-width:900px){.spk{grid-template-columns:minmax(0,1fr)}}

.mk-i{width:14px;height:14px;flex:none}

/* The field the game is played on while the post is written. */
.mkplay{display:flex;align-items:center;justify-content:center;min-height:420px;padding:20px 0}

/* The revision chat under the draft. */
.mkchat{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.mkchat-t{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;
  margin-bottom:10px;padding-right:2px}
.mkmsg{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.5}
.mkmsg.you{align-self:flex-end;background:var(--y-15);border:1px solid var(--y-55);
  border-bottom-right-radius:5px}
.mkmsg.sh{align-self:flex-start;background:var(--wash);color:var(--ink-2);
  border-bottom-left-radius:5px}
.mkmsg.dots{display:flex;gap:4px;align-items:center;padding:12px}
.mkmsg.dots i{width:5px;height:5px;border-radius:50%;background:var(--mist);
  animation:mkdot 1s infinite}
.mkmsg.dots i:nth-child(2){animation-delay:.15s}
.mkmsg.dots i:nth-child(3){animation-delay:.3s}
@keyframes mkdot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.mkchat-in{display:flex;gap:8px;align-items:center}
.mkchat-in .mk-in{flex:1}
.mkchat-go{flex:none;width:38px;height:38px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%}

/* Schedule, and the post as the network would show it. */
.mksch{margin-top:6px}
.igw{border:1px solid var(--line);border-radius:var(--r-l);padding:14px}
.igw-h{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:12px}
.igw-t{padding:22px 16px;border-radius:var(--r-m);background:var(--y-15);
  font-size:15px;line-height:1.45;margin-bottom:14px}
.igw-r{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;
  border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.igw-r i{color:var(--mist);font-style:normal}
.igw-sw{width:34px;height:20px;border-radius:999px;background:var(--cloud)}
.igw-sw.on{background:var(--yellow)}
.mkleft .engline{margin-top:12px}
.mk-cap{line-height:1.55;resize:vertical}
.mk-tags{display:flex;flex-wrap:wrap;gap:6px}
.mk-tags span{padding:5px 10px;border-radius:var(--r-pill);background:var(--wash);font-size:11.5px;
  color:var(--ink-2)}
.mk-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mk-note{margin:12px 0 0}
.mk-empty{padding:28px 20px}

/* The preview. Chrome enough to read as the account, drawn rather than
   photographed like every other tile in this product. */
.mkseg{flex:none}
.mkprev{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:var(--paper)}
.mkprev-h{display:flex;align-items:center;gap:10px;padding:12px 14px}
.mkprev-av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--wash);
  display:grid;place-items:center;font-size:12px;font-weight:700}
.mkprev-h b{display:block;font-size:13px;font-weight:700}
.mkprev-h em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.mkprev-d{margin-left:auto;color:var(--muted)}
.mkprev-t{position:relative;aspect-ratio:4/5;padding:22px;display:flex;flex-direction:column;
  justify-content:center;background:var(--g-dark);color:var(--white)}
.mkprev.fb .mkprev-t{aspect-ratio:1}
.mkprev-t.empty{background:var(--wash);color:var(--mist)}
.mkprev-t b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2}
.mkprev-k{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.18);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
.mkprev-w{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:10px;
  letter-spacing:.28em;opacity:.7}
.mkprev-a{display:flex;gap:12px;padding:12px 14px 0;color:var(--ink)}
.mkprev-a svg{width:20px;height:20px}
.mkprev-b{padding:8px 14px 14px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.mkprev-b b{color:var(--ink)}
.mkprev-m{color:var(--mist)}
.mkscr{display:flex;gap:12px;margin-top:14px;padding:14px 16px;border-radius:var(--r-l);
  border:1px solid var(--line)}
.mkscr.ok{background:rgba(88,192,141,.08);border-color:rgba(88,192,141,.35)}
.mkscr.warn{background:var(--y-15);border-color:var(--y-55)}
.mkscr-i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper)}
.mkscr-i svg{width:17px;height:17px}
.mkscr.ok .mkscr-i{color:#2E7D58}
.mkscr b{font-size:13.5px;font-weight:700;margin-right:8px}
/* The verdict is a note beside the heading, not a second heading. */
.mkscr .chip{padding:4px 9px;font-size:9.5px;letter-spacing:.07em}
.mkscr .chip i{width:6px;height:6px}
.mkscr p{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--ink-2)}

/* ============================================== COMPETITORS
   Counters, then who they are, then what is moving and what nobody covers.
   Every card on this screen opens the long version in the drawer. */
.socmk-note{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;max-width:88ch;
  margin-bottom:4px}
.socmk-note .kbadge{flex:none;margin-top:1px}

/* The outer sections lift off the page. Inside them the cards stay flat,
   so the shadow reads as "this is one section" rather than as depth on
   every box. */
.soccomp-top,.cmpgrid.soccomp > .refcard,.cmpgrid.soccomp > .socwork{
  box-shadow:var(--sh-card)}
.soccomp-top{margin-bottom:18px}
.cmpgrid.soccomp{grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);align-items:start}
.cmpgrid.soccomp2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:1000px){
  .cmpgrid.soccomp,.cmpgrid.soccomp2{grid-template-columns:minmax(0,1fr)}
}

.crvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
/* A competitor, as a card: who they are, what their grid looks like, the
   three figures a clinic compares itself on, and what they post about. */
.rivc{display:flex;flex-direction:column;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--paper);cursor:pointer;
  transition:border-color var(--d-hover) var(--ease)}
.rivc:hover{border-color:var(--line-2)}
.rivc:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rivc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rivc-av{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;
  background:var(--g-dark);background-size:cover;background-position:center;
  color:var(--white);display:grid;place-items:center;font-size:12.5px;font-weight:700;
  letter-spacing:.04em}
.rivc-n{min-width:0}
.rivc-n b{display:block;font-size:14px;font-weight:700;line-height:1.2;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rivc-n em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted)}
.rivc-go{margin-left:auto;flex:none;color:var(--mist);font-size:15px}
.rivc:hover .rivc-go{color:var(--ink)}
.rivc-t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
.rivc-tile{aspect-ratio:1;border-radius:var(--r-s);display:flex;align-items:flex-end;padding:7px;
  overflow:hidden}
.rivc-tile i{font-style:normal;font-size:10px;line-height:1.2;font-weight:700}
.rivc-tile.ink{background:var(--g-dark);color:var(--white)}
.rivc-tile.sand{background:var(--g-art-2);color:var(--ink)}
.rivc-tile.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}
.rivc-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:12px 0 10px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:10px}
.rivc-f > div{min-width:0}
.rivc-f b{display:block;font-size:16px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.rivc-f span{display:block;margin-top:2px;font-size:10px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rivc-f i{display:inline-block;margin-top:4px;font-style:normal;font-size:10.5px;font-weight:700}
.rivc-f i.up{color:#2E7D58}
.rivc-f i.down{color:#C0453C}
.rivc-g{display:flex;flex-wrap:wrap;gap:6px}
.rivc-g span{padding:4px 9px;border-radius:var(--r-pill);background:var(--wash);font-size:10.5px;
  color:var(--ink-2)}

/* Their account in the drawer, read the way this product reads its own. */
.rivhead{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rivhead-av{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:var(--g-dark);background-size:cover;background-position:center;
  color:var(--white);display:grid;place-items:center;font-size:14px;font-weight:700}
.rivhead b{display:block;font-size:16px;font-weight:700}
.rivhead em{font-style:normal;font-size:12.5px;color:var(--muted)}
.rivlinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rivlinks a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:11.5px;font-weight:700;color:var(--ink);
  text-decoration:none;background:var(--paper)}
.rivlinks a:hover{border-color:var(--ink)}
.rivlinks svg{width:14px;height:14px}
.rivtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:6px}
.rivtiles > div{padding:12px 14px;background:var(--wash);border-radius:var(--r-s)}
.rivtiles b{display:block;font-size:19px;font-weight:700;line-height:1.1}
.rivtiles span{font-size:11.5px;color:var(--muted)}
.rivtiles i{display:block;margin-top:4px;font-style:normal;font-size:11px;font-weight:700}
.rivtiles i.up{color:#2E7D58}
.rivtiles i.down{color:#C0453C}
.rivbars{display:flex;align-items:flex-end;gap:10px;height:110px;margin-bottom:6px}
.rivb{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:5px}
.rivb i{width:100%;max-width:46px;background:var(--y-55);border-radius:var(--r-s) var(--r-s) 0 0}
.rivb em{font-style:normal;font-size:12px;font-weight:700}
.rivb b{font-size:10.5px;font-weight:400;color:var(--muted)}
.rivbest{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-l);margin-bottom:6px}
.rivbest-t{flex:none;align-self:center;width:56px;height:56px;aspect-ratio:1;
  border-radius:var(--r-s);background-size:cover;background-position:center;display:flex;
  align-items:flex-end;padding:6px}
.rivbest-t i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase}
.rivbest-t.ink{background:var(--g-dark);color:var(--white)}
.rivbest-t.sand{background:var(--g-art-2);color:var(--ink)}
.rivbest-t.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}
.rivbest b{display:block;font-size:14px;font-weight:700}
.rivbest span{font-size:12px;color:var(--muted)}
.rivmix{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:9px}
.rivmix li{display:flex;align-items:center;gap:12px;font-size:12.5px}
.rivmix li > span:first-child{flex:0 0 108px;color:var(--ink-2)}
.rivmix-t{flex:1 1 auto;height:7px;border-radius:var(--r-pill);background:var(--wash);
  overflow:hidden}
.rivmix-t i{display:block;height:100%;background:var(--yellow)}
.rivmix em{flex:none;font-style:normal;font-size:12px;color:var(--muted);min-width:34px;
  text-align:right}
/* Where a claim came from: quieter than the things to do under it. */
.fromrd{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:7px}
.fromrd li{position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:var(--muted)}
.fromrd li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--line-2)}

/* Things to do, numbered in the product's yellow. */
.sugl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sugl li{display:flex;gap:11px;align-items:flex-start}
.sugl p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.sugl .crec-n{margin-top:1px}

/* Top-aligned like every card beside it: centred, it floated in the middle
   of a tall row and read as a different kind of thing. */
.crvadd{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:16px;
  border:1px dashed var(--line-2);border-radius:var(--r-l)}
.crvadd b{font-size:14px;font-weight:700}
.crvadd > span{font-size:11.5px;line-height:1.5;color:var(--muted)}
.crvadd-r{display:flex;gap:8px;margin-top:8px}
.crvadd input{flex:1 1 auto;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-s);font:inherit;font-size:13px;background:var(--paper);color:var(--ink)}
.crvadd input:focus{outline:2px solid var(--y-55);outline-offset:1px;border-color:transparent}
.crvadd .hint{margin:8px 0 0}

.crec{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
/* The rows sit on white inside a yellow panel, so a white hover was
   invisible. Hovering lifts the row instead: solid white, a border and a
   shadow, and the row moves a pixel towards the reader. */
.crec li{display:flex;gap:11px;padding:10px 12px;border-radius:var(--r-s);cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid transparent;
  transition:background var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease),
    border-color var(--d-hover) var(--ease),transform var(--d-hover) var(--ease)}
.crec li:hover{background:var(--paper);border-color:var(--y-55);box-shadow:var(--sh-s);
  transform:translateY(-1px)}
.crec li:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.crec-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--ink)}
/* A content idea carries a picture where a numbered move carries its
   number: same row, different kind of thing. */
.crec-p{flex:none;align-self:center;width:38px;height:38px;aspect-ratio:1;
  border-radius:var(--r-s);background-size:cover;background-position:center}
.crec-p.ink{background:var(--g-dark)}
.crec-p.sand{background:var(--g-art-2)}
.crec-p.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%)}

/* A trend row: a picture, then the claim. */
.ctr-p{flex:none;align-self:center;width:48px;height:48px;aspect-ratio:1;
  border-radius:var(--r-s);background-size:cover;background-position:center}
.ctr-p.ink{background:var(--g-dark)}
.ctr-p.sand{background:var(--g-art-2)}
.ctr-p.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%)}
.trdstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.trdshot{aspect-ratio:4/5;border-radius:var(--r-s);display:flex;align-items:flex-end;padding:9px}
.trdshot i{font-style:normal;font-size:10.5px;font-weight:700;line-height:1.25}
.trdshot.ink{background:var(--g-dark);color:var(--white)}
.trdshot.sand{background:var(--g-art-2);color:var(--ink)}
.trdshot.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%);color:var(--ink)}
.trdlinks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.crec b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.crec p{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}
.crec-a{margin-top:14px;width:100%}
.crec-lab{margin:14px 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.crec-lab:first-child{margin-top:8px}
/* The whole list, in the drawer: same two groups, each row with its own
   way into the composer. */
.recall{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column}
.recall-r{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px solid var(--line)}
.recall-r:first-child{border-top:0}
.recall-r > div{flex:1 1 auto;min-width:0}
.recall-r b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.recall-r p{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}
.recall-r .btn{flex:none}

.ctr{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.ctr li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.ctr li:first-child{border-top:0}
.ctr li:hover{background:var(--wash)}
.ctr-n{flex:none;width:20px;font-size:12px;font-weight:700;color:var(--mist)}
.ctr-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ctr-h b{font-size:13.5px;font-weight:700}
.ctr-g{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}
.ctr-g.hi,.tag.grow.hi{background:rgba(88,192,141,.18);color:#2E7D58}
.ctr-g.mid,.tag.grow.mid{background:var(--y-30);color:var(--ink)}
.ctr-g.low,.tag.grow.low{background:var(--wash);color:var(--ink-2)}
/* The drawer's chip wears the list's colours rather than the default grey. */
.tag.grow{text-transform:none;letter-spacing:0;font-size:11.5px}
.ctr p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

.cgap{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.cgap li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);
  cursor:pointer}
.cgap li:first-child{border-top:0}
.cgap li:hover{background:var(--wash)}
.cgap-t{flex:none;width:42px;height:42px;border-radius:var(--r-s)}
.cgap-t.ink{background:var(--g-dark)}
.cgap-t.sand{background:var(--g-art-2)}
.cgap-t.warm{background:linear-gradient(165deg,#EDE6DC 0%,#FFFFFF 100%)}
.cgap b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.cgap em{font-style:normal;font-size:11.5px;color:var(--muted)}
.cgap-x{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;font-size:15px;color:var(--muted)}
.cgap li:hover .cgap-x{border-color:var(--ink);color:var(--ink)}

.cfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;
  background:var(--wash);border-radius:var(--r-xl);margin:22px 0}
.cfoot img{flex:none;width:30px;height:30px}
.cfoot p{margin:0;flex:1 1 320px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* Market research: three cards, one per thing the market leaves on the
   table. */
.socmkt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
  margin-bottom:22px}
.socmk{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:18px 20px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l)}
.socmk b{font-size:15px;font-weight:700;line-height:1.3}
.socmk p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.socmk-f{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--muted)}
.socmk-f i{font-style:normal;padding:3px 9px;border-radius:var(--r-pill);background:var(--wash)}
.socmk-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.socmk-x{margin-top:auto;padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);
  cursor:pointer}
.socmk-x:hover{border-color:var(--ink);color:var(--ink)}
.spost-hook{margin:0 0 14px;padding:12px 14px;background:var(--wash);border-radius:var(--r-s);
  font-size:13.5px;line-height:1.55;font-style:italic;color:var(--ink-2)}

/* The shoot. One block per pillar, because what changes between two Botox
   reels is the words and not the lighting. */
.socshots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.socshot{padding:18px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l)}
.socshot-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.socshot-h b{font-size:13px;font-weight:700}
.socshot-h .remrec{margin-left:auto}
.socshot-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.socshot-l li{position:relative;padding-left:20px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.socshot-l li::before{content:'';position:absolute;left:0;top:6px;width:11px;height:11px;
  border:1.6px solid var(--line-2);border-radius:3px}
.socshot-s{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line)}
.socshot-i{display:inline-flex;flex-direction:column;padding:6px 11px;border-radius:var(--r-s);
  background:var(--wash);line-height:1.25}
.socshot-i b{font-size:12.5px;font-weight:700}
.socshot-i em{font-style:normal;font-size:11px;color:var(--muted)}

/* The packaging proposal: a label, and the thing being proposed. */
.socpack{margin:0 0 18px}
.sp-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:14px 0;
  border-top:1px solid var(--line)}
.sp-row:first-of-type{border-top:0;padding-top:4px}
.sp-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding-top:3px}
.sp-v b{display:block;font-size:14.5px;font-weight:700;line-height:1.4}
.sp-v em{display:block;margin-top:5px;font-style:normal;font-size:12px;line-height:1.5;
  color:var(--muted)}
.sp-bio{margin:0;padding:12px 14px;background:var(--wash);border-radius:var(--r-s);
  font-size:13.5px;line-height:1.6}
.sp-hl{display:flex;flex-wrap:wrap;gap:10px}
.sp-h{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-s);max-width:210px}
.sp-h b{font-size:12.5px}
.sp-h em{margin:0;font-size:11.5px}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:360px}
.sp-c{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;aspect-ratio:1;
  padding:9px;border-radius:var(--r-s);background:var(--wash)}
.sp-c b{font-size:11.5px;line-height:1.25}
.sp-c em{margin:0;font-size:10.5px}
.sp-c.seo{background:var(--y-30)}
.sp-c.social{background:rgba(88,192,141,.16)}
.sp-c.meta{background:rgba(24,119,242,.10)}
@media (max-width:700px){ .sp-row{grid-template-columns:minmax(0,1fr)} }

/* ==================================================== COMPLIANCE
   Findings first. The tiles say how much was screened; the table says what
   was found and in whose words. */
.cmptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;margin:24px 0 18px}
.cmpt{display:flex;gap:14px;padding:18px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-l)}
.cmpt-i{flex:none;width:42px;height:42px;border-radius:var(--r-l);display:grid;place-items:center;
  background:var(--wash);color:var(--ink)}
.cmpt-i svg{width:21px;height:21px}
.cmpt-i.warn{background:rgba(249,224,97,.35);color:#8A6D00}
.cmpt-i.risk{background:rgba(226,100,92,.16);color:#C0453C}
.cmpt-i.ok{background:rgba(88,192,141,.18);color:#2E7D58}
.cmpt b{display:block;font-size:24px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.cmpt-k{display:block;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.cmpt-d{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:9px}
.cmpd{font-size:12.5px;font-weight:700}
.cmpd.up{color:var(--promo-good)}
.cmpd.down{color:var(--promo-bad)}
.cmpd-n{font-size:11.5px;color:var(--muted)}

.cmpgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.85fr);
  gap:16px;align-items:start;margin:0 0 26px}
/* --cmpw is the width the clinic dragged to. It is read only here, so a
   width saved on a wide screen cannot force two columns onto a narrow one. */
@media (min-width:1001px){
  .cmpgrid{grid-template-columns:var(--cmpw,minmax(0,1.7fr)) minmax(210px,.85fr)}
}
@media (max-width:1000px){ .cmpgrid{grid-template-columns:minmax(0,1fr)} }
/* The box the clinic sizes, and the grip it sizes it by. The grip is the
   same idea as the Ask SHMEL panel's: a wide target, a short line to say
   where to grab, and the keyboard does the same job with arrows. */
.cmpscroll{overflow:auto;overscroll-behavior:contain}
.cmpcard{position:relative}
/* The pager stops short of the corner handle instead of sitting under it. */
.cmpcard .lqfoot{padding-right:30px}
.cmpcorner{position:absolute;right:0;bottom:0;width:38px;height:38px;
  cursor:nwse-resize;touch-action:none;background:transparent;z-index:3}
/* The card's corner radius is 34px, so a mark sitting 6px in from both
   edges lands outside the arc and reads as if it had fallen off the card.
   A point d in from both edges is inside the curve when d >= R(1 - 1/root2)
   — 10px here. 16px clears it with room to spare and keeps the bracket
   clear of the pager beside it. */
.cmpcorner::before{content:'';position:absolute;right:16px;bottom:16px;
  width:11px;height:11px;border-right:2px solid var(--line-2);
  border-bottom:2px solid var(--line-2);border-bottom-right-radius:6px;
  transition:border-color .18s var(--ease)}
.cmpcorner:hover::before,.cmpcorner:focus-visible::before{border-color:var(--ink)}
.cmpcorner:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

.cmptable{overflow-x:auto}
.cmph,.cmpr{display:grid;grid-template-columns:minmax(150px,1.5fr) minmax(90px,.9fr)
  minmax(150px,1.6fr) 78px 112px 98px;gap:12px;align-items:center;padding:12px 4px}
.cmph{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.cmpr{border-bottom:1px solid var(--line);font-size:13px}
.cmpr:last-child{border-bottom:0}
.cmpr b{display:block;font-weight:700;line-height:1.3}
.cmpr i{display:block;margin-top:2px;font-style:normal;font-size:11.5px;line-height:1.4;
  color:var(--muted)}
.cmpr-a{display:flex;align-items:center;gap:10px;min-width:0}
/* The asset's thumbnail is drawn, not a photograph: the product must not
   ship stock patient faces, and a screening log is the last place to put
   one. */
.cmpthumb{flex:none;align-self:center;width:38px;height:38px;aspect-ratio:1;
  border-radius:var(--r-s);display:block}
.cmpthumb.ph{background-size:cover;background-position:center}
.cmpthumb.ink{background:linear-gradient(165deg,#171C2B,#4A4E5C);color:#fff}
.cmpthumb.sand{background:linear-gradient(165deg,#F9E061,#FFF);color:var(--ink)}
.cmpthumb.warm{background:linear-gradient(165deg,#EDEDED,#A0A2A8);color:var(--ink)}
.cmpr-c{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.cmpch{flex:none;width:20px;height:20px;display:grid;place-items:center}
.cmpch svg,.cmpch img{width:18px;height:18px;display:block}
.cmpr-d{font-size:12.5px;color:var(--muted)}
.cmptable.plain .cmpr{grid-template-columns:minmax(150px,1.4fr) minmax(150px,1.6fr) 112px 98px}

/* A row opens under itself. The detail is a panel, not a dialog: the row it
   explains stays on screen and the table keeps its scroll. */
.cmpr{cursor:pointer}
.cmpr:hover{background:var(--wash)}
.cmpr.on{background:var(--y-15)}
.cmpdt{grid-column:1/-1;padding:18px 20px 20px;margin:0 0 4px;background:var(--wash);
  border-radius:var(--r-l)}
.cmpdt-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.cmpdt-g .eyebrow{display:block;margin-bottom:7px}
.cmpdt-g b{display:block;font-size:14px;font-weight:700;line-height:1.35}
.cmpdt-g p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.cmpq{font-style:italic}
.cmpdiff{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  margin-top:16px}
.cmpdiff-r{padding:12px 14px;border-radius:var(--r-s);background:var(--paper);
  border:1px solid var(--line)}
.cmpdiff-r span{display:block;margin-bottom:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmpdiff-r p{margin:0;font-size:13px;line-height:1.55}
.cmpdiff-r.was{border-color:rgba(226,100,92,.35)}
.cmpdiff-r.was p{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(226,100,92,.5)}
.cmpdiff-r.now{border-color:rgba(88,192,141,.45)}
.cmpwait{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.cmpdt-a{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.cmpdt-a .hint{flex:1 1 220px;margin:0}
.cmpdt .hint{margin-top:12px}

.cmpact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cmpact li{display:flex;gap:12px;align-items:flex-start}
.cmpact-i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--wash);color:var(--ink)}
.cmpact-i svg{width:18px;height:18px}
.cmpact-i.fix{background:rgba(88,192,141,.18);color:#2E7D58}
.cmpact-i.review{background:var(--y-30);color:var(--ink)}
.cmpact-i.esc{background:rgba(226,100,92,.16);color:#C0453C}
.cmpact div{font-size:13.5px;line-height:1.4}
.cmpact b{font-size:16px;font-weight:700;margin-right:3px}
.cmpact i{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--muted)}
/* Each row is a way into the findings it counts, not just a number. */
.cmpact-b{display:inline-block;margin-top:6px;font-size:12.5px}
.cmpempty{padding:18px 4px}
.cmpchecks{margin:0 0 16px;padding:20px 22px 22px;background:var(--y-15);
  border:1px solid var(--y-30);border-radius:var(--r-xl)}
.cmpchecks-h{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.cmpchecks-h img{flex:none}
.cmpchecks-h p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.cmpchk{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cmpc{display:flex;gap:11px;align-items:center;padding:14px 16px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-l)}
.cmpc-i{flex:none;width:32px;height:32px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--wash);color:var(--ink)}
.cmpc-i svg{width:17px;height:17px}
.cmpc b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
/* Scoped to the text block on purpose: `.cmpc span` also matched the icon's
   own container and turned its centring grid back into a block, which is why
   every mark sat in the top-left corner of its square. */
.cmpc > div > span{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.cmpfoot{margin-top:0}

/* ==================================================== LEAD QUALITY
   A list, not a dashboard: the unit of work is one booking, so the table is
   the screen and everything else sits around it. The drawer opens beside the
   table rather than over it, because the row it belongs to has to stay
   visible while it is read. */
.lqtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin:24px 0 20px}
.lqt{display:flex;gap:14px;padding:18px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-l)}
/* Colour here is the reading, not decoration: the four tiles are one count
   split four ways, and three of the four splits have a verdict attached.
   Total has none, so it stays neutral — a coloured disc on it would imply
   one. */
.lqt-i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--wash);color:var(--ink)}
.lqt-i.ok{background:rgba(88,192,141,.18);color:#2E7D58}
.lqt-i.check{background:var(--y-30);color:var(--ink)}
.lqt-i.risk{background:rgba(226,100,92,.16);color:#C0453C}
.lqt-i svg{width:21px;height:21px}
.lqt b{display:block;font-size:24px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.lqt-k{display:block;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.lq-d{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;
  font-weight:700;color:var(--muted)}
.lq-d.up{color:var(--promo-good)}
.lq-d.dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.lq-d.dot.ok::before{background:var(--promo-good)}
.lq-d.dot.wait::before{background:var(--yellow)}
.lq-d.dot.high::before{background:#C0453C}
/* Filter and period, side by side. Each gets its own positioned wrapper so
   the two menus anchor to their own buttons rather than to the row. */
.vh-r.lqctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lqfil,.lqper{position:relative}
.lqfil .winmenu button i{font-style:normal;font-weight:400;color:var(--muted)}

.lqwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.lqwrap.withdrawer{grid-template-columns:minmax(0,1.45fr) minmax(320px,.95fr)}
@media (max-width:1080px){ .lqwrap.withdrawer{grid-template-columns:minmax(0,1fr)} }
.lqtable{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-s)}
.lqh,.lqr{display:grid;grid-template-columns:minmax(120px,1.25fr) minmax(110px,1.1fr)
  minmax(120px,1.1fr) 86px 116px 40px;gap:12px;align-items:center;padding:12px 18px}
.lqh{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:var(--wash)}
.lqr{border-top:1px solid var(--line);cursor:pointer}
.lqr:hover{background:var(--wash)}
.lqr.on{background:var(--y-15)}
/* A row that is high risk says so before it is read, and does it with the
   lightest wash that still reads as a warning. */
.lqr.high{background:rgba(226,100,92,.06)}
.lqr.high:hover{background:rgba(226,100,92,.1)}
.lqr b{display:block;font-size:13px;font-weight:700;line-height:1.3}
.lqr i{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lqscore{display:inline-grid;place-items:center;min-width:44px;padding:5px 9px;
  border-radius:var(--r-pill);font-size:13px;font-variant-numeric:tabular-nums}
.lqscore.low{background:rgba(88,192,141,.18);color:#2E7D58}
.lqscore.mid{background:var(--y-30);color:var(--ink)}
.lqscore.high{background:rgba(226,100,92,.18);color:#C0453C}
.lqchip{display:inline-block;padding:5px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700}
.lqchip.ok{background:rgba(88,192,141,.18);color:#2E7D58}
.lqchip.wait{background:var(--y-30);color:var(--ink)}
.lqchip.high{background:rgba(226,100,92,.18);color:#C0453C}
.lqchip.mid{background:var(--y-30);color:var(--ink)}
.lqchip.low{background:rgba(88,192,141,.18);color:#2E7D58}
/* A header that sorts or filters is a control, so it looks like one: the
   caret is always there, the arrow appears when the column is the one doing
   the sorting, and the menu opens under the cell it belongs to. */
.lqhc{position:relative}
.lqhc > button{display:inline-flex;align-items:center;gap:4px;border:0;background:none;
  padding:2px 4px;margin:-2px -4px;border-radius:var(--r-s);font:inherit;font-size:inherit;
  font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.lqhc > button:hover{background:rgba(23,28,43,.06);color:var(--ink)}
.lqhc.on > button{color:var(--ink)}
.lqhc i{font-style:normal;font-weight:400}
/* The chevron and the sort arrow are drawn, so they sit on the cap height
   of the label rather than wherever the font puts \2304. */
.caret{width:11px;height:11px;flex:none;opacity:.55}
.sarr{width:11px;height:11px;flex:none}
.lqmenu{position:absolute;left:-6px;top:calc(100% + 8px);z-index:20;min-width:190px;
  padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 18px 40px rgba(23,28,43,.16);display:flex;flex-direction:column;gap:2px;
  text-transform:none;letter-spacing:0;font-weight:400}
.lqmenu button,.lqmenu label{display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border:0;background:none;border-radius:var(--r-s);
  font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.lqmenu button:hover,.lqmenu label:hover{background:var(--wash)}
.lqmenu button.on{background:var(--wash);font-weight:700}
.lqmenu input{width:15px;height:15px;accent-color:var(--ink)}
.lqclear{border-top:1px solid var(--line)!important;border-radius:0!important;
  margin-top:4px;color:var(--muted)!important}
.lqmore{border:0;background:none;padding:4px 6px;border-radius:var(--r-s);
  font-size:16px;line-height:1;color:var(--muted)}
.lqmore:hover{background:var(--wash);color:var(--ink)}

.lqfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;color:var(--muted)}
.lqpager{display:flex;align-items:center;gap:4px;margin-left:auto}
.lqp{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--paper);font-size:13px;color:var(--ink)}
.lqp:hover:not(:disabled){border-color:var(--ink)}
.lqp.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.lqp:disabled{opacity:.4}
.lqdots{color:var(--muted);padding:0 2px}

/* ---- the drawer ---- */
.lqdrawer{position:relative;padding:20px 22px 22px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-xl)}
.lqx{position:absolute;top:14px;right:14px;border:0;background:none;font-size:20px;
  line-height:1;color:var(--muted);padding:4px 7px;border-radius:var(--r-s)}
.lqx:hover{background:var(--wash);color:var(--ink)}
.lqd-h{display:flex;gap:14px;margin:0 0 18px;padding-right:30px}
.lqd-av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--wash);
  display:grid;place-items:center;font-size:14px;font-weight:700}
.lqd-n{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lqd-n b{font-size:17px;font-weight:700}
.lqd-h p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.lqd-t{font-weight:700;color:var(--ink-2)}
.lqd-s,.lqd-act{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-l);
  margin-bottom:14px}
.lqd-s .eyebrow,.lqd-act .eyebrow{display:block;margin-bottom:10px}
.lqd-score{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.lqd-score b{font-size:32px;font-weight:700;line-height:1;letter-spacing:-.02em}
.lqd-score > span:first-of-type{font-size:15px;color:var(--muted)}
.lqd-score .lqchip{margin-left:auto;align-self:center}
.lqd-sig{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lqd-sig li{display:flex;gap:9px;font-size:13px;line-height:1.5}
.lqd-sig i{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:#C0453C}
/* The action card is the only tinted surface in the drawer: it is the only
   thing in it a person is being asked to do. */
.lqd-act{background:rgba(226,100,92,.07);border-color:rgba(226,100,92,.28)}
.lqd-act b{display:block;font-size:15px;font-weight:700}
.lqd-act p{margin:4px 0 12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.lqd-btns{display:flex;gap:8px;flex-wrap:wrap}
.lqd-act .hint{margin:10px 0 0}
.lqd-ct{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.lqd-ct li{display:flex;align-items:center;gap:10px;font-size:13px}
.lqd-ic{flex:none;width:18px;height:18px;color:var(--muted)}
.lqd-ic svg{width:18px;height:18px;display:block}
.lqd-ct span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lqd-ct em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--muted)}
.lqd-ct em.flag{color:#C0453C;font-weight:700}

/* The screen's own tabs. Underline, not pills: the rail on the left already
   uses a filled shape for "where you are", and two of those on one screen
   makes neither of them mean it. */
/* Named for the screen, not for "tabs": .vtabs already belongs to the
   three-angle switcher on Compliance, and two components under one class is
   how a style fixed on one screen breaks another. */
.stabs{display:flex;gap:4px;flex-wrap:wrap;margin:18px 0 26px;
  border-bottom:1px solid var(--line)}
.stabs button{position:relative;width:auto;border:0;background:none;padding:11px 14px 13px;
  font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;text-transform:none;
  letter-spacing:0}
.stabs button:hover{color:var(--ink)}
.stabs button.on{color:var(--ink);font-weight:700}
.stabs button.on::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;
  height:2px;border-radius:2px;background:var(--yellow)}
/* Moving between tabs with the arrows should not draw a box around them:
   the selected tab already says which one it is, in bold and in yellow. */
.stabs button:focus,.stabs button:focus-visible,
[data-mtab]:focus,[data-mtab]:focus-visible{outline:none}
/* The same tab as the other three — same size, same weight, same padding
   — in yellow, because it is the one that makes something. The letters
   stay ink: yellow type on white is the one thing the brand never does,
   and at 14px it would not be readable anyway. */
/* A shade shorter than the plain tabs, so the block of colour does not sit
   taller than the row it belongs to. */
.stabs .stab-new{margin:0 0 0 2px;padding:9px 16px 10px;align-self:flex-end;
  border-radius:var(--r-s) var(--r-s) 0 0;background:var(--yellow);color:var(--ink);
  font-weight:700}
.stabs .stab-new:hover{background:#EFCF3C;color:var(--ink)}
.stabs .stab-new.on::after{left:0;right:0;background:var(--ink)}

/* The essential figures, shown behind a link rather than as a landing page. */
.anfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:14px 0 0}
.anf{padding:16px 18px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l)}
.anf b{display:block;font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.015em}
.anf span{display:block;margin-top:3px;font-size:12px;color:var(--muted)}

/* ==================================================== SOCIAL MEDIA
   One section, two platforms, three tabs. The page is mostly white space and
   rules; the only filled surfaces are the things SHMEL is asking a person to
   decide. */
.smbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.socsw{display:flex;align-items:center;gap:11px;text-transform:none;letter-spacing:0;padding:11px 16px 11px 12px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  text-align:left}
.socsw.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.socsw-m{flex:none;width:26px;height:26px;display:grid;place-items:center}
.socsw-m svg{width:24px;height:24px;display:block}
.socsw-t b{display:block;font-size:13.5px;font-weight:700;line-height:1.2}
.socsw-s{display:flex;align-items:center;gap:5px;margin-top:1px;font-size:11.5px;color:var(--muted)}
.socsw-s i{width:6px;height:6px;border-radius:50%;background:var(--mist)}
.socsw-s.on i{background:var(--promo-good)}
.socsw-h{margin-left:6px;padding-left:12px;border-left:1px solid var(--line);
  font-size:12.5px;color:var(--muted);white-space:nowrap}
@media (max-width:620px){ .socsw-h{display:none} }

/* ---- profile ---- */
.spgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;
  align-items:start;margin:0 0 18px}
@media (max-width:900px){ .spgrid{grid-template-columns:minmax(0,1fr)} }
.spcard{padding:20px 22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl)}
.spcard .eyebrow{display:block;margin-bottom:14px}
.sp-id{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sp-av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--wash);
  display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink);overflow:hidden}
.sp-av.smbig{width:74px;height:74px;font-size:20px}
.sp-av img{width:100%;height:100%;object-fit:cover}
.sp-id b{display:block;font-size:15px;font-weight:700}
.sp-id span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.sp-dl{margin:0}
.sp-dl dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.sp-dl dd{margin:0 0 12px;font-size:13.5px;line-height:1.55}

.sprow{padding:16px 0;border-top:1px solid var(--line)}
.sprow:first-of-type{border-top:0;padding-top:0}
.sprow.done{opacity:.72}
.spr-k{display:block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.spr-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px}
@media (max-width:640px){ .spr-b{grid-template-columns:minmax(0,1fr)} }
.spr-c span,.spr-n span{display:block;margin-bottom:4px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spr-c p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2);white-space:pre-line}
.spr-n p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre-line;
  padding:10px 12px;background:var(--y-15);border-radius:var(--r-s)}
.spr-a{display:flex;gap:8px;align-items:center;margin-top:12px}
.spr-ok{font-size:12.5px;font-weight:700;color:var(--promo-good)}
.spedit{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:13.5px;line-height:1.5;resize:vertical}

.sppv{margin:0 0 18px;padding:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl)}
.pv-card{max-width:340px;margin:12px 0 0;padding:20px;border:1px solid var(--line);
  border-radius:var(--r-l);text-align:center}
.pv-card b{display:block;margin:12px 0 2px;font-size:15px;font-weight:700}
.pv-h{display:block;font-size:12.5px;color:var(--muted)}
.pv-bio{margin:12px 0 0;font-size:13px;line-height:1.6}
.pv-w{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--ink)}
.sppv .hint{margin:12px 0 0}
.spcta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spcta .modelled{flex-basis:100%;margin:0}
.spcta #spOut{flex-basis:100%}
.cta-tag{margin-left:9px;padding:2px 7px;border-radius:var(--r-pill);background:rgba(23,28,43,.14);
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ---- content ---- */
.sp-freq{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.sp-freq b{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1}
.sp-freq.sm b{font-size:22px}
.sp-freq span{font-size:14px;color:var(--ink-2)}
.sp-freq i{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--muted)}
.spill{display:flex;flex-direction:column;gap:9px}
.spl{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) 42px;
  gap:12px;align-items:center}
.spl-n{font-size:13px}
.spl-t{height:7px;border-radius:var(--r-pill);background:var(--wash);overflow:hidden}
.spl-t i{display:block;height:100%;border-radius:var(--r-pill);background:var(--yellow)}
.spl-p{font-size:12.5px;font-weight:700;text-align:right;color:var(--ink-2)}
.spask{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.spask b{flex:1 1 100%;font-size:14px}
.spok{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--promo-good)}
.spchange{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.spchange > b{display:block;margin-bottom:10px;font-size:14px}
.spq{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.chipbtn{padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);font-size:12.5px;color:var(--ink)}
.chipbtn:hover{border-color:var(--ink)}
.spfree input{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-s);font:inherit;font-size:13.5px;margin-bottom:10px}
.scans{margin-top:14px;padding:16px 18px;background:var(--y-15);border-radius:var(--r-l)}
.scans > p{margin:0 0 14px;font-size:13.5px}
.scans-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.scans .hint{margin-top:10px}

.swk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.swc{display:flex;flex-direction:column;gap:5px;padding:14px 15px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-l);text-align:left}
.swc:hover{border-color:var(--ink-2)}
.swc-d{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.swc-f{font-size:11.5px;color:var(--ink-2)}
.swc b{font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.2;margin:2px 0 4px}
.swc-p{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.swc-s{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:700}
.swc-s i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.swc-s.ready i{background:var(--promo-good)}
.swc-s.review i{background:var(--yellow)}
.swc-s.draft i{background:var(--mist)}
.spgen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.spgen .hint{flex:1 1 240px;margin:0}
.spgen #scGen{flex-basis:100%}
.scdone{margin-top:14px;padding:16px 18px;background:var(--y-15);border-radius:var(--r-l)}
.scdone b{display:block;font-size:15px;font-weight:700}
.scdone span{display:block;margin-top:3px;font-size:13px;color:var(--ink-2)}

.smvids{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.smvid{padding:18px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl)}
.smvid-p{display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--wash);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.smvid > b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2;
  margin-bottom:12px}
.smvid-h,.smvid-s{margin-bottom:12px}
.smvid-h span,.smvid-s span{display:block;margin-bottom:4px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.smvid-h p{margin:0;font-size:13.5px;line-height:1.55;font-style:italic}
.smvid-s ol{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.socan{margin:26px 0 0}
.lnk{border:0;background:none;padding:0;font-size:13.5px;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}

/* ---- community ---- */
.subtabs{display:flex;gap:6px;margin:0 0 16px}
.subtabs button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);
  font-size:13px;color:var(--ink-2)}
.subtabs button.on{border-color:var(--ink);color:var(--ink);font-weight:700}
.subtabs i{font-style:normal;min-width:18px;padding:1px 6px;border-radius:var(--r-pill);
  background:var(--y-30);font-size:11px;font-weight:700;color:var(--ink);text-align:center}
.scq{display:flex;flex-direction:column;gap:12px}
.scq-i{padding:16px 18px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l)}
.scq-i.quiet{opacity:.66}
.scq-i.settled{border-color:var(--y-30);background:var(--y-15)}
.scq-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.scq-w{font-size:13px;font-weight:700}
.tagk{padding:2px 8px;border-radius:var(--r-pill);background:var(--wash);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.tagk.lead{background:var(--y-30);color:var(--ink)}
.tagk.medical{background:rgba(226,100,92,.16);color:var(--ink)}
.tagk.complaint{background:rgba(226,100,92,.16);color:var(--ink)}
.scq-on{font-size:11.5px;color:var(--muted)}
.scq-t{margin:0 0 12px;font-size:14px;line-height:1.5}
.scq-d{padding:12px 14px;background:var(--wash);border-radius:var(--r-s)}
.scq-d span{display:block;margin-bottom:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.scq-d p{margin:0;font-size:13.5px;line-height:1.55}
.scq-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.scq-n{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* The reason, folded away. */
.socwhy{margin:12px 0 0}
.socwhy summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2);
  list-style:none}
.socwhy summary::-webkit-details-marker{display:none}
.socwhy summary::after{content:' \2192'}
.socwhy[open] summary::after{content:' \2193'}
.socwhy p,.socwhy ul{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.socwhy ul{padding-left:18px}

/* Title, source and period on one line. The period sits hard right because
   it governs the whole screen, not the sentence next to it. */
.vh-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vh-top h1{margin:0}
.vh-chip{display:inline-flex}
.vh-r{margin-left:auto;position:relative}
.winbtn{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:13.5px;font-weight:500;color:var(--ink)}
.winbtn .ic{width:17px;height:17px;color:var(--muted)}
.winbtn i{font-style:normal;color:var(--muted);line-height:1}
.winmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:190px;
  padding:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:0 18px 40px rgba(23,28,43,.16);
  display:flex;flex-direction:column;gap:2px}
.winmenu button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;
  background:none;border-radius:var(--r-s);font-size:13.5px;color:var(--ink)}
.winmenu button:hover{background:var(--wash)}
.winmenu button.on{background:var(--wash);font-weight:700}
.winmenu .wc-open{border-top:1px solid var(--line);border-radius:0;margin-top:4px;
  padding-top:11px;color:var(--ink-2)}
/* The custom range opens inside the menu rather than in a dialog over it:
   it is a refinement of the choice above it, not a different question. */
.wincustom{padding:10px 12px 12px;border-top:1px solid var(--line);margin-top:4px}
.wincustom label{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;font-size:12.5px;color:var(--muted)}
.wincustom input{padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:13px;color:var(--ink);background:var(--paper)}
.wincustom input:disabled{color:var(--muted);background:var(--wash)}
.wincustom .hint{margin:0 0 10px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.wincustom .btn{width:100%}
/* Overview puts it at the end of the greeting row. */
.ovtop .vh-r{margin-left:auto;position:relative}
.vhead .lede{margin:10px 0 0;max-width:80ch;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* The goal panel on Social. Yellow is the brand's attention colour and it
   is never text, so it carries this the only way it can: a wash behind the
   whole panel and a solid disc behind the mark. The figure is the serif,
   like every other number the product presents as a statement. */
.goalbar{display:flex;align-items:center;gap:18px;margin:0 0 26px;
  padding:20px 24px;border-radius:var(--r-xl);background:var(--y-15)}
.goalbar-i{flex:none;width:54px;height:54px;border-radius:50%;
  background:var(--yellow);color:var(--ink);display:grid;place-items:center}
.goalbar-i svg{width:26px;height:26px;display:block}
.goalbar-k{display:block;margin-bottom:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.goalbar b{display:block;font-family:var(--serif);font-weight:400;font-size:25px;
  line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.goalbar-s{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (max-width:560px){
  .goalbar{gap:14px;padding:18px}
  .goalbar-i{width:44px;height:44px}
  .goalbar-i svg{width:22px;height:22px}
  .goalbar b{font-size:21px}
}

.mkbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin:0 0 22px;padding:16px 20px;border-radius:var(--r-l);
  background:var(--y-15);border:1px solid var(--y-30)}
.mkbar-t{flex:1 1 320px;min-width:0}
.mkbar-t b{display:block;font-weight:700;font-size:15px;line-height:1.3}
.mkbar-t span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.mkbar .btn{flex:none}
.mkbar.off{background:var(--wash);border:1px dashed var(--line-2)}
.mkbar.off .mkbar-t b{color:var(--ink-2)}
.make{margin:0 0 30px}

/* ================================================ NOW  /  WITH SHMEL
   The first screen after onboarding. Two columns that have to read as two
   different worlds at a glance: the left is what they walked in with, flat
   and grey; the right is what SHMEL adds, on the brand ground. The gap is
   carried by weight and ground, not by an invented number. */
.ba{margin:0;padding:0;background:none;box-shadow:none;border:0}
.ba-h{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ba-h h2{flex:1 1 auto;margin:4px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.12;letter-spacing:-.015em}
.ba-h .eyebrow{flex:1 0 100%}
.ba-rows{display:flex;flex-direction:column;gap:2px}
.ba-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2px;align-items:stretch}
.ba-k{grid-column:1/-1;display:flex;align-items:center;gap:8px;
  padding:16px 2px 8px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.ba-now,.ba-nxt{padding:16px 18px;border-radius:var(--r);min-width:0}
.ba-now{background:var(--wash)}
.ba-nxt{background:var(--y-15);border:1px solid var(--y-30)}
.ba-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ba-nxt .ba-lbl{color:var(--ink)}
.ba-now p,.ba-nxt p{margin:0;font-size:14px;line-height:1.55}
.ba-now p{color:var(--ink-2)}
.ba-nxt p b{font-weight:700}
.ba .modelled{margin-top:18px}
.ba .modelled .btn{margin-left:8px;vertical-align:baseline}
@media (max-width:760px){
  .ba{padding:20px 18px}
  .ba-r{grid-template-columns:minmax(0,1fr)}
}

/* The three counted figures. Deliberately the only large type in the panel:
   if a number is big enough to lead with, it has to be one that was counted. */
.ba-sum{display:flex;align-items:flex-start;gap:34px;flex-wrap:wrap;
  margin:0 0 26px;padding:0 0 24px;border-bottom:1px solid var(--line)}
.ba-f{flex:none}
.ba-f b{display:block;font-family:var(--serif);font-weight:400;font-size:2.7rem;
  line-height:1;letter-spacing:-.02em}
.ba-f span{display:block;margin-top:4px;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ba-sum p{flex:1 1 280px;margin:0;align-self:center;
  font-size:13px;line-height:1.55;color:var(--ink-2)}
@media (max-width:760px){.ba-sum{gap:22px}.ba-f b{font-size:2.1rem}}

/* Onboarding runs a 760px column, so the dashboard's auto-fit grid would put
   a 300px minimum against it and leave a ragged last row. Two up, always.
   NB the modifier is `obcards`, not `ob` — `.ob` is the onboarding overlay
   root (position:fixed, inset:0) and reusing it turns this grid into a
   full-screen layer. */
.icards.obcards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:900px){.icards.obcards{grid-template-columns:minmax(0,1fr)}}

/* `.ob h2` (line ~1201) and `.sec-h h2` (line ~960) have equal specificity,
   so the later one wins and every section label inside onboarding rendered
   at page-title size — larger than the screen's own heading. Scoped so the
   label stays a label. */
.ob-body .sec-h h2{font-family:var(--disp);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  line-height:1.2;margin:0}
.ob-body .sec-h{margin:30px 0 12px}

/* Same row as the destructive one, without the warning colouring: this one
   only re-opens a screen. */
.dangerrow.calm{border-color:var(--line)}
.dangerrow.calm span{color:var(--ink-2)}

/* ---- what is wrong ---- */
.ba-iss{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.ba-i{padding:16px 18px;border-radius:var(--r);background:var(--wash);
  border-left:3px solid var(--line-2)}
.ba-i.high{border-left-color:var(--ink)}
.ba-i.medium{border-left-color:var(--y)}
.ba-i-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ba-i .sev,.ba-i .ch{font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.ba-i.high .sev{color:var(--ink)}
.ba-i b{display:block;font-size:14.5px;line-height:1.35;margin-bottom:5px}
.ba-i p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ---- what SHMEL will do ---- */
.ba-do{padding:18px 20px;border-radius:var(--r);background:var(--y-15);
  border:1px solid var(--y-30)}
.ba-do b{display:block;font-size:15px;line-height:1.35;margin-bottom:10px}
.ba-do ul{margin:0;padding-left:18px}
.ba-do li{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* ---- what that is worth ---- */
.ba-worth{padding:20px 22px;border-radius:var(--r-l);background:var(--paper);
  border:1px solid var(--line)}
.bw-pair{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bw-n b{display:block;font-family:var(--serif);font-weight:400;font-size:3.1rem;
  line-height:1;letter-spacing:-.02em}
.bw-n span{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--muted);
  max-width:20ch}
.bw-n.now b{color:var(--grey)}
.bw-ar{font-size:1.6rem;color:var(--grey-mid)}
.bw-n.nxt b{position:relative;display:inline-block;padding:0 6px;
  background:linear-gradient(180deg,transparent 62%,var(--y-55) 62%)}
.bw-d{margin:16px 0 0;font-size:14.5px;line-height:1.5}
.ba-worth .mathbox{margin-top:14px}

/* ---- against the market ---- */
.ba-mkt{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bm-r{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:10px;padding:11px 16px;font-size:13px;align-items:center}
.bm-r + .bm-r{border-top:1px solid var(--line)}
.bm-h{background:var(--wash);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){
  .bw-n b{font-size:2.3rem}
  .bm-r{grid-template-columns:minmax(0,1fr) repeat(3,auto)}
}

/* ==================================================== OVERVIEW, BY CHANNEL
   The paragraph, then a card per channel. Cards are equal weight on purpose:
   the moment one channel gets the big treatment, Overview stops being an
   overview and becomes that channel's screen with others attached. */
/* SHMEL, texting. The bubble is the message, the box under it is the reply
   field, and both feed the one chat thread rather than a second one. */
/* The summary sits above what follows it on the page: its tiles open a
   bubble downwards, and without a stacking order of its own the cards
   further down the document paint straight over it. */
.obr{position:relative;z-index:6;margin:0 0 58px}
.rchip:hover,.rchip:focus-within{z-index:7}
.obr-msg{display:flex;align-items:flex-start;gap:12px}
/* The mascot carries its own colour and its own silhouette, so it sits on
   the page rather than inside a tile — a yellow square behind a yellow bee
   just flattens it. */
/* The same drift the mark has beside the question box on the channel
   screens: Overview's mark is doing the same job. */
.obr-av{width:44px;height:44px;flex:none;display:grid;place-items:center;
  margin-top:-2px;animation:abfloat 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .obr-av{animation:none} }
.obr-av img{width:44px;height:44px;display:block}
.obr-bub{flex:1 1 auto;min-width:0;padding:16px 20px;border-radius:var(--r-l);
  border-top-left-radius:var(--r-s);background:var(--y-15);border:1px solid var(--y-30)}
.obr p{margin:0;font-size:15.5px;line-height:1.6;min-height:1.6em}
/* The caret only exists while the timer is running; the finished paragraph
   never carries it, so a stalled animation cannot leave one behind. */
.obr p.typing::after{content:'';display:inline-block;width:2px;height:1em;
  margin-left:2px;vertical-align:-.13em;background:var(--ink);
  animation:obrCaret .9s steps(1,end) infinite}
@keyframes obrCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.obr-k{display:block;margin-top:10px;font-size:11px;line-height:1.5;color:var(--ink-2)}
/* The one line in the bubble before there is anything to summarise. */
.obr-boot{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.obr-tag{display:inline-block;margin-bottom:9px;font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  background:var(--y-30);border-radius:var(--r-pill);padding:3px 9px}
.obr-ask{display:flex;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--y-30)}
.obr-ask input{flex:1 1 auto;min-width:0;border:1px solid var(--y-30);
  border-radius:var(--r-pill);padding:10px 16px;font-size:14px;
  font-family:inherit;background:var(--paper);color:var(--ink)}
.obr-ask input::placeholder{color:var(--grey-mid)}
.obr-ask input:focus{outline:none;border-color:var(--ink)}
.obr-ask .btn{flex:none}
.obr.loading{display:flex;align-items:center;gap:10px;padding:18px 20px;
  border-radius:var(--r-l);background:var(--wash);
  border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .obr p.typing::after{display:none}
}

/* Masonry on a grid, not on CSS columns. Columns packed the cards tightly
   but pushed any card that did not fit the remaining space into the next
   column and left a hole where it had been — which is how the Social card
   ended up 700px from where it was meant to be. Here every card stays in
   DOM order and claims a whole number of 8px rows sized to its own height,
   so the row under it closes up and nothing is ever displaced.
   The span is set in JS; this is the frame it fills. */
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  grid-auto-rows:8px;column-gap:14px;margin:0 0 34px;align-items:start}
.chgrid > .chc{margin:0 0 14px;grid-row-end:span 40}
/* The cards' row span is set in JS once their content is measured. The
   boot placeholders never get that far, so they claim a card's worth of
   8px rows here — otherwise each one occupies a single row and the three
   of them overflow onto the To do heading underneath. */
.chgrid > .skel{grid-row-end:span 14;height:auto;align-self:stretch;margin:0 0 14px}
.chc{display:flex;flex-direction:column;padding:18px 20px;border-radius:var(--r-l);
  background:var(--paper);border:1px solid var(--line);
  /* Deeper than the default card shadow: these sit on a near-white page and
     the old one left them floating without an edge. Still built from the
     ink value at low opacity, not a new grey. */
  box-shadow:0 1px 2px rgba(23,28,43,.05),
             0 8px 20px -10px rgba(23,28,43,.22),
             0 26px 48px -28px rgba(23,28,43,.26)}
/* Not live is now three signals at once: a dashed edge, a darker edge than a
   live card's, and a tint. It used to be the dash alone, which on a white
   page beside white cards was easy to read straight past.
   The tint was ruled out once, when the brand logos were opaque PNGs whose
   white backing showed as a pale rectangle on anything but white. They are
   transparent webp now — checked, alpha 0 at the corners — so the ground is
   free again. Put an opaque logo back and this comes back with it.
   Depth stays: these were the only cards on the page with none. */
.chc.off{background:rgba(160,162,168,.10);border-style:dashed;
  border-color:rgba(160,162,168,.55);
  box-shadow:0 1px 2px rgba(23,28,43,.04),
             0 6px 16px -10px rgba(23,28,43,.16)}
.chc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.chc-m{min-width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--ink-2)}
.chc-m img,.chc-m svg{width:22px;height:22px;display:block}
.chc-h b{font-size:15px;font-weight:700;line-height:1.2}
.chc-h .chip{flex:none}
.chc-f{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.chc-f > div{min-width:58px}
.chc-f b{display:block;font-size:20px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.chc-f span{display:block;margin-top:2px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.chc-w{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.chc-g{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.chc-g i{font-style:normal;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  font-size:10px;margin-right:6px}
.chc-a{margin-top:auto;padding-top:14px}

/* ===================================================== FINDINGS, ITS OWN SCREEN
   Shown once, between the promo and the product. It is not a panel on the
   dashboard: the dashboard is a place you work, and this is a thing you read
   before deciding to. Full bleed, its own scroll, one way out at the bottom. */
/* The class sets display:flex, which beats the browser's own
   [hidden]{display:none} — without this rule the screen stays on screen
   after it is hidden. .intro and .ob each carry the same line. */
.fnd[hidden]{display:none}
.fnd{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  background:var(--paper)}
.fnd-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.fnd-body{max-width:1000px;margin:0 auto;padding:clamp(34px,5vw,64px) clamp(20px,4vw,48px) 40px}
.fnd-foot{flex:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px clamp(20px,4vw,48px);border-top:1px solid var(--line);
  background:var(--paper)}
.fnd-foot span{flex:1 1 auto;font-size:12.5px;color:var(--muted)}
body.noscroll{overflow:hidden}
/* The screen has one way out, at the bottom. The in-panel dismiss was a
   second one in a different place, which is why it is hidden here. */
.fnd .ba-h .btn{display:none}
@media (max-width:760px){
  .fnd-foot{padding:12px 18px}
  .fnd-foot span{flex:1 1 100%;order:2}
}

/* The mark sat low in its square: an inline <img> rests on the text baseline,
   so the line-box descender pushed it down and it read as cropped. The rail's
   mark has always set display:block; this one did not. */
.chat-mk img{display:block}
.chat-h > div{min-width:0}

/* The pill is a label, not a paragraph: it wrapped to two lines whenever the
   top bar got tight, which turned "7 to do" into a stacked numeral. */
.waiting{white-space:nowrap;flex:none}

/* The drawer header now shows the same mascot that writes the summary, so
   the two read as one voice. It is a full illustration, not a glyph: the
   yellow tile behind it both clipped it and flattened yellow on yellow. */
.chat-mk{width:40px;height:40px;background:none;border-radius:0}
.chat-mk img{width:40px;height:40px;display:block}

/* ---- period control, sitting beside the greeting ---- */
.ovtop{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:22px}
.ovtop .greet{margin:0}
.ovtop .seg{flex:none;margin-bottom:6px}

/* ---- the card's own chart ---- */
.chc-c{position:relative;margin:0 0 14px}
.mch{display:block;width:100%;height:46px;overflow:visible}
.mch-a{fill:var(--y-30);stroke:none}
/* The line is the brand yellow at full strength; the area under it is the
   same yellow at 30%. One colour, two weights — the grey outline read as a
   different chart sitting on top of the fill. It stays at 2px: the fill
   directly underneath is the closest thing to it on the card, and the
   weight is what separates them. */
.mch-l{fill:none;stroke:var(--yellow);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mch-d{fill:var(--yellow)}
.chc-cl{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

/* ---- resizable Ask SHMEL panel ---- */
.chat-grip{position:absolute;left:0;top:14px;bottom:0;width:8px;cursor:ew-resize;
  z-index:2;touch-action:none;background:transparent}
.chat-grip-t{position:absolute;left:14px;right:0;top:0;height:8px;cursor:ns-resize;
  z-index:2;touch-action:none;background:transparent}
.chat-corner{position:absolute;left:0;top:0;width:16px;height:16px;
  cursor:nwse-resize;z-index:3;touch-action:none;background:transparent}
.chat-grip::before{content:'';position:absolute;left:3px;top:50%;
  width:2px;height:38px;margin-top:-19px;border-radius:2px;
  background:var(--line-2);opacity:0;transition:opacity .18s var(--ease)}
.chat-grip-t::before{content:'';position:absolute;top:3px;left:50%;
  height:2px;width:38px;margin-left:-19px;border-radius:2px;
  background:var(--line-2);opacity:0;transition:opacity .18s var(--ease)}
/* The corner mark was drawn as a square bracket at 5,5 while the panel's
   own corner is rounded, so it sat outside the curve and read as a stray
   artefact. It now follows the same radius and, like the edge grips, only
   appears on hover — a permanent mark on a corner is noise. */
/* Always visible, unlike the edge grips: it is the one mark that tells you
   the panel can be resized at all, and an affordance you have to hover to
   discover is an affordance nobody discovers. */
.chat-corner::before{content:'';position:absolute;left:6px;top:6px;
  width:12px;height:12px;border-left:2px solid var(--line-2);
  border-top:2px solid var(--line-2);border-top-left-radius:8px;
  transition:border-color .18s var(--ease)}
.chat-corner:hover::before,.chat-corner:focus-visible::before{border-color:var(--ink)}
.chat-grip:hover::before,.chat-grip:focus-visible::before,
.chat-grip-t:hover::before,.chat-grip-t:focus-visible::before{opacity:1}
.chat-grip:focus-visible,.chat-grip-t:focus-visible,.chat-corner:focus-visible{
  outline:2px solid var(--ink);outline-offset:-2px}
/* While dragging, stop the page from selecting text under the cursor and
   kill the panel's own transition so the edge tracks the pointer exactly. */
body.resizing{user-select:none;cursor:ew-resize}
body.resizing .chat{transition:none}

/* ---- Settings tabs ---- */
.tabs{display:flex;gap:4px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;padding:10px 16px;font-family:inherit;
  font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--y)}
/* Arrow keys move the selection between tabs and focus goes with it, so a
   ring would be drawn on every press. The selected tab is already marked by
   its underline, which is the thing the reader is watching. Same rule the
   Social and channel tab rows use. */
.tabs button:focus,.tabs button:focus-visible{outline:none}
.tabpane{display:none}
.tabpane.on{display:block}

/* Marks that are solid shapes, not line drawings. The Google Ads mark is two
   angled bars and a circle; drawn as an outline it read as a paperclip. The
   rail's default is stroke-only, so these opt out of it. */
.rail nav button .ic.solid{fill:currentColor;stroke:none}

/* .sec buttons are in the same nav, so the solid rule has to reach them too. */
.rail nav button.sec .ic.solid{fill:currentColor;stroke:none}

/* ---- account menu on the sidebar card ---- */
.whowrap{position:relative;margin-top:auto}
.rail-who{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  border-radius:var(--r-s);transition:background .18s var(--ease)}
.rail-who:hover{background:rgba(255,255,255,.06)}
.rail-who:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.whoc{width:16px;height:16px;margin-left:auto;flex:none;stroke:currentColor;
  fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  color:rgba(237,237,237,.6);transition:transform .18s var(--ease)}
.rail-who[aria-expanded="true"] .whoc{transform:rotate(180deg)}
.whomenu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:4;
  background:var(--paper);border-radius:var(--r);box-shadow:0 12px 34px rgba(23,28,43,.28);
  padding:6px;display:flex;flex-direction:column;gap:2px}
.whomenu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--r-s);padding:9px 11px;
  font-family:inherit;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer;
  transition:background .15s var(--ease)}
.whomenu button:hover{background:var(--wash)}
.whomenu button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.whomenu svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Meta's mark is a ribbon, so it is drawn as a stroke: a filled silhouette
   loses the two openings that make it readable at all, and at 18px it
   collapses into a blob. currentColor keeps it black on the yellow selected
   row and light on the dark rail. */
.rail nav button .ic.meta{stroke-width:2.5;fill:none}

.whomenu button[disabled]{opacity:.45;cursor:not-allowed}
.whomenu button[disabled]:hover{background:none}

/* Google Ads is not its brand mark here. Three coloured shapes carry that
   logo; flattened to one colour they merge, and every monochrome version of
   it read as a paperclip or a blob. A click cursor says paid search, and it
   does not collide with the magnifier that SEO already uses. */

/* Two actions on a card that has something to connect. */
.chc-a{display:flex;gap:8px;flex-wrap:wrap}

/* The mascot sat right on the panel's rounded corner and the resize grip,
   so its left edge was clipped by the radius and it read as escaping the
   window. Give the header room to clear both. */
.chat-h{padding:20px 20px 17px 24px}
.chat-mk{width:34px;height:34px}
.chat-mk img{width:34px;height:34px}

/* A real gear outline: eight teeth generated on tip/root radii. Rounded
   joins are what stop the tooth corners reading as spikes at 18px. */
.rail nav button .ic.gear{stroke-width:1.6;stroke-linejoin:round;fill:none}

/* ---- cost against what the clinic can afford ---- */
.cgauge{margin:2px 0 0}
.cg-r{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;
  align-items:center;margin-bottom:9px}
.cg-r:last-of-type{margin-bottom:0}
.cg-k{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted)}
.cg-b{height:5px;border-radius:var(--r-pill);background:var(--wash);overflow:hidden}
.cg-b i{display:block;height:100%;border-radius:var(--r-pill)}
/* Mist, the lightest of the seven. The bar inside the goal is context, not
   the message: it should sit behind the yellow, not compete with it. A 5px
   solid still reads at this value against the wash track. */
.cg-ok{background:var(--mist)}
/* Flat yellow. The glow lives on the hazard triangle alone — two things
   pulsing in the same small block competed with each other. */
.cg-over{background:var(--y)}
.cg-v{font-size:14px;font-weight:700;line-height:1}
.cg-d{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  margin-top:2px}
.cg-d.good{color:var(--muted);font-weight:400}
@media (max-width:420px){
  .cg-r{grid-template-columns:62px minmax(0,1fr) auto;gap:8px}
}

/* ---- to-do card, stripped ---- */
.deck-in > .deck-name{display:block;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.deck-in h3{margin:0 0 14px;font-family:var(--disp);font-weight:700;
  font-size:17px;line-height:1.35;letter-spacing:-.005em}
/* Inline-flex, not flex: the white ground belongs to the figure, not to
   the width of the card. Stretched edge to edge it read as an empty panel
   with a number parked at one end. */
.deck-one{display:inline-flex;vertical-align:top;max-width:100%;
  align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:12px 14px;border-radius:var(--r);background:var(--paper)}
.deck-one .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.deck-one b{font-size:20px;font-weight:700;line-height:1}
.deck-one .was{font-size:12.5px;color:var(--muted)}
.deck-one .chg{font-size:12.5px;font-weight:700}

/* The paying bar carries two segments: within the goal, and past it. */
.cg-b.cg-split{display:flex}
.cg-b.cg-split i{border-radius:0}
.cg-b.cg-split i:first-child{border-top-left-radius:var(--r-pill);
  border-bottom-left-radius:var(--r-pill)}
.cg-b.cg-split i:last-child{border-top-right-radius:var(--r-pill);
  border-bottom-right-radius:var(--r-pill)}
.cg-d{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
/* No container and no pills: the warning is the hazard triangle, and the
   numbers are just numbers beside it. Yellow is the brand's own colour AND
   the colour every hazard sign on earth already uses, so the flag reads as
   a warning without a red being invented for it. */
.cg-d.flagged{padding:0;border:0;background:none;gap:9px}
/* The glow lives on the <svg>, not on the <path>. A filter on an SVG child
   is clipped to that child's filter region \u2014 only a fifth wider than the
   glyph \u2014 so the halo was being cut off almost entirely. On the element
   itself, with overflow visible, it has room to spread. */
/* A text box with line-height:1 centres on its em box, but the eye reads
   the x-height, which sits lower — so a centred glyph beside it looks high.
   The nudge puts the triangle on the same optical line as the numbers. */
.cg-haz{width:17px;height:17px;flex:none;overflow:visible;position:relative;
  top:-1px;animation:hazGlow 1.8s ease-in-out infinite}
.cg-haz .haz-f{fill:var(--y);stroke:none}
@keyframes hazGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(249,224,97,.85))}
  50%{filter:drop-shadow(0 0 7px rgba(249,224,97,1))
             drop-shadow(0 0 15px rgba(249,224,97,.85))}
}
@media (prefers-reduced-motion:reduce){
  .cg-haz{animation:none;filter:drop-shadow(0 0 6px rgba(249,224,97,.9))}
}
.cg-haz .haz-m{stroke:var(--white);stroke-width:2.1;stroke-linecap:round;fill:none}
.cg-haz .haz-d{fill:var(--white)}
/* One line, one size: the numbers and the label were different sizes, so
   centring them left their baselines apart and the row read as crooked. */
.cg-num{font-size:13.5px;font-weight:700;line-height:1;color:var(--ink)}
.cg-t{font-size:13.5px;line-height:1;color:var(--ink-2)}
.cg-t.good{color:var(--muted)}


/* What the clinic told us, shown as facts on file rather than as numbers. */
.chc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chc-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;
  border-radius:var(--r-pill);background:var(--wash);
  font-size:12px;font-weight:700;color:var(--ink-2)}
.chc-tag svg{width:14px;height:14px;flex:none}

/* ---- reorderable cards ---- */
.chc{position:relative}
/* The grip is the only thing that says a card can be moved. It stays quiet
   until the pointer is on the card, so eight cards do not each carry a
   permanent handle. */
.chc-grip{position:absolute;top:10px;right:10px;display:grid;
  grid-template-columns:repeat(2,3px);gap:3px;padding:4px;
  opacity:0;transition:opacity .16s var(--ease);cursor:grab}
.chc-grip i{display:block;width:3px;height:3px;border-radius:50%;
  background:var(--grey-mid)}
.chc:hover .chc-grip{opacity:1}
.chc.dragging{opacity:.4}
.chc.dragging .chc-grip{cursor:grabbing}
/* While a card is in flight nothing else should react to the pointer, or
   hovering a neighbour re-runs its own hover styles mid-drag. */
body.carddrag .chc{transition:none}
body.carddrag .chc:hover .chc-grip{opacity:0}
body.carddrag{cursor:grabbing}
@media (prefers-reduced-motion:reduce){
  .chc-grip{transition:none}
}

/* Four metrics on one line, at the SAME size as a card with three. A metric
   that shrinks because there happen to be four of it reads as less
   important, which is not what the count means. The room comes from the
   gap and from labels that do not wrap. */
.chc-f.many{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.chc-f.many > div{min-width:0}
.chc-f.many span{letter-spacing:.04em;white-space:nowrap}
/* Same size as every other card while there is room for it. A container
   query, not a media query: what decides is the width of this card, not the
   width of the window — the same card is wide on one screen and narrow on
   another depending on how many columns the grid made. */
.chc{container-type:inline-size}
@container (max-width: 320px){
  .chc-f.many{gap:4px}
  .chc-f.many b{font-size:16px}
  .chc-f.many span{font-size:9px}
}

/* ---- chart hover read-out ---- */
.mchw{position:relative;line-height:0;cursor:crosshair}
.mch-rule{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2);
  pointer-events:none;transform:translateX(-.5px)}
.mch-pt{position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--slate);border:2px solid var(--paper);pointer-events:none;
  transform:translate(-50%,-50%)}
.mch-tip{position:absolute;bottom:calc(100% + 6px);display:flex;flex-direction:column;
  gap:1px;padding:6px 9px;border-radius:var(--r-s);background:var(--ink);
  color:var(--white);white-space:nowrap;pointer-events:none;z-index:3;
  transform:translateX(6px);line-height:1.25}
.mch-tip.flip{transform:translateX(calc(-100% - 6px))}
/* One row per series: the label on the left, its figure on the right, and
   the dot in the series' own colour so the row and the line match. */
.mch-l{display:flex;align-items:center;gap:10px;font-style:normal;margin-top:3px}
.mch-l em{display:flex;align-items:center;gap:6px;font-style:normal;font-size:11px;
  color:rgba(255,255,255,.72)}
.mch-l em::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--mist)}
.mch-l.sp em::before{background:var(--yellow)}
.mch-l.rev em::before{background:var(--white)}
.mch-l.book em::before{background:var(--mist)}
.mch-l b{margin-left:auto;font-size:12.5px;font-weight:700}
.mch-tip b{font-size:13px;font-weight:700}
/* "2 of 17": the second number is the context, not the reading. */
.mch-tip b em{font-style:normal;font-weight:600;opacity:.6}
.mch-tip span{font-size:10.5px;opacity:.72}

/* ---- a tighter to-do card ---- */
.deck-in > .deck-name{margin-bottom:5px;font-size:10px}
.deck-in h3{margin:0 0 10px;font-size:15.5px;line-height:1.3}
.deck-one{margin:0 0 12px;padding:9px 12px;gap:8px}
.deck-one b{font-size:17px}
.deck-one .k{font-size:9.5px}
.deck-one .was,.deck-one .chg{font-size:11.5px}
.deck-act .btn{padding:8px 15px;font-size:13px}

/* ---- to-do card: which campaign, what to do, why ---- */
.deck-why{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  background:none;padding:0;border-radius:0}

/* A settled card is a control, not a dead row: the whole line puts it back. */
.deck-undo{display:inline-flex;align-items:center;gap:8px;background:none;
  border:0;padding:0;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--muted);cursor:pointer}
.deck-undo i{width:7px;height:7px;border-radius:50%;background:var(--mist);flex:none}
.deck.approved .deck-undo i{background:var(--y)}
.deck-undo span{font-weight:400;color:var(--grey-mid);
  border-bottom:1px dashed var(--line-2)}
.deck-undo:hover span{color:var(--ink);border-bottom-color:var(--ink)}
.deck-undo:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-s)}
/* Settled cards shrink: they are a record, not a queue item. */
.deck.done .deck-in{padding:12px 18px}
.deck.done h3{font-size:14px;margin:0 0 7px}

/* The one figure worth calling out, beside the name where the "not live"
   chip sits on the cards that have nothing to report. Yellow, not green:
   the palette has seven values and green is not one of them. */
.chc-win{flex:none;font-size:13px;font-weight:700;line-height:1;
  padding:6px 11px;border-radius:var(--r-pill);
  background:var(--y-30);color:var(--ink);font-variant-numeric:tabular-nums}

.rchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin:0}
/* ---- what SHMEL has delivered ----
   Four figures the clinic can point at. They come from the DEMO account the
   rest of the screen is showing; the top bar carries the label. */
.rchip{position:relative;padding:14px 16px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--y-30)}
.rchip b{display:block;font-size:21px;font-weight:700;line-height:1.05;
  letter-spacing:-.02em}
.rchip span{display:block;margin-top:5px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
/* The summary tiles lift like every other card, and each one says where its
   figure comes from while the pointer is on it. */
.rchip{transition:transform .18s var(--ease),box-shadow .18s var(--ease);cursor:default}
.rchip:hover,.rchip:focus-visible{transform:translateY(-3px) scale(1.012);
  box-shadow:0 2px 8px rgba(23,28,43,.07),0 18px 40px -20px rgba(23,28,43,.26)}
.rchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The note sits above the tile it explains, as a frosted panel rather than
   a black block: this band is pale yellow, and a slab of ink on it reads as
   an error. The selector carries the tile's class so the uppercase the tile
   sets on its own label does not leak into the sentence. */
.rchip .rwhy{position:absolute;left:50%;top:auto;bottom:calc(100% + 14px);
  transform:translateX(-50%) translateY(-4px);
  width:max-content;max-width:min(232px,68vw);padding:11px 13px;border-radius:14px;
  background:rgba(84,90,104,.62);backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 14px 34px -18px rgba(23,28,43,.45);
  color:rgba(255,255,255,.94);text-transform:none;letter-spacing:0;font-weight:400;
  font-size:11.5px;line-height:1.5;text-align:left;opacity:0;visibility:hidden;
  z-index:8;transition:opacity .14s,transform .14s;margin:0}
/* The pointer can travel onto the bubble and it stays open; it closes when
   the pointer leaves both. The strip below bridges the gap between the tile
   and the bubble, or the gap above it when the bubble opens downwards. */
.rchip .rwhy::before{content:'';position:absolute;left:0;right:0;top:100%;height:16px}
.rchip.down .rwhy::before{top:auto;bottom:100%}
/* The tail, so it reads as something said about the tile under it rather
   than a panel that happens to be nearby. */
.rchip .rwhy::after{content:'';position:absolute;left:50%;top:100%;
  transform:translateX(-50%);width:0;height:0;
  border:9px solid transparent;border-top-color:rgba(84,90,104,.62);border-bottom:0}
.rchip:hover .rwhy,.rchip:focus-visible .rwhy{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.rchip .rwhy b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:5px}
@media (prefers-reduced-motion:reduce){
  .rchip:hover,.rchip:focus-visible{transform:none}
  .rchip:hover .rwhy,.rchip:focus-visible .rwhy{transform:translateX(-50%)}
}

/* ---- compliance ---- */
.cmp-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px;margin:0 0 22px}
.cmp-s{padding:14px 16px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line)}
.cmp-s b{display:block;font-size:24px;font-weight:700;line-height:1}
.cmp-s span{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.cmp-s.warn{border-color:var(--y-30);background:var(--y-15)}
.cmp-s.bad{border-color:var(--ink)}
.cmp-list{display:flex;flex-direction:column;gap:10px}
.cmp-r{padding:15px 18px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--line-2)}
.cmp-r.review{border-left-color:var(--y)}
.cmp-r.blocked{border-left-color:var(--ink)}
.cmp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cmp-ch{font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.cmp-fix{font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:3px 8px;border-radius:var(--r-pill);background:var(--y-30);color:var(--ink)}
.cmp-t{margin:0;font-size:14.5px;line-height:1.45}
.cmp-i{margin:10px 0 0;padding-left:18px}
.cmp-i li{font-size:13px;line-height:1.5;color:var(--ink-2)}
.cmp-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cmp-rule{padding:12px 14px;border-radius:var(--r);background:var(--wash)}
.cmp-rule b{display:block;font-size:13.5px}
.cmp-rule span{display:block;margin-top:3px;font-size:11px;color:var(--muted)}

/* Who does the work, on every to-do card. */
.deck-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.deck-in > .deck-top > .deck-name{margin-bottom:0}
.deck-who{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--white)}
/* Manual reads as the quieter of the two: it is the exception, and the
   default is that SHMEL does the work. */
.deck-who.manual{background:none;color:var(--muted);
  border:1px solid var(--line-2)}
.deck.done .deck-who{background:var(--line);color:var(--muted)}
.deck.done .deck-who.manual{background:none}

/* The band arrives one chip at a time. `in` is added by JS after the value
   is already in the DOM, so a pane that never runs the script still shows
   four readable figures rather than four invisible ones. */
/* Same gate as the channel cards: no `.staged`, no hidden start. */
.rchip{opacity:1;transform:none;transition:opacity .34s var(--ease),transform .34s var(--ease)}
.rchips.staged .rchip:not(.in){opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){
  .rchips.staged .rchip:not(.in){opacity:1;transform:none}
}

/* The card leaves before the network answers. Down for a decision (it is
   going to the settled list below), up for an undo (it is going back to
   the queue above). */
@keyframes deckLeave{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(26px) scale(.985)}
}
@keyframes deckReturn{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-26px) scale(.985)}
}
.deck.leaving{animation:deckLeave .24s var(--ease) forwards;pointer-events:none}
.deck.returning{animation:deckReturn .24s var(--ease) forwards;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .deck.leaving,.deck.returning{animation:none;opacity:.35}
}

/* Only the figure carries the yellow; the label reads like every other
   label on the card. */

/* SHMEL writing. Three dots on the same ground as the figures that replace
   them, so the block does not jump when they land. */
.obr-typing{display:inline-flex;align-items:center;gap:6px;
  padding:18px 20px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--y-30)}
.obr-typing i{width:7px;height:7px;border-radius:50%;background:var(--grey-mid);
  animation:obrDot 1.15s ease-in-out infinite}
.obr-typing i:nth-child(2){animation-delay:.16s}
.obr-typing i:nth-child(3){animation-delay:.32s}
@keyframes obrDot{
  0%,80%,100%{opacity:.3;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .obr-typing i{animation:none;opacity:.6}
}

/* The campaign name moved inside .deck-top, so the rules that styled it as
   a direct child of .deck-in stopped matching and the original
   `.deck-name{margin-left:auto}` — written when the name sat to the RIGHT of
   a severity tag — pushed it across the card. It is an eyebrow now: first
   thing, left, quiet. */
.deck-in > .deck-top > .deck-name{margin-left:0;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.deck-in > .deck-top{margin-bottom:6px}
/* Who does it sits at the far end of the same line. */
.deck-in > .deck-top > .deck-who{margin-left:auto}

/* Channel cards arrive one at a time. `in` is added by script once the card
   is already in the DOM, so without it running the cards are simply there. */
/* The hidden start is gated on `.staged`, which the script adds ONLY when it
   is actually going to animate. Without that gate the cards are laid out at
   opacity 0 and rely on a transition to bring them back — and a transition
   in a hidden pane never advances, so they stay invisible forever. Whoever
   cannot animate never sees the hidden state at all. */
.chc{transition:opacity .36s var(--ease),transform .36s var(--ease)}
.chgrid.staged > .chc:not(.in){opacity:0;transform:translateY(10px) scale(.99)}
@media (prefers-reduced-motion:reduce){
  .chgrid.staged > .chc:not(.in){opacity:1;transform:none}
}

/* Action first, then what it applies to. */
.deck-in > .deck-top{align-items:baseline;margin-bottom:4px}
.deck-in > .deck-top > h3{margin:0;flex:1 1 auto;min-width:0}
.deck-in > .deck-top > .deck-who{margin-left:auto;align-self:flex-start;
  position:relative;top:1px}
.deck-in > .deck-name{display:block;margin:0 0 10px;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}

/* The "not live" chip on a channel card is context, not a warning: it sits
   beside a name the reader is scanning past. A step lighter on the text,
   the border and the dot. Scoped to the cards so the same chip stays as it
   is everywhere else it appears. */
.chc-h .chip.nodata{color:var(--grey-mid);border-color:var(--line)}
.chc-h .chip.nodata i{background:var(--line)}

/* ---- the wait, while SHMEL writes ---- */
.bee-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px;border-radius:var(--r-l);background:var(--paper);
  border:1px solid var(--line)}
.bee-head{display:flex;align-items:baseline;justify-content:space-between;
  width:100%;gap:16px}
.bee-head b{font-size:14px;font-weight:700}
.bee-score{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.bee-score i{font-style:normal;font-size:15px;color:var(--ink);
  margin-left:6px;font-variant-numeric:tabular-nums}
#beeCanvas{border-radius:var(--r);background:var(--wash);max-width:100%}
.bee-foot{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* ---- the Done rule, and dragging a to-do across it -------------------
   The queue and the answered list used to be separated by nothing but the
   fact that the answered ones were struck through. Once a card can be
   dragged from one group to the other, the boundary has to be something
   you can aim at — so it is a real element, and it is also the drop
   target. Below it means answered; above it means back in the queue. */
.deck-split{display:flex;align-items:center;gap:12px;margin:12px 0 2px;
  opacity:0;animation:rise .55s var(--ease) forwards}
.deck-split span{font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.deck-split::after{content:"";flex:1;height:1px;background:var(--line)}
/* With nothing under it the rule is an empty drop zone, so it looks like
   one rather than like a heading whose section failed to render. */
.deck-split[data-empty]{min-height:42px;padding:0 14px;margin:14px 0 0;
  border:1px dashed var(--line-2);border-radius:var(--r-s)}
.deck-split[data-empty]::after{display:none}

.deck{cursor:grab}
.deck button{cursor:pointer}
.deck.dragging{opacity:.4;cursor:grabbing}
body.deckdrag{cursor:grabbing}
/* Nothing else should react to the pointer while a card is in flight, or
   passing over a neighbour re-runs that neighbour's hover styles. */
body.deckdrag .deck{transition:none}
/* While dragging, the rule is the thing being aimed at, so it steps
   forward instead of staying a hairline. */
body.deckdrag .deck-split{min-height:42px;padding:0 14px;
  border:1px dashed var(--grey-mid);border-radius:var(--r-s)}
body.deckdrag .deck-split::after{display:none}
@media (prefers-reduced-motion:reduce){
  .deck-split{animation:none;opacity:1}
}

/* ---- the clinic switcher in the account menu ------------------------
   Instagram's shape, because it is the one people already know: the
   accounts you have, the one you are in ticked, and the way to add
   another. The rows are taller than the two menu items below them on
   purpose — they are places, not commands. */
.who-list{display:flex;flex-direction:column;gap:2px}
.who-rule{height:1px;background:var(--line);margin:6px 4px}
.whomenu .who-cl{gap:11px;padding:8px 10px;align-items:center}
.who-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--white);font-size:11px;font-weight:700;letter-spacing:.02em}
.who-av.plus{background:none;border:1px dashed var(--line-2);color:var(--muted);
  font-size:17px;font-weight:400;line-height:1}
.who-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.who-t b{font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-t span{font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The tick is drawn rather than set as a glyph so it keeps its weight at
   any zoom and cannot fall back to a different font's check. */
.who-tick{margin-left:auto;flex:none;width:16px;height:16px;border-radius:50%;
  background:var(--yellow);position:relative}
.who-tick::after{content:"";position:absolute;left:5px;top:4px;width:4px;height:7px;
  border:1.8px solid var(--ink);border-top:0;border-left:0;transform:rotate(42deg)}
.whomenu .who-cl.on{background:var(--wash)}

/* ---- Settings: the identity card ------------------------------------
   Settings opened on five grey boxes of form fields, which is what a
   settings screen looks like when nobody decided what it opens with. It
   opens on the clinic now: the mark, the name, and what SHMEL holds on
   it. The yellow is the only yellow on the screen, which is why it can
   carry the whole header. */
.idcard{display:flex;align-items:center;gap:20px;position:relative;
  background:linear-gradient(120deg,rgba(249,224,97,.30),rgba(249,224,97,.08) 62%,var(--white));
  border:1px solid rgba(249,224,97,.55);border-radius:var(--r-l);
  padding:22px 24px;margin:0 0 20px;box-shadow:var(--sh-card)}
.id-badge{position:relative;width:74px;height:74px;flex:none;border-radius:var(--r-l);
  background:var(--white);border:1px solid rgba(23,28,43,.10);display:grid;place-items:center;
  overflow:visible;box-shadow:0 2px 10px rgba(23,28,43,.10)}
.id-badge img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-l);padding:7px}
.id-in{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:.02em;color:var(--ink)}
/* The pencil sits on the corner of the mark, the way every avatar people
   already know does it. */
.id-edit{position:absolute;right:-7px;bottom:-7px;width:27px;height:27px;border-radius:50%;
  border:1px solid rgba(23,28,43,.12);background:var(--ink);color:var(--white);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:transform .15s var(--ease)}
.id-edit:hover{transform:scale(1.08)}
.id-edit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.id-t{min-width:0;display:flex;flex-direction:column;gap:4px}
.id-t > b{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.05;letter-spacing:-.01em}
.id-t > span{font-size:13px;color:var(--slate)}
.id-clear{position:absolute;top:14px;right:16px}
@media (max-width:640px){
  .idcard{flex-direction:column;align-items:flex-start;gap:14px}
  .id-clear{position:static;align-self:flex-start}
}

/* The rail avatar carries the logo once there is one. */
.rail-who .av img{width:100%;height:100%;object-fit:contain;border-radius:inherit;
  background:var(--white);padding:3px}

/* ---- Settings → History: one log, grouped by day --------------------
   Two sections used to answer one question between them: a stack of copy
   cards and a list of times with no date on any of them. One timeline,
   newest first, and the detail stays behind a chevron so the log reads as
   a log rather than as a wall. */
.hday{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.hday:first-child{margin-top:2px}
.hrow{border-bottom:1px solid var(--paper-2)}
.hr-h{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;
  background:none;border:0;padding:11px 8px;font-family:inherit;font-size:14px;color:var(--ink);
  border-radius:var(--r-s);transition:background .14s var(--ease)}
button.hr-h{cursor:pointer}
button.hr-h:hover{background:var(--wash)}
button.hr-h:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.hr-t{flex:0 0 58px;font-size:12.5px;color:var(--muted)}
.hr-k{flex:0 0 96px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate)}
.hr-k.approved,.hr-k.executed{color:var(--ink)}
.hr-x{flex:1 1 auto;min-width:0;line-height:1.5}
/* "Read more" in words rather than a lone chevron: a chevron on some rows
   and not others reads as a rendering fault, not as an invitation. */
.hr-more{flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  font-size:12px;font-weight:700;color:var(--slate);white-space:nowrap}
button.hr-h:hover .hr-more{color:var(--ink)}
.hr-c{flex:none;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s var(--ease)}
.hrow.open .hr-c{transform:rotate(225deg) translateY(-2px)}
.hr-d{padding:2px 8px 16px 168px}
.hd-copy{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  background:var(--paper);border-radius:var(--r-s);padding:12px 14px}
.hd-m{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
@media (max-width:720px){
  .hr-h{flex-wrap:wrap;gap:6px 12px}
  .hr-x{flex:1 1 100%}
  .hr-d{padding-left:8px}
}

/* ---- the first-run tour ---------------------------------------------
   The dim is one element: a box the size of the thing being explained,
   with a box-shadow large enough to cover any screen. Everything outside
   the box is darkened, everything inside it is not, and there is no mask,
   no overlay stack and nothing to keep in sync. */
.tour{position:fixed;inset:0;z-index:120}
.tour-hole{position:fixed;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(23,28,43,.66);
  outline:2px solid var(--yellow);outline-offset:0;
  transition:top .28s var(--ease),left .28s var(--ease),
             width .28s var(--ease),height .28s var(--ease)}
.tour-tip{position:fixed;background:var(--white);border-radius:var(--r-l);
  padding:18px 20px 16px;box-shadow:0 18px 50px rgba(23,28,43,.34);
  display:flex;flex-direction:column;gap:8px}
.tr-top{display:flex;align-items:center;gap:10px}
.tr-k{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);background:var(--yellow);border-radius:var(--r-pill);
  padding:4px 10px;align-self:flex-start;margin-right:auto}
.tr-n{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);white-space:nowrap}
.tour-tip b{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;
  letter-spacing:-.01em}
.tour-tip p{margin:0;font-size:13.5px;line-height:1.6;color:var(--slate)}
.tr-f{display:flex;align-items:center;gap:8px;margin-top:6px}
.tr-d{display:flex;gap:5px;margin-right:auto}
.tr-d i{width:6px;height:6px;border-radius:50%;background:var(--line-2);display:block}
.tr-d i.on{background:var(--ink);width:16px;border-radius:var(--r-pill)}
/* Nothing underneath is clickable while the tour is up — the .tour layer
   covers the page and swallows the clicks. It deliberately does NOT set
   overflow:hidden on the body: the tour scrolls the page itself to bring
   each target into view, and a locked body silently cancels that. */
@media (prefers-reduced-motion:reduce){
  .tour-hole{transition:none}
  .tour-tip{animation:none}
}
@media (max-width:560px){
  .tour-tip{left:10px !important;right:10px;width:auto !important}
}

/* The evidence a decision was made on, as it stood at that moment. */
.hd-why{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--slate)}
.hd-ev{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.hd-ev span{display:inline-flex;align-items:baseline;gap:7px;background:var(--paper);
  border-radius:var(--r-s);padding:7px 11px}
.hd-ev i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.hd-ev b{font-size:15px;font-weight:700}
.hd-ev em{font-style:normal;font-size:11.5px;color:var(--muted)}

/* ===================================================== META ADS: OVERVIEW
   The channel's first screen. Five figures, three panels, three panels —
   and then the tabs, which hold everything that has to be read rather than
   glanced at.

   Good and bad are told in the house colours, not in green and red: a rise
   worth having gets the yellow ground, one worth watching gets cloud. Both
   keep ink text, because yellow is never a text colour here. */

.crumbrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 10px}
@media (max-width:900px){
  .mhead-r{align-items:flex-start;width:100%}
}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mist)}
.crumb i{font-style:normal;color:var(--cloud)}
.crumb b{color:var(--ink);font-weight:500}
/* The window label already reads "last 14 days vs previous 14 days"; the
   second copy beside it said the same thing again. Hidden wherever the
   period control lives, not just where it used to live. */
.crumbrow .cmp,.mhead-r .cmp{display:none}
.drange{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;
  color:var(--slate);border:var(--hair);border-radius:var(--r-pill);background:var(--white)}

/* Title first, level with every other screen in the product. The period
   control and the channel's own buttons stack to its right, so this screen
   starts where SEO and Social Media start rather than a band lower. */
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin:0 0 2px;padding-top:2px}
.mhead-l{min-width:0}
.mhead .ttl{margin:0 0 4px}
.mhead .sub{margin:0;max-width:52ch}
.mhead-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.mhead-b{display:flex;align-items:center;gap:10px}
.mhead-r .ctrls{margin:0}
.connpill{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;
  border:var(--hair);border-radius:var(--r-pill);background:var(--white);box-shadow:var(--sh-s)}
.connpill .nm{font-size:13px;font-weight:500}
.connpill .st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--slate);
  padding:3px 10px;border-radius:var(--r-pill);background:var(--wash)}
.connpill .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mist)}
.connpill .st.on::before{background:var(--ink)}

/* The channel tabs are the Social tabs: same size, same weight, the selected
   one in bold over a yellow rule. Three screens with three tab rows was
   three answers to the same question. */
.mtabs{display:flex;gap:4px;flex-wrap:wrap;overflow-x:auto;margin:18px 0 26px;
  border-bottom:1px solid var(--line)}
/* Against a channel header the row needs no run-up of its own: the header
   already carries the space, and its right-hand column makes it taller than
   the title. The state line between them is empty on a connected channel. */
.mhead ~ .mtabs{margin-top:0}
.mtabs button{position:relative;appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;color:var(--muted);padding:11px 14px 13px;
  white-space:nowrap;text-transform:none;letter-spacing:0;
  transition:color var(--d-hover) var(--ease)}
.mtabs button:hover{color:var(--ink)}
.mtabs button[aria-selected="true"]{color:var(--ink);font-weight:700}
.mtabs button[aria-selected="true"]::after{content:'';position:absolute;left:12px;right:12px;
  bottom:-1px;height:2px;border-radius:2px;background:var(--yellow)}

/* ------------------------------------------------------------- the five */
.kpi5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 16px}
.kcard{background:var(--white);border:var(--hair);border-radius:var(--r);padding:16px 16px 14px;
  box-shadow:var(--sh-s);min-width:0}
.kcard.off{background:var(--wash);box-shadow:none}
.kc-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;color:var(--slate)}
.kc-h span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.kcard.off .mico{stroke:var(--mist)}
.kc-v{display:block;font-size:30px;line-height:1.05;letter-spacing:-.02em;font-weight:500}
.kcard.off .kc-v{color:var(--mist)}
.kc-d{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.dlt{align-self:flex-start;font-size:12px;font-weight:500;padding:2px 9px;border-radius:var(--r-pill)}
.dlt.good{background:var(--yellow);color:var(--ink)}
.dlt.bad{background:var(--cloud);color:var(--ink)}
.dlt.flat{background:var(--wash);color:var(--slate)}
.dlt.none{background:none;padding:2px 0;color:var(--mist);font-weight:400}
.dsub{font-size:11px;color:var(--mist)}
.dsub:empty{display:none}

/* --------------------------------------------------------- the two rows */
.mrow{display:grid;gap:12px;margin:0 0 12px}
.mrow-a{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.1fr)}
.mrow-b{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.mrow .pnl{margin:0;display:flex;flex-direction:column}
.mrow .pnl-b{flex:1}
.pnl .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:var(--r-pill);background:var(--yellow);color:var(--ink);
  font-size:12px;font-weight:700}
.pnl .lnk{appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:13px;
  color:var(--slate);text-decoration:underline;text-underline-offset:3px;padding:0}
.pnl .lnk:hover{color:var(--ink)}
.btn.ghost.wide{display:block;width:100%;margin-top:12px;background:none;border:var(--hair);
  color:var(--ink)}

/* ------------------------------------------------------------ the donut */
.donutwrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut{width:140px;height:140px;flex-shrink:0}
.donut circle{fill:none;stroke-width:16;transform:rotate(-90deg);transform-origin:70px 70px}
.donut .track{stroke:var(--cloud)}
.donut .arc.a0{stroke:var(--yellow)}
.donut .arc.a1{stroke:var(--ink)}
.donut .arc.a2{stroke:var(--slate)}
.donut .arc.a3{stroke:var(--grey)}
.donut .arc.a4{stroke:var(--mist)}
.dn-v{text-anchor:middle;font-family:var(--disp);font-size:22px;font-weight:500;fill:var(--ink)}
.dn-k{text-anchor:middle;font-size:11px;fill:var(--mist);letter-spacing:.08em;text-transform:uppercase}
.dlegend{list-style:none;margin:0;padding:0;flex:1;min-width:180px;display:grid;gap:8px}
.dlegend li{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:8px;font-size:13px}
.dlegend .sw{width:10px;height:10px;border-radius:3px}
.dlegend .sw.a0{background:var(--yellow)}
.dlegend .sw.a1{background:var(--ink)}
.dlegend .sw.a2{background:var(--slate)}
.dlegend .sw.a3{background:var(--grey)}
.dlegend .sw.a4{background:var(--mist)}
.dlegend .nm{color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlegend b{font-weight:500}
.dlegend .sp{color:var(--mist);font-size:12px;min-width:56px;text-align:right}

/* ------------------------------------------------- campaigns, creatives */
.tcamp{font-size:12px}
.tcamp th,.tcamp td{padding:9px 8px}
.tcamp .cname{max-width:190px}
.tcamp .cname .hook{display:block;font-size:11px;color:var(--mist);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--cloud);color:var(--ink)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mist)}
.pill.on{background:var(--y-30)}
.pill.on::before{background:var(--ink)}

.creo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.creo-c{margin:0;border-radius:var(--r-s);overflow:hidden;padding:14px;min-height:124px;
  display:flex;flex-direction:column;justify-content:space-between;border:var(--hair)}
.creo-c.c0{background:var(--g-art-2)}
.creo-c.c1{background:var(--wash)}
.creo-c.c2{background:var(--y-15)}
.creo-c.c3{background:var(--cloud)}
.creo-c blockquote{margin:0;font-family:var(--serif);font-size:17px;line-height:1.2}
.creo-c figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:12px;font-size:11px}
.creo-c .fmt{color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.creo-c figcaption b{font-size:12px;font-weight:500;white-space:nowrap}

/* ---------------------------------------------------- the account rails */
.acct{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.acct li{display:grid;grid-template-columns:16px 1fr auto;align-items:start;gap:10px;
  padding:10px 0;font-size:13px;border-bottom:1px solid var(--cloud)}
.ac-t{min-width:0}
.acct .wh{display:block;font-size:11px;line-height:1.45;color:var(--mist);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acct li:last-child{border-bottom:0}
.acct li i{width:16px;height:16px;border-radius:50%;background:var(--cloud);position:relative}
.acct li.ok i{background:var(--yellow)}
.acct li i::after{content:"";position:absolute;left:5px;top:4px;width:4px;height:7px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(38deg);
  opacity:.25}
.acct li.ok i::after{opacity:1}
.acct .nm{color:var(--slate)}
.acct li b{font-weight:500;font-size:11px;color:var(--ink);text-align:right;white-space:nowrap;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--y-30)}
.acct li.no b{background:var(--cloud);color:var(--grey)}
.acct li i{margin-top:1px}
.acct li.no b{color:var(--grey)}

.actlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.actlist li{padding:11px 0;border-bottom:1px solid var(--cloud)}
.actlist li b{display:block;font-size:13px;font-weight:500}
.actlist li span{display:block;font-size:12px;color:var(--mist);margin-top:2px}

@media (max-width:1180px){
  .kpi5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mrow-a,.mrow-b{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .kpi5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creo{grid-template-columns:1fr}
  .mhead{align-items:flex-start}
}

/* ============================================== META ADS: THE OWNER VIEW
   Six figures, what SHMEL did about them, the campaigns behind it and the
   log behind that. The reference design tells good news in green; here it
   is told in yellow with ink on top, because green is not one of the seven
   and yellow is never a text colour. */

.mpanel .eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist)}
.ovh{margin:0 0 6px;font-family:var(--serif);font-size:40px;line-height:1.02;font-weight:400;
  letter-spacing:-.01em}
.ovs{margin:0 0 22px;color:var(--slate);font-size:15px;max-width:60ch}

/* Seven on a channel screen, six on a campaign. The grid counts what is in
   it rather than being told, so adding a card does not need a class. */
.kpi6{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 14px}
.kpi6 .kc-h{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.kpi6 .kc-h span{white-space:normal;font-size:12px;line-height:1.3}
.kc-i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:10px;background:var(--y-30);flex-shrink:0}
.kcard.off .kc-i{background:var(--cloud)}
.kc-i .mico{width:16px;height:16px;opacity:1}
.kpi6 .kc-v{font-size:26px}

/* ----------------------------------------------------------- the rows */
.mrow-g{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.mrow-one{grid-template-columns:minmax(0,1fr)}

.growth .l2.rev{stroke:var(--ink);stroke-width:2.2}
.growth .l2.book{stroke:var(--mist);stroke-width:2;stroke-dasharray:none}
.growth .dot{stroke:none}
.growth .dot.rev{fill:var(--ink)}
.growth .dot.book{fill:var(--mist)}
.growth .b2.ghost{fill:var(--yellow);opacity:.55}
.growth .lastbadge rect{fill:var(--ink)}
.growth .lastbadge text{fill:var(--white);font-size:11px;font-family:var(--disp);font-weight:500}
.glegend{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin:10px 0 0;padding:0;
  font-size:12px;color:var(--slate)}
.glegend li{display:inline-flex;align-items:center;gap:7px}
.glegend li::before{content:"";width:12px;height:3px;border-radius:2px;background:var(--mist)}
.glegend .sp::before{height:10px;width:10px;border-radius:3px;background:var(--yellow)}
.glegend .rev::before{background:var(--ink)}
.glegend .cum{color:var(--mist)}
.glegend .cum::before{display:none}
.glegend .book::before{background:var(--mist)}

/* -------------------------------------------- SHMEL is working for you */
.pnl.working{background:linear-gradient(180deg,var(--y-15) 0%,rgba(255,255,255,0) 55%)}
.wk-lede{margin:0 0 12px;font-size:13px;color:var(--slate)}
/* Its own class: the month view's week card is also .wk, and the card's
   white background and border were showing through this list — a panel
   behind the ticks that nobody asked for, with the ticks hanging off its
   left edge because the padding was overridden here. */
.wkl{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.wkl li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:13px;
  line-height:1.45}
.wkl li i{width:20px;height:20px;border-radius:50%;background:var(--yellow);position:relative;
  margin-top:1px}
.wkl li i::after{content:"";position:absolute;left:7px;top:5px;width:4px;height:8px;
  border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);transform:rotate(38deg)}
.wk-note{margin-top:16px;padding:12px 14px;border-radius:var(--r-s);background:var(--white);
  border:var(--hair);box-shadow:var(--sh-s)}
.wk-note b{display:block;font-size:13px;font-weight:500;margin-bottom:3px}
.wk-note span{display:block;font-size:12px;color:var(--grey);line-height:1.45}
.wk-note.healthy{background:var(--y-15);border-color:transparent}

/* ------------------------------------------------- the campaign cards */
.ccards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ccard{display:flex;flex-direction:column;border:var(--hair);border-radius:var(--r-s);
  background:var(--white);overflow:hidden}
.cc-h{display:flex;gap:12px;padding:12px;align-items:flex-start}
.cc-thumb{width:64px;height:64px;border-radius:10px;flex-shrink:0;display:flex;align-items:flex-end;
  padding:8px;font-family:var(--serif);font-size:13px;line-height:1.1;color:var(--ink);
  object-fit:cover}
img.cc-thumb{padding:0}
.cc-thumb span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-thumb.t0{background:var(--g-art-2)}
.cc-thumb.t1{background:var(--y-30)}
.cc-thumb.t2{background:var(--cloud)}
.cc-t{min-width:0;display:flex;flex-direction:column;gap:7px}
.cc-t b{font-size:13px;font-weight:500;line-height:1.3}
.cc-t .pill{align-self:flex-start}
.cc-m{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;margin:0;
  padding:0 12px 12px;border-bottom:1px solid var(--cloud)}
/* the label box is fixed so a two-line label does not push its own value
   out of line with the three beside it */
.cc-m dt{font-size:10px;line-height:1.25;color:var(--mist);margin:0 0 4px;min-height:25px}
.cc-m dd{margin:0;font-size:13px;font-weight:500;white-space:nowrap}
.cc-a{padding:11px 12px;display:block;background:var(--wash);border-left:3px solid var(--cloud)}
.cc-a b{display:block;font-size:12px;font-weight:500;margin-bottom:2px}
.cc-a span{display:block;font-size:11px;color:var(--grey);line-height:1.4}
.cc-a.attention{border-left-color:var(--ink)}
.cc-a.opportunity{border-left-color:var(--yellow);background:var(--y-15)}
.cc-a.steady{border-left-color:var(--cloud)}

/* --------------------------------------------------------- the log */
.tline{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:none}
.tline li{display:grid;grid-template-columns:22px 74px 1fr;gap:10px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--cloud)}
.tline li:last-child{border-bottom:0}
.tline li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--cloud);
  display:block;margin-top:1px}
.tline li.ic-eye::before,.tline li.ic-bulb::before{background:var(--y-30)}
.tline li.ic-check::before{background:var(--yellow)}
.tline li.ic-stop::before{background:var(--ink)}
.tline .when{font-size:11px;color:var(--mist);padding-top:3px}
.tline .what b{display:block;font-size:13px;font-weight:500;line-height:1.35}
.tline .what span{display:block;font-size:11px;color:var(--grey);margin-top:2px}

@media (max-width:1180px){
  .kpi6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mrow-g,.mrow-c{grid-template-columns:minmax(0,1fr)}
  .ccards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .kpi6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ovh{font-size:30px}
  .cc-m{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================== YOUR ADS
   The ad list is a working screen, not a report: counts across the top,
   filters that narrow what is already loaded, and pages at the foot. */

.adshead{margin:0 0 18px}
.adshead .ovs{margin-bottom:0}

.kpi8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:0 0 16px}
.acard{background:var(--white);border:var(--hair);border-radius:var(--r-s);padding:12px 12px 11px;
  box-shadow:var(--sh-s);min-width:0}
.acard.off{background:var(--wash);box-shadow:none}
.acard b{display:block;font-size:20px;font-weight:500;line-height:1.1;letter-spacing:-.01em}
.acard.off b{color:var(--mist)}
.acard span{display:block;margin-top:4px;font-size:11px;color:var(--slate);line-height:1.3}

.adbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 12px}
#adState{display:inline-flex;gap:2px}
#adState button{display:inline-flex;align-items:center;gap:7px}
#adState i{font-style:normal;font-size:11px;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--wash);color:var(--slate)}
#adState button[aria-pressed="true"] i{background:rgba(255,255,255,.22);color:var(--white)}
.adbar-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srch input,.sel select{font:inherit;font-size:13px;color:var(--ink);background:var(--white);
  border:var(--hair);border-radius:var(--r-pill);padding:8px 14px;min-width:200px;
  appearance:none;-webkit-appearance:none}
.sel select{min-width:170px;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),
    linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.srch input:focus,.sel select:focus{outline:2px solid var(--y-55);outline-offset:1px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.adsx{font-size:13px}
.adsx td,.adsx th{padding:11px 10px;vertical-align:middle}
.adcell{display:flex;align-items:center;gap:10px;min-width:220px}
.athumb{width:40px;height:40px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:16px;background:var(--cloud);
  object-fit:cover}
.athumb.video{background:var(--ink);color:var(--white)}
.athumb.carousel{background:var(--y-30)}
.athumb.image{background:var(--g-art-2)}
.adtxt{min-width:0}
.adtxt b{display:block;font-size:13px;font-weight:500}
.adtxt .hook{display:block;font-size:11px;color:var(--mist);margin-top:2px;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpcell b{display:block;font-size:12px;font-weight:500}
.cmpcell span{display:block;font-size:11px;color:var(--mist);margin-top:2px}
.adsx [class^="sp-"]{display:inline-block;font-size:11px;padding:3px 10px;border-radius:var(--r-pill);
  white-space:nowrap;background:var(--cloud);color:var(--ink)}
.adsx .sp-good{background:var(--yellow)}
.adsx .sp-ok{background:var(--y-30)}
.adsx .sp-bad{background:var(--ink);color:var(--white)}
.adsx .sp-watch,.adsx .sp-paused{background:var(--wash);color:var(--slate)}

.adfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:12px 0 0;font-size:12px;color:var(--mist)}
.pager{display:inline-flex;gap:4px}
.pager button{appearance:none;font:inherit;font-size:13px;min-width:32px;height:32px;padding:0 9px;
  border:var(--hair);background:var(--white);border-radius:10px;cursor:pointer;color:var(--ink)}
.pager button[aria-current="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pager button[disabled]{opacity:.35;cursor:default}

@media (max-width:1180px){ .kpi8{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:640px){
  .kpi8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adbar-r{width:100%}
  .srch input,.sel select{min-width:0;width:100%}
}

/* One line under the figures, not a panel: the caveat has to stay with the
   numbers it applies to, without turning the screen into a setup checklist. */
.trustline{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;width:fit-content;max-width:100%;
  margin:-4px 0 16px;padding:7px 11px;border-radius:var(--r-pill);background:var(--wash);
  font-size:12px;color:var(--slate);line-height:1.4}
.trustline b{font-weight:600;color:var(--ink)}
.trustline .tl-dash{color:var(--mist)}
.trustline .lnk{font-size:12px;font-weight:650}

/* ========================================================== GOOGLE ADS
   Mostly the Meta screen's own components. What is here is what only paid
   search has: the clinic's own name split from everything else, the queries
   behind the clicks, and the demand the budget turned away. */

.bsplit{border:var(--hair);border-radius:var(--r);background:var(--white);box-shadow:var(--sh-s);
  padding:18px;margin:0 0 14px}
.bsplit.warn{background:linear-gradient(180deg,var(--y-15) 0%,rgba(255,255,255,0) 60%)}
.bs-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.bs-h h3{margin:0;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.bs-h .r{font-size:12px;color:var(--mist)}
.bs-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bs-c{padding:14px;border-radius:var(--r-s);background:var(--wash)}
.bs-k{display:block;font-size:12px;color:var(--slate);margin-bottom:6px}
.bs-c b{display:block;font-size:28px;font-weight:500;line-height:1.05;letter-spacing:-.02em}
.bs-s{display:block;font-size:11px;color:var(--mist);margin-top:5px}
.bs-n{display:block;font-size:12px;color:var(--grey);margin-top:10px;line-height:1.45}
.bs-f{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ink)}

.gseg{margin:0 0 12px}
.gseg button{display:inline-flex;align-items:center;gap:7px}
.gseg i{font-style:normal;font-size:11px;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--wash);color:var(--slate)}
.gseg button[aria-pressed="true"] i{background:rgba(255,255,255,.22);color:var(--white)}

.terms{font-size:13px}
.terms .qterm{font-family:var(--serif);font-size:15px}
.terms tr.lose .qterm{color:var(--grey)}
.caps .wmean{font-size:12px;color:var(--grey)}
.caps b{font-weight:500}

@media (max-width:860px){ .bs-g{grid-template-columns:1fr} }


/* One Ask SHMEL, in the house's light palette rather than the dark slab the
   channel screens used to carry. The suggestions ask for figures: deciding
   what to change is the product's job, and the owner's question is what the
   numbers are. */
/* Above the figures, not under them: the chat is the first thing on the
   channel screen, the way it is on the Overview — and built out of the same
   parts, so the two read as one feature rather than two that resemble each
   other. The bee sits outside the card on the left, exactly as it does there;
   the fade-to-white version washed the block out until it disappeared into
   the page. */
.askbar{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px}
.askbar .ab-b{flex:1 1 auto;min-width:0;padding:16px 20px;border-radius:var(--r-l);
  border-top-left-radius:var(--r-s);background:var(--y-15);border:1px solid var(--y-30)}
.ab-av{width:44px;height:44px;flex:none}
.ab-av img{width:44px;height:44px;display:block}
/* The ask row carries no top rule here: on the Overview it separates the
   question from the summary above it, and there is nothing above it here. */
.askbar .obr-ask{margin-top:0;padding-top:0;border-top:0}
.ab-q{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--y-30)}
.ab-q button{appearance:none;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;
  background:var(--paper);border:1px solid var(--y-30);border-radius:var(--r-pill);padding:7px 14px;
  transition:color var(--d-hover) var(--ease),border-color var(--d-hover) var(--ease)}
.ab-q button:hover{color:var(--ink);border-color:var(--ink)}

/* The one line on the working panel with somewhere to go: nothing changes in
   an account until the owner says so, so what is waiting on them is the most
   actionable thing the panel can carry. */
.wk-wait{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:14px;border-radius:var(--r-s);background:var(--white);
  border:var(--hair);box-shadow:var(--sh-s)}
.wk-wait b{display:block;font-size:13px;font-weight:500;margin-bottom:3px}
.wk-wait span{display:block;font-size:12px;color:var(--grey);line-height:1.45;max-width:46ch}
.wk-wait .btn{flex-shrink:0}

/* =================================================== CAMPAIGN BUILDER
   Four steps in the house's own furniture. Nothing on these screens is a
   mock: the plan is the request that will be sent, the copy carries the
   verdict it earned, and the gates are the five publish.js runs for real. */

.wiz{max-width:920px}
.wzrail{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;padding:0}
.wzrail li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mist)}
.wzrail li+li::before{content:"";width:18px;height:1px;background:var(--cloud);margin-right:8px}
.wzrail i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--cloud);
  color:var(--slate);display:grid;place-items:center;font-size:11px;font-weight:500}
.wzrail li.on{color:var(--ink)}
.wzrail li.on i{background:var(--ink);color:var(--white)}
.wzrail li.done i{background:var(--yellow);color:var(--ink)}
.wzrail li.done{color:var(--slate)}

.wzhead h2{margin:0 0 6px;font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.1}
.wzhead p{margin:0 0 20px;font-size:14px;color:var(--slate);max-width:62ch;line-height:1.55}

.wzform{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px}
.wzf{display:block;min-width:0}
.wzf>span{display:block;font-size:12px;color:var(--slate);margin-bottom:6px}
.wzf>span b{font-weight:400;color:var(--mist)}
.wzf select,.wzmoney{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--white);
  border:var(--hair);border-radius:var(--r-s);padding:11px 14px}
.wzf select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),
    linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.wzmoney{display:flex;align-items:center;gap:6px;padding:0 14px}
.wzmoney b{font-weight:500;color:var(--slate)}
.wzmoney em{font-style:normal;font-size:12px;color:var(--mist)}
.wzmoney input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:14px;padding:11px 0;
  background:none;color:var(--ink)}
.wzhint{display:block;font-style:normal;font-size:11.5px;color:var(--mist);margin-top:6px;line-height:1.45}
.wzhint.warn{color:var(--slate)}

.wznote{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-s);
  background:var(--y-15);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wznote i{width:16px;height:16px;border-radius:50%;background:var(--yellow);flex:none;margin-top:1px}

.wzact{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.wzact.center{justify-content:center}
.wzsp{display:inline-flex;gap:10px}
.wzblocked{font-size:12.5px;color:var(--grey);text-align:right;max-width:46ch}

/* ------------------------------------------------------------- the plan */
.wzplan{display:grid;gap:2px;border:var(--hair);border-radius:var(--r);overflow:hidden}
.wzrow{display:grid;grid-template-columns:190px 1fr;gap:14px;padding:14px 16px;background:var(--white);
  border-bottom:1px solid var(--cloud)}
.wzrow:last-child{border-bottom:0}
.wzrow .k{font-size:12.5px;color:var(--slate)}
.wzrow b{display:block;font-size:14px;font-weight:500}
.wzrow span{display:block;font-size:12px;color:var(--grey);line-height:1.5;margin-top:3px}
.wzverdict{margin-top:12px;padding:14px 16px;border-radius:var(--r-s);background:var(--y-15);
  font-size:13.5px;line-height:1.5}
.wzverdict.warn{background:var(--cloud)}
.wzwhy{margin-top:12px;font-size:12.5px;color:var(--grey);line-height:1.55}
.wzwhy b{display:block;color:var(--ink);font-size:12.5px;font-weight:500;margin-bottom:3px}

/* -------------------------------------------------------------- the ads */
.wztabs{display:inline-flex;gap:4px;margin:0 0 14px}
.wztabs button{appearance:none;font:inherit;font-size:13px;cursor:pointer;padding:8px 16px;
  border-radius:var(--r-pill);border:var(--hair);background:var(--white);color:var(--slate)}
.wztabs button[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.wzad{display:grid;grid-template-columns:260px 1fr;gap:18px}
.wzcard{margin:0;border:var(--hair);border-radius:var(--r-s);overflow:hidden;background:var(--white)}
.wzcard-a{position:relative;aspect-ratio:1;background:var(--g-art-2) center/cover no-repeat;
  padding:16px;display:flex;align-items:flex-end}
/* The headline sits on a photograph, so it needs its own ground to stay
   readable whichever frame it lands on. */
.wzcard-a::before{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(23,28,43,.72) 0%,rgba(23,28,43,.28) 46%,rgba(23,28,43,0) 78%)}
.wzcard-h{position:relative;font-family:var(--serif);font-size:20px;line-height:1.15;
  color:var(--white)}
.wzcard figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;font-size:11px;color:var(--grey);border-top:1px solid var(--cloud)}
.wzcta{font-size:11px;font-weight:500;color:var(--ink);background:var(--cloud);padding:4px 10px;
  border-radius:var(--r-pill)}
.wzlook{display:block;padding:10px 13px;font-size:11px;color:var(--mist);line-height:1.45;
  border-top:1px solid var(--cloud)}
.wzfields{display:grid;gap:12px;align-content:start}
.wzfield{padding:12px 14px;border:var(--hair);border-radius:var(--r-s);background:var(--white)}
.wzfield span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mist);margin-bottom:5px}
.wzfield p{margin:0;font-size:13.5px;line-height:1.5}
.wzscreen{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--grey)}

/* ------------------------------------------------------------ the gates */
.wzgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wzsums{display:grid;gap:2px;border:var(--hair);border-radius:var(--r);overflow:hidden}
.wzsum{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;
  background:var(--white);border-bottom:1px solid var(--cloud);font-size:13px}
.wzsum:last-child{border-bottom:0}
.wzsum span{color:var(--slate)}
.wzsum b{font-weight:500}
.wzgates{padding:16px;border:var(--hair);border-radius:var(--r);background:var(--wash)}
.wzgates>b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);margin-bottom:12px}
.wzgates ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.wzgates li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.wzgates li i{width:18px;height:18px;border-radius:50%;background:var(--cloud);margin-top:1px}
.wzgates li.ok i{background:var(--yellow)}
.wzgates li b{display:block;font-size:13px;font-weight:500}
.wzgates li span{display:block;font-size:11.5px;color:var(--grey);line-height:1.45;margin-top:2px}
.wzerr{margin-top:14px;padding:13px 15px;border-radius:var(--r-s);background:var(--cloud);
  font-size:13px;line-height:1.5}

/* ------------------------------------------------- creating, and done */
.wzload{padding:26px 0;font-size:13px;color:var(--mist)}
/* The two waits in the Meta wizard hold the same field the composer puts
   up while a post is being written. Centred, because the step it replaces
   is the whole width of the panel. */
.wzplay{display:flex;align-items:center;justify-content:center;
  min-height:360px;padding:16px 0}
.wzrun{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.wzrun li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;padding:13px 0;
  border-bottom:1px solid var(--cloud);font-size:14px;color:var(--mist)}
.wzrun li:last-child{border-bottom:0}
.wzrun li i{width:22px;height:22px;border-radius:50%;background:var(--cloud)}
.wzrun li.on{color:var(--ink)}
.wzrun li.on i{background:var(--y-55);animation:wzPulse 1.1s var(--ease) infinite}
.wzrun li.done{color:var(--slate)}
.wzrun li.done i{background:var(--yellow)}
@keyframes wzPulse{0%,100%{opacity:1}50%{opacity:.45}}

.wzdone{text-align:center;padding:26px 0 8px}
.wzok{display:block;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:var(--yellow);position:relative}
.wzok::after{content:"";position:absolute;left:20px;top:15px;width:13px;height:24px;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(40deg)}
.wzdone h2{margin:0 0 8px;font-family:var(--serif);font-size:28px;font-weight:400}
.wzdone p{margin:0 auto;max-width:54ch;font-size:14px;color:var(--slate);line-height:1.55}
.wzids{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:11.5px;
  color:var(--mist)}
.wzids b{color:var(--ink);font-weight:500}

@media (max-width:820px){
  .wzform,.wzad,.wzgrid2{grid-template-columns:1fr}
  .wzrow{grid-template-columns:1fr}
}

/* While the campaign builder is open the channel behind it steps back: the
   tabs, the figures and the chat are not part of this job, and leaving them
   on screen made the builder look like it was floating over a page still
   going about its business. */
/* Create used to take the whole screen: the tabs, the figures and the chat
   were hidden while the composer was open. It is a tab now, so the screen
   stays where it was and only the panel under the row changes. */
.view.making .mtabs,
.view.making .mpanel,
.view.making .askbar{display:none}
.mpanel-make .make{background:var(--y-15);border:1px solid var(--y-30);
  border-radius:var(--r);padding:22px 22px 26px;margin:0}
.mkhead{margin:0 0 18px}
.mkhead h2{margin:0;font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.15}
.mkhead p{margin:6px 0 0;font-size:13px;color:var(--slate);max-width:60ch}
.mpanel-make .wzform select,
.mpanel-make .wzmoney,
.mpanel-make .wzrow,
.mpanel-make .wzsum,
.mpanel-make .wzfield,
.mpanel-make .wzcard,
.mpanel-make .gkwi,
.mpanel-make .wzdone{background:var(--white)}
.view.making #makeAd{background:var(--y-15);border:1px solid var(--y-30);
  border-radius:var(--r-l);padding:26px 28px;margin-top:4px}
.view.making .wzform select,
.view.making .wzmoney,
.view.making .wzrow,
.view.making .wzsum,
.view.making .wzfield,
.view.making .wzcard{background:var(--white)}
.view.making .wznote{background:var(--white)}
@media (max-width:640px){ .view.making #makeAd{padding:18px 16px} }

/* Campaigns SHMEL wrote and the clinic approved, before Meta has them. An
   approved campaign nobody can find is the same as one nobody approved. */
.qcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;
  margin:0 0 22px}
.qcard{padding:16px;border:1px solid var(--y-30);border-radius:var(--r);background:var(--y-15)}
.qc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.qc-h b{font-size:14px;font-weight:500;line-height:1.3}
.qcard p{margin:0 0 12px;font-size:12.5px;color:var(--grey);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.qc-m{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.qc-m dt{font-size:10px;color:var(--mist);margin:0 0 2px}
.qc-m dd{margin:0;font-size:12.5px;font-weight:500}
.qc-w{font-size:11.5px;color:var(--grey);padding-top:10px;border-top:1px solid var(--y-30)}
.qc-w.ok{color:var(--ink)}
.wzwait{margin-top:10px;font-size:12.5px;color:var(--grey)}

/* The rate under the figure. A count answers "how many"; the rate answers
   "out of what", and that is the half that says whether the problem is the
   advertising or what happens after the phone rings. */
.kc-r{display:block;margin-top:5px;font-size:11.5px;color:var(--slate);line-height:1.4}
.kcard.off .kc-r{color:var(--mist)}

/* One click back to where you just were. It names the screen it returns to,
   because an unlabelled arrow makes you click it to find out. */

/* ============================================ GOOGLE ADS: CAMPAIGN DETAIL
   No thumbnails anywhere here, and no space left for one. A search ad is
   text — headlines, descriptions and a URL, assembled per auction — so the
   preview shows what Google would actually render, not a picture. */
.gcamps{font-size:13px}
.gcamps tbody tr{cursor:pointer}
.gcamps tbody tr:hover{background:var(--wash)}
.gcamps .cname{max-width:260px}

.gads-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.gadcard{border:var(--hair);border-radius:var(--r);background:var(--white);padding:16px}
.ga-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ga-h b{font-size:13px;font-weight:500}
.ga-prev{padding:13px 14px;border-radius:var(--r-s);background:var(--wash);margin-bottom:12px}
.ga-url{display:block;font-size:11px;color:var(--grey);margin-bottom:5px}
.ga-t{display:block;font-size:15px;font-weight:500;line-height:1.3;margin-bottom:6px}
.ga-prev p{margin:0;font-size:12.5px;color:var(--slate);line-height:1.5}
.ga-m{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.ga-m dt{font-size:10px;color:var(--mist);margin:0 0 2px}
.ga-m dd{margin:0;font-size:13px;font-weight:500}
.ga-all summary{cursor:pointer;font-size:11.5px;color:var(--grey);padding:6px 0}
.ga-all summary:hover{color:var(--ink)}
.ga-all ul{list-style:none;margin:6px 0 0;padding:10px 12px;border-radius:var(--r-s);
  background:var(--wash);display:grid;gap:6px}
.ga-all li{font-size:12px;line-height:1.45}
.ga-all li.ds{color:var(--grey)}

.gkw .qterm{font-family:var(--serif);font-size:15px}
.mt{font-size:11px;padding:3px 9px;border-radius:var(--r-pill);background:var(--wash);
  color:var(--slate)}
.crumb .lnk{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:var(--slate);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.crumb .lnk:hover{color:var(--ink)}

.gsec{margin:0;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate)}
.gadcard.fresh{border-color:var(--y-30);background:var(--y-15)}
.gadcard .hint{margin:10px 0 0;font-size:11px;color:var(--grey);line-height:1.45}

/* ===================================================== BILLING & USAGE
   Two columns: what the clinic pays on the left, what it has used on the
   right. Same card as the rest of Settings, so the tab does not read as a
   different product. */
.billcols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;
  align-items:start}
.billcol{display:flex;flex-direction:column;gap:16px}
.bill-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bill-t{margin:0;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.15}
.bill-h .btn,.bill-h .btnlink,.bill-h .billchip,.bill-h .billsave,.bill-h .bill-when{
  margin-left:auto}
.billchip{padding:5px 12px;border-radius:var(--r-pill);background:var(--yellow);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.billsave{padding:5px 12px;border-radius:var(--r-pill);background:rgba(88,192,141,.14);
  color:#2E7D58;font-size:12px;font-weight:700}
.bill-when{font-size:12px;color:var(--muted)}
.bill-price{display:flex;align-items:baseline;gap:8px}
.bill-price b{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1}
.bill-price span{font-size:15px;color:var(--muted)}
.bill-price.sm b{font-size:26px}
.bill-price.sm span{font-size:13px}
.bill-next{margin:10px 0 0;font-size:13px;color:var(--muted)}
.bill-next em{font-style:normal}
.bill-acts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.bill-acts .btn{width:100%}

/* The three plans. The one in force is the one lit. */
.billgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.billplan{position:relative;display:flex;flex-direction:column;padding:20px 16px 16px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper)}
.billplan.on{border-color:var(--y-55);background:var(--y-08,#FEFBEC);box-shadow:var(--sh-s)}
.billplan-b{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:4px 12px;border-radius:var(--r-pill);background:var(--yellow);font-size:11px;
  font-weight:700}
.billplan-k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:8px}
.billplan-w{margin:10px 0 14px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.billfeat{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.billfeat li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45}
.billfeat svg{width:14px;height:14px;flex:none;margin-top:2px;color:#2E7D58}
.billplan-a{width:100%;margin-top:auto}

/* The meter, in the parts that made it. */
.bill-meter{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bill-meter b{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1}
.bill-meter span{font-size:15px;color:var(--muted)}
.bill-meter em{margin-left:auto;font-style:normal;font-size:13px;font-weight:700}
.billbar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--wash);
  margin:14px 0 18px}
.billbar i{display:block;height:100%}
.c1{background:var(--yellow)}
.c2{background:#58C08D}
.c3{background:#9BB4E8}
.c4{background:#C9A8E0}
.billsplit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.billsplit li{display:flex;align-items:center;gap:10px;font-size:13px}
.billsplit i{width:10px;height:10px;border-radius:50%;flex:none}
.billsplit span{min-width:0;flex:1 1 auto;color:var(--ink-2)}
.billsplit b{font-weight:700}
.billsplit em{font-style:normal;width:40px;text-align:right;color:var(--muted)}

/* The card on file. Read-only, and it says why. */
.billcard{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-l)}
.billbrand{flex:none;padding:6px 10px;border-radius:var(--r-s);background:var(--wash);
  font-size:12px;font-weight:700;letter-spacing:.04em;color:#1A1F71}
.billcard-n b{display:block;font-size:14px;font-weight:700}
.billcard-n span{font-size:12px;color:var(--muted)}
.billcard-a{margin-left:auto;text-align:right;min-width:0}
.billcard-a b{display:block;font-size:13px;font-weight:700}
.billcard-a span{font-size:12px;color:var(--muted)}

.billrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.billrows li{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.billrows li:last-child{border-bottom:0}
.billrow-d{flex:1 1 auto;font-size:13px}
.billrows b{font-size:13.5px;font-weight:700}
.billpaid{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill);
  background:rgba(88,192,141,.14);color:#2E7D58;font-size:12px;font-weight:700}
.billpaid i{width:6px;height:6px;border-radius:50%;background:#58C08D}
.billdl{appearance:none;border:0;background:none;cursor:pointer;color:var(--muted);padding:4px;
  border-radius:var(--r-s);line-height:0}
.billdl svg{width:18px;height:18px}
.billdl:hover:not(:disabled){color:var(--ink);background:var(--wash)}
.billdl:disabled{opacity:.4;cursor:default}
.btnlink{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-size:13px;
  font-weight:700;color:var(--ink)}
.btnlink:hover{text-decoration:underline}

/* The panel's own voice: the heading, a line under it, and one button.
   No card inside the card — a button drawn inside a second rounded box
   reads as two buttons. */
.billhelp-a{display:inline-flex;align-items:center;gap:8px;margin-top:12px}


@media (max-width:1100px){
  .billcols{grid-template-columns:minmax(0,1fr)}
  .billgrid{grid-template-columns:minmax(0,1fr)}
  .billplan-b{position:static;transform:none;align-self:flex-start;margin-bottom:8px}
}

/* The same three plans inside the drawer, stacked: it is half the width of
   the screen they sit on. Choosing one there swaps the panel for what the
   change would do. */
.billgrid.drawer{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:6px}
.billgrid.drawer .billplan-b{position:static;transform:none;align-self:flex-start;
  margin-bottom:10px}
.billgrid.drawer .billfeat{margin-bottom:14px}

/* The meter answers back. Pointing at a segment names it; pointing at a row
   lights its segment, because they are the same four figures. */
.billbar{position:relative;overflow:visible}
.billbar i{position:relative;transition:opacity .14s,filter .14s}
.billbar i:first-child{border-radius:999px 0 0 999px}
.billbar i:last-child{border-radius:0 999px 999px 0}
.billbar i.off{opacity:.38}
.billbar i.hl{filter:brightness(1.05)}
.billbar i:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.c0{background:var(--wash)}
.segtip{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(3px);
  padding:8px 11px;border-radius:var(--r-s);background:var(--ink);color:var(--white);
  white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:6;
  transition:opacity .12s,transform .12s}
.billbar i:hover .segtip,.billbar i:focus .segtip,.billbar i.hl .segtip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.segtip b{display:block;font-size:11.5px;font-weight:700}
.segtip em{font-style:normal;font-size:11px;opacity:.78}
.billsplit li{padding:4px 6px;margin:-4px -6px;border-radius:var(--r-s);
  transition:background .14s,opacity .14s}
.billsplit li.hl{background:var(--wash)}
.billsplit li.off{opacity:.5}

/* Support, inside the thread. The four questions a bill gets asked, and the
   hand-off to a person under them. */
.supq{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px}
.supq button{appearance:none;text-align:left;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r-s);padding:9px 12px;font:inherit;font-size:13px;color:var(--ink);
  cursor:pointer}
.supq button:hover{border-color:var(--ink)}
.supfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.supfoot span{font-size:12.5px;color:var(--muted)}
.supfoot .btn{margin-left:auto}

/* The hand-off wears the panel SHMEL reports its own work in. */
.chat .bb.bare{background:none;padding:0;box-shadow:none}
.supt{max-width:100%}
.supt .wk-lede{margin:0 0 12px;font-size:13px;color:var(--ink-2)}
.supt .wkl b{font-weight:700}


/* ------------------------------------------------- one elevation, everywhere
   Panels across the product sat on a hairline alone, so a screen of them read
   as one sheet with lines drawn on it. Everything that is a card now lifts by
   the same amount: the stat tiles, the tables, the offer and the rule sets. */
.rt,.soct,.cmpt,.lqt,.refoffer,.reftbl,.mrank,.cmpc,.anf,.spcard,.swc,
.remed-s,.didlist,.conn,.sa{box-shadow:var(--sh-s)}
/* A card inside another card keeps its own edge and nothing more. */
.refcard .refcard,.socwork .combox,.socwork .wkl,.pnl .cmpc{box-shadow:var(--sh-s)}

/* Settings: the tab row, with the way to reach a person at the end of it and
   sitting on the same rule. */
.settabs{display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--line);
  margin:0 0 22px}
.settabs .tabs{flex:1 1 auto;border-bottom:0;margin:0}
.setsupport{flex:none;display:inline-flex;align-items:center;gap:8px;margin-bottom:8px}
@media (max-width:700px){.settabs{flex-wrap:wrap}.setsupport{margin:0 0 10px}}

/* The question box folds away behind its own mark. */
.ab-av{appearance:none;border:0;background:none;padding:0;cursor:pointer;line-height:0;
  border-radius:50%;transition:transform .16s var(--ease)}
/* While the box is open the mark drifts, so the corner of the screen that
   invites a question is not a still picture. It stops under the pointer, and
   it never runs for a reader who asked for less motion. */
.askbar:not(.folded) .ab-av{animation:abfloat 3.6s ease-in-out infinite}
@keyframes abfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ab-av:hover{animation:none;transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .askbar:not(.folded) .ab-av{animation:none}
}
.ab-av:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.askbar.folded .ab-b{display:none}
.askbar.folded{margin-bottom:10px}

/* Folded away, the mark is the only thing left of the question box, so it
   says so: a soft pulse in the brand's own yellow, still and quiet for
   anyone who has asked not to see motion. */
.askbar.folded .ab-av{border-radius:50%;animation:abglow 2.4s ease-in-out infinite}
@keyframes abglow{
  0%,100%{box-shadow:0 0 0 0 rgba(249,224,97,.75),0 0 10px 2px rgba(249,224,97,.35)}
  50%{box-shadow:0 0 0 10px rgba(249,224,97,0),0 0 16px 5px rgba(249,224,97,.55)}
}
@media (prefers-reduced-motion:reduce){
  .askbar.folded .ab-av{animation:none;box-shadow:0 0 0 4px rgba(249,224,97,.45)}
}

/* =============================================== ONE HOVER, EVERY PANEL
   A card lifts a little under the pointer: a 2px rise and a shadow that
   spreads, so the thing being read reads as picked up rather than merely
   pointed at. The scale is deliberately tiny — anything more and the type
   inside resamples and goes soft — and none of it runs for a reader who has
   asked for less motion.

   Cards that already move on hover for a reason of their own (the channel
   cards while they stage in, the drag-to-reorder decks) keep their own
   behaviour: this only adds the lift where there was none. */
.refcard,.setcard,.pnl,.sprev,.mkcol,.lqtable,.reftbl,.refoffer,.mrank,
.spcard,.swc,.anf,.kcard,.rt,.soct,.cmpt,.lqt,.cmpc,.billplan,.socday,
.rivc,.comcard,.chc,.deck,.icard,.idcard{
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.refcard:hover,.setcard:hover,.pnl:hover,.sprev:hover,.mkcol:hover,.lqtable:hover,
.reftbl:hover,.refoffer:hover,.mrank:hover,.spcard:hover,.swc:hover,.anf:hover,
.kcard:hover,.rt:hover,.soct:hover,.cmpt:hover,.lqt:hover,.cmpc:hover,
.billplan:hover,.socday:hover,.rivc:hover,.comcard:hover,.chc:hover,.deck:hover,
.icard:hover,.idcard:hover{
  transform:translateY(-2px) scale(1.004);
  box-shadow:0 2px 8px rgba(23,28,43,.07),0 18px 40px -20px rgba(23,28,43,.26)}
/* The small tiles can take a touch more, since there is less type on them. */
.rt:hover,.soct:hover,.cmpt:hover,.lqt:hover,.kcard:hover,.socday:hover,
.billplan:hover{transform:translateY(-3px) scale(1.012)}
/* A card inside a card does not lift with its parent and then again on its
   own: the outer one holds still while the pointer is on the inner. */
.refcard:has(.refcard:hover),.pnl:has(.pnl:hover),.socwork:has(.combox:hover){
  transform:none}
@media (prefers-reduced-motion:reduce){
  .refcard,.setcard,.pnl,.sprev,.mkcol,.lqtable,.reftbl,.refoffer,.mrank,
  .spcard,.swc,.anf,.kcard,.rt,.soct,.cmpt,.lqt,.cmpc,.billplan,.socday,
  .rivc,.comcard,.chc,.deck,.icard,.idcard{transition:box-shadow .18s var(--ease)}
  .refcard:hover,.setcard:hover,.pnl:hover,.sprev:hover,.mkcol:hover,.lqtable:hover,
  .reftbl:hover,.refoffer:hover,.mrank:hover,.spcard:hover,.swc:hover,.anf:hover,
  .kcard:hover,.rt:hover,.soct:hover,.cmpt:hover,.lqt:hover,.cmpc:hover,
  .billplan:hover,.socday:hover,.rivc:hover,.comcard:hover,.chc:hover,.deck:hover,
  .icard:hover,.idcard:hover{transform:none}
}
/* Shown only when the running tab is older than what is deployed. */
.newbuild{appearance:none;font:inherit;font-size:12px;font-weight:500;cursor:pointer;
  background:var(--yellow);color:var(--ink);border:0;border-radius:var(--r-pill);
  padding:7px 14px;margin-right:10px}

/* The keyword plan: the words are the campaign, so they get room rather than
   a line of chips nobody reads. */
.gkwplan{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.gkwi{padding:13px 15px;border:var(--hair);border-radius:var(--r-s);background:var(--white)}
.gkwi b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:4px}
.gkwi span{display:block;font-size:11.5px;color:var(--grey);line-height:1.45}
.gwiz .ga-prev{margin-bottom:0}

/* Keyword chips on a queued Google campaign card — the words are the whole
   plan in search, so the card shows them rather than only counting them. */
.qc-kw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.qc-kw span{font-size:11.5px;line-height:1;padding:6px 8px;border-radius:7px;
  background:var(--cloud);color:var(--ink)}
.qc-kw span.more{background:transparent;color:var(--grey)}

/* ======================================================= SEARCH (SEO)
   The channel screen. It reuses the Meta and Google furniture — the six
   cards, the panels, the tables — because a clinic reading three channels
   should not have to learn three layouts. What is new here is the shape of
   search: a traffic line against the period before it, where the visits came
   from, the chain from a visit to a patient, and the site's own health. */

/* ---- traffic over time: this period against the one before it -------- */
.seochartwrap{width:100%}
.seochart{display:block;width:100%;height:auto}
.seochart .gl{stroke:var(--cloud);stroke-width:1}
.seochart .ax{font-size:10.5px;fill:var(--grey);font-weight:700;letter-spacing:.04em}
.seochart .seo-line{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;
  stroke-linecap:round}
.seochart .seo-fill{fill:var(--y-30);stroke:none}
/* The period before is drawn, not shouted: dashed and grey, because it is
   the thing being compared against rather than the thing being read. */
.seochart .seo-prev{fill:none;stroke:var(--mist);stroke-width:1.8;stroke-dasharray:5 4}
.chartkey{display:flex;gap:16px;margin:10px 0 0;font-size:12px;color:var(--slate)}
.chartkey .ck{display:inline-flex;align-items:center;gap:7px}
.chartkey .ck::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--ink)}
.chartkey .was::before{background:var(--mist)}

/* ---- where the visits came from -------------------------------------- */
.dnwrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dnut{width:150px;height:150px;flex-shrink:0}
.dnut .dn{fill:none;stroke-width:17}
/* Five shares, one hue. Organic is the subject of this screen and takes the
   brand's own yellow; everything else steps back through the greys. */
.dnut .dn.s0{stroke:var(--yellow)}
.dnut .dn.s1{stroke:var(--ink)}
.dnut .dn.s2{stroke:var(--slate)}
.dnut .dn.s3{stroke:var(--mist)}
.dnut .dn.s4{stroke:var(--cloud)}
.dnut .dn-v{font-family:var(--disp);font-weight:700;font-size:19px;fill:var(--ink)}
.dnut .dn-k{font-size:10px;fill:var(--grey);letter-spacing:.04em}
.dnkey{list-style:none;margin:0;padding:0;flex:1;min-width:210px;display:grid;gap:9px}
.dnkey li{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:10px;
  font-size:12.5px;color:var(--ink)}
.dnkey i{width:10px;height:10px;border-radius:3px;background:var(--cloud)}
.dnkey i.s0{background:var(--yellow)}
.dnkey i.s1{background:var(--ink)}
.dnkey i.s2{background:var(--slate)}
.dnkey i.s3{background:var(--mist)}
.dnkey b{font-weight:700}
.dnkey em{font-style:normal;color:var(--grey);min-width:52px;text-align:right}

/* ---- a visit, an enquiry, a patient, the money ------------------------ */
.seofun{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.seofun .sf-s{flex:1;min-width:120px;padding:14px 15px;border:var(--hair);
  border-radius:var(--r-s);background:var(--white)}
.seofun .sf-s b{display:block;font-family:var(--disp);font-weight:700;font-size:23px;
  line-height:1.1;color:var(--ink)}
.seofun .sf-s span{display:block;margin-top:4px;font-size:12px;color:var(--slate)}
.seofun .sf-s em{display:block;margin-top:6px;font-style:normal;font-size:11px;color:var(--grey)}
.seofun .sf-a{align-self:center;color:var(--mist);font-size:15px}
/* The last step is the one the clinic is actually paid in. */
.seofun .sf-s:last-child{background:var(--y-15);border-color:var(--y-30)}

/* ---- keywords and pages ---------------------------------------------- */
.seotbl .cname{font-weight:500}
.seotbl .hook{display:block;margin-top:2px;font-size:11px;color:var(--grey);font-weight:400}
.seotbl .dlt{justify-content:flex-end}

/* ---- site health ----------------------------------------------------- */
.techl{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:1px;background:var(--cloud);
  border:var(--hair);border-radius:var(--r-s);overflow:hidden}
.techl li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;background:var(--white);font-size:12.5px}
.techl li[role="button"]{cursor:pointer}
.techl li[role="button"]:hover{background:var(--y-15)}
.techl .tl-n{display:flex;align-items:center;gap:9px;color:var(--ink)}
.techl .tl-n::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mist)}
/* Good is the brand's yellow and bad is the cloud grey. No green, no red:
   this product does not have a traffic light and does not need one. */
.techl li.pass .tl-n::before{background:var(--yellow)}
.techl li.issue .tl-n::before{background:var(--ink)}
.techl li.human .tl-n::before{background:var(--slate)}
.techl li.nm .tl-n::before{background:var(--cloud);border:1px solid var(--mist)}
.techl .tl-f{color:var(--grey);text-align:right}
.techl li.issue .tl-f{color:var(--ink);font-weight:500}

/* ---- the local profile ----------------------------------------------- */
.gbp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.gbp-h b{font-family:var(--disp);font-weight:700;font-size:15px}
.gbp-r{display:block;margin-top:3px;font-size:11.5px;color:var(--grey)}
.gbp-t{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0}
.gbp-t>div{padding:11px 13px;border:var(--hair);border-radius:var(--r-s)}
.gbp-t dt{font-size:11px;color:var(--grey);margin-bottom:4px}
.gbp-t dd{margin:0;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink)}
.gbp-todo{list-style:none;margin:14px 0 0;padding:13px 15px;border-radius:var(--r-s);
  background:var(--y-15);display:grid;gap:6px;font-size:12px;color:var(--ink)}
.gbp-todo li{display:flex;gap:8px}
.gbp-todo li::before{content:"\2022";color:var(--slate)}

/* The paired Google marks are drawn to fill whatever box they are given, and
   in a connection pill there is no box — so one is given here, or the logo
   takes over the header. */
.connpill .mk2{width:18px;height:18px;flex:0 0 18px}
.connpill .mk2 img{width:100%;height:100%}
.connpill .mk2 i{width:10px;height:10px;right:-3px;bottom:-3px}
.connpill .mk2 i svg{width:8px;height:8px;stroke-width:2.6}

/* ---- SEO activity: the work log --------------------------------------- */
.kpi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.actlog{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--cloud);
  border:var(--hair);border-radius:var(--r-s);overflow:hidden}
.actlog li{display:grid;grid-template-columns:74px 30px minmax(0,1fr) auto;align-items:center;
  gap:12px;padding:12px 14px;background:var(--white)}
.actlog .al-w{font-size:11px;color:var(--grey);letter-spacing:.02em}
.actlog .al-i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:9px;background:var(--y-30)}
/* A ranking that fell is still SHMEL's work to report, so it keeps its place
   in the log and loses the yellow — no red, the product does not have one. */
.actlog li.down .al-i{background:var(--cloud)}
.actlog .al-i .mico{width:15px;height:15px}
.actlog .al-b{min-width:0}
.actlog .al-b b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.actlog .al-b span{display:block;margin-top:2px;font-size:11.5px;color:var(--grey);
  overflow:hidden;text-overflow:ellipsis}
.actlog .al-k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);
  background:var(--wash);border-radius:var(--r-pill);padding:5px 10px;white-space:nowrap}
@media (max-width:900px){
  .kpi4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .actlog li{grid-template-columns:60px 26px minmax(0,1fr)}
  .actlog .al-k{display:none}
}

/* Create sits in the tab row, in yellow, exactly as it does on Social: same
   size, same weight, same padding, ink letters — yellow type on white is the
   one thing the brand never does. */
.mtabs .mtab-new{margin:0 0 0 2px;padding:9px 16px 10px;align-self:flex-end;
  border-radius:var(--r-s) var(--r-s) 0 0;background:var(--yellow);color:var(--ink);
  font-weight:700}
.mtabs .mtab-new:hover{background:#EFCF3C;color:var(--ink)}
.mtabs .mtab-new[aria-selected="true"]::after{left:0;right:0;background:var(--ink)}

/* ---- competitors, on every channel ----------------------------------- */
.cmptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  margin:0 0 18px}
.cmptile{padding:15px 16px;border:var(--hair);border-radius:var(--r-s);background:var(--white)}
.cmptile b{display:block;font-family:var(--disp);font-weight:700;font-size:15px}
.cmptile span{display:block;margin-top:5px;font-size:12px;color:var(--ink)}
.cmptile em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--grey)}
/* The rival's position on one search. Named for what it is: a bare `.ahead`
   also matched the calendar's future week columns, which carry `ahead` as a
   state, and turned every planned post's title into a 20px yellow circle. */
.rivalpos{display:inline-flex;align-items:center;gap:7px;margin:0 8px 4px 0;padding:4px 10px 4px 4px;
  border-radius:var(--r-pill);background:var(--wash);font-size:12px;color:var(--ink)}
.rivalpos b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--yellow);font-size:11px;font-weight:700}
/* What the product refuses to guess, said plainly rather than left as a gap
   the reader has to notice on their own. */
.cmpcant{margin:20px 0 0;padding:18px 20px;border-radius:var(--r);background:var(--wash)}
.cmpcant b{display:block;font-size:13px;margin-bottom:10px}
.cmpcant ul{margin:0;padding:0 0 0 18px;display:grid;gap:6px;font-size:12.5px;color:var(--slate)}
.cmpcant p{margin:12px 0 0;font-size:12px;color:var(--grey);max-width:70ch}
.cmpops{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:16px 0 0}
.cmpop{padding:15px 17px;border:var(--hair);border-radius:var(--r-s);background:var(--y-15)}
.cmpop b{display:block;font-size:13.5px;margin-bottom:6px}
.cmpop p{margin:0;font-size:12px;color:var(--slate);line-height:1.5}

/* ---- the page SHMEL writes ------------------------------------------- */
.wznear{margin:14px 0 0;padding:14px 16px;border:var(--hair);border-radius:var(--r-s);
  background:var(--white)}
.wznear b{display:block;font-size:12.5px;margin-bottom:8px}
.wznear ul{margin:0;padding:0 0 0 18px;display:grid;gap:5px;font-size:12px;color:var(--slate)}
.pgsec{display:grid;gap:10px;margin:16px 0 0}
.pgs{display:flex;gap:13px;padding:14px 16px;border:var(--hair);border-radius:var(--r-s);
  background:var(--white)}
.pgs-n{flex:0 0 24px;height:24px;border-radius:50%;background:var(--y-30);display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pgs b{display:block;font-size:13.5px;margin-bottom:4px}
.pgs p{margin:0;font-size:12px;color:var(--slate);line-height:1.5}
.pgfaq{margin:16px 0 0;padding:16px 18px;border:var(--hair);border-radius:var(--r-s);
  background:var(--white)}
.pgfaq>b{display:block;font-size:12.5px;margin-bottom:10px}
.pgfaq dl{margin:0;display:grid;gap:11px}
.pgfaq dt{font-size:13px;font-weight:700;color:var(--ink)}
.pgfaq dd{margin:3px 0 0;font-size:12px;color:var(--slate);line-height:1.5}

/* ---- competitors: read from how many, how long ago -------------------- */
.cmpbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border:var(--hair);border-radius:var(--r);background:var(--white);
  margin:0 0 12px}
.cmpbar-l b{display:block;font-size:13.5px}
.cmpbar-l span{display:block;margin-top:3px;font-size:11.5px;color:var(--grey)}
.cmpbar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmpadd{display:flex;align-items:center;gap:6px}
.cmpadd input{width:240px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  font:inherit;font-size:12.5px;background:var(--white);color:var(--ink)}
.cmpadd input:focus{outline:none;border-color:var(--mist)}
/* Two sites is not a market, and the banner says so in the same weight as
   everything else rather than hiding in a footnote. */
.cmpsample{padding:12px 16px;border-radius:var(--r-s);background:var(--wash);font-size:12.5px;
  color:var(--slate);margin:0 0 20px;line-height:1.55}
.cmpsample.thin{background:var(--y-15);color:var(--ink)}

/* ---- what to copy ----------------------------------------------------- */
.cmplearn{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;
  margin:0 0 22px}
.cmpl{padding:16px 18px;border:var(--hair);border-radius:var(--r);background:var(--white);
  box-shadow:var(--sh-s)}
.cmpl-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.cmpl-h b{font-family:var(--disp);font-weight:700;font-size:14.5px}
.cmpl-n{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink);background:var(--y-30);
  border-radius:var(--r-pill);padding:4px 9px;white-space:nowrap}
.cmpl p{margin:0 0 10px;font-size:12.5px;color:var(--slate);line-height:1.5}
.cmpl-f{display:grid;gap:3px;padding-top:10px;border-top:1px solid var(--line)}
.cmpl-w{font-size:11.5px;color:var(--ink)}
.cmpl-e{font-size:11px;color:var(--grey)}
.cmpahead{padding:16px 18px;border-radius:var(--r);background:var(--y-15);margin:0 0 22px}
.cmpahead>b{display:block;font-size:13px;margin-bottom:10px}
.cmpahead ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cmpahead li{display:flex;align-items:baseline;gap:10px;font-size:12.5px}
.cmpahead li span{font-weight:500}
.cmpahead li em{font-style:normal;color:var(--slate);font-size:11.5px}
.cmpahead p{margin:12px 0 0;font-size:12px;color:var(--slate);max-width:70ch}

/* ---- the checklist ---------------------------------------------------- */
.cmpmx th.num,.cmpmx td.num{text-align:center}
.cmpmx tr.gap{background:var(--y-15)}
.tk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--cloud);color:var(--grey);font-size:12px}
.tk.on{background:var(--yellow);color:var(--ink);font-weight:700}
.bs-l{margin:-4px 0 14px;font-size:12.5px;color:var(--slate);line-height:1.55;max-width:78ch}

/* ---- day by day ------------------------------------------------------- */
/* Long periods make a long table. It scrolls inside its own panel rather
   than pushing everything below it off the screen. */
/* One day, then a range. The day sits first because it is the question with
   one answer; the range is the one that needs two fields and a button. */
.wc-day{margin-bottom:10px}
.wc-or{margin:0 0 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mist)}
.camps-lede{margin:-6px 0 14px;max-width:80ch}
/* A row that happened on this account, against the sample history. */
.actlog .al-k.real{background:var(--y-30);color:var(--ink);font-weight:700}
.gapnote{font-size:11.5px;color:var(--grey)}

/* ---- email: automations and the list ---------------------------------- */
.flowgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.flowc{padding:16px 18px;border:var(--hair);border-radius:var(--r);background:var(--white);
  box-shadow:var(--sh-s)}
/* A flow that is off is not a failure, it is an unopened envelope: grey
   ground, no yellow, and the card still carries what it would do. */
.flowc.off{background:var(--wash);box-shadow:none}
.fc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.fc-h b{font-family:var(--disp);font-weight:700;font-size:14.5px}
.fc-t{display:block;margin-top:3px;font-size:11.5px;color:var(--grey)}
.fc-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
.fc-m dt{font-size:10.5px;color:var(--grey);margin-bottom:3px}
.fc-m dd{margin:0;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink)}
.fc-off{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-s);background:var(--white);
  font-size:12px;color:var(--slate)}
.fc-n{margin:0;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--grey);
  line-height:1.5}
.seglist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.seglist li{display:grid;gap:3px}
.seglist b{font-size:13.5px}
.seglist span{font-size:12px;color:var(--ink)}
.seglist em{font-style:normal;font-size:11.5px;color:var(--grey);line-height:1.5}

/* A panel that says what is missing says it as steps, in the order they have
   to happen, each with the button that does it. */
.nlsteps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.nlsteps li{display:flex;gap:12px;align-items:flex-start}
.nls-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;
  height:24px;border-radius:50%;background:var(--yellow);font-family:var(--sans);
  font-size:11.5px;font-weight:700;line-height:1;color:var(--ink)}
.nlsteps li b{display:block;font-size:14px;font-weight:700;margin-bottom:3px}
.nlsteps li p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--grey);max-width:74ch}

/* The line under the Compliance title needs air before the panel that says
   nothing has been screened; they were reading as one block. */
#view-compliance .vhead{margin-bottom:26px}
.notlive.cmpnone .nl-h{margin-bottom:0}

/* Not connected: what is missing, and the button that connects it, on one
   line. The panel used to carry a sentence saying the same thing again. */
.notlive.nlrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px}
.notlive.nlrow + .notlive.nlrow{margin-top:12px}
.notlive.nlrow .kbadge{background:transparent;border:1px solid var(--line-2);color:var(--grey)}
.notlive.nlrow .btn{margin-left:auto}
@media (max-width:560px){ .notlive.nlrow .btn{margin-left:0;width:100%} }

/* The hours, in the jobs that took them. A bar each, inside the same bubble
   the other figures use — wider, because this one is a list. */
.rchip.wide .rwhy{max-width:min(320px,80vw)}
/* Scoped under the tile, because the tile styles every span inside it as an
   uppercase caption — which is what turned these rows into three stacked
   lines of capitals the first time round. */
.rchip .rbars{display:flex;flex-direction:column;gap:6px;margin:10px 0 0;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.18);text-transform:none;letter-spacing:0}
.rchip .rbar{display:grid;grid-template-columns:minmax(0,1fr) 58px 32px;align-items:center;
  gap:8px;margin:0 -7px;padding:3px 7px;border-radius:9px;text-transform:none;letter-spacing:0;
  transition:background .14s var(--ease),transform .14s var(--ease)}
/* The pointer goes on the bar itself: the bar grows a little and its figure
   grows with it. The row behind them stays where it is. */
@media (prefers-reduced-motion:reduce){
  .rchip .rbar-t:hover{transform:none}
  .rchip .rbar-t:hover ~ .rbar-v{transform:none}
}
.rchip .rbar-k{display:block;margin:0;font-size:10.5px;line-height:1.3;
  color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-transform:none;letter-spacing:0}
.rchip .rbar-t{display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.22);
  overflow:hidden;margin:0;transform-origin:center;
  transition:transform .14s var(--ease),background .14s var(--ease)}
.rchip .rbar-t i{display:block;height:100%;background:var(--yellow);
  transition:filter .14s var(--ease)}
.rchip .rbar-t:hover{transform:scaleY(1.9) scaleX(1.03);background:rgba(255,255,255,.32)}
.rchip .rbar-t:hover i{filter:brightness(1.08)}
.rchip .rbar-t:hover ~ .rbar-v{transform:scale(1.16);color:#fff}
.rchip .rbar-v{display:block;margin:0;font-size:10.5px;line-height:1.3;text-align:right;
  color:rgba(255,255,255,.78);text-transform:none;letter-spacing:0;
  transform-origin:right center;transition:transform .14s var(--ease),color .14s var(--ease)}

/* The last tile's bubble would hang off the right edge if it were centred on
   it, so it hugs the tile's right side and its tail moves with it. */
.rchips .rchip:last-child .rwhy{left:auto;right:-6px;transform:translateX(0) translateY(-4px)}
.rchips .rchip:last-child:hover .rwhy,
.rchips .rchip:last-child:focus-visible .rwhy{transform:translateX(0) translateY(0)}
.rchips .rchip:last-child .rwhy::after{left:auto;right:46px;transform:none}

/* No room above: the bubble opens under the tile and its tail flips with it. */
.rchip.down .rwhy{top:calc(100% + 14px);bottom:auto;transform:translateX(-50%) translateY(4px)}
.rchip.down:hover .rwhy,.rchip.down:focus-visible .rwhy{transform:translateX(-50%) translateY(0)}
.rchip.down .rwhy::after{top:auto;bottom:100%;border-top:0;
  border-bottom:9px solid rgba(84,90,104,.62)}
.rchips .rchip:last-child.down .rwhy{transform:translateX(0) translateY(4px)}
.rchips .rchip:last-child.down:hover .rwhy,
.rchips .rchip:last-child.down:focus-visible .rwhy{transform:translateX(0) translateY(0)}
/* The offer picker sits above the sends it feeds. */
.eoffer{margin:0 0 16px}
.eoffer input{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px}
.eoffer input:focus{outline:none;border-color:var(--mist)}
.ic-rules{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px}
.ic-rules li{position:relative;padding-left:14px;font-size:11.5px;color:var(--grey);line-height:1.45}
.ic-rules li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--y-55)}

/* ---- email: whose number is whose --------------------------------------- */
.platline{margin:-6px 0 18px;font-size:12px;color:var(--grey);max-width:92ch;line-height:1.5}
.kpi3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
/* The cards the sending platform cannot produce on its own carry where they
   came from, on the card rather than in a footnote nobody reads. */
.kcard.attr{background:linear-gradient(180deg,var(--y-15) 0%,rgba(255,255,255,0) 70%)}
.kc-attr{display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--y-30);
  font-size:10.5px;color:var(--slate)}
.attrnote{padding:16px 18px;border-radius:var(--r);background:var(--wash);margin:0 0 16px}
.attrnote b{display:block;font-size:13px;margin-bottom:5px}
.attrnote span{font-size:12.5px;color:var(--slate);line-height:1.55}
@media (max-width:900px){ .kpi3{grid-template-columns:repeat(1,minmax(0,1fr))} }
/* What happens after Write it, in order. */
.mksteps{list-style:none;margin:0 0 22px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.mksteps li{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-s);background:var(--white)}
.mksteps i{flex:0 0 24px;height:24px;border-radius:50%;background:var(--yellow);font-style:normal;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.mksteps b{display:block;font-size:13px;margin-bottom:3px}
.mksteps span{font-size:11.5px;color:var(--grey);line-height:1.45}
.drnote{font-size:11.5px;color:var(--grey);max-width:34ch;line-height:1.4}

/* ---- the email chart: bars for what went out, a line for who opened ---- */
.echartwrap{position:relative;width:100%}
.echart{display:block;width:100%;height:auto}
.echart .gl{stroke:var(--cloud);stroke-width:1}
.echart .ax{font-size:10.5px;fill:var(--grey);font-weight:700;letter-spacing:.04em}
.echart .eb{fill:var(--cloud)}
/* A day something was sent by hand stands out from the automatic trickle. */
.echart .eb.one{fill:var(--yellow)}
.echart .eline{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.echart .ehit{fill:transparent;cursor:default}
.echart .ehit.on{fill:rgba(23,28,43,.04)}
.chartkey .bars::before{background:var(--cloud)}
.chartkey .one::before{background:var(--yellow)}
.chartkey .rate::before{background:var(--ink)}
.etip{position:absolute;z-index:5;min-width:190px;padding:12px 14px;border-radius:var(--r-s);
  background:var(--ink);color:var(--white);box-shadow:var(--sh-m);pointer-events:none}
.etip b{display:block;font-size:12.5px}
.etip .et-n{display:block;margin:3px 0 9px;font-size:11px;color:var(--mist)}
.etip dl{margin:0;display:grid;gap:5px}
.etip dl div{display:flex;justify-content:space-between;gap:14px;font-size:11.5px}
.etip dt{color:var(--mist)}
.etip dd{margin:0;font-weight:700}

/* ---- create, on email: two kinds, then a sentence --------------------- */
.ekinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 0 14px}
.ekind{text-align:left;padding:18px 20px;border:var(--hair);border-radius:var(--r);
  background:var(--white);cursor:pointer;transition:box-shadow var(--d-hover) var(--ease)}
.ekind:hover{box-shadow:var(--sh-m)}
.ekind b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;margin-bottom:6px}
.ekind span{display:block;font-size:12.5px;color:var(--slate);line-height:1.5}
.wzf.ewide{grid-column:1/-1}
.wzf textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;resize:vertical;
  line-height:1.5}
.wzf textarea:focus{outline:none;border-color:var(--mist)}
.edrafts{display:grid;gap:12px;margin:0 0 16px}
.erevise{display:flex;align-items:flex-end;gap:10px;padding:14px 16px;border-radius:var(--r-s);
  background:var(--white);margin:0 0 16px;flex-wrap:wrap}
.erevise label{flex:1;min-width:240px}
.erevise label span{display:block;font-size:12px;color:var(--slate);margin-bottom:6px}
.erevise input{width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.erevise input:focus{outline:none;border-color:var(--mist)}
/* The two that need no model say so on the card. */
.skinds .ekind{position:relative}
.ek-tag{display:inline-block;margin-top:10px;padding:4px 9px;border-radius:var(--r-pill);
  background:var(--y-30);font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink)}
.wznear li{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}

/* ===================================================== PUBLIC ONBOARDING
   The setup screens on their own page at /onboarding. The layout is the
   product's; what is new here is the page it sits on, the dictation button
   and the screen that comes after the answers are sent. */
body.obpage{margin:0;background:var(--paper);min-height:100vh}
body.obpage .ob{min-height:100vh}
/* The thank-you screen is the page, not a block inside it: the in-product
   .obdone is a section with a rule above it, and both of those would show
   through here. */
body.obpage.done{display:block}
body.obpage .obdone{margin:0;border-top:0;width:100%;animation:none;transform:none}
.obpage .rail-mark{text-decoration:none;color:inherit}
/* A card that happens to be a link is still a card. */
.obpage a.pick2,.obpage a.pick2 span{text-decoration:none}
.obpage a.pick2{color:inherit}

/* Dictation. The button sits inside the field it fills, and pulses while it
   is listening so nobody wonders whether it heard them. */
.micwrap{position:relative;display:block}
.micwrap textarea,.micwrap input{padding-right:44px}
.micbtn{position:absolute;right:8px;bottom:8px;width:30px;height:30px;display:grid;
  place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--muted);cursor:pointer;padding:0;transition:color .14s,border-color .14s,
  background .14s,box-shadow .14s}
.micbtn svg{width:15px;height:15px}
.micbtn:hover{color:var(--ink);border-color:var(--ink)}
.micbtn.on{background:var(--yellow);border-color:var(--yellow);color:var(--ink);
  animation:micpulse 1.6s ease-in-out infinite}
@keyframes micpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(249,224,97,.8)}
  50%{box-shadow:0 0 0 7px rgba(249,224,97,0)}
}
@media (prefers-reduced-motion:reduce){ .micbtn.on{animation:none} }

/* The summary on the last form screen. */
.obsum{margin:22px 0 18px;max-width:60ch}

/* What they see once the answers are away. */
.obdone{min-height:100vh;display:grid;place-items:center;padding:40px 24px;
  background:radial-gradient(120% 90% at 50% 0%,var(--y-15) 0%,var(--paper) 62%)}
.obdone-in{max-width:56ch;text-align:center}
.obdone-bee{width:96px;height:96px;display:block;margin:0 auto 18px;
  animation:beefly 3.4s ease-in-out infinite}
@keyframes beefly{
  0%{transform:translateY(14px) scale(.96);opacity:0}
  18%{transform:translateY(0) scale(1);opacity:1}
  50%{transform:translateY(-9px) scale(1)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){ .obdone-bee{animation:none} }
.obdone h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3rem);
  line-height:1.05;margin:0 0 12px;letter-spacing:-.01em}
.obdone .lede{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 auto}
.obdone-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.obdone-act a,.obdone-act a:hover{text-decoration:none}
.obdone.bad{background:var(--paper)}

/* The dictation button where it sits inside the product's own boxes: the ask
   panel, the channel bars, the composer's chat. Each of those is a flex row
   ending in a send button, so the microphone is anchored to a wrapper around
   the field itself and the wrapper inherits the field's place in the row. */
.micwrap-i{position:relative;display:block;flex:1 1 auto;min-width:0}
.micwrap-i > input,.micwrap-i > textarea{width:100%;padding-right:42px}
.micbtn.inline{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;z-index:2}
/* What a landing page does when the click arrives. */
.lpchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.lpchips i{font-style:normal;font-size:10.5px;padding:3px 8px;border-radius:var(--r-pill);
  background:var(--cloud);color:var(--grey)}
.lpchips i.on{background:var(--y-30);color:var(--ink)}
.lpchips i.on.soft{background:var(--wash);color:var(--slate)}
/* One place for everything approved and waiting, whichever screen made it. */
.qall{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:1px;background:var(--cloud);
  border:var(--hair);border-radius:var(--r-s);overflow:hidden}
.qall li{display:grid;grid-template-columns:110px minmax(0,1fr) auto auto;align-items:center;
  gap:14px;padding:13px 16px;background:var(--white)}
.qa-c{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.qa-n b{display:block;font-size:13px}
.qa-n em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--grey)}
.qa-w{font-size:11.5px;color:var(--grey);white-space:nowrap}
@media (max-width:760px){
  .qall li{grid-template-columns:minmax(0,1fr) auto}
  .qa-c,.qa-w{display:none}
}
/* A recommendation on a campaign card can be answered where it is read. */
.cc-act{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.cc-done{display:inline-block;margin-top:12px;font-size:11.5px;color:var(--slate);
  background:var(--wash);border-radius:var(--r-pill);padding:5px 11px}
/* A search campaign has no creative, so its card has no picture slot. */
.cc-h.nopic{padding-left:0}

/* ---- competitors: one table ------------------------------------------- */
/* Twelve short columns and a name, so it scrolls sideways in its wrap and
   the clinic column stays where the eye goes back to. */
.cmptbl th.num,.cmptbl td.num{text-align:center}
.cmptbl th.num{font-size:11px;line-height:1.3;white-space:normal;min-width:62px}
.cmptbl tr.me{background:var(--y-15)}
.cmptbl tr.me td.cname em{font-style:normal;font-size:10.5px;color:var(--slate);
  text-transform:uppercase;letter-spacing:.06em}
.cmptbl tr.unread td{color:var(--grey)}
/* A cell that has no answer says which kind of nothing it is. */
.nod{font-size:11.5px;color:var(--grey)}
.cmpgaps{margin:14px 0 22px;padding:16px 18px;border-radius:var(--r);background:var(--wash)}
.cmpgaps p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.cmpgaps p+p{margin-top:8px}
.cmpgaps b{font-weight:600;color:var(--ink)}

/* ---- a count on a channel tab ----------------------------------------- */
.mtabs button i{display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;margin-left:7px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--cloud);color:var(--slate);font-style:normal;font-size:10.5px;font-weight:600}
.mtabs button[aria-selected="true"] i{background:var(--ink);color:#fff}
/* Two analysis panels to a row on Campaigns, so the tab is one screen
   shorter. Their tables keep their own sideways scroll inside. */
.mrow-top{align-items:start}
.mrow-top>.pnl{padding:20px 22px}
.mrow-top .sec-h{margin-top:0}
.mrow-top .sec-h h2{font-size:15px}

/* ---- a column header that says what the figure is --------------------- */
/* Six numeric columns and no two of them are the same kind of number. The
   note under the name is what stops a reader guessing. */
.tbl th em{display:block;margin-top:3px;font-style:normal;font-weight:400;
  font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);line-height:1.35}
/* "no change" is a word where a number goes, so it does not wear the pill. */
.dlt.flat{background:none;padding:0;color:var(--grey);font-size:11px;font-weight:400}

/* ---- the ask field asks to be used ------------------------------------ */
/* The field sat on a yellow panel in a yellow border and read as decoration.
   A slow ring around it says a question goes here. Yellow, not blue: the
   palette has one accent and this is what it is for. It stops on focus and
   once a question has been asked on this screen. */
@keyframes askring{
  0%,100%{box-shadow:0 0 0 0 rgba(249,224,97,0)}
  50%{box-shadow:0 0 0 5px rgba(249,224,97,.85)}
}
.obr-ask input{animation:askring 2.6s ease-in-out infinite}
.obr-ask input:focus,.askbar.asked .obr-ask input{animation:none}
@media (prefers-reduced-motion:reduce){
  .obr-ask input{animation:none;box-shadow:0 0 0 3px rgba(249,224,97,.7)}
}

/* ---- demo data says so, in the pill above the figures ------------------ */
/* Yellow ground, never yellow text. A reader who glances at the header has
   to be able to tell synthetic figures from a connected account. */
.connpill .st.demo{background:var(--y-15);color:var(--ink)}
.connpill .st.demo::before{background:var(--yellow)}
/* The name takes the room, then the label, then the figure — so the DEMO
   chip and the headline number can sit on the same row without fighting. */
.chc-h b{flex:1 1 auto;min-width:0}

/* ---- preview modules ---------------------------------------------------
   Visible, openable, and never mistaken for a channel that is running.
   Muted in the rail, tagged, and the tag folds away with the rail. */
.rail nav button.prev{opacity:.62}
.rail nav button.prev:hover,.rail nav button.prev[aria-current="true"]{opacity:1}
.rail nav button .soon{margin-left:auto;flex:none;font-size:9.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mist);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:2px 7px}
.app.railmin .rail nav button .soon{display:none}

/* The banner the preview screens carry, above their own header. */
.prevbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 20px;padding:13px 18px;border-radius:var(--r);
  background:var(--y-15);border:1px dashed var(--y-55)}
.prevbar b{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);flex:none}
.prevbar span{font-size:12.5px;color:var(--ink-2);line-height:1.5;flex:1 1 260px;min-width:0}



/* ---- a scheduled post carries its own state --------------------------- */
.socday-st.ok{background:var(--wash);color:var(--ink-2)}
.socday-st.warn{background:var(--y-15);color:var(--ink)}
.socday-st.bad{background:var(--cloud);color:var(--slate)}
.socday-st.live{background:var(--ink);color:#fff}
/* The compliance verdict, on the panel with the button that acts on it. */
.mkscr{margin-top:14px;padding:12px 15px;border-radius:var(--r);background:var(--wash)}
.mkscr.ok{background:var(--y-15)}
.mkscr.warn{background:var(--y-15)}
.mkscr.bad{background:var(--cloud)}
.mkscr b{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.mkscr span{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* ==================================================== strategy
   The step between onboarding and the channels. Built from the panels the
   product already uses — a panel, a section head, the same chips — so it
   reads as the same product. No red, no green: the palette has one accent,
   a gap is cloud grey and an uplift is a yellow ground. */
.planwait{display:flex;align-items:center;gap:12px;padding:28px 24px;
  border-radius:var(--r-l);background:var(--white);box-shadow:var(--sh-s)}
.planwait b{font-size:14px}
.planwait>span:last-child{font-size:13px;color:var(--slate)}

/* ---- who this is for, and what it has to hit ------------------------- */
.stcard{position:relative;overflow:hidden;display:flex;align-items:stretch;gap:26px;
  flex-wrap:wrap;margin-bottom:16px;padding:22px 26px;border-radius:var(--r-l);
  background:var(--white);box-shadow:var(--sh-m)}
/* The bleed sits in the positioned layer, so everything it must sit behind
   is positioned too — the same arrangement as .hero-in. */
/* Offset in pixels, not per cent: a percentage is read against the card's
   own height, so a short card pulled the circle up into the middle of it. */
.stcard::after{content:"";position:absolute;right:-56px;bottom:-330px;width:440px;height:440px;
  border-radius:50%;background:rgba(249,224,97,.18);pointer-events:none}
.stc-who{position:relative;flex:1 1 320px;min-width:0;display:flex;gap:14px;align-items:flex-start}
.stc-av{flex:none;width:46px;height:46px;border-radius:var(--r);background:var(--y-15);
  display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--ink)}
.stc-id{min-width:0}
.stc-id b{display:block;font-size:17px;font-weight:700;line-height:1.25}
.stc-id>span{display:block;margin-top:3px;font-size:12.5px;color:var(--slate)}
.stc-id p{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.stc-figs{position:relative;flex:2 1 460px;min-width:0;display:flex;gap:26px;flex-wrap:wrap;
  padding-left:26px;border-left:var(--hair)}
.stc-f{min-width:96px}
.stc-k{display:block;margin-bottom:6px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.stc-f>b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;
  line-height:1.05;letter-spacing:-.01em}
.stc-s{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--slate)}
.stc-svc{flex:1 1 200px}
.stc-tags{display:flex;flex-wrap:wrap;gap:7px}
.psvc{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;
  border-radius:var(--r-pill);background:var(--y-15)}
.psvc b{font-size:12.5px;font-weight:600}
.psvc i{font-style:normal;font-size:11.5px;color:var(--slate)}
@media (max-width:900px){.stc-figs{padding-left:0;border-left:0}}

/* ---- the gap --------------------------------------------------------- */
/* The one sentence this panel exists for, set the way the product sets a
   verdict: serif, and the figure carries the band. */
.stgap-l{margin:0 0 18px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;letter-spacing:-.01em;max-width:24ch}
.stgap-n{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.stgap-n>div>b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;
  line-height:1;letter-spacing:-.01em}
.stgap-n>div>span{display:block;margin-top:5px;font-size:11.5px;color:var(--slate)}
.stgap-n .vs{padding-bottom:6px;font-size:12px;color:var(--muted)}
.stgap-d{margin-left:auto;padding:9px 14px;border-radius:var(--r);background:var(--wash)}
.stgap-d b{font-family:var(--serif);font-weight:400;font-size:22px}
.stgap-bars{display:grid;gap:9px}
.stgap-bar{display:flex;align-items:center;gap:12px}
.stgap-bar .l{flex:none;width:52px;font-size:11.5px;color:var(--slate)}
.stgap-bar .tr{flex:1 1 auto;min-width:0}
/* The bar is split where the target is. What the clinic can afford is on the
   brand ground; the part it cannot is ink. One accent, one alarm, no second
   colour system — and the overshoot is the darkest thing on the panel,
   which is what makes the eye land on it. */
.stgap-bar .b{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--cloud)}
.stgap-bar .b .fit{background:var(--yellow);display:block}
.stgap-bar .b .over{flex:1 1 auto;background:var(--ink);display:block}
.stgap-bar .v{flex:none;width:60px;text-align:right;font-size:12.5px;font-weight:600}
.stgap-key{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 0;font-size:11.5px;
  color:var(--slate)}
.stgap-key span{display:inline-flex;align-items:center;gap:7px}
.stgap-key .k{width:14px;height:8px;border-radius:var(--r-pill);flex:none}
.stgap-key .k.fit{background:var(--yellow)}
.stgap-key .k.over{background:var(--ink)}

/* ---- what fixing it is worth ---------------------------------------- */
/* Three blocks and an arrow inside a half-width panel: they have to share
   whatever is there rather than each claiming a minimum and wrapping. */
.stproj-n{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.stp-b{flex:1 1 0;min-width:0;padding:13px 10px;border-radius:var(--r);
  background:var(--wash);text-align:center}
.stp-b.up{background:var(--y-15)}
.stp-b b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;
  line-height:1;letter-spacing:-.01em}
.stp-b span{display:block;margin-top:6px;font-size:10.5px;line-height:1.35;color:var(--slate)}
.stp-ar{flex:none;font-style:normal;font-size:13px;color:var(--mist)}
@media (max-width:520px){.stproj-n{flex-wrap:wrap}.stp-b{flex:1 1 44%}}
.stproj-w{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--ink-2)}

/* ---- why this order -------------------------------------------------- */
/* Closed it is one line naming the order; open it is one reason per channel.
   A paragraph nobody reads is worse than a line they can choose to. */
.stwhy{margin:16px 0 26px;border-radius:var(--r-l);background:var(--y-15);overflow:hidden}
.stwhy-h{display:flex;align-items:center;gap:13px;width:100%;padding:15px 20px;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.stwhy-i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--yellow)}
.stwhy-h>b{flex:none;font-size:13.5px;font-weight:700}
.stwhy-s{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--slate);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stwhy-c{flex:none;width:9px;height:9px;border-right:1.5px solid var(--slate);
  border-bottom:1.5px solid var(--slate);transform:rotate(45deg);margin-right:4px;
  transition:transform var(--d-state) var(--ease)}
.stwhy.on .stwhy-c{transform:rotate(-135deg)}
.stwhy-b{padding:2px 20px 18px 59px;display:grid;gap:12px}
.stwhy-r{display:flex;gap:11px;align-items:flex-start}
.stwhy-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--white);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--ink)}
.stwhy-r>div{min-width:0}
.stwhy-r b{display:block;font-size:13px;font-weight:700;margin-bottom:2px}
.stwhy p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:82ch}
.stwhy p b{display:inline;font-weight:700;color:var(--ink)}
@media (max-width:720px){
  .stwhy-s{display:none}
  .stwhy-b{padding-left:20px}
}

/* ---- the roadmap strip ---------------------------------------------- */
/* A rail. The line runs through the numbers rather than between three
   separate cards, so the order is something the eye follows. */
/* Auto columns rather than three fixed ones: a clinic with two channels in
   its plan gets two equal stops, not two squeezed into the left third. */
.stroad{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-bottom:16px;
  padding:20px 24px 22px;border-radius:var(--r-l);background:var(--white);box-shadow:var(--sh-s)}
.stroad-s{min-width:0;padding-right:18px}
.stroad-w{display:block;margin-bottom:10px;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--mist)}
.stroad-s.first .stroad-w{color:var(--ink)}
.stroad-node{display:flex;align-items:center;margin:0 0 12px}
.stroad-l{height:1.5px;background:var(--cloud);display:block}
/* Every stop sits at the left of its own column, above its own title, and
   the line reaches forward to the next one. Letting the line before a stop
   grow too put each number in a different place. */
.stroad-l.left{display:none}
.stroad-l.right{flex:1 1 auto;margin-left:12px}
/* The rail ends at the last stop: a line running off the end would be saying
   there is a step there. */
.stroad-s.last .stroad-l.right{visibility:hidden}
/* Only the step being started carries the ground. Fill all three and the
   rail stops saying which one is first. */
.stroad-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--cloud);display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:var(--slate)}
.stroad-s.first .stroad-n{background:var(--yellow);color:var(--ink);
  box-shadow:0 0 0 5px var(--y-15)}
.stroad-c{min-width:0}
.stroad-c b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.stroad-d{display:block;margin:4px 0 9px;font-size:12px;line-height:1.5;color:var(--slate)}
.stroad-c .chip{font-size:9.5px;padding:4px 10px}
@media (max-width:860px){
  .stroad{grid-auto-flow:row;grid-auto-columns:auto;gap:16px;padding:18px 20px}
  .stroad-s{padding-right:0}
  .stroad-l{display:none}
  .stroad-node{margin-bottom:8px}
}

/* ---- the three channel cards ---------------------------------------- */
.stchs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.stch{display:flex;flex-direction:column;padding:20px 22px;border-radius:var(--r-l);
  background:var(--white);box-shadow:var(--sh-s)}
.stch-h{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.stch-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--ink)}
.stch-h b{flex:1 1 auto;min-width:0;font-size:16px;font-weight:700}
.stch-h .chip{flex:none}
.stch-does{margin:0 0 16px;font-size:12.5px;line-height:1.5;color:var(--slate)}
.stch-sec{margin-bottom:16px}
.stch-lab{display:block;margin-bottom:7px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.stch-sec>b{display:block;font-size:14px;font-weight:700;line-height:1.35;margin-bottom:6px}
.stch-sec p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.stch-sec ul{margin:0;padding-left:17px;display:grid;gap:6px}
.stch-sec li{font-size:13px;line-height:1.55;color:var(--ink-2)}
/* The finding is what the owner reads first, so it is the only block on the
   card with a ground and an edge — the same edge the to-do cards use. How
   loud that edge is comes off the engine's own grading.

   No red and no green anywhere: this palette has seven values and one
   accent. Severity is carried by weight instead — ink for what is costing
   money today, the brand ground for what is worth fixing, and a dashed grey
   for what SHMEL cannot see at all. */
.stch-fix{padding:13px 16px 14px;border-radius:var(--r);background:var(--wash);
  border-left:4px solid var(--yellow)}
.stch-fix>b{font-size:14.5px}
/* The one that is costing money carries the most weight on the card: the
   deepest ground the palette allows, and the ink edge. */
.stch-fix.hot{background:rgba(23,28,43,.055);border-left-color:var(--ink)}
.stch-fix.hot>b{color:var(--ink)}
.stch-fix.warm{background:var(--y-15);border-left-color:var(--yellow)}
.stch-fix.blind{background:var(--wash);border-left-color:var(--mist);border-left-style:dashed}
.stch-fh{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.stch-fh .stch-lab{margin-bottom:0}
.stsev{flex:none;margin-left:auto;padding:3px 9px;border-radius:var(--r-pill);
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap}
.stsev.hot{background:var(--ink);color:var(--white)}
.stsev.warm{background:var(--yellow);color:var(--ink)}
.stsev.blind{background:var(--cloud);color:var(--slate)}
/* Moves in an order, not four identical dots on three identical cards. */
.stch-moves{margin:0;padding:0;list-style:none;counter-reset:mv;display:grid;gap:8px}
.stch-moves li{counter-increment:mv;position:relative;padding-left:26px;
  font-size:13px;line-height:1.55;color:var(--ink-2)}
.stch-moves li::before{content:counter(mv);position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:50%;background:var(--wash);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--slate)}
/* The card to start with is the one the eye should land on first. */
.stch.first{position:relative;box-shadow:var(--sh-m)}
.stch-flag{position:absolute;top:0;right:22px;padding:5px 11px 6px;
  border-radius:0 0 var(--r-s) var(--r-s);background:var(--yellow);color:var(--ink);
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.stch.first .stch-h{padding-right:96px}
.stch-out{margin-top:auto;padding:13px 16px;border-radius:var(--r);background:var(--y-15)}
.stch-out.none{background:var(--wash)}
.stch-out b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;
  line-height:1.15;letter-spacing:-.01em}
.stch-out>span:last-child{display:block;margin-top:3px;font-size:12px;color:var(--slate)}
.stch-out p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.stch-f{margin-top:16px}

/* ---- you stay in control -------------------------------------------- */
.stctl{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;
  padding:18px 22px;border-radius:var(--r-l);background:var(--wash)}
.stctl>div{flex:1 1 320px;min-width:0}
.stctl b{display:block;font-size:13.5px;font-weight:700;margin-bottom:4px}
.stctl span{font-size:12.5px;line-height:1.55;color:var(--slate)}
.planfoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 0;
  padding:18px 22px;border-radius:var(--r-l);background:var(--wash)}
.planfoot>div{flex:1 1 300px;min-width:0}
/* The clinic card with nothing captured yet: the space says what is missing. */
.stc-none{display:block}
.stc-none p{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
/* Two statements can share the trust line. In a wrapping flex row a
   full-width item is what forces the break, so the second statement starts
   on its own line instead of reading as the tail of the first. */
.tl-sep{flex:1 0 100%;height:1px;margin:8px 0;background:var(--line-2);opacity:.6}
.trustline:has(.tl-sep){border-radius:var(--r)}

/* ======================================== the social content queue
   A strip above the content calendar, not a console. The calendar is a
   set of dates; this is the same posts read by what they are waiting on,
   which is the half a calendar cannot show. Same card, same state chips,
   same panel as everything else on Social. */
.socq{margin-bottom:14px}
.socq .rc-h{flex-wrap:wrap;margin-bottom:12px}
.socq-sum{display:block;margin-top:4px;font-size:12.5px;color:var(--slate)}
/* <i> rather than <b>: .rc-h b is a block rule, and a block inside this
   line would break it at every number. */
.socq-n{font-style:normal;font-weight:700;color:var(--ink)}
.socq-seg{flex-wrap:wrap}
.socq-l{display:grid;gap:8px}
.socqr{display:flex;align-items:center;gap:11px;width:100%;padding:11px 14px;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);font:inherit;
  color:inherit;cursor:pointer;transition:border-color var(--d-hover) var(--ease)}
.socqr:hover{border-color:var(--line-2)}
.socqr-net{flex:none;display:inline-flex}
.socqr-net svg{width:16px;height:16px;display:block}
.socqr-b{flex:1 1 auto;min-width:0}
.socqr-b b{display:block;font-size:13.5px;font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socqr-m{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--muted)}
.socqr .socday-st{margin-left:0;flex:none}
.socq-e{margin:0;padding:14px 2px 4px;font-size:12.5px;line-height:1.55;color:var(--slate)}
@media (max-width:620px){
  .socqr{flex-wrap:wrap}
  .socqr-b{flex-basis:100%;order:2}
}

/* ==================================== compliance: the state that needs a person
   Escalated was in a side panel below the findings table. It is a tile now,
   and the tile filters the table to the rows it counts. */
.cmpt-go{width:100%;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:box-shadow var(--d-hover) var(--ease)}
.cmpt-go:hover{box-shadow:var(--sh-m)}
.cmpt-i.esc{background:var(--ink);color:var(--white)}
/* The seven values and one accent, here too. #C0453C and #2E7D58 were a
   second colour system on the one screen whose whole job is to be trusted —
   and the palette has no red and no green in it. Risk is ink, passed is the
   brand ground. */
.cmpt-i.risk{background:var(--cloud);color:var(--ink)}
.cmpt-i.ok{background:var(--y-30);color:var(--ink)}
.cmpt-i.warn{background:var(--y-30);color:var(--ink)}

/* The reset row, armed. Two presses because there is no undo behind it: it
   wipes the clinic, the plan, the queue and everything SHMEL has written. */
.dangerrow.armed{border-color:var(--ink);background:var(--wash)}
.dangerrow.armed span b{font-weight:700}
.dangerrow.armed .btn{margin-left:0}
.dangerrow.armed .btn:first-of-type{margin-left:auto}
/* The deltas and the before/after on this screen were the same second colour
   system. Compliance is the one screen whose whole job is to be trusted, so
   it keeps to the seven values: direction is carried by the arrow and the
   weight, and the rewrite is the one on the brand ground. */
.cmpd.up,.cmpd.down{color:var(--ink)}
.cmpdiff-r.was{border-color:var(--line-2)}
.cmpdiff-r.was p{color:var(--muted);text-decoration-color:var(--line-2)}
.cmpdiff-r.now{border-color:var(--y-55);background:var(--y-15)}


/* Overview business funnel: only stages the connected sources can prove. */
.ovfunnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 26px}
.ovfstep{position:relative;padding:17px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);min-height:112px}
.ovfstep:not(:last-child):after{content:'→';position:absolute;right:-10px;top:42px;z-index:2;width:20px;height:20px;border-radius:50%;background:var(--paper);color:var(--line-2);display:grid;place-items:center;font-size:14px}
.ovfstep .k{display:block;color:var(--grey);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.ovfstep b{display:block;font:400 30px/1.05 var(--serif);color:var(--ink);margin-bottom:7px}
.ovfstep .n{display:block;color:var(--grey);font-size:12px;line-height:1.4}
.ovfstep.lock{background:var(--fog);border-style:dashed}
.ovfstep.lock b{font:500 14px/1.3 var(--sans);color:var(--grey)}
.ovf-source{display:flex;align-items:center;gap:8px;margin:-14px 0 26px;color:var(--grey);font-size:12px}
.ovf-source .btn{margin-left:auto}
@media(max-width:980px){.ovfunnel{grid-template-columns:repeat(2,minmax(0,1fr))}.ovfstep:not(:last-child):after{display:none}}
@media(max-width:620px){.ovfunnel{grid-template-columns:1fr}}


/* Email lifecycle cards: show the three rules that explain the flow without
   turning the catalogue into a policy document. Full guardrails stay in the
   sequence drawer and Create/Approval flow. */
.lcmini{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--fog)}
.lcmini>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start}
.lcmini span{font-size:10px;line-height:1.45;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);padding-top:1px}
.lcmini b{font-size:11.5px;line-height:1.45;font-weight:500;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}


/* Email drafts stay editable even when the writing model is unavailable. */
.emailcard .em-subj{font-weight:650;min-width:0;flex:1}
.emailcard .em-body{width:100%;margin-top:8px;resize:vertical}
.em-editnote{display:block;margin-top:7px;font-size:11px;line-height:1.45;color:var(--grey)}


/* ===================================================== PRIORITY HIERARCHY
   Metrics answer "what is happening". Action cards answer "what should I do".
   They are deliberately quieter than the KPI row and use semantic accents so
   urgency is scannable without turning SHMEL into a rainbow dashboard. */
.channel-first-h{margin-top:18px}
.ov-main-h{margin-top:24px}
.todo-lower{margin-top:44px}

.decision-first{margin:18px 0 24px;padding:0;background:transparent;border:0;box-shadow:none}
.decision-first:hover{transform:none!important;box-shadow:none!important}
.decision-first>.rc-h{margin:0 0 10px;padding:0 2px;align-items:center}
.decision-first>.rc-h b{font-family:var(--disp);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.decision-first>.rc-h>div>span{display:inline-block;margin:0 0 0 8px;font-size:11px;color:var(--muted)}
.decision-first .ba-iss{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.decision-first .ba-i{position:relative;min-height:132px;padding:14px 15px 14px 16px;border:1px solid var(--line);border-left-width:4px;background:var(--paper);box-shadow:0 5px 18px -16px rgba(23,28,43,.35)}
.decision-first .ba-i b{font-size:14px;margin-bottom:5px}
.decision-first .ba-i p{font-size:12.5px;line-height:1.48;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.decision-first .ba-i .btn{margin-top:12px;background:rgba(255,255,255,.72)}

/* Needs attention: warm and unmistakable, but not alarm-red. */
.decision-first .ba-i.attention,
.decision-first .ba-i.high{background:#fff6e3;border-color:#efd59a;border-left-color:#d69b13}
.decision-first .ba-i.attention .sev,
.decision-first .ba-i.high .sev{color:#8a5b00}
/* Opportunity: cool contrast to the warm attention state. */
.decision-first .ba-i.opportunity{background:#f3f7fb;border-color:#d9e3ec;border-left-color:#607d99}
.decision-first .ba-i.opportunity .sev{color:#45657f}
/* Informational / waiting: deliberately quiet. */
.decision-first .ba-i.info{background:#f7f7f5;border-color:#e3e3df;border-left-color:#9aa0a8}
.decision-first .ba-i.info .sev{color:#6f747b}
/* Explicit approval/review labels can inherit the same hierarchy cleanly. */
.decision-first .ba-i.medium{background:#fff9eb;border-color:#eee0b8;border-left-color:#d2aa35}

/* Overview To do is lower on the page, so give the remaining decisions just
   enough semantic colour to scan without competing with Channels above. */
.deck.attention{background:linear-gradient(90deg,rgba(244,190,45,.10),var(--paper) 26%);border:1px solid rgba(214,155,19,.22)}
.deck.opportunity{background:linear-gradient(90deg,rgba(96,125,153,.08),var(--paper) 26%);border:1px solid rgba(96,125,153,.18)}
.deck.done{background:var(--fog);box-shadow:none;border:1px solid var(--line)}

@media(max-width:760px){
  .decision-first .ba-iss{grid-template-columns:1fr}
  .decision-first .ba-i{min-height:0}
  .todo-lower{margin-top:34px}
}


/* Voice input is available anywhere SHMEL asks for natural-language text. */
.micwrap-i.tall{width:100%;display:block}
.micwrap-i.tall>.micbtn.inline{top:10px;transform:none}
.micwrap-i.tall>textarea{padding-right:46px}


/* Action centre semantics: important without taking over the dashboard. */
.decision-first .ba-i.approved{background:#f1f7f2;border-color:#d5e6d8;border-left-color:#5f8b68}
.decision-first .ba-i.approved .sev{color:#476f50}
.decision-first .ba-i.blocked{background:#fff1ef;border-color:#efd4cf;border-left-color:#b96e63}
.decision-first .ba-i.blocked .sev{color:#8f4f47}
.decision-first .ba-i.attention:first-child{box-shadow:0 8px 24px -18px rgba(138,91,0,.45)}
.decision-first .ba-i .ch{opacity:.72}
.decision-first .ba-i .btn{border-color:rgba(23,28,43,.13)}


/* ================================================= STRATEGY · PREMIUM UX
   Executive first: targets → economics → one priority → why → roadmap → playbooks. */
#view-strategy{--strategy-ink:#171c2b;--strategy-soft:#f7f7f4}
#view-strategy .vhead{margin-bottom:18px}
#view-strategy .vhead .lede{max-width:72ch}

.stcard{border:1px solid rgba(23,28,43,.08);
  background:linear-gradient(135deg,#fff 0%,#fff 62%,rgba(249,224,97,.10) 100%);
  box-shadow:0 2px 4px rgba(23,28,43,.04),0 20px 50px -30px rgba(23,28,43,.35);
  padding:26px 28px;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.stcard:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(23,28,43,.05),0 24px 56px -30px rgba(23,28,43,.4)}
.stcard::after{right:-96px;bottom:-350px;width:500px;height:500px;background:rgba(249,224,97,.20)}
.stc-kicker{display:inline-flex!important;align-items:center;width:max-content;margin:0 0 7px!important;
  padding:4px 9px;border-radius:999px;background:var(--y-15);font-size:9px!important;font-weight:750;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink)!important}
.stc-av{width:52px;height:52px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 7px 18px -10px rgba(23,28,43,.6)}
.stc-id b{font-size:20px;letter-spacing:-.01em}
.stc-figs{gap:18px;padding-left:30px}
.stc-f{padding:2px 2px 2px 0}
.stc-f>b{font-size:31px}
.psvc{background:#fff;border:1px solid rgba(23,28,43,.08);box-shadow:0 4px 12px -10px rgba(23,28,43,.35)}

#view-strategy .mrow-top>.pnl{border:1px solid rgba(23,28,43,.07);box-shadow:0 12px 34px -28px rgba(23,28,43,.38)}
.stgap{background:linear-gradient(160deg,#fff 0%,#fff7e5 100%)}
.stproj{background:linear-gradient(160deg,#fff 0%,#f6f8fb 100%)}
.stgap-d{background:#fff;border:1px solid rgba(23,28,43,.08)}
.stp-b{border:1px solid rgba(23,28,43,.06);background:#fff}
.stp-b.up{border-color:rgba(214,155,19,.24);box-shadow:0 9px 24px -22px rgba(214,155,19,.55)}

.strategy-next{margin:20px 0 22px}
.strategy-next .decision-first{margin:0;padding:0}
.strategy-next .decision-first>.rc-h{margin-bottom:8px}
.strategy-next .decision-first .ba-iss{display:block}
.strategy-next .decision-first .ba-i{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:20px;align-items:center;padding:18px 20px 18px 22px;border-radius:18px;
  background:linear-gradient(90deg,#fff6df 0%,#fffaf0 55%,#fff 100%);
  border:1px solid #ecd49b;border-left:5px solid #d69b13;box-shadow:0 14px 36px -30px rgba(138,91,0,.55)}
.strategy-next .ba-i .ba-i-h,.strategy-next .ba-i>b,.strategy-next .ba-i>p{grid-column:1}
.strategy-next .ba-i .btn{grid-column:2;grid-row:1 / span 3;margin:0;align-self:center;background:var(--ink);color:#fff;border-color:var(--ink);white-space:nowrap}
.strategy-next .ba-i p{-webkit-line-clamp:2;max-width:78ch}

.stwhy{border:1px solid rgba(214,155,19,.18);background:linear-gradient(90deg,var(--y-15),rgba(249,224,97,.06))}
.stwhy-h{padding:16px 19px}
.stwhy-i{position:relative;background:var(--ink)}
.stwhy-i::before{content:'?';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:750}

.stroad{position:relative;overflow:hidden;border:1px solid rgba(23,28,43,.07);
  background:linear-gradient(180deg,#fff 0%,#fbfbf9 100%);box-shadow:0 14px 38px -30px rgba(23,28,43,.38);padding:22px 24px 24px}
.stroad::before{content:'';position:absolute;inset:0 auto auto 0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--yellow) 0 33%,rgba(23,28,43,.10) 33% 100%)}
.stroad-title{display:flex;align-items:center;gap:8px}
.stroad-title b{margin:0}
.stroad-s{transition:transform .18s var(--ease)}
.stroad-s:hover{transform:translateY(-2px)}
.stroad-n{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.stroad-s.first .stroad-n{box-shadow:0 0 0 5px var(--y-15),0 8px 18px -12px rgba(138,91,0,.65)}
.stroad-s:hover .stroad-n{transform:scale(1.05)}

.st-ico{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  border:1px solid rgba(23,28,43,.08);background:#fff;color:var(--ink);box-shadow:0 5px 12px -10px rgba(23,28,43,.5)}
.st-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.st-ico.meta{background:#f1f6ff;color:#395f9f;border-color:#d9e6fa}
.st-ico.seo{background:#f3f8f4;color:#517a5d;border-color:#dae9dd}
.st-ico.social{background:#fff2f6;color:#9a536c;border-color:#efdce4}

.stchs{gap:16px}
.stch{position:relative;overflow:hidden;border:1px solid rgba(23,28,43,.07);
  box-shadow:0 10px 30px -26px rgba(23,28,43,.42);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.stch::after{content:'';position:absolute;inset:0 0 auto;height:3px;background:rgba(23,28,43,.08)}
.stch.first::after{background:var(--yellow)}
.stch:hover{transform:translateY(-3px);box-shadow:0 18px 42px -28px rgba(23,28,43,.46);border-color:rgba(23,28,43,.12)}
.stch-h{margin-bottom:11px}
.stch-h .st-ico{width:32px;height:32px}
.stch-n{background:var(--wash);color:var(--slate)}
.stch.first .stch-n{background:var(--yellow);color:var(--ink)}
.stch-fix{box-shadow:inset 0 0 0 1px rgba(23,28,43,.025)}
.stch-moves li::before{background:#fff;border:1px solid var(--line)}
.stch-out{border:1px solid rgba(214,155,19,.14)}
.stch-f .btn{width:100%;justify-content:center}
.stch:not(.first) .stch-f .btn.y{background:var(--white);color:var(--ink);border-color:var(--line)}
.stch:not(.first) .stch-f .btn.y:hover{border-color:var(--ink)}

.stctl{border:1px solid var(--line);background:linear-gradient(90deg,var(--wash),#fff);box-shadow:0 10px 30px -28px rgba(23,28,43,.35)}

/* A quiet, premium entrance: hierarchy appears in reading order. */
@keyframes strategy-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#view-strategy.view.on .stcard,#view-strategy.view.on .mrow-top,#view-strategy.view.on .strategy-next,
#view-strategy.view.on .stwhy,#view-strategy.view.on .stroad,#view-strategy.view.on .stchs,#view-strategy.view.on .stctl{
  animation:strategy-rise .38s var(--ease) both}
#view-strategy.view.on .mrow-top{animation-delay:.035s}
#view-strategy.view.on .strategy-next{animation-delay:.07s}
#view-strategy.view.on .stwhy{animation-delay:.10s}
#view-strategy.view.on .stroad{animation-delay:.13s}
#view-strategy.view.on .stchs{animation-delay:.16s}
#view-strategy.view.on .stctl{animation-delay:.19s}
@media(prefers-reduced-motion:reduce){#view-strategy.view.on .stcard,#view-strategy.view.on .mrow-top,#view-strategy.view.on .strategy-next,#view-strategy.view.on .stwhy,#view-strategy.view.on .stroad,#view-strategy.view.on .stchs,#view-strategy.view.on .stctl{animation:none}.stch,.stroad-s,.stcard{transition:none}}
@media(max-width:760px){
  .strategy-next .decision-first .ba-i{display:block}
  .strategy-next .decision-first .ba-i .btn{margin-top:12px}
  .stcard{padding:22px 20px}
  .stc-figs{gap:20px}
}


/* Logo SHMEL found on the clinic's own public website during onboarding. */
.scanlogo{display:flex;align-items:center;gap:12px;margin:12px 0 16px;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:#fff}
.scanlogo img{width:44px;height:44px;object-fit:contain;border-radius:10px;background:var(--wash);padding:5px}
.scanlogo b{display:block;font-size:13px}
.scanlogo span{display:block;margin-top:2px;font-size:11px;color:var(--grey)}
#view-strategy .st-ico.brand img{width:18px!important;height:18px!important;display:block!important;object-fit:contain}

/* ================================================= ACTION CENTER
   The dashboard shows the business; this screen owns decisions. */
#view-actions{--ac-amber:#fff6df;--ac-blue:#f3f7fb;--ac-green:#f1f7f2;--ac-red:#fff1ef}
.act-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.act-head>div{max-width:760px}.act-context{flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:11px;color:var(--grey)}
.act-pipe{display:grid;grid-template-columns:minmax(230px,.8fr) 2fr;gap:24px;align-items:center;padding:18px 20px;border:1px solid rgba(23,28,43,.08);border-radius:20px;background:linear-gradient(135deg,#fff 0%,#fffdf7 100%);box-shadow:0 14px 36px -30px rgba(23,28,43,.35);margin-bottom:18px}
.act-pipe .act-k{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:750;margin-bottom:4px}.act-pipe b{font-size:17px}.act-pipe p{margin:5px 0 0;color:var(--grey);font-size:12px;line-height:1.5}
.act-pipe ol{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}.act-pipe li{position:relative;flex:1;text-align:center;padding-top:23px;font-size:10px;text-transform:uppercase;letter-spacing:.055em;color:#9ba0aa}.act-pipe li::before{content:'';position:absolute;top:4px;left:50%;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);background:#e1e3e7;border:3px solid #fff;box-shadow:0 0 0 1px #d8dbe0}.act-pipe li::after{content:'';position:absolute;top:9px;left:calc(50% + 8px);right:calc(-50% + 8px);height:1px;background:#dde0e5}.act-pipe li:last-child::after{display:none}.act-pipe li.done{color:#626875}.act-pipe li.done::before{background:#171c2b;box-shadow:0 0 0 1px #171c2b}.act-pipe li.done::after{background:#171c2b}.act-pipe li.on{color:#8a5b00;font-weight:750}.act-pipe li.on::before{background:var(--yellow);box-shadow:0 0 0 4px rgba(249,224,97,.25)}
.act-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}.act-tabs button{border:0;background:transparent;padding:12px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;font:600 13px/1.2 inherit;color:var(--grey);cursor:pointer}.act-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--yellow)}
.act-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:6px 0 14px}.act-section-head h2{margin:0;font:500 26px/1.1 var(--display)}.act-section-head p{margin:5px 0 0;color:var(--grey);font-size:12px}.act-section-head>span{font-size:11px;color:var(--grey)}
.ac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ac-card{position:relative;border:1px solid var(--line);border-left:4px solid #aeb3bc;border-radius:18px;padding:17px 18px;background:#fff;box-shadow:0 10px 28px -26px rgba(23,28,43,.45);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}.ac-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px -28px rgba(23,28,43,.5)}
.ac-card.attention{background:var(--ac-amber);border-color:#ecd49b;border-left-color:#d69b13}.ac-card.opportunity{background:var(--ac-blue);border-color:#d7e2ed;border-left-color:#6f8da7}.ac-card.blocked{background:var(--ac-red);border-color:#efd4cf;border-left-color:#b96e63}.ac-card.draft{background:#fafafa}.ac-card.decided{background:var(--ac-green);border-left-color:#65866d}
.ac-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}.ac-status,.ac-channel{display:inline-flex;align-items:center;min-height:24px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.72);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:#6a707c}.ac-status.queued{color:#52715a}.ac-channel{margin-left:auto;background:rgba(23,28,43,.045)}
.ac-card h3{margin:0 0 6px;font-size:15px;line-height:1.35}.ac-card>p{margin:0;color:var(--grey);font-size:12px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ac-evidence{display:inline-flex;align-items:baseline;gap:8px;margin-top:12px;padding:7px 10px;border-radius:11px;background:rgba(255,255,255,.72);font-size:10px}.ac-evidence span{text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}.ac-evidence b{font-size:16px}.ac-evidence em{font-style:normal;font-weight:700;color:#7c5660}
.ac-flow{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(23,28,43,.07);font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:#a0a4ac;white-space:nowrap;overflow:hidden}.ac-flow i{flex:1;min-width:6px;height:1px;background:#dfe1e5}.ac-flow span.done{color:#5f6570}.ac-flow span.on{color:#8a5b00;font-weight:750}.ac-flow span.done+i{background:#8a8f98}
.ac-actions{display:flex;gap:7px;align-items:center;margin-top:14px}.ac-actions.done{margin-top:12px}.ac-done{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e7f0e9;color:#55715c;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.act-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;border:1px dashed var(--line);border-radius:18px;background:var(--wash);text-align:center}.act-clear b{font-size:15px}.act-clear span{margin-top:5px;color:var(--grey);font-size:12px}

/* Overview only previews the decision queue. */
.ov-review{border:1px solid rgba(23,28,43,.08);border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 12px 34px -30px rgba(23,28,43,.36)}.ov-review article{display:grid;grid-template-columns:5px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid rgba(23,28,43,.065)}.ov-review article:last-of-type{border-bottom:0}.ovr-sev{width:5px;height:32px;border-radius:5px;background:#aeb3bc}.ovr-sev.attention{background:#d69b13}.ovr-sev.opportunity{background:#6f8da7}.ov-review article b{display:block;font-size:13px;line-height:1.35}.ov-review article div>span{display:block;margin-top:3px;color:var(--grey);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ovr-ch{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#7b808a;background:var(--wash);border-radius:999px;padding:5px 8px}.ov-review>.btn{margin:12px 16px 14px}.ov-review.clear{display:flex;align-items:center;gap:12px;padding:15px 16px}.ov-review.clear .cl-b{width:34px;height:34px}.ov-review.clear .cl-b img{width:100%;height:100%;object-fit:contain}.ov-review.clear b{font-size:13px}.ov-review.clear span{display:block;color:var(--grey);font-size:11px;margin-top:2px}

@media(max-width:900px){.act-pipe{grid-template-columns:1fr}.act-pipe ol{overflow-x:auto;padding-bottom:2px}.ac-grid{grid-template-columns:1fr}.act-head{align-items:flex-start;flex-direction:column}.act-context{align-self:flex-start}}
@media(max-width:640px){.ac-flow{display:grid;grid-template-columns:1fr}.ac-flow i{display:none}.ov-review article{grid-template-columns:5px minmax(0,1fr)}.ovr-ch{display:none}}

/* ================================================= STRATEGY · GROWTH JOURNEY */
#view-strategy .strategy-vhead{margin-bottom:16px}
#view-strategy .strategy-vhead .lede{max-width:78ch}
#view-strategy .stc-av{overflow:hidden;background:#faf7f1;border:1px solid rgba(23,28,43,.08);color:var(--ink)}
#view-strategy .stc-av img{width:100%;height:100%;object-fit:cover;display:block}

.sj{position:relative;overflow:hidden;margin:20px 0 28px;padding:26px;border-radius:28px;
  background:
    radial-gradient(circle at 78% 18%,rgba(249,224,97,.20),transparent 24%),
    radial-gradient(circle at 22% 120%,rgba(249,224,97,.09),transparent 34%),
    linear-gradient(135deg,#101522 0%,#171c2b 52%,#252a36 100%);
  color:#fff;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 70px -38px rgba(10,14,24,.75)}
.sj::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 70%)}
.sj-head{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:24px;align-items:end}
.sj-head>div:first-child>span{display:block;margin-bottom:7px;color:var(--yellow);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}
.sj-head h2{margin:0;color:#fff;font:500 clamp(30px,3.5vw,50px)/.98 var(--display);letter-spacing:-.025em}
.sj-head p{margin:10px 0 0;max-width:720px;color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.55}
.sj-metrics{display:flex;gap:8px;align-items:stretch;justify-content:flex-end;flex-wrap:wrap}
.sj-metrics>div{min-width:112px;padding:11px 13px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(10px)}
.sj-metrics span{display:block;color:rgba(255,255,255,.48);font-size:8.5px;text-transform:uppercase;letter-spacing:.07em}
.sj-metrics b{display:block;margin-top:4px;color:#fff;font-size:16px;line-height:1.2}

.sj-map{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:34px 0 22px;padding:14px 0}
.sj-route{position:absolute;z-index:0;left:10%;right:10%;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(249,224,97,.95),rgba(249,224,97,.38) 42%,rgba(255,255,255,.16));box-shadow:0 0 16px rgba(249,224,97,.18)}
.sj-route::before,.sj-route::after{content:'';position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translateY(-50%);background:#fff;box-shadow:0 0 0 5px rgba(249,224,97,.14),0 0 20px rgba(249,224,97,.55)}
.sj-route::before{left:32.5%}.sj-route::after{left:66%}
.sj-route i{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:var(--yellow);box-shadow:0 0 0 7px rgba(249,224,97,.11),0 0 26px rgba(249,224,97,.95);animation:sj-travel 5.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sj-travel{0%,8%{left:0;opacity:.9}33%{left:33%}66%{left:66%}92%,100%{left:100%;opacity:.9}}

.sj-node{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;min-height:116px;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(13,18,30,.88);color:#fff;text-align:left;cursor:pointer;box-shadow:0 18px 38px -28px rgba(0,0,0,.8);backdrop-filter:blur(14px);transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease);animation:sj-node-in .42s var(--ease) both;animation-delay:calc(var(--sj-i) * 85ms)}
.sj-node:hover{transform:translateY(-5px);border-color:rgba(249,224,97,.45);background:rgba(21,27,40,.96);box-shadow:0 24px 48px -28px rgba(0,0,0,.85)}
.sj-node.current{border-color:rgba(249,224,97,.85);box-shadow:0 0 0 1px rgba(249,224,97,.25),0 0 36px rgba(249,224,97,.16),0 24px 48px -30px rgba(0,0,0,.9)}
.sj-node .st-ico{width:56px!important;height:56px!important;border-radius:16px!important;background:#fff!important;border:0!important;box-shadow:0 10px 24px -15px rgba(0,0,0,.9)!important}
.sj-node .st-ico img{width:30px!important;height:30px!important}
.sj-node.current .st-ico{background:linear-gradient(145deg,#fff7cc,#ffe05f)!important;box-shadow:0 0 0 5px rgba(249,224,97,.10),0 12px 26px -14px rgba(249,224,97,.7)!important}
.sj-node b{display:block;color:#fff;font-size:16px;line-height:1.28}
.sj-node div>span{display:block;margin-top:5px;color:rgba(255,255,255,.58);font-size:11.5px;line-height:1.45}
.sj-arrow{font-size:22px;color:rgba(255,255,255,.36);transition:transform .18s var(--ease),color .18s var(--ease)}
.sj-node:hover .sj-arrow{transform:translateX(4px);color:var(--yellow)}
.sj-start{position:absolute;top:-12px;left:18px;padding:5px 9px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.09em;box-shadow:0 7px 18px -11px rgba(249,224,97,.9)}
@keyframes sj-node-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

.sj-next{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(150px,.34fr);gap:16px;align-items:center;padding:15px 17px;border-radius:20px;background:linear-gradient(90deg,#fffdf6,#fff 65%);color:var(--ink);border:1px solid rgba(249,224,97,.62);box-shadow:0 14px 38px -26px rgba(249,224,97,.6)}
.sj-next-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--y-15)}
.sj-next-icon img{width:27px;height:27px;object-fit:contain}
.sj-next-copy>span,.sj-impact>span{display:block;margin-bottom:4px;color:#8a6b18;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.sj-next-copy>b{display:block;font-size:15px;line-height:1.35}.sj-next-copy p{margin:4px 0 0;color:var(--grey);font-size:11.5px;line-height:1.45}
.sj-next .btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.sj-next .btn span{font-size:18px;line-height:1}
.sj-impact{padding-left:16px;border-left:1px solid var(--line)}.sj-impact b{display:block;font:500 19px/1.2 var(--display)}.sj-impact em{display:block;margin-top:3px;color:var(--grey);font-size:10.5px;font-style:normal}

.strategy-channel-head{margin:30px 0 14px}.strategy-channel-head>span{display:block;margin-bottom:5px;color:#8a6b18;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.strategy-channel-head h2{margin:0;font:500 30px/1.05 var(--display)}.strategy-channel-head p{margin:6px 0 0;color:var(--grey);font-size:12.5px}
#view-strategy .stchs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#view-strategy .stch{padding:19px;border-radius:20px;background:linear-gradient(180deg,#fff,#fbfbf8);border:1px solid rgba(23,28,43,.075);box-shadow:0 14px 36px -30px rgba(23,28,43,.38)}
#view-strategy .stch::after{display:none}
#view-strategy .stch.first{box-shadow:0 14px 36px -30px rgba(23,28,43,.38)}
#view-strategy .stch-h{gap:12px;margin:0 0 12px;padding:0!important}
#view-strategy .stch-h .st-ico{width:48px!important;height:48px!important;border-radius:14px!important;background:#fff!important}
#view-strategy .stch-h .st-ico img{width:28px!important;height:28px!important}
#view-strategy .stch-title{min-width:0;flex:1}#view-strategy .stch-title b{display:block;font-size:18px;line-height:1.2}#view-strategy .stch-title span{display:block;margin-top:4px;color:#8a6b18;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.07em}
#view-strategy .stch-does{margin:0 0 14px;color:var(--grey);font-size:12px;line-height:1.5}
#view-strategy .stch-focus{margin:0 0 15px;padding:14px 15px;border-radius:15px;background:var(--wash);border:1px solid rgba(23,28,43,.055)}
#view-strategy .stch.first .stch-focus{background:linear-gradient(135deg,#fff7df,#fffdf5);border-color:#ecd49b}
#view-strategy .stch-focus>span{display:block;margin-bottom:6px;color:#8a6b18;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}#view-strategy .stch-focus b{display:block;font-size:13.5px;line-height:1.4}#view-strategy .stch-focus p{margin:5px 0 0;color:var(--grey);font-size:11px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#view-strategy .stch-sec.moves{margin-bottom:15px}
#view-strategy .stch-moves{counter-reset:none;gap:7px}
#view-strategy .stch-moves li{padding-left:18px;font-size:11.5px;line-height:1.5;color:var(--ink-2)}
#view-strategy .stch-moves li::before{content:'→';top:0;left:0;width:auto;height:auto;border:0;background:transparent;color:#b58a17;font-size:12px;font-weight:800}
#view-strategy .stch-out{margin-top:auto;padding:12px 14px;border-radius:14px;background:var(--y-15);border:1px solid rgba(214,155,19,.12)}
#view-strategy .stch-out b{font-size:16px}#view-strategy .stch-out>span:last-child{font-size:10.5px}
#view-strategy .stch-unlock{margin-top:auto;padding:12px 14px;border-radius:14px;background:#f5f6f7;border:1px solid var(--line)}#view-strategy .stch-unlock>span{display:block;margin-bottom:4px;color:#7d838d;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}#view-strategy .stch-unlock p{margin:0;color:var(--grey);font-size:11px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#view-strategy .stch-f{margin-top:13px}#view-strategy .stch-f .btn{width:auto;min-width:132px}
#view-strategy .stch:not(.first) .stch-f .btn.y{background:var(--ink);border-color:var(--ink);color:#fff}

@media(max-width:1050px){.sj-head{grid-template-columns:1fr}.sj-metrics{justify-content:flex-start}.sj-next{grid-template-columns:auto minmax(0,1fr) auto}.sj-impact{grid-column:2 / -1;border-left:0;border-top:1px solid var(--line);padding:10px 0 0}.sj-map{grid-template-columns:1fr;gap:14px}.sj-route{left:27px;right:auto;top:8%;bottom:8%;height:auto;width:2px;transform:none;background:linear-gradient(180deg,var(--yellow),rgba(255,255,255,.15))}.sj-route::before,.sj-route::after,.sj-route i{display:none}.sj-node{min-height:0}.sj-start{left:76px}#view-strategy .stchs{grid-template-columns:1fr}}
@media(max-width:650px){.sj{padding:20px 16px;border-radius:22px}.sj-head h2{font-size:34px}.sj-metrics{display:grid;grid-template-columns:repeat(2,1fr)}.sj-next{grid-template-columns:1fr}.sj-next-icon{display:none}.sj-next .btn{width:100%;justify-content:center}.sj-impact{grid-column:auto}.strategy-channel-head h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.sj-route i,.sj-node{animation:none!important}.sj-node{transition:none}}
#view-strategy .sj-node:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ================================================= ACTION CENTER · COMMAND DECK */
#view-actions .act-head{margin-bottom:14px}
#view-actions .act-head .lede{max-width:70ch}
.ac-hero{position:relative;overflow:hidden;margin:0 0 20px;padding:26px;border-radius:28px;color:#fff;
  background:radial-gradient(circle at 82% 4%,rgba(249,224,97,.20),transparent 24%),linear-gradient(135deg,#101522 0%,#171c2b 54%,#252b38 100%);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 26px 70px -40px rgba(10,14,24,.78)}
.ac-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 76%)}
.ac-hero-head{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.45fr);gap:28px;align-items:end}
.ac-hero-head>div:first-child>span{display:block;margin-bottom:7px;color:var(--yellow);font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.ac-hero-head h1{margin:0;color:#fff;font:500 clamp(30px,3.4vw,48px)/1 var(--display);letter-spacing:-.025em}
.ac-hero-head p{margin:9px 0 0;max-width:760px;color:rgba(255,255,255,.65);font-size:13px;line-height:1.55}
.ac-mode{padding:14px 16px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px)}
.ac-mode span{display:block;color:var(--yellow);font-size:8.5px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.ac-mode b{display:block;margin-top:5px;color:#fff;font-size:12px;line-height:1.45;font-weight:600}
.ac-journey{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:28px 0 22px;padding-top:6px}
.acj-route{position:absolute;top:17px;left:7%;right:7%;height:2px;background:linear-gradient(90deg,var(--yellow),rgba(249,224,97,.46) 46%,rgba(255,255,255,.14));box-shadow:0 0 18px rgba(249,224,97,.16)}
.acj-route i{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:var(--yellow);box-shadow:0 0 0 6px rgba(249,224,97,.1),0 0 24px rgba(249,224,97,.8);animation:ac-travel 5.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ac-travel{0%,8%{left:0}36%{left:33%}68%{left:66%}92%,100%{left:100%}}
.ac-journey>div{position:relative;padding-top:27px;text-align:center}.ac-journey>div::before{content:'';position:absolute;top:4px;left:50%;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);background:#4f5563;border:3px solid #171c2b;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ac-journey>div.done::before{background:#fff}.ac-journey>div.on::before{background:var(--yellow);box-shadow:0 0 0 5px rgba(249,224,97,.11),0 0 18px rgba(249,224,97,.65)}
.ac-journey b{display:block;color:#fff;font-size:10px}.ac-journey span{display:block;margin-top:4px;color:rgba(255,255,255,.44);font-size:8.5px;line-height:1.35}
.ac-journey>div.on b{color:var(--yellow)}
.ac-channels{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.ac-channels button{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.045);color:#fff;text-align:left;cursor:pointer;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.ac-channels button:hover{transform:translateY(-2px);border-color:rgba(249,224,97,.42);background:rgba(255,255,255,.075)}
.ac-channels button.on{border-color:rgba(249,224,97,.72);background:rgba(249,224,97,.10);box-shadow:0 0 0 1px rgba(249,224,97,.12),0 12px 28px -24px rgba(249,224,97,.7)}
.ac-channels button>div{min-width:0}.ac-channels b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px}.ac-channels button>div>span{display:block;margin-top:2px;color:rgba(255,255,255,.45);font-size:8.5px}
.ac-brand{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--ink)}
.ac-brand img{width:22px!important;height:22px!important;object-fit:contain;display:block}.ac-brand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.ac-brand.all{background:linear-gradient(145deg,#fff6bd,var(--yellow));font-size:16px}.ac-brand.compliance{background:#f5f6f7}

#view-actions .act-tabs{margin:0 0 20px;padding:0 3px;border-bottom:1px solid var(--line)}
#view-actions .act-tabs button{padding:13px 14px;font-size:12.5px}
#view-actions .act-section-head{margin:2px 0 16px}
#view-actions .act-section-head h2{font-size:30px}
.ac-channel-group{margin:0 0 22px}.acg-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.acg-head .ac-brand{width:40px;height:40px;border:1px solid var(--line);box-shadow:0 7px 18px -15px rgba(23,28,43,.5)}.acg-head b{display:block;font-size:15px}.acg-head span{display:block;margin-top:2px;color:var(--grey);font-size:10px}
#view-actions .ac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#view-actions .ac-card{border-left-width:1px;border-radius:20px;padding:17px 18px;box-shadow:0 12px 32px -28px rgba(23,28,43,.45)}
#view-actions .ac-card.attention{border-color:#ead39a;background:linear-gradient(135deg,#fff7e4,#fffdf8)}
#view-actions .ac-card.attention::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;border-radius:20px 0 0 20px;background:#d69b13}
#view-actions .ac-card.opportunity{border-color:#d7e2ed;background:linear-gradient(135deg,#f4f8fc,#fff)}
#view-actions .ac-card.blocked{border-color:#efd4cf;background:linear-gradient(135deg,#fff3f1,#fff)}
#view-actions .ac-card.draft,#view-actions .ac-card.auto{background:linear-gradient(180deg,#fff,#fbfbf9)}
#view-actions .ac-channel{display:none}
#view-actions .ac-flow{font-size:8px}
#view-actions .ac-actions .btn.y{box-shadow:none}

@media(max-width:1180px){.ac-channels{grid-template-columns:repeat(4,minmax(0,1fr))}.ac-journey{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:6px}}
@media(max-width:850px){.ac-hero-head{grid-template-columns:1fr}.ac-channels{grid-template-columns:repeat(2,minmax(0,1fr))}#view-actions .ac-grid{grid-template-columns:1fr}.ac-journey{grid-template-columns:1fr;gap:10px;padding-left:24px;overflow:visible}.acj-route{top:7%;bottom:7%;left:9px;right:auto;width:2px;height:auto}.acj-route i{display:none}.ac-journey>div{padding:0 0 0 14px;text-align:left}.ac-journey>div::before{top:4px;left:-15px}.ac-journey span{margin-top:2px}}
@media(max-width:560px){.ac-hero{padding:20px 16px;border-radius:22px}.ac-hero-head h1{font-size:34px}.ac-channels{grid-template-columns:1fr 1fr}.ac-channels button{padding:9px}.ac-brand{width:31px;height:31px}.ac-brand img{width:20px!important;height:20px!important}}
@media(prefers-reduced-motion:reduce){.acj-route i{animation:none}.ac-channels button,.ac-card{transition:none}}


/* Compliance is one platform-wide gate, not another tabbed product. */
.cmpcover{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}.cmpcover>span{margin-right:2px;color:var(--grey);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.cmpcover b{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:10px;font-weight:650}.cmpcover b img{width:16px!important;height:16px!important;object-fit:contain}.cmpcover .cmpmail svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.cmpcover em{margin-left:auto;color:var(--grey);font-size:10px;font-style:normal}@media(max-width:760px){.cmpcover em{width:100%;margin-left:0}}

/* ================================================= METRICS · PREMIUM SYSTEM
   One visual language across Meta / Google / SEO / Email / Social /
   Compliance and the Preview patient-intelligence features. */
.kpi6,.kpi5,.kpi4,.kpi3{gap:14px!important}
.kcard{position:relative;overflow:hidden;min-height:174px;padding:18px 18px 16px!important;
  border:1px solid rgba(23,28,43,.075)!important;border-radius:20px!important;
  background:linear-gradient(155deg,#fff 0%,#fff 66%,#f8f8f5 100%)!important;
  box-shadow:0 16px 38px -32px rgba(23,28,43,.48)!important;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.kcard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--yellow),rgba(249,224,97,.15) 62%,transparent)}
.kcard::after{content:'';position:absolute;right:-38px;bottom:-44px;width:105px;height:105px;
  border-radius:50%;background:radial-gradient(circle,rgba(249,224,97,.11),transparent 68%);pointer-events:none}
.kcard:hover{transform:translateY(-3px);border-color:rgba(23,28,43,.13)!important;
  box-shadow:0 24px 50px -34px rgba(23,28,43,.52)!important}
.kcard.off{background:linear-gradient(155deg,#fafafa,#f4f4f2)!important;box-shadow:none!important}
.kcard.off::before{background:var(--line)}
.kc-h{position:relative;z-index:1;align-items:flex-start!important;justify-content:space-between!important;
  margin-bottom:15px!important;gap:12px!important}
.kc-h>span{font-size:12.5px!important;line-height:1.3!important;color:#666d79!important;font-weight:550!important}
.kc-i,.soct-i{position:relative;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;
  flex:0 0 44px!important;border-radius:15px!important;border:1px solid rgba(23,28,43,.08)!important;
  background:linear-gradient(145deg,#fff7cf,#f9e061)!important;color:var(--ink)!important;
  box-shadow:0 8px 20px -14px rgba(138,91,0,.55)!important;overflow:hidden}
.kc-i::before,.soct-i::before{content:'';position:absolute;inset:2px;border-radius:12px;
  border:1px solid rgba(255,255,255,.48);pointer-events:none}
.kc-i .mico,.soct-i svg{position:relative;z-index:1;width:21px!important;height:21px!important;opacity:1!important}
.mico-accent{fill:var(--ink);stroke:none!important;opacity:.88}
.kcard .kc-v{position:relative;z-index:1;display:block;font-size:clamp(30px,2vw,38px)!important;
  line-height:1!important;letter-spacing:-.035em!important;font-weight:560!important;color:var(--ink);margin-bottom:8px}
.kcard .kc-r{position:relative;z-index:1;display:block;min-height:34px;font-size:12px;line-height:1.45;color:var(--grey)}
.kcard .kc-d{position:relative;z-index:1;margin-top:11px!important;gap:4px!important}
.kcard .dlt{font-size:11.5px;padding:4px 9px;border-radius:999px;font-weight:650}
.kcard .dlt.good{background:var(--y-30);box-shadow:inset 0 0 0 1px rgba(214,155,19,.10)}
.kcard .dlt.bad{background:#eff0f2}
.kcard .dsub{font-size:10.5px;color:#9a9fa8}

/* Outcome and money icons use darker material; traffic stays light. */
.kc-i.metric-revenue,.kc-i.metric-roas,.kc-i.metric-cpb,
.soct-i.metric-acted{background:linear-gradient(145deg,#252b39,#111623)!important;color:#fff!important;
  border-color:#252b39!important;box-shadow:0 10px 22px -14px rgba(17,22,35,.7)!important}
.kc-i.metric-revenue .mico,.kc-i.metric-roas .mico,.kc-i.metric-cpb .mico,
.soct-i.metric-acted svg{stroke:#fff!important}
.kc-i.metric-revenue .mico-accent,.kc-i.metric-roas .mico-accent,.kc-i.metric-cpb .mico-accent{fill:var(--yellow)!important}
.kc-i.metric-leads,.kc-i.metric-appts,.kc-i.metric-top3,
.soct-i.metric-follows{background:linear-gradient(145deg,#fff,#f1f2f4)!important;box-shadow:0 8px 20px -16px rgba(23,28,43,.45)!important}
.kc-i.metric-clicks,.kc-i.metric-visits,.kc-i.metric-open,.kc-i.metric-sent,
.soct-i.metric-clicks,.soct-i.metric-visits,.soct-i.metric-reach{background:linear-gradient(145deg,#fff9dc,#fff3ac)!important}
.kc-i.metric-pos,.kc-i.metric-words,.kc-i.metric-activity{background:linear-gradient(145deg,#f1f2f4,#fff)!important}
.kcard.attr{border-style:solid!important;background:linear-gradient(155deg,#fffdf4,#fff)!important}
.kcard.attr::before{background:linear-gradient(90deg,#c9b25f,var(--yellow),transparent)}

/* Social metric tiles now speak the same visual language but remain controls. */
.soctiles{gap:14px!important}
.soct{position:relative;overflow:hidden;min-height:160px;padding:17px 18px!important;border-radius:20px!important;
  border:1px solid rgba(23,28,43,.075)!important;background:linear-gradient(155deg,#fff 0%,#fff 70%,#f8f8f5 100%)!important;
  box-shadow:0 14px 34px -30px rgba(23,28,43,.46);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)!important}
.soct::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--yellow),transparent 72%)}
.soct:hover{transform:translateY(-3px);border-color:rgba(23,28,43,.14)!important;box-shadow:0 22px 44px -34px rgba(23,28,43,.55)}
.soct.on{border-color:rgba(214,155,19,.55)!important;box-shadow:0 0 0 1px rgba(249,224,97,.16),0 22px 44px -34px rgba(138,91,0,.5)!important}
.soct-h{position:relative;z-index:1;margin-bottom:14px!important}.soct-h span{font-size:12.5px!important;font-weight:550;color:#666d79!important}
.soct>b{position:relative;z-index:1;font-size:clamp(30px,2vw,36px)!important;font-weight:560!important;letter-spacing:-.035em!important}
.soct .sa-d,.soct-n{position:relative;z-index:1}

/* Compliance + Preview feature metric tiles: same premium shell, their own semantics. */
.cmpt,.lqt,.rt,.remt{position:relative;overflow:hidden;border:1px solid rgba(23,28,43,.075)!important;
  border-radius:20px!important;background:linear-gradient(155deg,#fff,#fafaf8)!important;
  box-shadow:0 14px 34px -30px rgba(23,28,43,.45)!important;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.cmpt:hover,.lqt:hover,.rt:hover,.remt:hover{transform:translateY(-2px);box-shadow:0 20px 42px -32px rgba(23,28,43,.52)!important}
.cmpt::before,.lqt::before,.rt::before,.remt::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--yellow),transparent 72%)}
.cmpt-i,.lqt-i,.rt-i{position:relative;width:46px!important;height:46px!important;border-radius:15px!important;
  border:1px solid rgba(23,28,43,.07)!important;background:linear-gradient(145deg,#fff7cf,#f9e061)!important;
  box-shadow:0 8px 20px -14px rgba(138,91,0,.5)!important}
.cmpt-i::after,.lqt-i::after,.rt-i::after{content:'';position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.85}
.cmpt-i svg,.lqt-i svg,.rt-i svg{width:22px!important;height:22px!important}
.cmpt .tnum,.lqt .tnum,.rt .tnum,.remt .tnum{font-size:30px!important;font-weight:560!important;letter-spacing:-.035em!important}
.cmpt-k,.lqt-k,.rt-k{letter-spacing:.065em!important}
/* Risk/status semantics remain visible but with softer material treatment. */
.cmpt-i.risk,.lqt-i.risk,.remt .cmpt-i.miss{background:linear-gradient(145deg,#fff2ef,#f6d5d0)!important;color:#9d4b43!important;box-shadow:none!important}
.cmpt-i.ok,.lqt-i.ok,.remt .cmpt-i.ok{background:linear-gradient(145deg,#eef8f1,#d7eddd)!important;color:#3e7250!important;box-shadow:none!important}
.cmpt-i.warn,.lqt-i.check,.remt .cmpt-i.wait{background:linear-gradient(145deg,#fff8d7,#f9e061)!important;color:var(--ink)!important}

/* ================================================= OVERVIEW · BUSINESS FUNNEL */
.ovfhero{position:relative;overflow:hidden;margin:30px 0 24px;padding:26px;border-radius:28px;color:#fff;
  background:radial-gradient(circle at 82% 12%,rgba(249,224,97,.18),transparent 23%),
    radial-gradient(circle at 15% 115%,rgba(249,224,97,.08),transparent 33%),
    linear-gradient(135deg,#101522 0%,#171c2b 52%,#262c38 100%);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 70px -40px rgba(10,14,24,.78)}
.ovfhero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.24;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.ovfhero-h{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.ovfhero-h>div:first-child>span{display:block;margin-bottom:6px;color:var(--yellow);font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.ovfhero-h h2{margin:0;color:#fff;font:500 clamp(28px,3vw,42px)/1 var(--display);letter-spacing:-.025em}
.ovfhero-h p{margin:8px 0 0;color:rgba(255,255,255,.58);font-size:12.5px;line-height:1.5}
.ovfhero-src .chip{border-color:rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.08)}
.ovfhero-src .chip::before{background:var(--yellow)}
.ovftrack{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ovfroute{position:absolute;left:7%;right:7%;top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,var(--yellow),rgba(249,224,97,.38) 45%,rgba(255,255,255,.14));box-shadow:0 0 18px rgba(249,224,97,.14)}
.ovfroute i{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--yellow);box-shadow:0 0 0 6px rgba(249,224,97,.10),0 0 24px rgba(249,224,97,.9);animation:ovf-travel 5.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ovf-travel{0%,7%{left:0}27%{left:25%}51%{left:50%}75%{left:75%}93%,100%{left:100%}}
.ovfs{position:relative;z-index:2;min-height:174px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:rgba(12,17,29,.88);backdrop-filter:blur(12px);box-shadow:0 18px 40px -30px rgba(0,0,0,.82);
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);animation:ovf-stage-in .42s var(--ease) both;animation-delay:calc(var(--ovf-i) * 70ms)}
.ovfs:hover{transform:translateY(-4px);border-color:rgba(249,224,97,.38);background:rgba(21,27,40,.96)}
@keyframes ovf-stage-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ovfs-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}.ovfs-k{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ovfs-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 8px 18px -12px rgba(0,0,0,.9)}
.ovfs-icon.metric-spend{background:linear-gradient(145deg,#fff7bf,var(--yellow))}.ovfs-icon.metric-revenue{background:var(--yellow)}
.ovfs-icon .mico{width:20px;height:20px;stroke:var(--ink);opacity:1}.ovfs-icon .mico-accent{fill:var(--ink)}
.ovfs>b{display:block;margin-top:4px;color:#fff;font:500 clamp(27px,2vw,35px)/1 var(--display);letter-spacing:-.03em}
.ovfs-n{display:block;margin-top:8px;min-height:34px;color:rgba(255,255,255,.53);font-size:10.5px;line-height:1.45}
.ovfs-conv{display:inline-flex;align-items:baseline;gap:5px;margin-top:10px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.52);font-size:8.5px}
.ovfs-conv strong{color:var(--yellow);font-size:10px}.ovfs.lock{border-style:dashed;opacity:.72}.ovfs.lock>b{font:600 13px/1.35 var(--sans);letter-spacing:0;color:rgba(255,255,255,.62)}
.ovfs.outcome{border-color:rgba(249,224,97,.28)}
.ovffoot{position:relative;z-index:2;display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.5);font-size:10.5px;line-height:1.45}
.ovffoot .btn{margin-left:auto;background:#fff;color:var(--ink);border-color:#fff}

@media(max-width:1100px){.ovftrack{grid-template-columns:repeat(2,minmax(0,1fr))}.ovfroute{display:none}.ovfs{min-height:150px}}
@media(max-width:650px){.ovfhero{padding:20px 16px;border-radius:22px}.ovfhero-h{align-items:flex-start;flex-direction:column}.ovftrack{grid-template-columns:1fr}.ovffoot{align-items:flex-start;flex-direction:column}.ovffoot .btn{margin-left:0}.kcard{min-height:158px}.kc-i,.soct-i{width:40px!important;height:40px!important;flex-basis:40px!important}}
@media(prefers-reduced-motion:reduce){.ovfroute i,.ovfs{animation:none!important}.kcard,.soct,.cmpt,.lqt,.rt,.remt{transition:none!important}}

/* Core channel identity uses the actual brand marks; Preview/product-control
   modules keep SHMEL's own line icons. */
.rail nav button .navlogo{width:20px;height:20px;flex:none;object-fit:contain;border-radius:5px;background:#fff;padding:2px}
.rail nav button[aria-current="true"] .navlogo{box-shadow:0 0 0 1px rgba(23,28,43,.08)}
.app.railmin .rail nav button .navlogo{width:21px;height:21px;margin:0}

/* ================================================= FINAL UI CONSISTENCY PASS */
/* One KPI icon language: soft SHMEL yellow, dark line art, same geometry. */
.kpi6{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important;gap:10px!important}
.kpi5{gap:10px!important}
.kcard{min-height:158px!important;padding:15px 15px 14px!important;border-radius:18px!important}
.kc-h{margin-bottom:12px!important}
.kc-i,.soct-i,.cmpt-i,.lqt-i,.rt-i,.remt .cmpt-i{
  width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:13px!important;
  display:grid!important;place-items:center!important;background:linear-gradient(145deg,#fff8d1,#f9e061)!important;
  color:var(--ink)!important;border:1px solid rgba(214,155,19,.16)!important;
  box-shadow:0 7px 18px -14px rgba(138,91,0,.48)!important}
.kc-i::before,.soct-i::before{inset:2px!important;border-radius:10px!important}
.kc-i .mico,.soct-i svg,.cmpt-i svg,.lqt-i svg,.rt-i svg,.remt .cmpt-i svg{
  width:19px!important;height:19px!important;stroke:var(--ink)!important;color:var(--ink)!important;opacity:1!important}
.kc-i .mico-accent{fill:var(--ink)!important}
/* Kill the mixed black/green/red ordinary KPI icon treatments. Status still lives in text/deltas/cards. */
.kc-i.metric-revenue,.kc-i.metric-roas,.kc-i.metric-cpb,
.kc-i.metric-leads,.kc-i.metric-appts,.kc-i.metric-top3,.kc-i.metric-clicks,.kc-i.metric-visits,
.kc-i.metric-open,.kc-i.metric-sent,.kc-i.metric-pos,.kc-i.metric-words,.kc-i.metric-activity,
.soct-i.metric-acted,.soct-i.metric-follows,.soct-i.metric-clicks,.soct-i.metric-visits,.soct-i.metric-reach,
.cmpt-i.risk,.cmpt-i.ok,.cmpt-i.warn,.lqt-i.risk,.lqt-i.ok,.lqt-i.check,
.remt .cmpt-i.miss,.remt .cmpt-i.ok,.remt .cmpt-i.wait,.remt .cmpt-i.booked,.remt .cmpt-i.sent{
  background:linear-gradient(145deg,#fff8d1,#f9e061)!important;color:var(--ink)!important;
  border-color:rgba(214,155,19,.16)!important;box-shadow:0 7px 18px -14px rgba(138,91,0,.48)!important}
.kc-i.metric-revenue .mico,.kc-i.metric-roas .mico,.kc-i.metric-cpb .mico,.soct-i.metric-acted svg{
  stroke:var(--ink)!important;color:var(--ink)!important}
.kcard .kc-v{font-size:clamp(28px,1.85vw,34px)!important}
.kcard .kc-r{min-height:30px!important;font-size:11.5px!important}
.kcard .kc-d{margin-top:9px!important}
.soct{min-height:150px!important;padding:15px 16px!important}
.soct>b{font-size:clamp(28px,1.9vw,34px)!important}
.cmptiles,.lqtiles,.reftiles,.remtiles{gap:10px!important}
.cmpt,.lqt,.rt,.remt{padding:15px!important;border-radius:18px!important}

/* SEO / channel source pill: source identity should never dominate the header. */
.mhead-b .connpill{padding:6px 8px!important;gap:7px!important;box-shadow:none!important}
.mhead-b .connpill>svg,.mhead-b .connpill>img,.mhead-b .connpill .mk2{
  width:18px!important;height:18px!important;flex:0 0 18px!important;display:block!important}
.mhead-b .connpill .nm{font-size:11.5px!important}
.mhead-b .connpill .st{font-size:10px!important;padding:3px 7px!important}
#view-search .mhead-b .connpill>svg{width:18px!important;height:18px!important}

/* Action Center: every channel mark sits on the same optical center. */
.ac-brand{display:flex!important;align-items:center!important;justify-content:center!important;
  width:36px!important;height:36px!important;flex:0 0 36px!important;padding:0!important;
  line-height:0!important;overflow:hidden!important;background:#fff!important;border-radius:11px!important}
.ac-brand>img,.ac-brand>svg{display:block!important;width:22px!important;height:22px!important;
  max-width:22px!important;max-height:22px!important;object-fit:contain!important;margin:0!important;
  position:static!important;transform:none!important}
.ac-brand svg{fill:none!important;stroke:var(--ink)!important;stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important}
/* Search Console keeps its own product colours; Email/Meta/Google/Social are
   real image marks, and Compliance uses SHMEL's own bee mark. */
.ac-brand.seo svg{width:23px!important;height:23px!important;stroke:none!important}
.ac-brand.compliance{background:#fff9dc!important;border-color:rgba(214,155,19,.16)!important}
.ac-brand.compliance>img{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important}
.ac-brand.all{background:linear-gradient(145deg,#fff6bd,var(--yellow))!important;line-height:1!important}
.acg-head .ac-brand{width:40px!important;height:40px!important;flex-basis:40px!important}
.acg-head .ac-brand>img,.acg-head .ac-brand>svg{width:23px!important;height:23px!important;max-width:23px!important;max-height:23px!important}

/* Business Funnel stays special, but moves from black to a softer warm slate. */
.ovfhero{background:
  radial-gradient(circle at 82% 10%,rgba(249,224,97,.18),transparent 24%),
  radial-gradient(circle at 12% 115%,rgba(249,224,97,.08),transparent 34%),
  linear-gradient(135deg,#202633 0%,#2a303b 52%,#383832 100%)!important;
  box-shadow:0 24px 60px -38px rgba(31,36,47,.60)!important}
.ovfs{background:rgba(24,30,42,.72)!important;border-color:rgba(255,255,255,.13)!important}
.ovfs:hover{background:rgba(33,40,53,.88)!important}
.ovfhero::before{opacity:.16!important}
.ovfs-icon{background:linear-gradient(145deg,#fff8d1,#f9e061)!important}
.ovfs-icon.metric-spend,.ovfs-icon.metric-revenue{background:linear-gradient(145deg,#fff8d1,#f9e061)!important}

/* Settings: light, structured, clearly SHMEL, not a pile of generic forms. */
#view-settings>.ttl{margin-bottom:5px!important;font-size:clamp(34px,3vw,48px)!important}
#view-settings .settabs{margin-bottom:18px;padding:0 2px}
#view-settings .tabs button{padding:11px 14px 13px!important}
#view-settings #tab-clinic>.sub{max-width:70ch;margin:0 0 16px;color:var(--grey);font-size:13px}
#view-settings .idcard{padding:20px 22px!important;border-radius:22px!important;
  background:linear-gradient(120deg,#fff9dc 0%,#fffdf3 45%,#fff 100%)!important;
  border:1px solid rgba(214,155,19,.22)!important;box-shadow:0 18px 42px -34px rgba(23,28,43,.42)!important}
#view-settings .id-badge{width:68px;height:68px;border-radius:18px!important;box-shadow:0 9px 22px -18px rgba(23,28,43,.45)!important}
#view-settings .setgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important}
#view-settings .setcard{position:relative;overflow:hidden;padding:19px 20px!important;border-radius:20px!important;
  border:1px solid rgba(23,28,43,.075)!important;background:linear-gradient(160deg,#fff 0%,#fff 78%,#fafaf6 100%)!important;
  box-shadow:0 14px 34px -30px rgba(23,28,43,.44)!important;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
#view-settings .setcard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--yellow),rgba(249,224,97,.12) 60%,transparent)}
#view-settings .setcard:hover{transform:translateY(-2px);box-shadow:0 20px 42px -32px rgba(23,28,43,.48)!important}
#view-settings .setcard .sc-h h3,#view-settings .setcard>h3{font-size:10px!important;letter-spacing:.12em!important;color:#777d87!important}
#view-settings .setrow{padding:11px 0!important;border-color:rgba(23,28,43,.065)!important}
#view-settings .setrow .k{font-size:11.5px!important;color:#858a93!important}
#view-settings .setrow .v{font-size:14px!important;line-height:1.5}
#view-settings .setgrid.one{grid-template-columns:1fr!important}
#view-settings .asw{border-radius:15px!important;padding:15px 16px!important}
#view-settings .asw.on{background:linear-gradient(145deg,#fff8d7,#fffdf4)!important;border-color:rgba(214,155,19,.40)!important}
#view-settings .dangerrow{border:1px solid rgba(23,28,43,.075)!important;box-shadow:none!important;background:#fafaf8!important}
@media(max-width:1150px){#view-settings .setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){#view-settings .setgrid{grid-template-columns:1fr}}

/* ================================================= DEMO READY · ICONS + COMPLIANCE */
/* Metric icons are semantic line art only: no decorative dots, sparkles or mixed materials. */
.kc-i::before,.soct-i::before,.cmpt-i::after,.lqt-i::after,.rt-i::after{display:none!important}
.kc-i,.soct-i,.cmpt-i,.lqt-i,.rt-i,.remt .cmpt-i{
  background:linear-gradient(145deg,#fffbe8,#f9e061)!important;
  border:1px solid rgba(214,155,19,.20)!important;color:var(--ink)!important;
  box-shadow:0 8px 18px -15px rgba(138,91,0,.42)!important}
.mico,.kc-i .mico,.soct-i svg,.cmpt-i svg,.lqt-i svg,.rt-i svg,.remt .cmpt-i svg{
  fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;color:var(--ink)!important}
.mico-accent{display:none!important}
.kc-h>span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  max-width:calc(100% - 52px);min-height:32px;display:block}
.kcard{min-height:168px!important}
.cmpbridge{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  margin:16px 0 24px;padding:16px 18px;border:1px solid rgba(214,155,19,.25);border-radius:18px;
  background:linear-gradient(110deg,#fff9da 0%,#fffdf5 52%,#fff 100%)}
.cmpbridge-k{display:block;margin-bottom:5px;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:#8d6a0c}.cmpbridge b{display:block;font-size:16px;letter-spacing:-.01em}
.cmpbridge p{margin:4px 0 0;max-width:72ch;color:var(--grey);font-size:12.5px;line-height:1.5}
.cmpbridge-a{display:flex;align-items:center;gap:10px;white-space:nowrap}
.cmpbridge-chip{padding:5px 9px;border-radius:999px;background:#fff;border:1px solid rgba(23,28,43,.08);
  color:var(--slate);font-size:10.5px;font-weight:650}
@media(max-width:720px){.cmpbridge{grid-template-columns:1fr}.cmpbridge-a{justify-content:flex-start}}

/* ================================================= DEMO READY · SETTINGS */
#view-settings>.ttl{font-size:clamp(34px,2.8vw,44px)!important;margin:0 0 7px!important}
#view-settings #tab-clinic>.sub{margin:0 0 18px!important;max-width:76ch;color:var(--grey)!important;font-size:13px!important}
#view-settings .settabs{align-items:center!important;gap:10px!important;margin:0 0 20px!important;padding:6px!important;
  border:1px solid rgba(23,28,43,.075)!important;border-radius:16px!important;background:#fff!important;
  box-shadow:0 12px 30px -28px rgba(23,28,43,.42)!important}
#view-settings .settabs .tabs{display:flex!important;gap:4px!important;align-items:center!important;border:0!important;margin:0!important}
#view-settings .settabs .tabs button{padding:9px 13px!important;border:0!important;border-radius:11px!important;
  color:#777d87!important;background:transparent!important;font-size:12.5px!important;font-weight:620!important}
#view-settings .settabs .tabs button[aria-selected="true"]{background:#fff4b6!important;color:var(--ink)!important;
  box-shadow:inset 0 0 0 1px rgba(214,155,19,.18)!important}
#view-settings .setsupport{margin:0!important;margin-left:auto!important;background:#fff!important;color:var(--ink)!important;
  border:1px solid rgba(23,28,43,.10)!important;box-shadow:none!important}
#view-settings .idcard{margin:0 0 26px!important;padding:20px 22px!important;border-radius:22px!important;
  background:#fff!important;border:1px solid rgba(23,28,43,.08)!important;box-shadow:0 18px 42px -34px rgba(23,28,43,.42)!important}
#view-settings .idcard::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 5px 5px 0;background:var(--yellow)}
#view-settings .id-badge{width:64px!important;height:64px!important;border-radius:17px!important;background:#fff9d8!important;
  border-color:rgba(214,155,19,.18)!important;box-shadow:none!important}
#view-settings .id-k{font-size:9.5px!important;font-weight:800!important;letter-spacing:.11em!important;text-transform:uppercase!important;color:#9a7a18!important}
#view-settings .id-t>b{font-family:var(--display)!important;font-size:24px!important;font-weight:600!important;letter-spacing:-.025em!important}

#view-settings .setgroup-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:24px;align-items:end;
  margin:30px 2px 12px;padding-top:22px;border-top:1px solid rgba(23,28,43,.075)}
#view-settings .setgroup-h>div>span{display:block;margin-bottom:4px;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#9a7a18}
#view-settings .setgroup-h>div>b{display:block;font-size:19px;line-height:1.2;letter-spacing:-.02em;font-weight:650}
#view-settings .setgroup-h>p{margin:0;color:var(--grey);font-size:12.5px;line-height:1.5}
#view-settings .setgrid-primary,#view-settings .setgrid-core{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
#view-settings .setgrid-wide{margin-top:14px!important}#view-settings .setgrid-control{margin-top:12px!important}
#view-settings .setcard{padding:20px 21px!important;border-radius:19px!important;background:#fff!important;
  border:1px solid rgba(23,28,43,.075)!important;box-shadow:0 14px 34px -31px rgba(23,28,43,.42)!important}
#view-settings .setcard::before{display:none!important}
#view-settings .setcard:hover{transform:none!important;box-shadow:0 16px 38px -31px rgba(23,28,43,.46)!important}
#view-settings .setcard .sc-h{min-height:34px;margin-bottom:8px!important;padding-bottom:11px;border-bottom:1px solid rgba(23,28,43,.06)}
#view-settings .setcard .sc-h h3,#view-settings .setcard>h3{font-size:15px!important;line-height:1.2!important;
  letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;font-weight:650!important}
#view-settings .setrow{display:grid!important;grid-template-columns:128px minmax(0,1fr);gap:14px!important;align-items:start!important;
  padding:10px 0!important;border-color:rgba(23,28,43,.055)!important}
#view-settings .setrow .k{width:auto!important;padding-top:1px;font-size:11.5px!important;color:#858a93!important}
#view-settings .setrow .v{font-size:13.5px!important;line-height:1.45!important;font-weight:620!important;overflow-wrap:anywhere}
#view-settings .setrow .sub2{font-size:11.5px!important;line-height:1.45!important;font-weight:400!important;color:#9a9fa8!important}

#view-settings .setcard.editing{border-color:rgba(214,155,19,.42)!important;box-shadow:0 0 0 2px rgba(249,224,97,.12)!important}
#view-settings .setcard.editing .setform{margin-top:4px;padding:14px;border-radius:14px;background:#fafaf7;border:1px solid rgba(23,28,43,.055)}
#view-settings .sf2>span{font-size:10.5px!important;font-weight:650!important;letter-spacing:.04em!important;color:#777d87!important}
#view-settings .sf2 input,#view-settings .sf2 select,#view-settings .sf2 textarea,
#view-settings .sve input,#view-settings .sve select{border-color:rgba(23,28,43,.12)!important;border-radius:10px!important;
  background:#fff!important;box-shadow:0 1px 0 rgba(23,28,43,.02)}
#view-settings .sf2 input:focus,#view-settings .sf2 select:focus,#view-settings .sf2 textarea:focus,
#view-settings .sve input:focus,#view-settings .sve select:focus{outline:2px solid rgba(249,224,97,.75)!important;outline-offset:1px!important;border-color:rgba(214,155,19,.36)!important}
#view-settings .autoswitch{gap:12px!important;margin:2px 0 12px!important}
#view-settings .asw{padding:16px 17px!important;border:1px solid rgba(23,28,43,.09)!important;border-radius:14px!important;background:#fafaf8!important}
#view-settings .asw.on{background:#fff9dc!important;border-color:rgba(214,155,19,.32)!important;box-shadow:inset 0 0 0 1px rgba(249,224,97,.12)!important}
#view-settings .asw b{font-size:14px!important}#view-settings .asw span{font-size:12px!important;color:#858a93!important}
#view-settings .set-history-h{margin-top:30px!important}
#view-settings .dangerrow{margin-top:10px!important;padding:14px 16px!important;border-radius:14px!important;background:#fafaf8!important;
  border:1px solid rgba(23,28,43,.07)!important;box-shadow:none!important}
#view-settings .dangerrow.calm{background:#fffdf3!important;border-color:rgba(214,155,19,.18)!important}
@media(max-width:950px){#view-settings .setgrid-primary,#view-settings .setgrid-core{grid-template-columns:1fr!important}
  #view-settings .setgroup-h{grid-template-columns:1fr;gap:5px}}
@media(max-width:700px){#view-settings .settabs{align-items:stretch!important}.setsupport{width:100%;justify-content:center!important}
  #view-settings .setrow{grid-template-columns:1fr!important;gap:3px!important}}

/* ================================================= CENTRALIZED ACTION UX */
/* Channel dashboards show signals; the Action Center is the only decision surface. */
.cc-a.signal,.cc-a.steady{border-left:0!important;background:#f8f8f6!important;padding:12px 13px!important}
.cc-a.signal span,.cc-a.steady span{display:block}
.cc-signal-k{margin-bottom:5px!important;color:#8b9099!important;font-size:9px!important;font-weight:800!important;
  letter-spacing:.10em!important;text-transform:uppercase!important}
.cc-a.signal>span:last-child,.cc-a.steady>span:last-child{color:#6f7580!important;font-size:11.5px!important;line-height:1.48!important}
.ccard{box-shadow:0 10px 28px -26px rgba(23,28,43,.35)}

/* Channel is the primary filter: a compact premium tab rail below the command deck. */
.ac-filterbar{display:block;margin:0 0 12px;padding:6px 7px;border:1px solid rgba(23,28,43,.075);
  border-radius:18px;background:#fff;box-shadow:0 14px 34px -31px rgba(23,28,43,.40)}
#view-actions .ac-channels{display:flex!important;grid-template-columns:none!important;gap:4px!important;min-width:0;
  overflow-x:auto;padding:0!important;scrollbar-width:none}
#view-actions .ac-channels::-webkit-scrollbar{display:none}
#view-actions .ac-channels button{position:relative;flex:0 0 auto;display:flex!important;align-items:center!important;gap:8px!important;
  min-height:44px;padding:5px 10px 5px 6px!important;border:1px solid transparent!important;border-radius:13px!important;
  background:transparent!important;color:#6e747f!important;box-shadow:none!important;transform:none!important;white-space:nowrap}
#view-actions .ac-channels button:hover{background:#f7f7f4!important;color:var(--ink)!important;border-color:rgba(23,28,43,.06)!important}
#view-actions .ac-channels button.on{background:#fff8cf!important;color:var(--ink)!important;border-color:rgba(214,155,19,.20)!important;
  box-shadow:inset 0 0 0 1px rgba(249,224,97,.18),0 7px 18px -16px rgba(138,91,0,.42)!important}
#view-actions .ac-channels button b{font-size:11.5px!important;font-weight:650!important;overflow:visible!important;text-overflow:clip!important}
#view-actions .ac-channels button>div{display:contents!important}
#view-actions .ac-tab-count{display:inline-grid!important;place-items:center!important;min-width:20px;height:20px;margin:0!important;padding:0 6px!important;
  border-radius:999px;background:#f0f1f3!important;color:#747a84!important;font-size:9.5px!important;font-weight:750!important}
#view-actions .ac-channels button.on .ac-tab-count{background:#fff!important;color:#7d640f!important}
#view-actions .ac-channels button[data-achannel="all"]{padding-left:12px!important}
#view-actions .ac-channels .ac-brand{width:32px!important;height:32px!important;flex-basis:32px!important;border-radius:10px!important}
#view-actions .ac-channels .ac-brand>img,#view-actions .ac-channels .ac-brand>svg{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important}

/* Status is secondary: segmented control after the channel rail. */
#view-actions .act-tabs{display:inline-flex!important;gap:3px!important;width:max-content;max-width:100%;overflow-x:auto;
  margin:0 0 20px!important;padding:4px!important;border:1px solid rgba(23,28,43,.065)!important;border-radius:14px!important;
  background:#f4f5f6!important;scrollbar-width:none}
#view-actions .act-tabs::-webkit-scrollbar{display:none}
#view-actions .act-tabs button{margin:0!important;padding:9px 12px!important;border:0!important;border-radius:10px!important;
  color:#797f89!important;background:transparent!important;font-size:11.5px!important;font-weight:650!important;white-space:nowrap}
#view-actions .act-tabs button[aria-selected="true"]{background:#fff!important;color:var(--ink)!important;
  box-shadow:0 5px 14px -12px rgba(23,28,43,.55)!important}
#view-actions .act-section-head{margin-top:4px!important}
#view-actions .ac-channel-group.filtered{margin-top:0}
#view-actions .ac-channel-group.filtered .ac-grid{animation:ac-filter-in .26s var(--ease) both}
#view-actions .ac-channel-group:not(.filtered){animation:ac-filter-in .28s var(--ease) both}
#view-actions .ac-card{animation:ac-card-in .28s var(--ease) both}
#view-actions .ac-grid .ac-card:nth-child(2){animation-delay:35ms}
#view-actions .ac-grid .ac-card:nth-child(3){animation-delay:70ms}
#view-actions .ac-grid .ac-card:nth-child(4){animation-delay:105ms}
#view-actions .ac-card[data-achan="compliance"] .ac-channel{display:inline-flex!important}
@keyframes ac-filter-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes ac-card-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:760px){.ac-filterbar{padding:7px}
  #view-actions .act-tabs{width:100%}}
@media(prefers-reduced-motion:reduce){#view-actions .ac-channel-group,#view-actions .ac-card{animation:none!important}}

/* ================================================= GOOGLE ADS · OWNER VIEW */
/* Six business outcomes only; media-buyer diagnostics live in Campaigns/Search terms. */
#view-gads .gads-kpis{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
#view-gads .gads-kpis .kcard{min-height:164px!important}

/* Search campaigns have no creative thumbnail. Keep the same premium card
   geometry instead of collapsing the header padding when the image is absent. */
#view-gads .ccards{gap:14px!important;align-items:stretch}
#view-gads .ccard{min-height:292px;border:1px solid rgba(23,28,43,.075)!important;border-radius:18px!important;
  background:linear-gradient(180deg,#fff 0%,#fff 72%,#fbfbf8 100%)!important;
  box-shadow:0 16px 38px -32px rgba(23,28,43,.46)!important;overflow:hidden}
#view-gads .cc-h.nopic{padding:16px 16px 12px!important;min-height:78px}
#view-gads .cc-t{gap:8px!important}
#view-gads .cc-t b{font-size:14px!important;font-weight:600!important;line-height:1.28!important;letter-spacing:-.01em}
#view-gads .cc-t .pill{padding:5px 10px!important}
#view-gads .cc-m{padding:2px 16px 16px!important;gap:10px!important;border-bottom:0!important}
#view-gads .cc-m dt{min-height:28px!important;font-size:10.5px!important;color:#969ba4!important}
#view-gads .cc-m dd{font-size:14px!important;font-weight:600!important}
#view-gads .cc-a.signal,#view-gads .cc-a.steady{margin-top:auto;padding:13px 16px 15px!important;min-height:106px;
  border-top:1px solid rgba(23,28,43,.065)!important;background:#fafaf8!important}
#view-gads .cc-signal-k{margin-bottom:7px!important;color:#9b8a53!important}
#view-gads .cc-a.signal>span:last-child,#view-gads .cc-a.steady>span:last-child{font-size:11.5px!important;line-height:1.5!important;color:#737985!important}
@media(max-width:1180px){#view-gads .gads-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:650px){#view-gads .gads-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* SEO funnel should size to its content instead of stretching to the height
   of the source panel beside it. */
#view-search .seo-funnel-row{align-items:start}
#view-search .seo-funnel-panel,#view-search .seo-source-panel{align-self:start}
#view-search .seo-funnel-panel .pnl-b,#view-search .seo-source-panel .pnl-b{flex:0 0 auto}

/* ================================================= DASHBOARD RHYTHM PASS */
/* One signature dark analytics surface per channel. Everything else stays light. */
.dash-dark{position:relative;overflow:hidden!important;background:
  radial-gradient(circle at 82% 0%,rgba(249,224,97,.16),transparent 28%),
  linear-gradient(145deg,#171C2B 0%,#171C2B 62%,#4A4E5C 145%)!important;
  border-color:rgba(255,255,255,.08)!important;color:#fff!important;
  box-shadow:0 26px 58px -34px rgba(23,28,43,.62)!important}
.dash-dark::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;
  mask-image:linear-gradient(to bottom,#000,transparent 75%)}
.dash-dark>.pnl-h,.dash-dark>.rc-h,.dash-dark>.pnl-b,.dash-dark>.cmpact{position:relative;z-index:1}
.dash-dark .pnl-h h3,.dash-dark .rc-h b{color:#fff!important}
.dash-dark .pnl-h .r,.dash-dark .rc-h span{color:rgba(255,255,255,.54)!important}
.mpanel:not([hidden]) .kcard{animation:dash-card-in .38s var(--ease) both}
.mpanel:not([hidden]) .kcard:nth-child(2){animation-delay:35ms}.mpanel:not([hidden]) .kcard:nth-child(3){animation-delay:70ms}
.mpanel:not([hidden]) .kcard:nth-child(4){animation-delay:105ms}.mpanel:not([hidden]) .kcard:nth-child(5){animation-delay:140ms}
.mpanel:not([hidden]) .kcard:nth-child(6){animation-delay:175ms}.mpanel:not([hidden]) .kcard:nth-child(7){animation-delay:210ms}
@keyframes dash-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Dark analytics charts keep SHMEL yellow as the only accent. */
.dash-growth .chart2 .g2{stroke:rgba(255,255,255,.10)!important}
.dash-growth .chart2 .a2{fill:rgba(255,255,255,.48)!important}
.dash-growth .growth .b2.ghost{fill:var(--yellow)!important;opacity:.78!important;
  transform-box:fill-box;transform-origin:center bottom;animation:dash-bar-in .62s var(--ease) both}
.dash-growth .growth .l2.rev{stroke:#fff!important}.dash-growth .growth .dot.rev{fill:#fff!important}
.dash-growth .growth .l2.book{stroke:rgba(255,255,255,.46)!important}.dash-growth .growth .dot.book{fill:rgba(255,255,255,.52)!important}
.dash-growth .glegend{border-top-color:rgba(255,255,255,.10)!important}.dash-growth .glegend li{color:rgba(255,255,255,.60)!important}
.dash-growth .glegend .rev::before{background:#fff!important}.dash-growth .glegend .book::before{background:rgba(255,255,255,.5)!important}
.dash-growth .growth .lastbadge rect{fill:var(--yellow)!important}.dash-growth .growth .lastbadge text{fill:var(--ink)!important}
.dash-seo .seochart .gl{stroke:rgba(255,255,255,.10)!important}.dash-seo .seochart .ax{fill:rgba(255,255,255,.48)!important}
.dash-seo .seochart .seo-fill{fill:rgba(249,224,97,.16)!important}.dash-seo .seochart .seo-line{stroke:var(--yellow)!important}
.dash-seo .seochart .seo-prev{stroke:rgba(255,255,255,.42)!important}.dash-seo .chartkey{color:rgba(255,255,255,.58)!important}
.dash-seo .chartkey .ck::before{background:var(--yellow)!important}.dash-seo .chartkey .was::before{background:rgba(255,255,255,.45)!important}
@keyframes dash-bar-in{from{opacity:0;transform:scaleY(.12)}to{opacity:.78;transform:scaleY(1)}}

/* Social turns the primary performance chart into a signature surface. */
.dash-social .rc-h b{color:#fff!important}.dash-social .socsel{background:rgba(255,255,255,.08)!important;
  color:#fff!important;border-color:rgba(255,255,255,.14)!important}
.dash-social .socsel:hover{border-color:rgba(249,224,97,.55)!important}
.dash-social .refsvg .rc-g{stroke:rgba(255,255,255,.10)!important}.dash-social .refsvg .rc-y,
.dash-social .refsvg .rc-x,.dash-social .socsvg .rc-y2{fill:rgba(255,255,255,.48)!important}
.dash-social .socsvg .socb{fill:rgba(249,224,97,.82)!important;transform-box:fill-box;transform-origin:center bottom;
  animation:dash-social-bar .62s var(--ease) both}.dash-social .socsvg .socline{stroke:#fff!important}.dash-social .socsvg .socpt{fill:#fff!important}
@keyframes dash-social-bar{from{opacity:0;transform:scaleY(.08)}to{opacity:1;transform:scaleY(1)}}

/* Donuts load rather than simply appearing. Email uses the dark variant. */
.dnut .dn{animation:dash-donut-in .58s var(--ease) both;transform-origin:70px 70px}
.dnut .dn.s1{animation-delay:70ms}.dnut .dn.s2{animation-delay:140ms}.dnut .dn.s3{animation-delay:210ms}.dnut .dn.s4{animation-delay:280ms}
@keyframes dash-donut-in{from{opacity:0;stroke-width:1}to{opacity:1;stroke-width:17}}
.dash-donut .dnut .dn.s0{stroke:var(--yellow)!important}.dash-donut .dnut .dn.s1{stroke:#fff!important}
.dash-donut .dnut .dn.s2{stroke:rgba(255,255,255,.62)!important}.dash-donut .dnut .dn.s3{stroke:rgba(255,255,255,.32)!important}
.dash-donut .dnut .dn.s4{stroke:rgba(255,255,255,.18)!important}.dash-donut .dnut .dn-v{fill:#fff!important}.dash-donut .dnut .dn-k{fill:rgba(255,255,255,.5)!important}

.dash-donut .dnkey li{color:#fff!important}.dash-donut .dnkey span{color:rgba(255,255,255,.76)!important}
.dash-donut .dnkey b{color:#fff!important}.dash-donut .dnkey em{color:rgba(255,255,255,.48)!important}
.dash-donut .dnkey i.s0{background:var(--yellow)!important}.dash-donut .dnkey i.s1{background:#fff!important}
.dash-donut .dnkey i.s2{background:rgba(255,255,255,.62)!important}.dash-donut .dnkey i.s3{background:rgba(255,255,255,.32)!important}
.dash-donut .dnkey i.s4{background:rgba(255,255,255,.18)!important}

/* Compliance activity becomes the dark audit rail; the findings table stays white and dense. */
.dash-compliance{padding-bottom:2px}.dash-compliance .cmpact{padding:0 18px 18px!important}
.dash-compliance .cmpact li{padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.dash-compliance .cmpact li:first-child{border-top:0}.dash-compliance .cmpact div{color:rgba(255,255,255,.78)!important}
.dash-compliance .cmpact b{color:#fff!important}.dash-compliance .cmpact i{color:rgba(255,255,255,.46)!important}
.dash-compliance .cmpact-b{color:var(--yellow)!important;text-decoration-color:rgba(249,224,97,.5)!important}
.dash-compliance .cmpact-i{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.08)}
.dash-compliance .cmpact-i.review{background:rgba(249,224,97,.16)!important;color:var(--yellow)!important}

/* Funnel + source donut read as a paired story without another heavy surface. */
#view-search .seo-funnel-panel{background:linear-gradient(145deg,#fffdf3,#fff 70%)!important;border-color:rgba(214,155,19,.16)!important}
.dash-warm{background:linear-gradient(155deg,#fffdf6,#fff 72%)!important;border-color:rgba(214,155,19,.14)!important}
#view-social .socgrid{grid-template-columns:minmax(0,1fr)!important}
#view-social .socgrid .cmpcorner{display:none!important}
@media(prefers-reduced-motion:reduce){.mpanel:not([hidden]) .kcard,.dnut .dn,.dash-social .socsvg .socb,.dash-growth .growth .b2.ghost{animation:none!important}}

/* SEO detail columns are independent so a short funnel never leaves a blank hole. */
#view-search .seo-detail-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:12px;margin:0 0 12px;align-items:start}
#view-search .seo-detail-col{display:flex;flex-direction:column;gap:12px;min-width:0}
#view-search .seo-detail-col>.pnl{margin:0}
@media(max-width:1180px){#view-search .seo-detail-grid{grid-template-columns:minmax(0,1fr)}}

/* Referral: outcomes on a dark growth surface, offer stays warm and editable. */
.dash-referral .refsvg .rc-g{stroke:rgba(255,255,255,.10)!important}
.dash-referral .refsvg .rc-y,.dash-referral .refsvg .rc-x{fill:rgba(255,255,255,.48)!important}
.dash-referral .refsvg .rc-a{fill:rgba(249,224,97,.14)!important}
.dash-referral .refsvg .rc-l{stroke:var(--yellow)!important;stroke-width:2.8!important;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:dash-line-in .8s var(--ease) forwards}
.dash-referral .refsvg .rc-p{fill:#fff!important;animation:dash-point-in .32s var(--ease) .45s both}
.dash-referral .mch-rule{background:rgba(255,255,255,.28)!important}
.dash-referral .mch-pt{background:var(--yellow)!important;border-color:var(--ink)!important}
@keyframes dash-line-in{to{stroke-dashoffset:0}}
@keyframes dash-point-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* Lead Quality: reserve the strongest surfaces for the rows that need attention. */
#view-leadcheck .lqt{transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease)}
#view-leadcheck .lqt:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
#view-leadcheck .lqt-check{background:linear-gradient(145deg,#fff9d7,#fff 82%)!important;
  border-color:rgba(214,155,19,.20)!important}
#view-leadcheck .lqt-risk{background:var(--g-dark)!important;border-color:transparent!important;
  color:#fff!important;box-shadow:0 24px 48px -32px rgba(23,28,43,.58)!important}
#view-leadcheck .lqt-risk .lqt-k,#view-leadcheck .lqt-risk .lq-d{color:rgba(255,255,255,.58)!important}
#view-leadcheck .lqt-risk .lqt-i{background:rgba(249,224,97,.16)!important;color:var(--yellow)!important}
#view-leadcheck .lqt-risk .lq-d.dot::before{background:var(--yellow)!important}
#view-leadcheck .lqtable{box-shadow:0 18px 42px -36px rgba(23,28,43,.42)}
#view-leadcheck .lqr{transition:background .12s var(--ease),transform .12s var(--ease)}
#view-leadcheck .lqr:hover{background:#fffdf3;transform:translateX(2px)}

/* Reminders: the chart becomes the visual anchor; the sequence remains white and readable. */
.dash-reminders .refsvg .rc-g{stroke:rgba(255,255,255,.10)!important}
.dash-reminders .refsvg .rc-y,.dash-reminders .refsvg .rc-x{fill:rgba(255,255,255,.48)!important}
.dash-reminders .remsvg .rem-all{fill:var(--yellow)!important;transform-box:fill-box;transform-origin:center bottom;
  animation:dash-rem-bar .58s var(--ease) both}
.dash-reminders .remsvg .rem-miss{fill:#C0453C!important;transform-box:fill-box;transform-origin:center bottom;
  animation:dash-rem-bar .58s var(--ease) .12s both}
.dash-reminders .remleg{color:rgba(255,255,255,.56)!important}.dash-reminders .remrate b{color:#fff!important}
.dash-reminders .remrate i.good{color:var(--yellow)!important}
@keyframes dash-rem-bar{from{opacity:0;transform:scaleY(.08)}to{opacity:1;transform:scaleY(1)}}

/* Preview metric rows arrive with the same light rhythm as channel KPI cards. */
#view-referral .rt,#view-leadcheck .lqt,#view-reminders .remt{animation:dash-card-in .36s var(--ease) both}
#view-referral .rt:nth-child(2),#view-leadcheck .lqt:nth-child(2),#view-reminders .remt:nth-child(2){animation-delay:40ms}
#view-referral .rt:nth-child(3),#view-leadcheck .lqt:nth-child(3),#view-reminders .remt:nth-child(3){animation-delay:80ms}
#view-referral .rt:nth-child(4),#view-leadcheck .lqt:nth-child(4),#view-reminders .remt:nth-child(4){animation-delay:120ms}
#view-reminders .remt:nth-child(5){animation-delay:160ms}
@media(prefers-reduced-motion:reduce){#view-referral .rt,#view-leadcheck .lqt,#view-reminders .remt,
  .dash-referral .refsvg .rc-l,.dash-referral .refsvg .rc-p,.dash-reminders .remsvg .rem-all,
  .dash-reminders .remsvg .rem-miss{animation:none!important}}

/* ================================================= SETTINGS · PREMIUM PASS */
#view-settings{--set-card:rgba(23,28,43,.075);--set-soft:#fafaf7}
#view-settings>.ttl{font-size:clamp(38px,3vw,50px)!important;letter-spacing:-.035em!important;margin-bottom:8px!important}
#view-settings .settabs{position:sticky;top:0;z-index:8;margin:0 0 22px!important;padding:6px!important;
  border:1px solid rgba(23,28,43,.07)!important;border-radius:18px!important;background:rgba(255,255,255,.92)!important;
  box-shadow:0 18px 40px -34px rgba(23,28,43,.48)!important;backdrop-filter:blur(18px)}
#view-settings .settabs .tabs button{min-height:38px;padding:8px 14px!important;border-radius:12px!important}
#view-settings .settabs .tabs button[aria-selected="true"]{background:var(--ink)!important;color:#fff!important;
  box-shadow:0 10px 22px -18px rgba(23,28,43,.7)!important}
#view-settings .setsupport{height:38px!important;padding:0 14px!important;border-radius:12px!important;background:#fff!important}

/* Workspace hero: identity + the three settings people need to orient themselves. */
#view-settings .idcard{isolation:isolate;overflow:hidden;margin:0 0 30px!important;padding:24px 26px!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:26px!important;color:#fff!important;
  background:radial-gradient(circle at 88% -16%,rgba(249,224,97,.08),transparent 27%),
    linear-gradient(145deg,#101522 0%,#171C2B 58%,#1C2233 100%)!important;
  box-shadow:0 30px 68px -38px rgba(10,15,26,.88)!important}
#view-settings .idcard::before{content:''!important;position:absolute!important;inset:0!important;width:auto!important;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px)!important;
  background-size:30px 30px!important;opacity:.25!important;border-radius:inherit!important;pointer-events:none}
#view-settings .idcard>*{position:relative;z-index:1}
#view-settings .id-badge{width:72px!important;height:72px!important;border-radius:20px!important;background:#fff!important;
  border-color:rgba(255,255,255,.20)!important;box-shadow:0 14px 28px -18px rgba(0,0,0,.5)!important}
#view-settings .id-k{color:var(--yellow)!important}
#view-settings .id-t>b{font-family:var(--serif)!important;font-size:30px!important;font-weight:400!important;color:#fff!important}
#view-settings .id-t>span:last-child{color:rgba(255,255,255,.58)!important}

#view-settings .id-meta{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#view-settings .id-meta>span{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:7px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.07);color:rgba(255,255,255,.62);font-size:11px;white-space:nowrap}
#view-settings .id-meta b{font-size:12.5px;color:#fff;font-weight:700}
#view-settings .id-mode i{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(249,224,97,.11)}
#view-settings .id-clear{top:10px!important;right:12px!important;color:rgba(255,255,255,.55)!important;background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.10)!important}
#view-settings .id-clear:hover{color:#fff!important;background:rgba(255,255,255,.11)!important}
#view-settings .id-edit{background:var(--yellow)!important;color:var(--ink)!important;border-color:rgba(255,255,255,.18)!important}

/* Numbered chapters give the long page a deliberate editorial rhythm. */
#view-settings .setgroup-h{grid-template-columns:42px minmax(0,1fr) minmax(260px,.78fr)!important;gap:14px 18px!important;
  margin:34px 2px 14px!important;padding-top:25px!important;border-top:1px solid rgba(23,28,43,.075)!important}
#view-settings .setgroup-n{align-self:start;display:grid!important;place-items:center;width:34px;height:34px;margin-top:0!important;
  border-radius:11px;background:var(--ink);color:var(--yellow)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.08em!important}
#view-settings .setgroup-h>div>span{margin-bottom:3px!important;color:#9a7a18!important}
#view-settings .setgroup-h>div>b{font-family:var(--serif);font-size:24px!important;font-weight:400!important;letter-spacing:-.015em!important}
#view-settings .setgroup-h>p{align-self:center!important;max-width:44ch;color:#858a93!important}

/* Cards read like records until edited, not generic form boxes. */
#view-settings .setgrid-primary,#view-settings .setgrid-core{gap:16px!important}
#view-settings .setcard{padding:21px 22px!important;border-radius:22px!important;border:1px solid var(--set-card)!important;
  background:linear-gradient(165deg,#fff 0%,#fff 76%,#fbfbf8 100%)!important;
  box-shadow:0 18px 42px -34px rgba(23,28,43,.44)!important;transform:none!important}
#view-settings .setcard:hover{transform:translateY(-2px)!important;box-shadow:0 24px 50px -34px rgba(23,28,43,.48)!important}
#view-settings .setcard[data-card="goals"]{background:linear-gradient(145deg,#fff9da 0%,#fffdf2 48%,#fff 100%)!important;
  border-color:rgba(214,155,19,.20)!important}
#view-settings .setcard[data-card="comp"]{background:linear-gradient(165deg,#fafaf8,#fff 78%)!important}
#view-settings .setcard[data-card="autonomy"]{background:linear-gradient(155deg,#fffdf2,#fff 68%)!important;border-color:rgba(214,155,19,.16)!important}
#view-settings .setcard .sc-h{min-height:38px!important;margin-bottom:4px!important;padding-bottom:12px!important}
#view-settings .setcard .sc-h h3{font-size:15.5px!important;font-weight:650!important}
#view-settings .setcard .sc-h .btn.ghost{padding:6px 10px!important;border:1px solid rgba(23,28,43,.08)!important;border-radius:10px!important;
  background:#fafaf8!important;color:#656b75!important;font-size:10.5px!important;font-weight:750!important;letter-spacing:.05em;text-transform:uppercase}
#view-settings .setcard .sc-h .btn.ghost:hover{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
#view-settings .setrow{grid-template-columns:138px minmax(0,1fr)!important;padding:11px 0!important}
#view-settings .setrow .k{font-size:10.5px!important;letter-spacing:.025em!important;color:#969ba4!important}
#view-settings .setrow .v{font-size:13.5px!important;color:#202532!important}
#view-settings .setrow .tags span{padding:4px 9px!important;background:#f5f5f2!important;border-color:rgba(23,28,43,.06)!important}

/* Control section feels deliberate, with a clear selected operating mode. */
#view-settings .autoswitch{gap:10px!important;margin:4px 0 14px!important}
#view-settings .asw{position:relative;min-height:84px;padding:17px 18px 16px 52px!important;border-radius:16px!important;
  background:#fafaf8!important;border-color:rgba(23,28,43,.075)!important}
#view-settings .asw::before{content:'';position:absolute;left:18px;top:19px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid #b5b8bf;background:#fff;box-shadow:inset 0 0 0 4px #fff}
#view-settings .asw.on{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;
  box-shadow:0 18px 34px -28px rgba(23,28,43,.72)!important}
#view-settings .asw.on::before{border-color:var(--yellow);background:var(--yellow);box-shadow:inset 0 0 0 4px var(--ink)}
#view-settings .asw.on span{color:rgba(255,255,255,.58)!important}
#view-settings .asw.on b{color:#fff!important}
#view-settings .asw b i{background:rgba(249,224,97,.14)!important;border-color:rgba(249,224,97,.22)!important;color:#8a721c!important}
#view-settings .asw.on b i{color:var(--yellow)!important}
#view-settings .setcard[data-card="scopes"]{background:#fbfbf9!important}
#view-settings .setcard[data-card="scopes"]>.sub2{display:inline-flex!important;margin:3px 0 0;padding:6px 10px;border-radius:999px;
  background:#f1f2f3;color:#6d727c!important;font-size:11px!important}
#view-settings .scgroup{padding:14px;border:1px solid rgba(23,28,43,.06);border-radius:16px;background:#fff;margin-bottom:12px!important}
#view-settings .scrow2{margin-bottom:5px!important;border-color:rgba(23,28,43,.07)!important;border-radius:12px!important;background:#fbfbf9!important}
#view-settings .scrow2.on{background:#fff!important}

/* Billing tab uses the same hierarchy instead of looking like another product. */
#view-settings .billcols{gap:18px!important}
#view-settings .billnow{background:radial-gradient(circle at 88% -10%,rgba(249,224,97,.24),transparent 34%),var(--g-dark)!important;
  color:#fff!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 28px 58px -38px rgba(23,28,43,.68)!important}
#view-settings .billnow .bill-t,#view-settings .billnow .bill-price b{color:#fff!important}
#view-settings .billnow .bill-price span,#view-settings .billnow .bill-next{color:rgba(255,255,255,.58)!important}
#view-settings .billnow .billchip{background:var(--yellow)!important;color:var(--ink)!important}
#view-settings .billnow .btn:not(.y){background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}
#view-settings .billuse{background:linear-gradient(145deg,#fff9da,#fffdf3 48%,#fff)!important;border-color:rgba(214,155,19,.18)!important}
#view-settings .billbar{height:14px!important;background:rgba(23,28,43,.07)!important}
#view-settings .billpay,#view-settings .billhist{background:#fff!important}
#view-settings .billcard{background:#fafaf8;border-color:rgba(23,28,43,.07)!important}

/* History reads as a quiet audit trail. */
#view-settings #tab-history{max-width:980px}
#view-settings .hday{margin-top:30px!important;color:#9a7a18!important;border-bottom-color:rgba(214,155,19,.16)!important}
#view-settings .hrow{border:1px solid rgba(23,28,43,.06);border-radius:14px;margin-bottom:7px;background:#fff;
  box-shadow:0 12px 28px -28px rgba(23,28,43,.38);overflow:hidden}
#view-settings .hr-h{padding:12px 14px!important}.hr-h:hover{background:#fffdf4!important}
#view-settings .hr-k{color:#777d87!important}.hr-more{color:#8b711d!important}

@media(max-width:1050px){
  #view-settings .idcard{align-items:flex-start!important;flex-wrap:wrap}
  #view-settings .id-meta{flex-basis:100%;margin-left:92px;justify-content:flex-start}
  #view-settings .setgroup-h{grid-template-columns:38px minmax(0,1fr)!important}
  #view-settings .setgroup-h>p{grid-column:2;max-width:64ch}
}
@media(max-width:700px){
  #view-settings .settabs{position:relative;top:auto}
  #view-settings .idcard{padding:20px!important}
  #view-settings .id-meta{margin-left:0;justify-content:flex-start}
  #view-settings .id-t>b{font-size:26px!important}
  #view-settings .setgroup-h{grid-template-columns:34px minmax(0,1fr)!important;gap:10px!important}
  #view-settings .setgroup-h>p{grid-column:2}
  #view-settings .setgroup-h>div>b{font-size:21px!important}
  #view-settings .setrow{grid-template-columns:1fr!important;gap:3px!important}
}
@media(prefers-reduced-motion:reduce){#view-settings .setcard,#view-settings .idcard{transition:box-shadow .18s var(--ease)!important}}

/* ================================================= CREATE STUDIO · PREMIUM */
.create-shell{position:relative;isolation:isolate;overflow:hidden;margin:0!important;padding:62px 28px 30px!important;
  border:1px solid rgba(255,255,255,.085)!important;border-radius:28px!important;color:#fff!important;
  background:radial-gradient(circle at 86% -8%,rgba(249,224,97,.16),transparent 28%),
    radial-gradient(circle at 5% 112%,rgba(249,224,97,.05),transparent 32%),
    linear-gradient(145deg,#0d121d 0%,#171c2b 58%,#222938 100%)!important;
  box-shadow:0 30px 70px -40px rgba(15,20,32,.88)!important}
.create-shell::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.24;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;
  mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.create-shell::before{position:absolute;top:20px;left:28px;z-index:2;display:inline-flex;align-items:center;
  min-height:25px;padding:5px 10px;border:1px solid rgba(249,224,97,.22);border-radius:999px;
  background:rgba(249,224,97,.10);color:var(--yellow);font-size:9.5px;font-weight:800;letter-spacing:.12em}
.create-meta::before{content:'META ADS · CREATE'}.create-gads::before{content:'GOOGLE ADS · CREATE'}
.create-seo::before{content:'SEO · CREATE'}.create-social::before{content:'SOCIAL · CREATE'}
.create-email::before{content:'EMAIL · CREATE'}

.create-shell .create-title{position:relative;margin:0 0 24px;padding:0 190px 20px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.create-shell .create-title h2{margin:0;font-family:var(--serif);font-size:clamp(28px,2.4vw,36px);font-weight:400;
  line-height:1.06;letter-spacing:-.02em;color:#fff}
.create-shell .create-title p{margin:7px 0 0;max-width:68ch;font-size:13px;line-height:1.55;color:rgba(255,255,255,.55)}
.create-shell .create-title::after{content:'SUPERVISED WORKSPACE';position:absolute;right:0;top:2px;padding:6px 10px;
  border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.58);font-size:9px;font-weight:750;letter-spacing:.10em}
.create-shell .wiz{max-width:1120px;color:#fff}
.create-shell .wzrail{gap:4px;margin:0 0 26px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);
  border-radius:15px;background:rgba(255,255,255,.035);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.create-shell .wzrail::-webkit-scrollbar{display:none}
.create-shell .wzrail li{color:rgba(255,255,255,.44);font-size:11.5px;white-space:nowrap}
.create-shell .wzrail li+li::before{width:24px;background:rgba(255,255,255,.12);margin:0 6px}
.create-shell .wzrail i{width:25px;height:25px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.54);font-weight:700}
.create-shell .wzrail li.on{color:#fff}.create-shell .wzrail li.on i{background:var(--yellow);color:var(--ink);
  box-shadow:0 0 0 5px rgba(249,224,97,.08),0 0 24px rgba(249,224,97,.16)}
.create-shell .wzrail li.done{color:rgba(255,255,255,.66)}.create-shell .wzrail li.done i{background:rgba(249,224,97,.18);color:var(--yellow)}

.create-shell .wzhead h2{color:#fff;font-size:31px}.create-shell .wzhead p{color:rgba(255,255,255,.55)}
.create-shell :is(.wzf,.wzfield,.emailcard){min-width:0}
.create-shell .wzf{padding:13px 14px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.035)}
.create-shell .wzf>span,.create-shell .mk-l{color:rgba(255,255,255,.62)!important;font-size:10.5px!important;
  font-weight:750!important;letter-spacing:.06em;text-transform:uppercase}
.create-shell .wzf>span b,.create-shell .mk-l em{color:rgba(255,255,255,.34)!important;text-transform:none;letter-spacing:0}
.create-shell :is(.wzf select,.wzf input,.wzf textarea,.wzmoney,.mk-sel,.mk-in,.mk-ta textarea,.erevise input,.eoffer input){
  background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.11)!important;color:#fff!important;
  border-radius:11px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.create-shell :is(.wzf select,.wzf input,.wzf textarea,.mk-sel,.mk-in,.mk-ta textarea,.erevise input,.eoffer input)::placeholder{
  color:rgba(255,255,255,.28)!important}
.create-shell :is(.wzf select,.mk-sel) option{background:#171c2b;color:#fff}
.create-shell :is(.wzf select,.wzf input,.wzf textarea,.wzmoney,.mk-sel,.mk-in,.mk-ta textarea,.erevise input,.eoffer input):focus,
.create-shell .wzmoney:focus-within{outline:0!important;border-color:rgba(249,224,97,.66)!important;
  box-shadow:0 0 0 3px rgba(249,224,97,.09),inset 0 1px 0 rgba(255,255,255,.04)!important}
.create-shell .wzmoney b{color:var(--yellow)}.create-shell .wzmoney em,.create-shell .wzhint,.create-shell .mk-hint,.create-shell .mk-count{color:rgba(255,255,255,.38)!important}

.create-shell .btn{border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.055)!important;
  color:#fff!important;box-shadow:none!important;transition:transform .14s var(--ease),background .14s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease)!important}
.create-shell .btn:hover:not(:disabled){transform:translateY(-1px);background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.24)!important}
.create-shell .btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.create-shell .btn.y{background:linear-gradient(180deg,#FFE66D,#F9E061)!important;border-color:rgba(249,224,97,.78)!important;
  color:var(--ink)!important;font-weight:750!important;box-shadow:0 12px 26px -18px rgba(249,224,97,.72)!important}
.create-shell .btn.y:hover:not(:disabled){background:#ffe873!important;border-color:#ffe873!important;
  box-shadow:0 16px 34px -18px rgba(249,224,97,.78)!important}
.create-shell .btn:disabled{opacity:.38!important;cursor:not-allowed!important}
.create-shell .lnk{color:var(--yellow)!important;text-decoration-color:rgba(249,224,97,.45)!important}
.create-shell .wzact{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.create-shell .wzblocked{color:rgba(255,255,255,.42)}
.create-shell .wznote{border:1px solid rgba(249,224,97,.16);background:rgba(249,224,97,.08)!important;color:rgba(255,255,255,.72)!important}
.create-shell .wznote i{background:var(--yellow)!important;box-shadow:0 0 0 5px rgba(249,224,97,.07)}
.create-shell .wzerr{background:rgba(226,100,92,.12)!important;border:1px solid rgba(226,100,92,.28);color:#ffd4d0!important}
.create-shell .modelled,.create-shell .ovs,.create-shell .camps-lede{color:rgba(255,255,255,.42)!important}

.create-shell .wzplan,.create-shell .wzsums{border:1px solid rgba(255,255,255,.08)!important;border-radius:15px!important;overflow:hidden;background:rgba(255,255,255,.025)}
.create-shell .wzrow,.create-shell .wzsum{background:rgba(255,255,255,.035)!important;border-bottom-color:rgba(255,255,255,.07)!important}
.create-shell .wzrow:hover,.create-shell .wzsum:hover{background:rgba(255,255,255,.055)!important}
.create-shell .wzrow .k,.create-shell .wzsum span{color:rgba(255,255,255,.42)!important}
.create-shell .wzrow b,.create-shell .wzsum b{color:#fff!important;font-weight:620!important}
.create-shell .wzrow span{color:rgba(255,255,255,.42)!important}
.create-shell .sec-h{margin-top:24px!important}.create-shell .sec-h h2{color:#fff!important;font-size:14px!important}
.create-shell .sec-h .rule{background:rgba(255,255,255,.09)!important}.create-shell .secnote{color:rgba(255,255,255,.36)!important}
.create-shell .wzverdict{background:rgba(249,224,97,.09)!important;border:1px solid rgba(249,224,97,.17);color:#fff!important}
.create-shell .wzverdict.warn{background:rgba(226,100,92,.09)!important;border-color:rgba(226,100,92,.18)!important}
.create-shell .wzwhy{color:rgba(255,255,255,.42)!important}.create-shell .wzwhy b{color:var(--yellow)!important}
.create-shell .wzgates{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:15px!important}
.create-shell .wzgates>b{color:var(--yellow)!important}.create-shell .wzgates li b{color:#fff!important}
.create-shell .wzgates li span{color:rgba(255,255,255,.42)!important}.create-shell .wzgates li i{background:rgba(255,255,255,.10)!important}
.create-shell .wzgates li.ok i{background:var(--yellow)!important;box-shadow:0 0 0 4px rgba(249,224,97,.07)}

.create-shell .wztabs{padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035)}
.create-shell .wztabs button{border:0!important;background:transparent!important;color:rgba(255,255,255,.48)!important;border-radius:10px!important}
.create-shell .wztabs button[aria-pressed="true"]{background:var(--yellow)!important;color:var(--ink)!important;box-shadow:0 8px 20px -14px rgba(249,224,97,.7)}
.create-shell .wzad{gap:20px}.create-shell .wzcard{border:1px solid rgba(255,255,255,.10)!important;border-radius:16px!important;background:#fff!important;
  box-shadow:0 20px 48px -30px rgba(0,0,0,.55)!important}
.create-shell .wzcard figcaption{background:#fff!important;border-top-color:#eceef1!important}.create-shell .wzlook{background:#fff!important;border-top-color:#eceef1!important}
.create-shell .wzfield{padding:13px 14px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:13px!important;background:rgba(255,255,255,.035)!important}
.create-shell .wzfield>span{color:rgba(255,255,255,.40)!important}.create-shell .wzfield p{color:#fff!important}
.create-shell .wzscreen{padding:13px 14px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.create-shell .wzscreen>span{color:rgba(255,255,255,.58)!important}
.create-shell .wzrun li{border-bottom-color:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.36)!important}
.create-shell .wzrun li i{background:rgba(255,255,255,.09)!important}.create-shell .wzrun li.on{color:#fff!important}.create-shell .wzrun li.on i{background:var(--yellow)!important}
.create-shell .wzrun li.done{color:rgba(255,255,255,.64)!important}.create-shell .wzrun li.done i{background:rgba(249,224,97,.24)!important}
.create-shell .wzdone h2{color:#fff!important}.create-shell .wzdone p,.create-shell .wzwait{color:rgba(255,255,255,.52)!important}
.create-shell .wzids{color:rgba(255,255,255,.38)!important}.create-shell .wzids b{color:#fff!important}

/* Social composer: three dark glass workstations around a real platform preview. */
.create-social .mkcols{gap:12px}.create-social .mkcol{padding:19px!important;border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;background:rgba(255,255,255,.035)!important;box-shadow:none!important;color:#fff!important}
.create-social .mkleft{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important}
.create-social .mkmid{background:rgba(255,255,255,.045)!important}.create-social .mkright{background:rgba(255,255,255,.025)!important}
.create-social .mk-h{color:#fff!important;font-size:21px!important}.create-social .mk-n{background:var(--yellow)!important;color:var(--ink)!important;
  box-shadow:0 0 0 5px rgba(249,224,97,.07)}
.create-social .mktype{border-color:rgba(255,255,255,.09)!important;background:rgba(255,255,255,.04)!important;color:rgba(255,255,255,.65)!important}
.create-social .mktype:hover{border-color:rgba(255,255,255,.20)!important;background:rgba(255,255,255,.07)!important}
.create-social .mktype.on{border-color:rgba(249,224,97,.35)!important;background:rgba(249,224,97,.12)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(249,224,97,.08)}
.create-social .mktype-i{color:var(--yellow)}.create-social .mk-tags span{background:rgba(249,224,97,.10)!important;color:#ffe879!important;border:1px solid rgba(249,224,97,.12)}
.create-social .mkchat{border-top-color:rgba(255,255,255,.08)!important}.create-social .mkmsg.you{background:var(--yellow)!important;border-color:var(--yellow)!important;color:var(--ink)!important}
.create-social .mkmsg.sh{background:rgba(255,255,255,.07)!important;color:rgba(255,255,255,.72)!important}
.create-social .mk-empty{border:1px dashed rgba(255,255,255,.10);border-radius:14px;color:rgba(255,255,255,.45)!important;background:rgba(255,255,255,.02)!important}

.create-social .mkprev{border-color:rgba(255,255,255,.12)!important;border-radius:16px!important;background:#fff!important;
  box-shadow:0 20px 48px -30px rgba(0,0,0,.55)!important}.create-social .mkprev-h,.create-social .mkprev-a,.create-social .mkprev-b{background:#fff!important}
.create-social .mkseg{padding:3px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.04)}
.create-social .mkseg button{border:0!important;background:transparent!important;color:rgba(255,255,255,.46)!important;border-radius:999px!important}
.create-social .mkseg button.on{background:var(--yellow)!important;color:var(--ink)!important}
.create-social .mkscr{border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.04)!important}
.create-social .mkscr.ok{border-color:rgba(88,192,141,.26)!important;background:rgba(88,192,141,.08)!important}
.create-social .mkscr.warn{border-color:rgba(249,224,97,.24)!important;background:rgba(249,224,97,.08)!important}
.create-social .mkscr b{color:#fff!important}.create-social .mkscr p{color:rgba(255,255,255,.48)!important}
.create-social .mk-acts{padding-top:14px;border-top:1px solid rgba(255,255,255,.08)!important}.create-social .mk-said{color:rgba(255,255,255,.48)!important}
.create-social .spk-ph{border-color:rgba(255,255,255,.10)!important;background:#fff!important;color:var(--ink)!important}
.create-social .spk-side{color:#fff!important}.create-social .spk-side .spk-q{color:#fff!important}.create-social .spk-side .spk-at{color:rgba(255,255,255,.44)!important}
.create-social .spk-chip{border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.045)!important;color:#fff!important}
.create-social .spk-chip.on{background:rgba(249,224,97,.13)!important;border-color:rgba(249,224,97,.28)!important;color:var(--yellow)!important}

/* SEO + Email choice cards become tactile dark tiles instead of white forms. */
.create-shell .ekinds{gap:10px}.create-shell .ekind{position:relative;padding:18px 19px!important;border:1px solid rgba(255,255,255,.09)!important;
  border-radius:15px!important;background:rgba(255,255,255,.035)!important;color:#fff!important;box-shadow:none!important;
  transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease)!important}
.create-shell .ekind:hover{transform:translateY(-2px);background:rgba(255,255,255,.065)!important;border-color:rgba(249,224,97,.28)!important}
.create-shell .ekind b{color:#fff!important}.create-shell .ekind span{color:rgba(255,255,255,.48)!important}
.create-shell .ek-tag{background:rgba(249,224,97,.12)!important;color:var(--yellow)!important;border:1px solid rgba(249,224,97,.18)}
.create-seo .wznear,.create-seo .pgs,.create-seo .pgfaq,.create-seo .capbox{border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.035)!important;color:#fff!important}
.create-seo .wznear b,.create-seo .pgs b,.create-seo .pgfaq b,.create-seo .pgfaq dt{color:#fff!important}
.create-seo .wznear li,.create-seo .pgs p,.create-seo .pgfaq dd{color:rgba(255,255,255,.48)!important}
.create-seo .pgs-n{background:rgba(249,224,97,.14)!important;color:var(--yellow)!important}
.create-seo .tblwrap{border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.025)!important}
.create-seo .tbl th{color:rgba(255,255,255,.40)!important}.create-seo .tbl td{color:rgba(255,255,255,.72)!important;border-color:rgba(255,255,255,.07)!important}
.create-seo .tbl tbody tr:hover{background:rgba(255,255,255,.04)!important}

.create-email .emailcard{border-color:rgba(255,255,255,.08)!important;border-radius:15px!important;background:rgba(255,255,255,.035)!important;color:#fff!important;box-shadow:none!important}
.create-email .em-p,.create-email .em-j,.create-email .em-editnote{color:rgba(255,255,255,.42)!important}
.create-email .erevise{border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important;background:rgba(255,255,255,.035)!important}
.create-email .erevise label span{color:rgba(255,255,255,.55)!important}
.create-email .icards{gap:10px}.create-email .icard{border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.035)!important;color:#fff!important;box-shadow:none!important}
.create-email .icard:hover{border-color:rgba(249,224,97,.24)!important;background:rgba(255,255,255,.055)!important}
.create-email .ic-h b,.create-email .ic-rules li{color:#fff!important}.create-email .ic-s,.create-email .ic-why{color:rgba(255,255,255,.46)!important}
.create-email .ic-rules li::before{background:var(--yellow)!important}.create-email .ic-act{border-top-color:rgba(255,255,255,.07)!important}
.create-email .eoffer{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.025)}
.create-email .stt{border-color:rgba(255,255,255,.10)!important}.create-email .stt.passed{color:#9de1bd!important}
.create-email .sec-h{margin-top:30px!important}.create-email .camps-lede{margin-bottom:14px!important}

.create-gads .gkwi,.create-gads .ga-prev{border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.04)!important;color:#fff!important}
.create-gads .gkwi b,.create-gads .ga-t{color:#fff!important}.create-gads .gkwi span,.create-gads .ga-url,.create-gads .ga-prev p{color:rgba(255,255,255,.44)!important}
.create-gads .qc-kw span{background:rgba(255,255,255,.07)!important;color:rgba(255,255,255,.66)!important}
.create-shell .scanres.wait{border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;background:rgba(255,255,255,.035)!important;color:rgba(255,255,255,.48)!important}
.create-shell .scanres.wait b{color:#fff!important}.create-shell .spin{border-color:rgba(255,255,255,.14)!important;border-top-color:var(--yellow)!important}
.create-shell .wzplay{min-height:390px;border:1px dashed rgba(255,255,255,.10);border-radius:18px;
  background:radial-gradient(circle at 50% 45%,rgba(249,224,97,.07),transparent 36%),rgba(255,255,255,.018)}
.create-shell .wzok{background:var(--yellow)!important;box-shadow:0 0 0 10px rgba(249,224,97,.07),0 18px 36px -18px rgba(249,224,97,.55)}
.create-shell .stt{border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.70)!important}
.create-shell .stt.passed{background:rgba(88,192,141,.10)!important;color:#9de1bd!important}.create-shell .stt.review{background:rgba(249,224,97,.10)!important;color:var(--yellow)!important}
.create-shell .stt.blocked{background:rgba(226,100,92,.12)!important;color:#ffc0bb!important}
.create-shell .wiz>:not(.wzrail),.create-social .mkcols{animation:create-stage-in .28s var(--ease) both}
@keyframes create-stage-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .create-shell{padding:58px 18px 22px!important;border-radius:22px!important}
  .create-shell::before{left:18px;top:18px}
  .create-shell .create-title{padding-right:0}.create-shell .create-title::after{display:none}
  .create-shell .wzrail{width:100%}.create-shell .wzgrid2,.create-shell .wzad{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  .create-shell{padding:56px 14px 18px!important}
  .create-shell .create-title h2{font-size:28px}.create-shell .wzform{grid-template-columns:1fr!important}
  .create-shell .wzact{align-items:stretch;flex-direction:column}.create-shell .wzact>.btn,.create-shell .wzact>.wzsp{width:100%}
  .create-shell .wzsp{display:flex;flex-direction:column}.create-shell .wzsp .btn{width:100%}
  .create-social .mktypes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .create-shell .wiz>:not(.wzrail),.create-social .mkcols,.create-shell .btn{animation:none!important;transition:none!important}
  .create-shell .btn:hover:not(:disabled),.create-shell .ekind:hover{transform:none!important}
}

.create-shell{scroll-margin-top:92px}

/* ================================================= METRIC CARDS · TYPE FIRST */
/* KPI icon tiles were decorative and competed with the numbers. Metrics now
   lead with label + value everywhere; channel identity stays in navigation. */
.kc-i,.soct-i,.rt-i,.cmpt-i,.lqt-i{display:none!important}
.kc-h,.soct-h{display:block!important;min-height:0!important;margin-bottom:13px!important}
.kc-h>span,.soct-h>span{max-width:none!important;min-height:0!important;white-space:normal!important}
.kcard{padding-top:18px!important}.kcard .kc-v{margin-top:0!important}
.rt{gap:0!important}.rt-b{width:100%}.rt-k{margin-top:6px!important}
.cmpt{gap:0!important}.cmpt>div:last-child{width:100%}.cmpt-k{margin-top:6px!important}
.lqt{gap:0!important}.lqt-b{width:100%}
.remt .cmpt-i{display:none!important}
/* Without the icon tile there is room for a slightly stronger metric label. */
.kc-h>span,.soct-h>span,.rt-k,.cmpt-k,.lqt-k{letter-spacing:.025em!important;text-transform:none!important;font-size:12px!important;font-weight:650!important;color:#737985!important}

/* Create badge needs breathing room above the title. */
.create-shell{padding-top:76px!important}
.create-shell::before{top:20px!important}
.create-shell .create-title{margin-top:2px!important}

/* Meta generated ads read as recognisable placement mockups, not image placeholders. */
.create-meta .wzad{grid-template-columns:minmax(300px,340px) minmax(0,1fr)!important;align-items:start}
.wzmock-wrap{min-width:0}.wzmock-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px;color:#fff}
.wzmock-meta b{display:block;font-size:12px;font-weight:700}.wzmock-meta span{display:block;margin-top:2px;font-size:10.5px;color:rgba(255,255,255,.40)}
.wzmock-meta em{font-style:normal;padding:5px 9px;border-radius:999px;background:rgba(249,224,97,.13);border:1px solid rgba(249,224,97,.22);color:var(--yellow);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.wzmock{border-radius:18px!important}.wzmock-top{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#fff;color:var(--ink)}
.wzmock-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f4f1e7;border:1px solid #e8e4d7;font-size:9px;font-weight:800}
.wzmock-top>div{min-width:0;flex:1}.wzmock-top b{display:block;font-size:11.5px}.wzmock-top span{display:block;font-size:9.5px;color:#858a93;margin-top:1px}.wzmock-top i{font-style:normal;color:#777;font-size:12px}
.wzmock-actions{display:flex;gap:14px;padding:9px 12px 2px;background:#fff;color:#202532;font-size:17px}.wzmock-actions i{margin-left:auto;font-style:normal}

.wzmock.story{position:relative;max-width:270px;margin-left:auto;margin-right:auto;background:#111827!important}
.wzmock.story .wzmock-top{position:absolute;z-index:3;left:0;right:0;top:0;background:linear-gradient(180deg,rgba(0,0,0,.48),transparent);color:#fff;border:0;padding:12px}
.wzmock.story .wzmock-top span{color:rgba(255,255,255,.7)}.wzmock.story .wzmock-top i{color:#fff}
.wzmock.story .wzmock-av{background:rgba(255,255,255,.9);color:var(--ink);border-color:rgba(255,255,255,.8)}
.wzmock.story .wzcard-a{aspect-ratio:9/16!important;min-height:0!important;padding:18px!important;align-items:flex-end!important}
.wzmock.story .wzcard-h{font-size:24px!important;padding-bottom:58px;max-width:90%}
.wzstory-brand{position:absolute;left:18px;bottom:18px;color:rgba(255,255,255,.78);font-size:10px;font-weight:700;letter-spacing:.04em}
.wzstory-cta{position:absolute;left:18px;right:18px;bottom:16px;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink)}
.wzstory-cta b{font-size:11.5px}.wzstory-cta span{font-size:10px;color:#666}
.wzmock.story figcaption{display:none!important}
.wzmock.fbfeed .wzmock-top{background:#fff}.wzmock.fbfeed .wzcard-a{aspect-ratio:1.2/1!important}
.wzmock-foot{display:grid;gap:7px;margin-top:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.03)}
.wzmock-foot span{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;color:rgba(255,255,255,.48);font-size:10.5px;line-height:1.4}
.wzmock-foot b{color:rgba(255,255,255,.76);font-weight:650}
@media(max-width:900px){.create-meta .wzad{grid-template-columns:1fr!important}.wzmock-wrap{max-width:420px}}

/* ================================================= SECONDARY TABS · PREMIUM */
/* Channel tabs share one quiet segmented treatment; Create remains the yellow exception. */
#view-meta .mtabs,#view-gads .mtabs,#view-search .mtabs,#view-email .mtabs,#view-social .stabs{
  display:flex;align-items:center;gap:3px;width:max-content;max-width:100%;overflow-x:auto;margin:0 0 20px!important;
  padding:4px!important;border:1px solid rgba(23,28,43,.065)!important;border-radius:14px!important;
  background:#f4f5f6!important;scrollbar-width:none;box-shadow:0 10px 24px -24px rgba(23,28,43,.34)}
#view-meta .mtabs::-webkit-scrollbar,#view-gads .mtabs::-webkit-scrollbar,#view-search .mtabs::-webkit-scrollbar,#view-email .mtabs::-webkit-scrollbar,#view-social .stabs::-webkit-scrollbar{display:none}
#view-meta .mtabs button,#view-gads .mtabs button,#view-search .mtabs button,#view-email .mtabs button,#view-social .stabs button{
  margin:0!important;padding:9px 13px!important;border:0!important;border-radius:10px!important;background:transparent!important;
  color:#747a84!important;font-size:11.5px!important;font-weight:650!important;white-space:nowrap}
#view-meta .mtabs button[aria-selected="true"]:not(.mtab-new),#view-gads .mtabs button[aria-selected="true"]:not(.mtab-new),
#view-search .mtabs button[aria-selected="true"]:not(.mtab-new),#view-email .mtabs button[aria-selected="true"]:not(.mtab-new),#view-social .stabs button[aria-selected="true"]:not(.stab-new){
  background:#fff!important;color:var(--ink)!important;box-shadow:0 7px 16px -14px rgba(23,28,43,.65)!important}
#view-meta .mtabs .mtab-new,#view-gads .mtabs .mtab-new,#view-search .mtabs .mtab-new,#view-email .mtabs .mtab-new,#view-social .stabs .stab-new{
  background:var(--yellow)!important;color:var(--ink)!important;font-weight:750!important}

/* Secondary-tab headings and tables feel intentionally composed rather than dropped onto the page. */
.mpanel:not(.mpanel-make)>.adshead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin:0 0 16px!important;padding:18px 20px;border:1px solid rgba(23,28,43,.07);border-radius:18px;
  background:linear-gradient(145deg,#fffdf5,#fff 72%);box-shadow:0 16px 34px -32px rgba(23,28,43,.42)}
.mpanel:not(.mpanel-make)>.adshead .ovh{font-size:30px!important;margin-bottom:5px!important}
.mpanel:not(.mpanel-make)>.adshead .ovs{font-size:13px!important;line-height:1.5!important;margin:0!important;max-width:72ch!important}
.mpanel:not(.mpanel-make) .tblwrap{border-radius:18px!important;border:1px solid rgba(23,28,43,.07)!important;
  box-shadow:0 18px 42px -36px rgba(23,28,43,.42)!important;overflow:auto;background:#fff}
.mpanel:not(.mpanel-make) .tbl thead th{background:#fafaf8!important;color:#777d87!important;font-size:10.5px!important;letter-spacing:.075em!important}
.mpanel:not(.mpanel-make) .tbl tbody tr{transition:background .12s var(--ease),transform .12s var(--ease)}
.mpanel:not(.mpanel-make) .tbl tbody tr:hover{background:#fffdf4!important}
.mpanel:not(.mpanel-make) .tbl td{border-bottom-color:rgba(23,28,43,.055)!important}
.gads-search-panel{padding:22px 24px 24px!important}.gads-search-panel>.sec-h{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;gap:14px;align-items:center;margin-top:0!important}
.gads-search-panel>.sec-h .secnote{white-space:nowrap;margin:0!important;color:#737985!important}.gads-search-panel>.camps-lede{margin:8px 0 16px!important}
.gads-search-panel .gseg{margin-bottom:16px!important}
@media(max-width:780px){.gads-search-panel>.sec-h{grid-template-columns:1fr}.gads-search-panel>.sec-h .rule{display:none}.gads-search-panel>.sec-h .secnote{white-space:normal}}

.dash-activity .actlog li{border-bottom-color:rgba(255,255,255,.08)!important;color:#fff!important}
.dash-activity .actlog .al-w{color:rgba(255,255,255,.42)!important}.dash-activity .actlog .al-b b{color:#fff!important}
.dash-activity .actlog .al-b span{color:rgba(255,255,255,.48)!important}.dash-activity .actlog .al-k{background:rgba(255,255,255,.07)!important;color:rgba(255,255,255,.62)!important}
.dash-activity .actlog .al-i{background:rgba(249,224,97,.12)!important;color:var(--yellow)!important}
/* Competitor workspace gets one dark control rail; the evidence tables remain white. */
.cmpbar{padding:16px 18px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:18px!important;
  background:radial-gradient(circle at 88% -20%,rgba(249,224,97,.13),transparent 34%),var(--g-dark)!important;
  color:#fff!important;box-shadow:0 22px 48px -34px rgba(23,28,43,.62)!important}
.cmpbar-l b{color:#fff!important}.cmpbar-l span{color:rgba(255,255,255,.48)!important}
.cmpbar .cmpadd input{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.13)!important;color:#fff!important}
.cmpbar .cmpadd input::placeholder{color:rgba(255,255,255,.30)}.cmpbar .cmpadd input:focus{border-color:rgba(249,224,97,.55)!important}
.cmpbar .btn:not(.y){background:rgba(255,255,255,.07)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}
.cmpbar .btn.y{background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important}
.cmptile{border-radius:16px!important;box-shadow:0 14px 32px -30px rgba(23,28,43,.38)!important}
.cmpgaps{border:1px solid rgba(214,155,19,.16);border-radius:16px;background:linear-gradient(145deg,#fffaf0,#fff);padding:14px 16px}

/* Queue states are operational, so give them a stronger visual spine. */
[data-mpanel="queue"] .adshead,#queuedBox>.adshead{background:radial-gradient(circle at 86% -20%,rgba(249,224,97,.12),transparent 32%),var(--g-dark)!important;border-color:rgba(255,255,255,.08)!important}
[data-mpanel="queue"] .adshead .ovh,#queuedBox>.adshead .ovh{color:#fff!important}
[data-mpanel="queue"] .adshead .ovs,#queuedBox>.adshead .ovs{color:rgba(255,255,255,.52)!important}
.qcards{gap:14px!important}.qcard{border:1px solid rgba(23,28,43,.07)!important;border-radius:18px!important;background:#fff!important;
  box-shadow:0 16px 36px -32px rgba(23,28,43,.45)!important;transition:transform .14s var(--ease),box-shadow .14s var(--ease)!important}
.qcard:hover{transform:translateY(-2px);box-shadow:0 24px 48px -34px rgba(23,28,43,.5)!important}
.qc-h{padding-bottom:10px;border-bottom:1px solid rgba(23,28,43,.06)}.qc-w{border-top-color:rgba(23,28,43,.06)!important}
/* Technical SEO: dark audit summary, light individual checks for legibility. */
#view-search [data-mpanel="health"] .seohead{padding:20px 22px!important;border:0!important;border-radius:18px;
  background:radial-gradient(circle at 88% -20%,rgba(249,224,97,.13),transparent 30%),var(--g-dark);box-shadow:0 22px 48px -36px rgba(23,28,43,.62)}
#view-search [data-mpanel="health"] .seohead .eyebrow{color:var(--yellow)!important}
#view-search [data-mpanel="health"] .seohead h2{color:#fff!important}
#view-search [data-mpanel="health"] .seohead p{color:rgba(255,255,255,.50)!important}

.create-shell .wzerr b{display:block;margin-bottom:4px;color:#ffd9d5;font-size:12.5px}.create-shell .wzerr span{display:block;color:rgba(255,220,216,.72);font-size:11.5px;line-height:1.5}
/* Subtle stage-in on operational secondary tabs. */
.mpanel:not([hidden]):not(.mpanel-make)>.adshead,.mpanel:not([hidden]) .qcard,.mpanel:not([hidden]) .cmpbar{animation:secondary-in .25s var(--ease) both}
@keyframes secondary-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mpanel:not([hidden]):not(.mpanel-make)>.adshead,.mpanel:not([hidden]) .qcard,.mpanel:not([hidden]) .cmpbar{animation:none!important}}

/* Activity log belongs to the dark audit surface; do not put white rows inside it. */
.dash-activity .actlog{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.09)!important;
  border-radius:16px!important;gap:1px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.dash-activity .actlog li{background:rgba(255,255,255,.025)!important;border:0!important;
  padding:14px 16px!important;transition:background .14s var(--ease)!important}
.dash-activity .actlog li+li{border-top:1px solid rgba(255,255,255,.075)!important}
.dash-activity .actlog li:hover{background:rgba(255,255,255,.055)!important}
.dash-activity .actlog .al-w{color:rgba(255,255,255,.46)!important}
.dash-activity .actlog .al-b b{color:#fff!important;font-weight:650!important}
.dash-activity .actlog .al-b span{color:rgba(255,255,255,.54)!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.dash-activity .actlog .al-i{background:rgba(249,224,97,.10)!important;color:var(--yellow)!important;border:1px solid rgba(249,224,97,.12)}
.dash-activity .actlog li.down .al-i{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.55)!important;border-color:rgba(255,255,255,.08)}
.dash-activity .actlog .al-k{background:rgba(255,255,255,.065)!important;color:rgba(255,255,255,.66)!important;border:1px solid rgba(255,255,255,.07)}
.dash-activity .actlog .al-k.real{background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important;font-weight:750!important}

.cmpempty-state{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:26px 28px;border:1px dashed rgba(23,28,43,.12);
  border-radius:18px;background:linear-gradient(145deg,#fffdf5,#fff);box-shadow:0 16px 34px -32px rgba(23,28,43,.35)}
.cmpempty-state b{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.01em}
.cmpempty-state span{max-width:64ch;color:#777d87;font-size:13px;line-height:1.55}.cmpempty-state .btn{margin-top:6px}

/* ================================================= UNIFIED EXECUTION QUEUE */
.queuebar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 26px;padding:18px 22px;
  border:1px solid rgba(255,255,255,.08);border-radius:20px;color:#fff;
  background:radial-gradient(circle at 88% -30%,rgba(249,224,97,.14),transparent 34%),var(--g-dark);
  box-shadow:0 24px 52px -38px rgba(23,28,43,.66)}
.queuebar>div{min-width:0}.queue-k{display:block;margin-bottom:4px;color:var(--yellow);font-size:9.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}.queuebar>div>b{display:block;font-family:var(--serif);font-size:29px;font-weight:400;line-height:1}
.queuebar p{margin:5px 0 0;max-width:76ch;color:rgba(255,255,255,.52);font-size:12px;line-height:1.45}
.queue-n{flex:none;display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px;border:1px solid rgba(255,255,255,.10);
  border-radius:999px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.55);font-size:10.5px}
.queue-n b{color:#fff;font-size:15px}.qsec{margin-top:22px!important}.qcards{grid-template-columns:minmax(0,1fr)!important}
.qcard{padding:20px 22px!important;border-color:rgba(23,28,43,.075)!important;background:#fff!important;border-radius:20px!important}
.qcard .qc-h b{font-size:15px!important;font-weight:650!important}.qcard>p{max-width:110ch!important;font-size:12.5px!important}

.qc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid rgba(23,28,43,.06)}
.qc-actions .btn{min-width:78px}.qc-actions .qconnect{margin-left:4px;font-size:11.5px;color:#727883!important}
.qact-err{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:10px 12px;border-radius:11px;
  background:#fff3f1;border:1px solid rgba(192,69,60,.14);color:#7e403b;font-size:11.5px;line-height:1.45}
.qact-err b{font-size:11.5px}.qact-err span{color:#95615d}
.mtabs button>i,.stabs button>i{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;
  border-radius:999px;background:var(--ink);color:#fff;font-style:normal;font-size:9.5px;font-weight:750;line-height:1}
.mtabs .mtab-new>i,.stabs .stab-new>i{background:rgba(23,28,43,.14);color:var(--ink)}
.socq-exec{display:block}.socq-exec .qcard{margin:0}
@media(max-width:700px){.queuebar{align-items:flex-start;flex-direction:column;gap:12px;padding:17px 18px}.queue-n{align-self:flex-start}
  .qcard{padding:17px!important}.qc-actions .qconnect{width:100%;margin:4px 0 0;text-align:left}}

/* Queue editor: one drawer for Meta, Google, SEO and Email; save means re-screen + re-approve. */
.qedit-lede{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:var(--y-15);color:var(--slate);font-size:12.5px;line-height:1.55}
.qedit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.qedit-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.qedit-f>span,.qedit-lab{font-size:10px;font-weight:750;letter-spacing:.075em;text-transform:uppercase;color:var(--grey)}
.qedit-f input,.qedit-f textarea,.qedit-sec input,.qedit-sec textarea,.qedit-email input,.qedit-email textarea{width:100%;padding:10px 12px;
  border:1px solid rgba(23,28,43,.12);border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-size:13px;line-height:1.5;resize:vertical}
.qedit-f input:focus,.qedit-f textarea:focus,.qedit-sec input:focus,.qedit-sec textarea:focus,.qedit-email input:focus,.qedit-email textarea:focus{
  outline:0;border-color:rgba(214,155,19,.62);box-shadow:0 0 0 3px rgba(249,224,97,.14)}
.qedit-wide{grid-column:1/-1;display:flex;flex-direction:column;gap:9px}.qedit-sec,.qedit-email{display:grid;gap:7px;padding:12px;
  border:1px solid rgba(23,28,43,.07);border-radius:13px;background:#fafaf8}.qedit-email em{font-style:normal;color:#8a721c;font-size:10.5px;font-weight:700}
.qedit-error{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:11px 13px;border-radius:11px;background:#fff3f1;border:1px solid rgba(192,69,60,.16)}
.qedit-error b{font-size:12px;color:#7c3934}.qedit-error span{font-size:11.5px;color:#95615d;line-height:1.45}
@media(max-width:620px){.qedit-grid{grid-template-columns:1fr}.qedit-wide{grid-column:auto}}

/* Queue is the same compact execution surface in every channel. */
.queuebar{min-height:86px!important;margin:0 0 22px!important;padding:15px 18px!important;border-radius:18px!important}
.queuebar>div>b{font-family:var(--disp)!important;font-size:18px!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-.01em!important}
.queue-k{margin-bottom:3px!important;font-size:9px!important}.queuebar p{margin-top:4px!important;font-size:11.5px!important;max-width:86ch!important}
.queue-n{padding:7px 11px!important}.queue-n b{font-size:14px!important}
.qsec{margin:18px 0 10px!important}.qsec h2{font-size:11px!important;letter-spacing:.10em!important}
.qcard{padding:18px 20px!important}.qcard .qc-h{align-items:center!important;margin-bottom:10px!important}
.qcard .qc-h b{font-size:15px!important}.qcard>p{margin-bottom:14px!important;color:#747a84!important}
.qc-m{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 20px!important;margin-bottom:14px!important}
.qc-m dt{font-size:9.5px!important;letter-spacing:.035em!important;text-transform:uppercase!important}.qc-m dd{font-size:12.5px!important}
.qc-w{display:flex;align-items:center;min-height:36px;padding:9px 11px!important;border:1px solid rgba(23,28,43,.055)!important;border-radius:11px!important;background:#fafaf8!important}
.qc-w.ok{background:#fffdf1!important;border-color:rgba(214,155,19,.15)!important}.qc-actions{justify-content:flex-end!important;margin-top:10px!important;padding-top:12px!important}
.qc-actions .btn{min-width:88px!important}.qc-actions .btn.y{min-width:104px!important}.qc-actions .qconnect{margin-right:auto!important;margin-left:0!important;order:-1}
@media(max-width:700px){.queuebar{min-height:0!important}.qc-m{grid-template-columns:1fr!important}.qc-actions{justify-content:stretch!important}.qc-actions .btn{flex:1 1 auto}.qc-actions .qconnect{width:100%!important}}

/* SEO article visuals: the blog leaves Create with image placements + alt text. */
.create-seo .seovisuals{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,.82fr));gap:12px;margin:0 0 12px}
.create-seo .seovisual{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035)}
.create-seo .seovisual-img{position:relative;min-height:158px;background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,.08)}
.create-seo .seovisual.hero .seovisual-img{min-height:238px}.create-seo .seovisual-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(8,12,22,.52))}
.create-seo .seovisual-img>span{position:absolute;right:9px;bottom:8px;z-index:2;padding:4px 7px;border-radius:999px;background:rgba(10,15,26,.74);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:9px;font-weight:750}
.create-seo .seovisual figcaption{display:flex;flex-direction:column;gap:7px;padding:12px 13px}.create-seo .seovisual figcaption>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.create-seo .seovisual figcaption b{color:#fff;font-size:12px}.create-seo .seovisual figcaption span{color:var(--yellow);font-size:9.5px;font-weight:700}
.create-seo .seovisual figcaption p{margin:0!important;color:rgba(255,255,255,.53)!important;font-size:10.5px!important;line-height:1.48!important;display:block!important;-webkit-line-clamp:unset!important}
.create-seo .seovisual figcaption em{font-style:normal;color:rgba(255,255,255,.34);font-size:9.5px;line-height:1.4}
.qc-visuals{display:flex;gap:7px;margin:0 0 12px}.qc-visuals span{width:56px;height:42px;border-radius:8px;background-size:cover;background-position:center;border:1px solid rgba(23,28,43,.08);box-shadow:0 5px 14px -12px rgba(23,28,43,.45)}
@media(max-width:900px){.create-seo .seovisuals{grid-template-columns:1fr 1fr}.create-seo .seovisual.hero{grid-column:1/-1}}
@media(max-width:560px){.create-seo .seovisuals{grid-template-columns:1fr}.create-seo .seovisual.hero{grid-column:auto}}

/* Email lifecycle rules: compact premium guardrail panel instead of generic metric tiles. */
.lcguard{margin:18px 0 22px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:20px;
  background:radial-gradient(circle at 88% -20%,rgba(249,224,97,.12),transparent 30%),linear-gradient(145deg,#101522,#171C2B 68%,#1C2233);color:#fff;
  box-shadow:0 22px 48px -36px rgba(10,15,26,.72)}
.lcguard-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:end;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.lcguard-h>span{grid-column:1/-1;color:var(--yellow);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lcguard-h>b{font-family:var(--serif);font-size:21px;font-weight:400;letter-spacing:-.01em;color:#fff}.lcguard-h>p{margin:0;color:rgba(255,255,255,.46);font-size:10.5px;line-height:1.45;text-align:right}
.lcguard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.lcguard-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.035)}
.lcguard-row>i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(249,224,97,.12);color:var(--yellow);font-style:normal;font-size:9px;font-weight:800}.lcguard-row span{display:block;margin-bottom:3px;color:rgba(255,255,255,.38);font-size:8.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.lcguard-row b{display:block;color:#fff;font-size:10.8px;line-height:1.45;font-weight:560}
.lcmini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}.lcmini>div{padding:9px 10px;border-radius:11px;background:#fafaf8;border:1px solid rgba(23,28,43,.06)}.lcmini span{display:block;margin-bottom:3px;font-size:8.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:#969ba4}.lcmini b{display:block;font-size:10.5px;line-height:1.4;color:#353a45;font-weight:600}
.wzdone-k{display:block;margin:3px 0 7px;color:var(--yellow);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:700px){.lcguard-grid{grid-template-columns:1fr}.lcguard-h{grid-template-columns:1fr}.lcguard-h>p{text-align:left}.lcmini{grid-template-columns:1fr}}