/* ============================================================
   SpineWell portal: the components the Deka+ portal didn't have.
   Same system as portal.css: Pithy's dark ground, cyan as the only
   accent, Poppins / IBM Plex. SpineWell's own blue and gold appear
   only where SpineWell's brand is the subject (logo, Brand page).
   ============================================================ */

:root{
  --sw-blue:#304A6F;
  --sw-gold:#C59C6D;
  --sw-light:#456C9B;
  --sw-cream:#FFFBF4;
  --lock:#9aa7b4;
}

/* ---------- top bar and gate: Pithy × SpineWell ---------- */
.topbar__x{color:var(--mute-deep);font-size:18px;margin:0 -8px}
.topbar__client{height:30px;width:auto;flex:none;opacity:.95}
.topbar__team{color:var(--high)}
.gate__brands{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.gate__brands .gate__logo{margin:0}
.gate__x{color:var(--mute-deep);font-size:20px}
.gate__client{height:40px;width:auto}

.rail__item--team{color:var(--high)!important;opacity:.9}
.rail__console{display:block;margin:18px 0 0 22px;font-size:13px;color:var(--mute);border:0}
.rail__console:hover{color:var(--cyan-hot)}
.rail__console+.rail__console{margin-top:10px}

/* ---------- Client view: a team account auditing the client's portal ---------- */
.audit{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px var(--gut);
  background:rgba(255,180,67,.1);border-bottom:1px solid rgba(255,180,67,.35);font-size:14px;color:var(--paper-dim);line-height:1.45}
.audit b{color:var(--high);font-weight:600}
.audit__dot{width:8px;height:8px;border-radius:50%;background:var(--high);flex:none}
.audit__back{margin-left:auto;color:var(--high);border:1px solid rgba(255,180,67,.45);border-radius:99px;padding:5px 12px;font-weight:500;white-space:nowrap}
.audit__back:hover{background:rgba(255,180,67,.14);color:#fff}
.is-audit .topbar{border-bottom-color:rgba(255,180,67,.35)}

/* ---------- small tags ---------- */
.bdg{display:inline-flex;align-items:center;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:5px 8px;border-radius:99px;border:1px solid var(--edge);color:var(--paper-dim);background:rgba(255,255,255,.03);white-space:nowrap}
.bdg--good{color:var(--good);border-color:rgba(63,224,168,.35)}
.bdg--lock{color:var(--lock);border-color:rgba(154,167,180,.3);background:rgba(154,167,180,.06)}
.bdg--mute{color:var(--mute)}
.bdg--warn{color:var(--high);border-color:rgba(255,180,67,.35)}
.teamonly{display:inline-block;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--high);
  border:1px solid rgba(255,180,67,.35);border-radius:99px;padding:6px 12px;margin:0 0 20px}

/* ---------- document cards ---------- */
.dcs{display:grid;gap:clamp(12px,1.3vw,18px);margin:clamp(22px,2.4vw,34px) 0}
.dcs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dcs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dc{position:relative;display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:14px;background:var(--panel);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.dc:hover{border-color:var(--edge-hot);transform:translateY(-3px);background:rgba(24,42,66,.8)}
.dc[hidden]{display:none}
.dc__main{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:9px;padding:20px 22px 20px;flex:1}
.dc__main:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px;border-radius:14px}
.dc__top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dc__when{font:500 12.5px var(--mono);color:var(--mute);margin-right:4px}
.dc__t{font:600 18px/1.3 var(--display);letter-spacing:-.015em;color:var(--paper)}
.dc__s{font-size:15px;line-height:1.55;color:var(--paper-dim)}
.dc__meta{font:500 12.5px var(--mono);color:var(--cyan-hot)}
.dc__nums{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.dc__nums span{font-size:13.5px;line-height:1.4;color:var(--paper);padding-left:12px;border-left:2px solid var(--cyan)}
.dc__drive{position:absolute;right:14px;bottom:12px;font:500 12px var(--mono);color:var(--mute);border:0}
.dc__drive:hover{color:var(--cyan-hot)}
.dc:has(.dc__drive) .dc__main{padding-bottom:36px}

/* ---------- home ---------- */
.guide__steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats--home{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin:clamp(40px,5vw,70px) 0 0}
.stats--home .stat{all:unset;cursor:pointer;display:block;padding-top:20px;border-top:1px solid var(--edge);position:relative}
.stats--home .stat:hover .stat__l{color:var(--paper)}
.nums3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:clamp(22px,2.4vw,34px) 0}
.numcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:16px;
  border:1px solid var(--edge);background:linear-gradient(160deg,rgba(247,128,79,.10),rgba(24,42,66,.6) 55%);transition:border-color .3s,transform .3s}
.numcard:hover{border-color:var(--edge-hot);transform:translateY(-4px)}
.numcard__when{font:500 12.5px var(--mono);color:var(--cyan-hot)}
.numcard__t{font:600 18px/1.3 var(--display);color:var(--paper)}
.numcard__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.numcard__list li{font-size:14.5px;line-height:1.45;color:var(--paper-dim);padding-left:14px;border-left:2px solid var(--cyan)}
.home-split{margin-top:clamp(40px,5vw,70px)}
.panel__h{font:600 20px/1.25 var(--display);letter-spacing:-.02em;margin:0 0 14px;color:var(--paper)}
.plist{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.plist button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 14px;border-radius:10px;border:1px solid transparent}
.plist button:hover{border-color:var(--edge);background:rgba(255,255,255,.03)}
.plist b{font:600 15.5px/1.3 var(--display);color:var(--paper)}
.plist span{font-size:14px;line-height:1.5;color:var(--mute)}
.plist .stg{align-self:flex-start}
.stg{display:inline-block;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:99px}
.stg--progress{color:var(--cyan-hot);background:rgba(247,128,79,.12)}
.stg--review{color:#c9b8ff;background:rgba(167,139,250,.12)}
.stg--waiting{color:var(--high);background:rgba(255,180,67,.12)}
.stg--done{color:var(--good);background:rgba(63,224,168,.1)}
.crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:clamp(22px,2.4vw,34px) 0}
.crew__p{padding:22px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.crew__av{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,var(--cyan),var(--cyan-deep));
  color:#04141a;font:700 18px var(--display);margin-bottom:14px}
.crew__p b{display:block;font:600 17px var(--display);color:var(--paper)}
.crew__r{display:block;font:500 12.5px var(--mono);color:var(--cyan-hot);margin:2px 0 10px}
.crew__p p{margin:0;font-size:14.5px;line-height:1.55;color:var(--paper-dim)}

/* ---------- projects board ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px);margin:clamp(10px,2vw,30px) 0 clamp(40px,5vw,70px);align-items:start}
.kanban__col{padding:14px;border:1px solid var(--edge);border-radius:16px;background:rgba(15,30,48,.66);display:flex;flex-direction:column;gap:10px}
.kanban__h{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 6px}
.kanban__n{font:600 14px var(--mono);color:var(--mute)}
.kcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:7px;padding:16px;border-radius:12px;
  border:1px solid var(--edge);background:var(--panel-solid);transition:border-color .25s,transform .25s}
.kcard:hover{border-color:var(--edge-hot);transform:translateY(-2px)}
.kcard--more{display:none}
.kanban__col.is-open .kcard--more{display:flex}
.kcard__t{font:600 15.5px/1.3 var(--display);color:var(--paper)}
.kcard__s{font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.kcard__f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 11.5px var(--mono);color:var(--mute)}

/* ---------- tabs, search, filters ---------- */
.subnav__n{font:500 12px var(--mono);opacity:.7;margin-left:4px}
.deep__lede{max-width:80ch;margin:clamp(22px,2.4vw,32px) 0 0;font-size:16px}
.srch{display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:0 18px;height:58px;border-radius:14px;border:1px solid var(--edge);
  background:rgba(15,30,48,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-width:820px}
.srch:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(247,128,79,.14)}
.srch svg{width:20px;height:20px;color:var(--mute);flex:none}
.srch input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--paper);font:400 16.5px var(--body)}
.srch input::placeholder{color:var(--mute-deep)}
.srch__out{max-width:820px;margin:8px 0 10px;display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto;padding-right:4px}
.sr__n{margin:4px 2px 4px;font-size:14px;color:var(--mute)}
.sr{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:14px 16px;border-radius:12px;border:1px solid var(--edge);background:var(--panel-solid)}
.sr:hover{border-color:var(--edge-hot)}
.sr__top{display:flex;gap:8px;align-items:center}
.sr__when{font:500 12px var(--mono);color:var(--mute)}
.sr__t{font:600 15.5px var(--display);color:var(--paper)}
.sr__s{font-size:14px;line-height:1.55;color:var(--paper-dim)}
.sr__s mark,.md mark{background:rgba(247,128,79,.25);color:#fff;border-radius:3px;padding:0 2px}
.flt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:clamp(20px,2.2vw,30px) 0 12px}
.flt--wide{flex-direction:column;align-items:stretch;gap:10px}
.flt__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flt__l{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);min-width:64px}
.flt .chip{padding:8px 13px;font-size:14px}
.flt .chip:hover{transform:none}
.flt .chip.is-on{border-color:var(--cyan);color:#fff;background:rgba(247,128,79,.14)}
.flt input[type="search"]{flex:1;min-width:200px;max-width:380px;height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--edge);
  background:rgba(255,255,255,.03);color:var(--paper);font:400 15px var(--body);outline:none}
.flt input[type="search"]:focus{border-color:var(--cyan)}
.flt__n{font:500 13px var(--mono);color:var(--mute)}
.empty{color:var(--mute);font-size:15.5px;padding:22px;border:1px dashed var(--edge);border-radius:12px;margin:18px 0}

/* ---------- timeline of calls ---------- */
.tl{list-style:none;margin:clamp(20px,2.4vw,32px) 0;padding:0;position:relative}
.tl::before{content:'';position:absolute;left:62px;top:6px;bottom:6px;width:1px;background:var(--edge)}
.tl__i{display:grid;grid-template-columns:124px minmax(0,1fr);gap:0;margin:0 0 14px;align-items:start}
.tl__d{display:flex;flex-direction:column;align-items:center;padding-top:20px;position:relative}
.tl__d::after{content:'';position:absolute;top:26px;right:-6px;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(247,128,79,.16)}
.tl__d b{font:600 15px var(--display);color:var(--paper)}
.tl__d span{font:500 12px var(--mono);color:var(--mute)}
.tl__i .dc{margin-left:14px}

/* ---------- decisions and what they told us ---------- */
.declist,.said{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.declist li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
.declist li[hidden],.said li[hidden],.vis__r[hidden]{display:none}
.declist__d{font:500 13px var(--mono);color:var(--cyan-hot)}
.declist__t{font-size:15.5px;line-height:1.55;color:var(--paper)}
.declist__src,.said__m button,.linkbtn{all:unset;cursor:pointer;font:500 12.5px var(--mono);color:var(--mute);border-bottom:1px solid rgba(135,151,166,.35)}
.declist__src:hover,.said__m button:hover,.linkbtn:hover{color:var(--cyan-hot);border-color:var(--cyan-hot)}
.said li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 18px;padding:14px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
.said__k{grid-row:span 2;font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim);padding-top:3px}
.said__k--requests{color:var(--cyan-hot)}
.said__k--likes,.said__k--approves{color:var(--good)}
.said__k--dislikes,.said__k--rejects{color:var(--crit)}
.said__k--concern{color:var(--high)}
.said__t{font-size:15.5px;line-height:1.55;color:var(--paper)}
.said__m{font-size:13px;color:var(--mute)}

/* ---------- brand ---------- */
.bg--brand img{filter:grayscale(.1) brightness(.7) saturate(.8)}
/* ---------- Brand: the founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(22px,3vw,48px);align-items:center;margin:clamp(22px,2.4vw,34px) 0;
  padding:clamp(16px,2vw,26px);border:1px solid var(--edge);border-radius:20px;background:var(--panel)}
.founder__media{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#d9dbe0;aspect-ratio:1000/920}
.founder__media>img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.founder__badge{position:absolute;top:14px;left:14px;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.founder__badge img{width:60px;height:60px}
.founder__txt h3{font:700 clamp(26px,2.6vw,36px)/1.1 var(--display);letter-spacing:-.02em;color:var(--paper);margin:4px 0 14px}
.founder__txt>p{font-size:16px;line-height:1.7;color:var(--paper-dim);margin:0 0 14px;max-width:60ch}
.founder__use{margin:0 0 18px;padding-left:20px;color:var(--paper-dim);font-size:14.5px;line-height:1.6}
.founder__use b{color:var(--paper)}
.founder__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0}
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:clamp(22px,2.4vw,34px) 0}
.logos__i{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--edge)}
.logos__i img{width:min(360px,80%);margin:44px auto}
.logos__i--light{background:var(--sw-cream)}
.logos__i--dark{background:var(--sw-blue)}
.logos__i figcaption{padding:12px 16px;font:500 12.5px var(--mono);color:var(--mute);background:var(--panel-solid)}
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:clamp(22px,2.4vw,34px) 0}
.swatch{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.swatch__c{height:86px;border-radius:10px;margin-bottom:10px;border:1px solid rgba(255,255,255,.08)}
.swatch__type{height:86px;border-radius:10px;margin-bottom:10px;display:grid;place-items:center;font:700 44px 'Poppins',sans-serif;color:var(--sw-gold);background:var(--sw-blue)}
.swatch b{font:600 15.5px var(--display);color:var(--paper)}
.swatch code{font:500 13px var(--mono);color:var(--cyan-hot)}
.swatch span:last-child{font-size:13.5px;line-height:1.45;color:var(--paper-dim)}
.voice{display:grid;gap:10px}
.voice__i{padding:18px 20px;border-left:3px solid var(--sw-gold);background:var(--panel);border-radius:0 12px 12px 0}
.voice__i b{font:600 16px var(--display);color:var(--paper)}
.voice__i p{margin:4px 0 0;font-size:15px;color:var(--paper-dim)}
.brandimg{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--edge)}
.brandimg img{width:100%;aspect-ratio:3/2;object-fit:cover}
.brandimg--dr{position:relative}
.brandimg--dr>img{object-position:50% 22%}
.brandimg .founder__badge img{width:60px;height:60px;aspect-ratio:auto}
.brandimg figcaption{padding:14px 16px;font-size:14px;color:var(--paper-dim);background:var(--panel-solid)}
.phr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(22px,2.4vw,34px) 0 14px}
.phr__g{padding:18px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.phr__g h3{display:flex;justify-content:space-between;margin:0 0 10px;font:600 16px var(--display);color:var(--paper)}
.phr__g h3 span{font:500 12.5px var(--mono);color:var(--mute)}
.phr__g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.phr__p{all:unset;box-sizing:border-box;cursor:copy;display:block;width:100%;padding:8px 10px;border-radius:8px;font-size:14.5px;line-height:1.45;color:var(--paper-dim)}
.phr__p:hover{background:rgba(197,156,109,.12);color:#fff}
.phr__p.is-copied{background:rgba(63,224,168,.14);color:#fff}

/* ---------- Pithy only ---------- */
.vis{display:flex;flex-direction:column;gap:6px;margin:0 0 40px}
.vis__r{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:110px minmax(0,1fr) 170px;gap:16px;align-items:center;
  padding:12px 16px;border:1px solid var(--edge);border-radius:10px;background:var(--panel)}
.vis__r:hover{border-color:var(--edge-hot)}
.vis__d{font:500 12.5px var(--mono);color:var(--mute)}
.vis__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.vis__t b{font:600 15px var(--display);color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis__t span{font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis__s{font:500 12px var(--mono);text-align:right;color:var(--lock)}
.vis__r[data-aud="client"] .vis__s{color:var(--good)}
.upf{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--edge);border-radius:16px;background:var(--panel);margin:clamp(22px,2.4vw,34px) 0;max-width:980px}
.upf__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.upf .f{display:flex;flex-direction:column;gap:6px;margin:0}
.upf textarea.f__input{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.upf select.f__input{appearance:auto}
.upf__aud{border:0;padding:0;margin:0;display:flex;gap:22px;flex-wrap:wrap}
.upf__aud label{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--paper-dim)}
.upf__warn{margin:0;font-size:14px;color:var(--high);border:1px solid rgba(255,180,67,.3);border-radius:10px;padding:10px 14px}
.upf__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.upf__row .btn{width:auto;padding:0 28px}
.upf__msg{font-size:14.5px;color:var(--paper-dim)}

/* ---------- the reader panel (a document) ---------- */
.drawer--doc .drawer__panel{width:min(860px,100vw)}
.dv__kicker{font:500 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-hot);margin:0 0 10px}
.dv__t{font:700 clamp(24px,2.4vw,32px)/1.15 var(--display);letter-spacing:-.03em;margin:0 0 14px;max-width:30ch}
.dv__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.dv__lede{font-size:17px;line-height:1.65;color:var(--paper-dim);margin:0 0 16px}
.dv__internal{border:1px solid rgba(255,180,67,.3);background:rgba(255,180,67,.06);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.dv__internal b{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--high)}
.dv__internal p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--paper-dim)}
.dv__links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.dv__links .btn-go{margin-top:0}
.btn-go--ghost{background:none}
.dv__sec{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--edge)}
.dv__h{font:600 17px var(--display);margin:0 0 10px;color:var(--paper)}
.dv__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.dv__list li{font-size:15.5px;line-height:1.6;color:var(--paper-dim);padding-left:16px;position:relative}
.dv__list li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.dv__list b{color:var(--paper);font-weight:500}
.dv__full{margin:26px 0 0;border:1px solid var(--edge);border-radius:12px;background:rgba(0,0,0,.18)}
.dv__full summary{cursor:pointer;padding:14px 16px;font:600 15px var(--display);color:var(--cyan-hot)}
.dv__full .md{padding:4px 18px 18px;max-height:none}
.dv__foot{margin:22px 0 0;font:500 12.5px var(--mono);color:var(--mute);word-break:break-word}
.dv__vis{margin:26px 0 0;padding:16px;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.02)}
.dv__vis>b{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg__b{cursor:pointer;border:1px solid var(--edge);background:none;color:var(--paper-dim);border-radius:99px;padding:8px 14px;font:500 13.5px var(--display)}
.seg__b:hover{border-color:var(--edge-hot);color:#fff}
.seg__b.is-on{background:var(--cyan);border-color:var(--cyan);color:#04141a}
.slk--doc{margin:10px 0 0;box-shadow:none}
.slk--doc .slk__feed{max-height:none}
.slk__at{font:500 12px var(--mono);color:var(--mute)}
.slk__av--deka{background:var(--sw-gold);color:#1b1206}
.slk__thread{margin:8px 0 0;border-left:2px solid rgba(255,255,255,.1);padding-left:12px}
.slk__thread summary{cursor:pointer;font-size:13.5px;color:var(--cyan-hot)}
.slk__reply{margin:8px 0}
.slk__reply b{font-size:14px}

/* Markdown, written as elements (library.js) */
.md{font-size:15px;line-height:1.65;color:var(--paper-dim);word-wrap:break-word}
.md h3,.md h4,.md h5,.md h6,.md h7,.md h8{font-family:var(--display);color:var(--paper);margin:18px 0 8px;line-height:1.3}
.md h3{font-size:19px}.md h4{font-size:17px}.md h5,.md h6{font-size:15.5px}
.md p{margin:0 0 10px}
.md ul,.md ol{margin:0 0 10px;padding-left:22px}
.md li{margin:0 0 4px}
.md b{color:var(--paper);font-weight:600}
.md hr{border:0;border-top:1px solid var(--edge);margin:16px 0}
.md blockquote{margin:0 0 10px;padding:4px 0 4px 14px;border-left:2px solid var(--edge-hot);color:var(--paper-dim)}
.md code{font:13.5px var(--mono);background:rgba(255,255,255,.06);padding:1px 5px;border-radius:4px}
.md__table{overflow-x:auto;margin:0 0 12px}
.md table{border-collapse:collapse;font-size:14px;min-width:100%}
.md th,.md td{border:1px solid var(--edge);padding:6px 9px;text-align:left;vertical-align:top}
.md th{color:var(--paper);background:rgba(255,255,255,.04);font-weight:600}
.msg__act--src{border-color:rgba(247,128,79,.2)}

/* ---------- small screens ---------- */
@media (max-width:1180px){
  .dcs--3,.nums3,.phr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .guide__steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .dcs--2,.dcs--3,.nums3,.phr,.kanban,.crew,.logos,.upf__grid{grid-template-columns:minmax(0,1fr)}
  .stats--home{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide__steps--4{grid-template-columns:minmax(0,1fr)}
  .tl::before{display:none}
  .tl__i{grid-template-columns:minmax(0,1fr)}
  .tl__d{flex-direction:row;gap:8px;padding:0 0 6px;align-items:baseline}
  .tl__d::after{display:none}
  .tl__i .dc{margin-left:0}
  .declist li{grid-template-columns:minmax(0,1fr)}
  .said li{grid-template-columns:minmax(0,1fr)}
  .said__k{grid-row:auto}
  .vis__r{grid-template-columns:minmax(0,1fr)}
  .vis__s{text-align:left}
  .topbar__client{height:22px}
  .topbar__tag{display:none}
  .srch{height:52px}
  .audit{font-size:13px}
  .founder{grid-template-columns:minmax(0,1fr);padding:14px}
  .founder__badge{width:58px;height:58px;top:10px;left:10px}
  .founder__badge img,.brandimg .founder__badge img{width:46px;height:46px}
  .audit{flex-wrap:nowrap;padding:8px 16px}
  .audit__long{display:none}
  .audit__back{margin-left:auto;padding:4px 10px;font-size:12.5px}
}
@media (max-width:900px){
  .rail__console,.rail__console+.rail__console{flex:none;align-self:center;margin:0 14px;white-space:nowrap}
}

/* the "open" chip inside a numbers card sits at the bottom, in the flow */
.numcard{position:relative}
.numcard .tile__go{position:static;margin-top:auto;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:8px 8px 8px 18px;border-radius:99px;font:600 14.5px var(--display);color:var(--cyan-hot);background:rgba(247,128,79,.10);border:1px solid var(--edge-hot)}
.numcard .tile__go>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cyan);color:var(--void)}
.numcard:hover .tile__go{background:var(--cyan);color:var(--void)}

/* ---------- SpineWell today: KPI tiles and charts ---------- */
.today{margin-top:clamp(10px,2vw,30px)}
.today .head{margin-top:0;border-top:0;padding-top:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin:clamp(22px,2.4vw,34px) 0 0}
.kpi-t{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 14px;border-radius:14px;border:1px solid var(--edge);
  background:linear-gradient(160deg,rgba(247,128,79,.09),rgba(24,42,66,.72) 60%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}
.kpi-t__l{font:500 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
.kpi-t__v{font:700 clamp(28px,2.6vw,38px)/1.05 var(--display);letter-spacing:-.03em;color:#fff}
.kpi-t__vs{font-size:13.5px;color:var(--mute);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpi__chg{font:600 12.5px var(--mono);color:var(--paper-dim)}
.kpi__chg.is-good{color:var(--good)}
.kpi__chg.is-bad{color:var(--crit)}
.kpi-t__h{font-size:12.5px;color:var(--mute-deep)}
.spark{width:100%;height:30px;margin:6px 0 2px}
.spark__l{fill:none;stroke:var(--cyan-hot);stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark__d{fill:var(--cyan-hot)}
.speed{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:14px 0 0;padding:16px 18px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.speed>b{font:600 16px var(--display);color:var(--paper)}
.speed>.dim{font-size:13.5px;flex:1;min-width:200px}
.speed__i{display:flex;flex-direction:column;gap:2px;min-width:120px}
.speed__i span{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.speed__i strong{font:700 22px var(--display);color:var(--cyan-hot)}
.speed__i em{font-style:normal;font-size:12.5px;color:var(--mute)}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin:clamp(18px,2vw,26px) 0 0}
.chart-card{padding:18px 18px 12px;border:1px solid var(--edge);border-radius:16px;background:var(--panel);min-width:0}
.chart-card h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:600 16px var(--display);color:var(--paper)}
.chart-card--team{border-color:rgba(154,167,180,.28)}
.chart{position:relative}
.chart__svg{display:block;width:100%;height:auto}
.chart__grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.chart__ax{fill:var(--mute);font:500 10.5px var(--mono)}
.chart__bar{transition:opacity .2s}
.chart__line{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.chart__dot{stroke:var(--void);stroke-width:1.5}
.chart__hit{cursor:pointer}
.chart__hit:hover{fill:rgba(255,255,255,.04)}
.chart__legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 0;font-size:13px;color:var(--paper-dim)}
.chart__legend i,.chart__tip i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart__tip{position:absolute;top:6px;transform:translateX(-50%);min-width:170px;padding:10px 12px;border-radius:10px;background:rgba(11,23,38,.94);
  border:1px solid var(--edge-hot);font-size:13px;color:var(--paper-dim);display:flex;flex-direction:column;gap:3px;pointer-events:none;z-index:2}
.chart__tip b{font:600 13.5px var(--display);color:#fff;margin-bottom:2px}
.chart__tip-total{border-top:1px solid var(--edge);padding-top:4px;margin-top:2px;color:#fff}
.chart-note{font-size:13px;margin:10px 0 0}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.charts{grid-template-columns:minmax(0,1fr)}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-t{padding:14px}}

/* ---------- link chips on cards ---------- */
.dc__links{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 16px;margin-top:-6px}
.lk{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;border:1px solid var(--edge-hot);background:rgba(247,128,79,.08);
  font:600 12.5px var(--display);color:var(--cyan-hot);text-decoration:none}
.lk:hover{background:var(--cyan);color:var(--void);border-color:var(--cyan)}
.lk--spinewellcenters-com{border-color:rgba(197,156,109,.5);background:rgba(197,156,109,.12);color:#e2c29c}
.lk--spinewellcenters-com:hover{background:var(--sw-gold);color:#1b1206}
.lk--monday{border-color:rgba(255,180,67,.4);background:rgba(255,180,67,.08);color:var(--high)}
.lk--monday:hover{background:var(--high);color:#1b1206}
.dc:has(.dc__drive) .dc__main{padding-bottom:20px}
.kc{display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--edge);background:var(--panel-solid);transition:border-color .25s,transform .25s}
.kc:hover{border-color:var(--edge-hot);transform:translateY(-2px)}
.kc .kcard{border:0;background:none}
.kc .kcard:hover{transform:none}
.kc .dc__links{padding:0 16px 14px;margin-top:-4px}
.kcard--more{display:none}

/* ---------- published blogs ---------- */
.blogs{margin:clamp(26px,3vw,40px) 0;padding:clamp(18px,2vw,26px);border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.blogs .panel__h{display:flex;gap:12px;align-items:baseline}
.blogs .panel__h .dim{font:500 13px var(--mono)}
.blogs__list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;max-height:520px;overflow:auto}
.blogs__list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.blogs__list li[hidden]{display:none}
.blogs__d{font:500 12px var(--mono);color:var(--mute);padding-top:2px}
.blogs__list a{font-size:14.5px;color:var(--paper);border:0}
.blogs__list a:hover{color:var(--cyan-hot)}
@media (max-width:760px){.blogs__list{grid-template-columns:minmax(0,1fr)}}

/* ---------- Instagram ---------- */
.ig{margin:clamp(20px,2.4vw,32px) 0}
.ig__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-bottom:14px}
.ig__head b{font:600 17px var(--display);color:var(--paper)}
.ig__head .btn-go{margin-top:0;margin-left:auto}
.ig__stats{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--paper-dim)}
.ig__stats strong{font:700 17px var(--display);color:var(--cyan-hot)}
.ig__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.reports-social-grid .ig__grid,.deep .ig__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.ig__p{display:flex;flex-direction:column;gap:6px;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--panel);text-decoration:none;padding-bottom:12px;transition:border-color .25s,transform .25s}
.ig__p:hover{border-color:var(--edge-hot);transform:translateY(-3px)}
.ig__p img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ig__t{font:500 11.5px var(--mono);color:var(--cyan-hot);padding:0 12px}
.ig__c{font-size:13.5px;line-height:1.45;color:var(--paper-dim);padding:0 12px;flex:1}
.ig__m{display:flex;gap:14px;padding:0 12px;font:600 13px var(--mono);color:var(--paper)}
@media (max-width:1180px){.ig__grid,.deep .ig__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ig__grid,.deep .ig__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ig__head .btn-go{margin-left:0}}

/* ---------- logos: Pithy × SpineWell lockup ---------- */
.topbar{gap:18px}
.topbar__logo{width:112px}
.topbar__div{width:1px;height:34px;background:rgba(255,255,255,.18);flex:none}
.topbar__client{height:40px;width:auto;flex:none;opacity:1}
.gate__brands{display:flex;align-items:center;gap:20px;margin-bottom:30px}
.gate__brands .gate__logo{width:124px;margin:0}
.gate__div{width:1px;height:46px;background:rgba(255,255,255,.2)}
.gate__client{height:52px;width:auto}
.hero__brand{margin:0 0 22px}
.hero__brand img{height:clamp(46px,4.4vw,64px);width:auto}
.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.logos__i img{width:min(380px,78%);margin:52px auto}
.logos__i--black{background:#0e0e0e}
.logos__i--white{background:#ffffff}
.logos__i figcaption{display:flex;justify-content:space-between;gap:10px}
.logos__i figcaption a{font:600 12.5px var(--display);color:var(--cyan-hot);border:0}
@media (max-width:760px){
  .topbar__client{height:28px}
  .topbar__div{height:24px}
  .gate__client{height:40px}
  .gate__brands .gate__logo{width:100px}
}

/* ---------- the dashboard (Reports > Dashboard) ---------- */
.dash__bar{display:grid;gap:12px;padding:16px 18px;margin:0 0 18px;border:1px solid var(--edge);border-radius:14px;background:var(--panel);position:sticky;top:84px;z-index:20;backdrop-filter:blur(14px)}
.dash__f{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dash__f--end{justify-content:space-between}
.dash__l{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);min-width:74px}
.dash .chip{padding:7px 12px;font-size:13.5px}
.dash .chip:hover{transform:none}
.dash .chip.is-on{border-color:var(--cyan);color:#fff;background:rgba(247,128,79,.14)}
.dash__custom{display:inline-flex;gap:10px;align-items:center;font-size:13.5px;color:var(--mute)}
.dash__custom select,.flt__sel{height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--edge);background:var(--panel-solid);color:var(--paper);font:400 14px var(--body)}
.dash__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:-4px 0 10px;font-size:13px;color:var(--paper-dim)}
.dash__warn{color:var(--high);font-size:12.5px}
.dash__sw{margin-left:auto;background:none;border:1px solid var(--edge);border-radius:99px;color:var(--mute);font:500 12px var(--mono);padding:4px 10px;cursor:pointer}
.dash__sw:hover{color:#fff;border-color:var(--cyan)}
.dash__src{margin:8px 0 0;font:500 11.5px var(--mono);color:var(--mute-deep,#5a6976)}
.dash__tbl{max-height:300px;overflow:auto;border:1px solid var(--edge);border-radius:10px}
.dash__tbl table,.viewer__md table{border-collapse:collapse;width:100%;font-size:13px}
.dash__tbl th,.dash__tbl td{padding:7px 10px;border-bottom:1px solid var(--edge);text-align:right;white-space:nowrap}
.dash__tbl th:first-child,.dash__tbl td:first-child{text-align:left}
.dash__tbl thead th{position:sticky;top:0;background:var(--panel-solid);color:var(--paper);font-weight:600}
.chart__none{padding:40px 0;text-align:center}
.btn-go--sm{padding:8px 14px;font-size:13.5px}
.dc__std{display:block;margin:6px 0 0;font:500 11.5px var(--mono);color:var(--mute);word-break:break-all}

/* ---------- the full report, in a pop-up ---------- */
.viewer{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;background:rgba(5,8,12,.97);backdrop-filter:blur(8px)}
.viewer__bar{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,2.6vw,32px);border-bottom:1px solid var(--edge);flex-wrap:wrap}
.viewer__t{display:flex;flex-direction:column;min-width:0;flex:1}
.viewer__t b{font:600 17px var(--display);color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer__t span{font:500 12px var(--mono);color:var(--mute)}
.viewer__tabs{display:flex;gap:6px;flex-wrap:wrap}
.viewer__tab{background:none;border:1px solid var(--edge);border-radius:99px;color:var(--paper-dim);padding:7px 14px;font:500 13.5px var(--display);cursor:pointer}
.viewer__tab.is-on{border-color:var(--cyan);color:#fff;background:rgba(247,128,79,.14)}
.viewer__x{width:40px;height:40px;border-radius:50%;border:1px solid var(--edge);background:none;color:var(--paper);font-size:22px;cursor:pointer}
.viewer__x:hover{border-color:var(--cyan)}
.viewer__b{flex:1;overflow:auto;padding:18px clamp(16px,2.6vw,32px) 40px}
.viewer__find{position:sticky;top:-18px;z-index:2;display:flex;gap:12px;align-items:center;padding:10px 0;background:rgba(5,8,12,.97)}
.viewer__find input{flex:1;max-width:520px;height:42px;padding:0 14px;border-radius:8px;border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--paper);font:400 15px var(--body)}
.viewer__md{max-width:none}
.viewer__md .md__table{overflow-x:auto;margin:0 0 22px;border:1px solid var(--edge);border-radius:10px}
.viewer__md table{min-width:100%}
.viewer__md th{position:sticky;top:0;background:var(--panel-solid)}
.viewer__md tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.viewer__md tbody tr:hover{background:rgba(247,128,79,.08)}
.viewer__frame{width:100%;height:calc(100vh - 150px);border:1px solid var(--edge);border-radius:10px;background:#fff}
.viewer__note{margin:10px 0 0;font-size:13.5px}
@media (max-width:760px){
  .dash__bar{position:static}
  .dash__l{min-width:100%}
  .viewer__t b{white-space:normal}
  .viewer__frame{height:calc(100vh - 190px)}
}

/* SpineWell's own videos as page backgrounds (js/portal.js loads the Vimeo player on the open page only) */
.bg--vimeo iframe{position:absolute;top:50%;left:50%;border:0;pointer-events:none;
  width:max(100%, calc(min(96vh, 980px) * 1.7778));height:max(100%, 56.25vw);transform:translate(-50%,-50%);
  opacity:0;transition:opacity 1.2s var(--slow);filter:contrast(1.06) brightness(.78) saturate(.85)}
.bg--vimeo.is-playing iframe{opacity:.92}
.bg--vimeo.is-playing img{opacity:0;transition:opacity 1.2s var(--slow)}
.gate__tour{overflow:hidden;pointer-events:none}
.gate__tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.gate__tour iframe{position:absolute;top:50%;left:50%;border:0;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);filter:brightness(.75) saturate(.9)}
@media (prefers-reduced-motion:reduce){.gate__tour iframe,.bg--vimeo iframe{display:none}}
.dash__card--wide{grid-column:1/-1}
.dash__tbl--pages{max-height:420px}
.dash__tbl--pages td:first-child{white-space:normal;word-break:break-all}
.dash__tbl a{color:var(--cyan-hot);border:0}
.btn-go--hot{background:var(--cyan);border-color:var(--cyan);color:#04141a;font-weight:600}
.btn-go--hot:hover{background:var(--cyan-hot);color:#04141a}
.btn-go--hot .btn-go__i{background:rgba(4,20,26,.15);color:#04141a}
.bdg--new{color:#04141a;background:var(--cyan-hot);border-color:var(--cyan-hot)}
.recent{margin:clamp(20px,2.4vw,32px) 0 clamp(26px,3vw,40px);padding:18px 20px;border:1px solid var(--edge-hot);border-radius:16px;background:linear-gradient(145deg,rgba(247,128,79,.08),var(--panel))}
.recent__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 4px}
.recent__h h2{font:700 20px var(--display);margin:0;color:var(--paper)}
.recent__h span{font-size:14px}
.recent .dcs{margin:14px 0 0}

/* ---------- Files: every document to download or open in Drive ---------- */
.files{display:grid;gap:10px;margin:18px 0}
.fr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center;padding:14px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
.fr:hover{border-color:var(--edge-hot)}
.fr__main{background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;min-width:0}
.fr__t{display:block;margin-top:6px;font:600 15.5px/1.35 var(--display);color:var(--paper)}
.fr__fn{display:block;margin-top:4px;font:500 12px var(--mono);color:var(--mute);word-break:break-all}
.fr__act{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
@media (max-width:760px){.fr{grid-template-columns:minmax(0,1fr)}.fr__act{justify-content:flex-start}}

/* ---------- month by month, year over year (Reports > Website) ---------- */
.mbm{margin:0 0 clamp(26px,3vw,40px);padding:clamp(18px,2vw,26px);border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.mbm__h{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.mbm__h .panel__h{margin-bottom:6px}
.mbm__h p,.mbm>p{margin:0 0 12px;font-size:14px}
.mbm__h2{margin-top:28px}
.mbm__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.mbm__tile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--panel-solid)}
.mbm__tile b{font:600 26px/1.1 var(--display);color:var(--paper)}
.mbm__l{font:500 12px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.mbm__s{font-size:13px;color:var(--paper-dim)}
.mbm__tbl{max-height:none}
.mbm__tbl thead tr:first-child th{text-align:center}
.mbm__tbl thead tr + tr th{position:static;font:500 11.5px var(--mono);color:var(--mute)}
.mbm__d--up{color:var(--good)}
.mbm__d--down{color:var(--high)}
.mbm__tot td{font-weight:600;color:var(--paper);border-top:1px solid var(--edge-hot)}
.mbm__loc{margin:0 0 10px}
.mbm__loc summary{cursor:pointer;padding:8px 0;font:600 15px var(--display);color:var(--paper)}
@media (max-width:760px){.mbm__tiles{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   Sept 30: Data reports, Scope & services, Webinars, Waiting Room Video, project categories
   ============================================================ */

/* date pickers inside filter bars */
.flt__date{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.flt__date input{height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--edge);background:var(--panel-solid);color:var(--paper);font:400 14px var(--body);color-scheme:dark}
.flt__date input:focus{outline:none;border-color:var(--cyan)}

/* View on a card: the report in the pop-up */
.dc__acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 22px 16px;margin-top:-6px}
.dc__acts .dc__links{padding:0;margin:0}
.dc__view{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:var(--cyan);color:var(--void);font:600 12.5px var(--body)}
.dc__view:hover{background:var(--cyan-hot)}
.dc__view:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px}
[data-measured] > .is-out{display:none}

/* what do you want to measure? */
.measure{margin:clamp(18px,2.4vw,30px) 0 6px}
.measure__h{margin:0 0 12px;font:600 clamp(18px,1.6vw,22px) var(--display);color:var(--paper)}
.measure__opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.measure__opts > .measure__o{flex:0 0 calc((100% - (var(--n,6) - 1) * 10px) / var(--n,6))}
@media (max-width:1380px){.measure__opts > .measure__o{flex-basis:calc((100% - 30px) / 4)}}
@media (max-width:900px){.measure__opts > .measure__o{flex-basis:calc((100% - 20px) / 3)}}
.measure__o{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;border:1px solid var(--edge);background:var(--panel);transition:border-color .2s,background .2s}
.measure__o b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:600 15px var(--display);color:var(--paper)}
.measure__o .bdg{font-size:9.5px;padding:3px 6px}
.measure__o span{font-size:13px;line-height:1.45;color:var(--paper-dim)}
.measure__o:hover{border-color:var(--edge-hot)}
.measure__o.is-on{border-color:var(--cyan);background:rgba(247,128,79,.12)}
.measure__o:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px}

/* report insights: the page panel and each chart's notes */
.insights{margin:0 0 18px;padding:16px 18px;border:1px solid var(--edge-hot);border-radius:16px;background:rgba(247,128,79,.06)}
.insights__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 10px}
.insights__h h3{margin:0;font:600 17px var(--display);color:var(--paper)}
.insights__h .dim{font:500 12.5px var(--mono)}
.insights__list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:340px;overflow:auto}
.ins{position:relative;padding:8px 10px 8px 14px;border-radius:8px;font-size:14px;line-height:1.5;color:var(--paper-dim);background:rgba(255,255,255,.02)}
.ins::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--mute)}
.ins--warn::before{background:var(--high)}
.ins--good::before{background:var(--good)}
.ins--info::before{background:var(--cyan)}
.ins__k{all:unset;cursor:pointer;font-weight:600;color:var(--paper);border-bottom:1px dotted rgba(255,255,255,.3)}
b.ins__k{cursor:default;border:0}
.ins__k:hover{color:var(--cyan-hot)}
.insights__how{margin-top:10px;font-size:13.5px;color:var(--paper-dim)}
.insights__how summary{cursor:pointer;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.insights__how ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.ann{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.ann__i{padding:8px 10px;border-radius:8px;font-size:13.5px;line-height:1.5;color:var(--paper-dim);border:1px solid var(--edge)}
.ann__i--warn{border-color:rgba(255,180,67,.35);background:rgba(255,180,67,.07)}
.ann__i--good{border-color:rgba(63,224,168,.3);background:rgba(63,224,168,.06)}
.ann__i--info{border-color:rgba(247,128,79,.28);background:rgba(247,128,79,.05)}
.ann__k{display:inline-block;margin-right:8px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ann__i--warn .ann__k{color:var(--high)}
.ann__i--good .ann__k{color:var(--good)}
.ann__i--info .ann__k{color:var(--cyan-hot)}
.card-ins{margin-top:10px;border-top:1px solid var(--edge);padding-top:8px}
.card-ins summary{cursor:pointer;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-hot)}
.card-ins ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px;font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.dash__card.is-flash{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(247,128,79,.25)}
.chart__target{stroke:var(--high);stroke-width:1.5;stroke-dasharray:6 5;opacity:.9}
.chart__target-l{fill:var(--high);font:500 11px var(--mono)}

/* year over year and the KPI tracker as a spreadsheet */
.yoy__bar{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 12px}
.yoy__l{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.yoy__l select{height:36px;max-width:min(460px,80vw);padding:0 10px;border-radius:8px;border:1px solid var(--edge);background:var(--panel-solid);color:var(--paper);font:400 14px var(--body);text-transform:none;letter-spacing:0}
.yoy .dash__tbl{margin-top:12px;max-height:none}
.yoy + .mbm{margin-top:28px}
.kt .flt__row{margin:0 0 12px}
.kt .flt__row input[type="search"]{flex:1;min-width:200px;max-width:380px;height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--edge);background:var(--panel-solid);color:var(--paper);font:400 14.5px var(--body)}
.kt__wrap{overflow:auto;max-height:70vh;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
.kt__t{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
.kt__t th,.kt__t td{padding:7px 10px;border-bottom:1px solid var(--edge);white-space:nowrap;text-align:right;color:var(--paper-dim)}
.kt__t thead th{position:sticky;top:0;z-index:2;background:var(--panel-solid);font:500 11.5px var(--mono);color:var(--mute)}
.kt__t .kt__name{position:sticky;left:0;z-index:1;text-align:left;background:var(--panel-solid);color:var(--paper);font-weight:500;white-space:normal;min-width:220px;max-width:320px}
.kt__t thead .kt__name{z-index:3}
.kt__sec th{text-align:left;background:#3a2418;color:var(--cyan-hot);font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;position:sticky;left:0}

/* services, webinars, waiting room: item cards and placeholders */
.svs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin:0 0 18px}
.sv{display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;border:1px solid var(--edge);border-radius:14px;background:var(--panel);min-width:0}
.sv[hidden]{display:none}
.sv .dc__acts{padding:4px 0 0;margin:auto 0 0}
.sv__top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sv__d{font:500 12px var(--mono);color:var(--cyan-hot);margin-right:4px}
.sv__t{font:600 15.5px/1.35 var(--display);color:var(--paper)}
.sv__n{font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.sv--missing{border-style:dashed;border-color:rgba(255,180,67,.45);background:rgba(255,180,67,.04)}
.sv__add{font:500 12px var(--mono)}
.wb__h{margin:22px 0 10px}
.note-team{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px;padding:12px 16px;border:1px dashed rgba(154,167,180,.4);border-radius:12px;font-size:14px;color:var(--paper-dim)}
.note-team > b{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lock)}
.note-team__links{display:inline-flex;flex-wrap:wrap;gap:6px}
.scope{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px}
.scope__monthly,.scope__exp{padding:18px;border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.scope__list{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px;line-height:1.5;color:var(--paper)}
.scope__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.scope__g{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.02)}
.scope__g b{font:600 14.5px var(--display);color:var(--paper)}
.scope__g ul{margin:0;padding-left:16px;display:grid;gap:4px;font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.scope__g .bdg{align-self:flex-start}
.feature{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin:0 0 16px;padding:18px 20px;border:1px solid var(--edge-hot);border-radius:16px;background:rgba(247,128,79,.07)}
.feature h3{margin:8px 0 4px;font:600 18px var(--display);color:var(--paper)}
.feature p{margin:0}
.wr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start;margin:clamp(18px,2.4vw,30px) 0 8px}
.wr__now{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--edge-hot);border-radius:16px;background:linear-gradient(135deg,rgba(247,128,79,.14),rgba(196,87,42,.06))}
.wr__now h3{margin:0;font:600 clamp(20px,2vw,26px) var(--display);color:var(--paper)}
.wr__now p{margin:0}
.wr__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.wr__warn{font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.wr__facts{margin:0;display:grid;gap:10px}
.wr__facts div{padding:12px 14px;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
.wr__facts dt{display:flex;align-items:center;gap:8px;font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-hot)}
.wr__facts dd{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--paper-dim)}
.wr__facts .wr__team{border-style:dashed;border-color:rgba(154,167,180,.4)}

/* projects: categories, filters, list view */
.kcard__cat{align-self:flex-start;display:inline-flex;padding:3px 8px;border-radius:99px;font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--edge);color:var(--paper-dim)}
.cat--video{color:#f0a6c8;border-color:rgba(240,166,200,.4)}
.cat--seo{color:var(--good);border-color:rgba(63,224,168,.35)}
.cat--social{color:#c0a0d8;border-color:rgba(192,160,216,.4)}
.cat--crm{color:var(--high);border-color:rgba(255,180,67,.4)}
.cat--web{color:var(--cyan-hot);border-color:var(--edge-hot)}
.cat--paid-ads{color:#e2c29c;border-color:rgba(197,156,109,.5)}
.cat--email{color:#8fbcbb;border-color:rgba(143,188,187,.4)}
.cat--reporting{color:#7fa1c3;border-color:rgba(127,161,195,.45)}
.cat--webinar{color:#d08770;border-color:rgba(208,135,112,.45)}
.kc[hidden]{display:none!important}
.kanban__col.is-filtering .kcard--more{display:flex}
.kanban__col.is-filtering > .more{display:none}
.pf__gap{margin-left:10px}
.pf__view{margin-left:auto;display:inline-flex;gap:6px}
.plist{overflow:auto;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.plist[hidden]{display:none}
.plist__t{width:100%;border-collapse:collapse;font-size:14px}
.plist__t th{position:sticky;top:0;text-align:left;padding:10px 14px;background:var(--panel-solid);font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--edge)}
.plist__t td{padding:10px 14px;border-bottom:1px solid var(--edge);vertical-align:top;color:var(--paper-dim);white-space:nowrap}
.plist__t td:first-child{white-space:normal;min-width:260px}
.plist__t tr[hidden]{display:none}
.plist__b{all:unset;cursor:pointer;display:block;font:600 14.5px var(--display);color:var(--paper)}
.plist__b:hover{color:var(--cyan-hot)}
.plist__s{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--mute)}

.viewer__ins{max-width:880px;margin:0 auto}

@media (max-width:900px){
  .scope,.wr{grid-template-columns:1fr}
  .pf__view{margin-left:0}
  .dash__bar{position:static}
}
@media (max-width:560px){
  .measure__opts > .measure__o,.measure__opts--5 > .measure__o{flex-basis:calc((100% - 10px) / 2)}
  .measure__o span{display:none}
  .svs{grid-template-columns:1fr}
  .flt__date{width:100%}
  .flt__date input{flex:1}
  .declist li{grid-template-columns:1fr}
}

.dash__custom[hidden],.dash__bar[hidden]{display:none}

/* scope, round 2: 10 services in even rows, the added services centered */
.scope__grid--main{grid-template-columns:repeat(5,minmax(0,1fr))}
.scope__grid--added{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
.scope__g--added{border-style:dashed;border-color:var(--edge-hot)}
.scope__note{font-size:12.5px}
.scope__addh{margin:26px 0 12px;text-align:center}
.adhoc__h{margin:26px 0 4px}
.adhoc__d{margin:0 0 4px;font-size:14px}
@media (max-width:1280px){.scope__grid--main{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.scope__grid--main,.scope__grid--added{grid-template-columns:1fr}}

/* ============================================================
   Round 2: the report as it looks (render.php), card thumbnails
   ============================================================ */
.dc__thumb{all:unset;cursor:pointer;display:block;position:relative;margin:0 0 -4px;border-radius:14px 14px 0 0;overflow:hidden;aspect-ratio:16/9;background:#12233a;border-bottom:1px solid var(--edge)}
.dc__thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .35s var(--ease)}
.dc__thumb:hover img{transform:scale(1.03)}
.dc__thumbl{position:absolute;right:10px;bottom:10px;padding:4px 9px;border-radius:99px;background:rgba(11,23,38,.78);color:#fff;font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.dc__thumb--xl{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f3d2a,#0b1f18)}
.xlmini{width:62%;height:62%;border-radius:6px;background:
  linear-gradient(#1d6f42 0 16%,transparent 16%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 14%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 20%),#f5f7f6;opacity:.92}

/* slides */
.deck{display:flex;flex-direction:column;gap:12px;height:100%;outline:none}
.deck__stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#0a1422;border-radius:12px;overflow:hidden}
.deck__img{max-width:100%;max-height:100%;object-fit:contain;display:block;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.deck__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--edge-hot);background:rgba(11,23,38,.7);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.deck__nav:hover{background:var(--cyan);color:var(--void)}
.deck__nav:disabled{opacity:.25;cursor:default}
.deck__nav--prev{left:12px}
.deck__nav--next{right:12px}
.deck__n{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);padding:4px 10px;border-radius:99px;background:rgba(11,23,38,.75);color:#fff;font:600 12px var(--mono)}
.deck__strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px}
.deck__t{all:unset;cursor:pointer;position:relative;flex:0 0 132px;border-radius:6px;overflow:hidden;border:2px solid transparent;opacity:.65}
.deck__t img{width:100%;display:block}
.deck__t span{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:4px;background:rgba(11,23,38,.8);color:#fff;font:600 10px var(--mono)}
.deck__t.is-on{border-color:var(--cyan);opacity:1}
.deck__t:hover{opacity:1}

/* pages */
.pages{display:flex;flex-direction:column;align-items:center;gap:18px;padding:6px 0 30px}
.pages__p{width:min(100%,1000px);background:#fff;border-radius:4px;box-shadow:0 8px 30px rgba(0,0,0,.45)}

/* a spreadsheet, Excel-like */
.xl{display:flex;flex-direction:column;height:100%;min-height:0}
.xl__bar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.xl__bar input{flex:1;max-width:380px;height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--edge);background:var(--panel-solid);color:var(--paper);font:400 14px var(--body)}
.xl__grid{flex:1;min-height:0;overflow:auto;background:#fff;border:1px solid #c8ced4;border-radius:6px 6px 0 0}
.xl__t{border-collapse:collapse;font:13px/1.35 Calibri,'Segoe UI',Arial,sans-serif;color:#1f2328}
.xl__t td,.xl__t th{border:1px solid #dde1e5;padding:4px 8px;white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis}
.xl__t td.xl__n{text-align:right;font-variant-numeric:tabular-nums}
.xl__t thead th{position:sticky;top:0;z-index:2;background:#f3f4f6;color:#5f6b76;font-weight:500;text-align:center}
.xl__t .xl__row{position:sticky;left:0;z-index:1;background:#f3f4f6;color:#5f6b76;font-weight:500;text-align:center;min-width:38px}
.xl__t .xl__corner{left:0;z-index:3;background:#e8eaed}
.xl__t tr[hidden]{display:none}
.xl__tabs{display:flex;gap:2px;overflow-x:auto;background:#e8eaed;border:1px solid #c8ced4;border-top:0;border-radius:0 0 6px 6px;padding:0 6px}
.xl__tab{all:unset;cursor:pointer;padding:7px 14px;font:13px Calibri,'Segoe UI',Arial,sans-serif;color:#3c4650;white-space:nowrap;border-bottom:3px solid transparent}
.xl__tab.is-on{background:#fff;color:#1d6f42;font-weight:700;border-bottom-color:#1d6f42}
.xl__more{padding:10px;color:#5f6b76}

/* a text-only report as a document page */
.viewer__paper{max-width:900px;margin:0 auto;padding:clamp(22px,4vw,56px);background:#fbfcfd;color:#1f2328;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.viewer__paper .viewer__md,.viewer__paper .viewer__md *{color:#1f2328}
.viewer__paper h1,.viewer__paper h2,.viewer__paper h3{color:#0b2a3f!important;font-family:var(--display)}
.viewer__paper a{color:#00798a!important}
.viewer__paper table{border-collapse:collapse;width:100%;font-size:14px}
.viewer__paper th{background:#0b2a3f!important;color:#fff!important;text-align:left}
.viewer__paper th,.viewer__paper td{border:1px solid #d8dde2;padding:6px 10px;background:transparent}
.viewer__paper tbody tr:nth-child(even) td{background:#f1f5f8}
.viewer__paper .viewer__find input{background:#fff;color:#1f2328;border:1px solid #c8ced4}

/* round 2: insights and sources at the bottom of every chart */
.card-ins__h{margin:0 0 8px;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-hot)}
.card-ins__more{margin-top:6px}
.card-ins__more summary{cursor:pointer;font:500 12.5px var(--body);color:var(--mute)}
.card-ins__more ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px;font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.dash__how{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--edge)}
.dash__how .dash__src{margin:0}
.dash__calc{font-size:12.5px;line-height:1.5;color:var(--mute)}
.dash__how .lk{margin-top:4px;cursor:pointer;font:inherit;font-size:12px}
.viewer__b > .deck,.viewer__b > .xl{height:100%}

.wr__deck{display:flex;flex-direction:column;gap:12px}
.wr__shot{all:unset;cursor:pointer;position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid var(--edge-hot);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.wr__shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s var(--ease)}
.wr__shot:hover img{transform:scale(1.02)}
.wr__play{position:absolute;right:14px;bottom:14px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--void);font-size:22px}
.wr__cap{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wr__cap b{font:600 17px var(--display);color:var(--paper)}

/* ============================================================
   Round 2: Videos, Social, SEO, Website analytics, webinar report, October plan
   ============================================================ */
/* video library */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:6px 0 16px}
.vc{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .2s,transform .2s}
.vc:hover{border-color:var(--edge-hot);transform:translateY(-2px)}
.vc:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px}
.vc__th{position:relative;display:block;aspect-ratio:16/10;background:#12233a}
.vc__th img{width:100%;height:100%;object-fit:cover;display:block}
.vc__none{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.vc__du{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:5px;background:rgba(11,23,38,.82);color:#fff;font:600 11px var(--mono)}
.vc__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(247,128,79,.9);color:var(--void);font-size:16px;padding-left:3px;box-sizing:border-box}
.vc__m{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px}
.vc__k{font:600 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--cyan-hot)}
.vc__t{font:600 14.5px/1.35 var(--display);color:var(--paper)}
.vc__f{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:500 11.5px var(--mono);color:var(--mute)}
.vplay{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:18px;align-items:start}
.vplay__stage{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.vplay__stage iframe,.vplay__stage video{width:100%;height:100%;border:0;background:#000}
.vplay__stage img{width:100%;height:100%;object-fit:contain;opacity:.6}
.vplay__msg{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#fff;font-size:14px}
.vplay__side{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--paper-dim)}
.vplay__links{display:flex;flex-wrap:wrap;gap:6px}
.vplay__ds{white-space:pre-line;line-height:1.55;max-height:46vh;overflow:auto}
@media (max-width:900px){.vplay{grid-template-columns:1fr}}

/* feed charts (social, analytics, webinar report) */
.fc__bar{display:grid;gap:10px;padding:14px 16px;margin:0 0 16px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.fc__range{font:500 12.5px var(--mono)}

/* headline numbers (SEO) */
.stiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:clamp(18px,2.2vw,28px) 0 8px}
.stile{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.stile__l{font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.stile__v{font:700 clamp(24px,2.4vw,32px) var(--display);color:var(--cyan-hot)}
.stile__s{font-size:13px;line-height:1.45;color:var(--paper-dim)}
.stile__p{font:500 11.5px var(--mono)}
@media (max-width:1100px){.stiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stiles{grid-template-columns:1fr}}
.seo__deck{flex-direction:row;align-items:center;gap:20px;margin:0 0 18px}
.seo__deck .wr__shot{flex:0 0 min(560px,55%)}
@media (max-width:900px){.seo__deck{flex-direction:column}.seo__deck .wr__shot{flex-basis:auto;width:100%}}
.seo__tbl{max-height:none}
.seo__tbl td{white-space:normal;vertical-align:top}
.scope__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.scope__grid--3{grid-template-columns:1fr}}

/* webinar report */
.wbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
@media (max-width:900px){.wbs{grid-template-columns:1fr}}
.funnel{margin:0 0 18px;padding:16px 18px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.funnel__r{display:grid;grid-template-columns:minmax(150px,240px) 1fr 44px 44px;gap:10px;align-items:center;padding:5px 0;font-size:14px;color:var(--paper-dim)}
.funnel__b{height:14px;border-radius:7px;background:rgba(255,255,255,.05);overflow:hidden}
.funnel__b i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--cyan),var(--cyan-hot))}
.funnel__r b{color:var(--paper);text-align:right}
@media (max-width:560px){.funnel__r{grid-template-columns:1fr 40px 40px}.funnel__b{grid-column:1/-1;order:3}}
.sv__shot{all:unset;cursor:zoom-in;display:block;margin:-16px -16px 4px;border-radius:14px 14px 0 0;overflow:hidden;max-height:220px;border-bottom:1px solid var(--edge)}
.sv__shot img{width:100%;display:block;object-fit:cover;object-position:top}
.sv > .dc__thumb{margin:-16px -16px 4px}

/* October plan on Home */
.oct{margin:clamp(20px,2.6vw,34px) 0;padding:clamp(18px,2.4vw,30px);border:1px solid var(--edge-hot);border-radius:18px;background:linear-gradient(135deg,rgba(247,128,79,.10),rgba(196,87,42,.03))}
.oct__h h2{margin:6px 0 8px;font:700 clamp(22px,2.4vw,32px) var(--display);color:var(--paper)}
.oct__h .lede{margin:0 0 16px;max-width:1000px}
.kicker-s{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-hot)}
.oct__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oct__p{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px 16px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.oct__n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--void);font:700 15px var(--display)}
.oct__b{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.oct__t{font:600 16px/1.35 var(--display);color:var(--paper)}
.oct__why{margin:0;font-size:14px;line-height:1.55;color:var(--paper-dim)}
.oct__more summary,.oct__also summary{cursor:pointer;font:500 12.5px var(--mono);color:var(--cyan-hot)}
.oct__more ul{margin:8px 0;padding-left:18px;display:grid;gap:4px;font-size:14px;color:var(--paper-dim)}
.oct__more p{margin:4px 0;font-size:13.5px;color:var(--paper-dim)}
.oct__b .lk{cursor:pointer;font-size:12px}
.oct__also{margin-top:12px}
.oct__alsol{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.oct__alsol li{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--edge);border-radius:10px;font-size:13.5px;color:var(--paper-dim)}
.oct__alsol b{color:var(--paper)}
@media (max-width:900px){.oct__alsol{grid-template-columns:1fr}}

/* the menu scrolls when it is taller than the window (16 pages) */
@media (min-width:901px){
  .rail{overflow-y:auto;overscroll-behavior:contain;padding:16px 0 28px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
  .rail::-webkit-scrollbar{width:6px}
  .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
  .rail__item{padding-top:10px;padding-bottom:10px;font-size:14.5px;flex:none}
  .rail__console{flex:none}
}
.fc__years{display:inline-flex;align-items:center;gap:6px}
.fc__years[hidden],.dash__f[hidden]{display:none}
.fc__yoy{margin-top:8px;display:grid;gap:4px;font-size:13.5px;color:var(--paper-dim)}
.fc__yoy p{margin:0}

/* ============================================================
   Round 3: the SEO report, interpreted
   ============================================================ */
.seosum{margin:clamp(18px,2.4vw,30px) 0 8px;padding:clamp(16px,2vw,24px);border:1px solid var(--edge-hot);border-radius:18px;background:linear-gradient(135deg,rgba(247,128,79,.10),rgba(196,87,42,.03))}
.seosum__h{margin:0 0 14px;font:600 clamp(17px,1.6vw,21px) var(--display);color:var(--paper);text-align:center}
.seosum__g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.seosum__i{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.seosum__i b{font:700 clamp(24px,2.3vw,32px) var(--display);color:var(--cyan-hot)}
.seosum__i span{font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--paper)}
.seosum__i p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
@media (max-width:1200px){.seosum__g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.seosum__g{grid-template-columns:1fr}}
.seosec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start;margin:0 0 20px;padding:18px;border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.seosec__t h3{margin:0 0 8px;font:600 18px/1.3 var(--display);color:var(--paper)}
.seosec__t p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--paper-dim)}
.seosec__t .lk{cursor:pointer;font-size:12.5px;margin:2px 6px 0 0}
@media (max-width:900px){.seosec{grid-template-columns:1fr}}
.cmp{display:flex;flex-direction:column;gap:10px}
.cmp.rv{padding:18px;border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.cmp__k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:500 12px var(--mono);color:var(--mute)}
.cmp__sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.cmp__sw--then,.cmp__b--then{background:rgba(197,156,109,.75)}
.cmp__sw--now,.cmp__b--now{background:var(--cyan)}
.cmp__r{display:grid;grid-template-columns:minmax(140px,210px) 1fr 58px;gap:10px;align-items:center}
.cmp__l{font-size:13.5px;color:var(--paper)}
.cmp__bars{display:flex;flex-direction:column;gap:3px}
.cmp__b{display:block;height:16px;min-width:2px;border-radius:4px;position:relative}
.cmp__b i{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);font:600 11.5px var(--mono);font-style:normal;color:var(--paper-dim);white-space:nowrap}
.cmp__bars{padding-right:70px}
.cmp__d{font:700 14px var(--display);text-align:right}
.cmp__d.is-up{color:var(--good)}
.cmp__d.is-down{color:var(--high)}
.bars{display:flex;flex-direction:column;gap:8px}
.bars__r{display:grid;grid-template-columns:minmax(150px,240px) 1fr 50px minmax(90px,auto);gap:10px;align-items:center;font-size:13.5px;color:var(--paper)}
.bars__b{height:12px;border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden}
.bars__b i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--cyan-hot))}
.bars__r b{text-align:right}
.bars__r .dim{font-size:12px}
@media (max-width:560px){.cmp__r,.bars__r{grid-template-columns:1fr 50px}.cmp__bars,.bars__b{grid-column:1/-1}.bars__r .dim{display:none}}
.rk{display:flex;flex-direction:column;gap:6px}
.rk__h{margin:6px 0 2px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-hot)}
.rk__r{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.02);font-size:13.5px;color:var(--paper)}
.rk__p{display:grid;place-items:center;height:26px;border-radius:6px;background:rgba(197,156,109,.2);color:#e2c29c;font:700 12.5px var(--mono)}
.rk__p.is-top{background:rgba(63,224,168,.18);color:var(--good)}
.rk__r .dim{font-size:12px}
.stiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.stiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc__skip{margin:0;padding:10px 12px;border:1px dashed var(--edge);border-radius:10px;font-size:13px}

/* October strategy page */
.strat{list-style:none;margin:clamp(18px,2.4vw,30px) 0;padding:0;display:grid;gap:16px}
.strat__p{padding:clamp(16px,2vw,24px);border:1px solid var(--edge);border-radius:18px;background:var(--panel)}
.strat__h{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.strat__h h2{margin:0;font:700 clamp(18px,1.8vw,23px)/1.3 var(--display);color:var(--paper)}
.strat__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.strat__t h3{margin:10px 0 6px;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-hot)}
.strat__t p{margin:0;font-size:14.5px;line-height:1.6;color:var(--paper-dim)}
.strat__t ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14.5px;line-height:1.55;color:var(--paper-dim)}
.strat__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.strat__meta div{padding:10px 12px;border:1px solid var(--edge);border-radius:10px}
.strat__meta span{display:block;font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.strat__meta b{font-size:13.5px;font-weight:500;color:var(--paper)}
.fc--mini .fc__bar{padding:10px 12px;margin-bottom:10px}
.fc--mini .dash__grid{grid-template-columns:1fr}
.strat__alsoh{margin:26px 0 12px}
@media (max-width:900px){.strat__g,.strat__meta{grid-template-columns:1fr}}
.wdecks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:clamp(18px,2.4vw,30px) 0 10px}
@media (max-width:900px){.wdecks{grid-template-columns:1fr}}

/* Speed to booking (Data reports) */
.s2b{display:grid;gap:16px}
.s2b__read{border-top:0;padding:16px 18px;border:1px solid var(--edge-hot);border-radius:16px;background:rgba(247,128,79,.06);margin:0}
.s2b__tbl{max-height:none}
.s2b__tbl td,.s2b__tbl th{white-space:nowrap}

/* Sharing with the client: the NDA notice, and "See as client" for Pithy's team */
.gate__legal{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}
.rail__legal{order:99;margin:auto 22px 0;padding-top:18px;font-size:11px;line-height:1.45;color:var(--mute)}
.topbar__asclient{margin-right:10px;text-decoration:none}
@media (max-width:900px){ .rail__legal{display:none} .topbar__asclient span{display:none} }