/* Spectra marketing site: the product, drawn.
   These are not screenshots. Each is the app's own shape rebuilt in HTML and cleaned up, filled with
   example data, and animated when it scrolls into view. Tokens come from site/base.html. */

.ui{font-family:var(--body);color:var(--ink);font-size:12.5px;line-height:1.4;text-align:left;-webkit-font-smoothing:antialiased}
.ui *{box-sizing:border-box}
.ui .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500}
.ui .num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.ui .up{color:var(--good)} .ui .dn{color:var(--bad)}
.ui .later{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ui .later.show{opacity:1;transform:none}

/* ── an app window ── */
.app{position:relative;border-radius:14px;background:var(--card);box-shadow:var(--shadow-up);overflow:hidden;display:flex;flex-direction:column}
.app-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid var(--line-2);flex:none}
.app-bar>i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.app-bar .crumb{margin-left:10px;font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-bar .crumb b{color:var(--ink-2);font-weight:500}
.app-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.app-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good);animation:ui-ping 2.4s var(--ease) infinite}
@keyframes ui-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.app-body{display:grid;grid-template-columns:54px minmax(0,1fr);flex:1;min-height:0}
.app-body.norail{grid-template-columns:minmax(0,1fr)}
.rail{border-right:1px solid var(--line-2);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--card-2)}
.rail .lg{width:22px;height:22px;margin-bottom:12px;color:var(--ink)}
.rail span{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--dim)}
.rail span.on{background:var(--acc-soft);color:var(--ink)}
.rail svg{width:15px;height:15px}
.rail .ai{margin-top:10px;border:1px solid var(--line);color:var(--ice-2)}
.pg{padding:18px 20px 20px;display:grid;gap:14px;align-content:start;min-width:0}
.pg-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pg-h b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.pg-h span{font-size:11.5px;color:var(--mut)}
.fbar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--bg-2)}
.seg span{padding:4px 9px;border-radius:6px;font-size:11px;color:var(--mut);white-space:nowrap;transition:color .3s,background-color .3s,box-shadow .3s}
.seg span.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--line);border-radius:7px;font-size:11px;color:var(--ink-2);white-space:nowrap}

/* headline figures: one flush grid, hairlines between */
.kpis{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.kpi{padding:12px 14px 13px;display:grid;gap:3px;position:relative;min-width:0;transition:background-color .3s}
.kpi+.kpi{border-left:1px solid var(--line-2)}
.kpi .v{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .d{font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.kpi .d.pc{justify-self:start;padding:1px 6px;border-radius:5px;background:var(--bg-2)}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.kpi.on::before{transform:none}
.kpi.on .lbl{color:var(--ink)}

.cui{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:14px;display:grid;gap:10px;min-width:0;align-content:start}
.cui>.t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cui>.t b{font-weight:600;font-size:13px}
.cui>.t span{font-family:var(--mono);font-size:10px;color:var(--dim)}
.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}

/* bars */
.brs{display:grid;gap:9px}
.br{display:grid;grid-template-columns:minmax(64px,.9fr) minmax(0,2fr) 38px 38px;gap:10px;align-items:center;font-size:12px;color:var(--ink-2)}
.br .tr{height:8px;border-radius:2px;background:var(--line-2);overflow:hidden}
.br .f{height:100%;width:var(--w,0%);border-radius:2px;background:var(--bar-2);transition:width 1s var(--ease)}
.br.me{color:var(--ink);font-weight:600}
.br.me .f{background:var(--c,var(--ink))}
.br .tag{font-family:var(--mono);font-size:9px;padding:1px 5px;border-radius:4px;margin-left:5px;background:color-mix(in srgb,var(--c,var(--ink)) 16%,transparent);color:var(--c-ink,var(--ink));font-weight:500}
.ui:not(.in) .br .f{width:0}

/* charts, drawn by ui.js */
.ch{width:100%;height:auto;display:block;overflow:visible}
.ch .gl{stroke:var(--line);stroke-width:1}
.ch .ax{font-family:var(--mono);font-size:10px;fill:var(--mut)}
.ch .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ch .fcb{fill:color-mix(in srgb,var(--c,var(--ink)) 6%,transparent)}
.ch .fcl{fill:none;stroke-width:1.8;stroke-dasharray:4 4;stroke-linecap:round;opacity:0;transition:opacity .8s var(--ease) 1.2s}
.ui.in .ch .fcl{opacity:.9}
.ch .fct{fill:var(--c-ink,var(--mut))}
.ch .pr{fill:none;stroke:var(--mut);stroke-width:1.5;stroke-dasharray:4 3;stroke-linecap:round;opacity:0;transition:opacity .8s var(--ease) .9s}
.ch .area{opacity:0;transition:opacity 1s var(--ease) .6s}
.ch .end,.ch .endt{opacity:0;transition:opacity .4s var(--ease) 1.3s}
.ch .endt{font-family:var(--mono);font-size:10px;font-weight:600}
.ui.in .ch .ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease)}
.ui.in .ch .pr{opacity:.9}.ui.in .ch .area{opacity:1}.ui.in .ch .end,.ui.in .ch .endt{opacity:1}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:2px;border-radius:2px;background:currentColor}
.legend i.dash{background:none;border-top:2px dashed currentColor;height:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip-ui{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--ink-2)}
.chip-ui i{width:7px;height:7px;border-radius:2px}

/* spark tiles */
.sparks{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden}
.spk{padding:10px 12px 8px;display:grid;gap:2px;min-width:0}
.spk+.spk{border-left:1px solid var(--line-2)}
.spk .top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.spk .v{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em}
.spk .d{font-family:var(--mono);font-size:9.5px;padding:1px 5px;border-radius:4px;background:var(--bg-2)}

/* ── Visibility ── */
.lb{display:grid;gap:0}
.lb .r{display:grid;grid-template-columns:18px minmax(0,1fr) 44px 38px 38px;gap:8px;align-items:center;padding:7px 8px;border-radius:6px;font-size:12px;color:var(--ink-2)}
.lb .r.h{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-block:2px 6px}
.lb .r.me{background:color-mix(in srgb,var(--c,var(--good)) 11%,transparent);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--c,var(--good))}
.lb .r .you{font-family:var(--mono);font-size:9px;font-weight:500;padding:1px 5px;border-radius:4px;margin-left:6px;background:var(--c,var(--good));color:var(--on-c)}
.lb .r>span:first-child{font-family:var(--mono);color:var(--dim)}
.qt{display:grid}
.qt .r{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,34px) 34px;gap:8px;align-items:center;padding:9px 10px;border-top:1px solid var(--line-2);font-size:12px}
.qt .r.h{border-top:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);padding-block:0 6px}
.qt .r.h span{text-align:center}
.qt .q{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt .rk{justify-self:center;font-family:var(--mono);font-size:10px;font-weight:500;padding:2px 6px;border-radius:5px;background:var(--bg-2);color:var(--ink-2)}
.qt .rk.one{background:color-mix(in srgb,var(--c,var(--good)) 16%,transparent);color:var(--c-ink,var(--good))}
.qt .rk.miss{background:none;color:var(--dim)}
.qt .ap{font-family:var(--mono);font-size:11px;text-align:right;color:var(--ink-2)}
.ui:not(.in) .qt .r:not(.h){opacity:0;transform:translateY(6px)}
.qt .r{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ct{display:grid}
.ct .r{display:grid;grid-template-columns:18px minmax(0,1.2fr) 74px minmax(0,1fr) 46px;gap:10px;align-items:center;padding:8px 8px;border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-2)}
.ct .r.h{border-top:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-block:0 6px}
.ct .r>span:first-child{font-family:var(--mono);color:var(--dim)}
.ct .r.own{background:color-mix(in srgb,var(--c,var(--good)) 9%,transparent);color:var(--ink);font-weight:600}
.ct .ty{justify-self:start;font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:4px;background:var(--bg-2);color:var(--mut)}
.ct .ty.competitor{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.ct .ty.social{background:var(--acc-soft-2);color:var(--ink-2)}
.ct .ty.owned{background:var(--c,var(--good));color:var(--on-c)}
.ct .bar{height:6px;border-radius:2px;background:var(--line-2);overflow:hidden}
.ct .bar i{display:block;height:100%;width:var(--w);background:var(--bar-2);border-radius:2px;transition:width 1s var(--ease)}
.ct .r.own .bar i{background:var(--c,var(--good))}
.ui:not(.in) .ct .bar i{width:0}

/* ── the Ask panel, drawn the way the real one looks (#1405): neutral, Ice only where the AI is at work,
   no stripe down its edge and no mark in its header ── */
.askp{position:relative;border-radius:14px;background:var(--card);box-shadow:var(--shadow-up);display:flex;flex-direction:column;overflow:hidden;height:var(--mh,520px)}
.askp-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.askp-h b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em}
.askp-h .ib{margin-left:auto;display:flex;gap:6px}
.askp-h .ib i{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;color:var(--mut);font-style:normal;font-size:13px;line-height:1}
.askp-b{flex:1;min-height:0;overflow:hidden;padding:18px 18px 12px;display:flex;flex-direction:column;gap:12px;-webkit-mask-image:linear-gradient(transparent,#000 28px);mask-image:linear-gradient(transparent,#000 28px)}
.askp-b>:first-child{margin-top:auto}
.askp-c{margin:6px 14px 14px;border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px;display:flex;align-items:center;gap:10px;min-height:48px;font-size:13px;background:var(--card);box-shadow:0 1px 2px rgba(var(--sh),.04);transition:border-color .2s,box-shadow .2s}
.askp-c.typing{border-color:var(--ink-2);box-shadow:0 0 0 3px var(--acc-ring)}
.askp-c .in{flex:1;min-width:0;position:relative;line-height:1.4;overflow:hidden;white-space:nowrap}
.askp-c .ph{color:var(--dim)}
.askp-c .ty{position:absolute;inset:0;color:var(--ink);background:var(--card);white-space:nowrap;overflow:hidden;text-overflow:clip}
.askp-c .ty:empty{display:none}
.askp-c .go{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--card);display:grid;place-items:center;font-size:14px;font-weight:600;opacity:.28;transition:opacity .2s,transform .2s}
.askp-c.typing .go{opacity:1}
.askp-c.send .go{transform:scale(.86)}
/* a reply: the thinking header with its clock, the reasoning and steps under it (folded once the
   answer comes), the answer written in, then the figures */
.askp .at{display:grid;gap:9px}
.askp .at-h{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;font:inherit;font-size:12px;color:var(--mut);cursor:pointer}
.askp .at-h .at-sp{width:14px;height:14px;color:var(--ice-2);display:grid}
.askp .at-h .at-sp svg{width:14px;height:14px;display:block}
.askp .at-h>*{line-height:1}
.askp .at:not(.done) .at-h .at-sp{animation:ask-spin 1.6s linear infinite}
.askp .at:not(.done) .at-h .w{background:linear-gradient(90deg,var(--mut) 0 35%,var(--ink) 50%,var(--mut) 65% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ask-shine 1.6s linear infinite}
.askp .at-h .t{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.askp .at.done .at-h .t{display:none}
.askp .at-h::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg) translate(-1px,-2px);transition:transform .2s}
.askp .at.shut .at-h::after{transform:rotate(-45deg)}
.askp .at-h:focus-visible{outline:2px solid var(--ink-2);outline-offset:3px;border-radius:4px}
.askp .at-think{display:grid;gap:8px;margin-left:6px;padding-left:13px;border-left:1.5px solid var(--line)}
.askp .at.shut .at-think{display:none}
.askp .at-think .why{margin:0;font-size:12px;line-height:1.5;color:var(--mut)}
.askp .at-think .trl{margin-left:0}
.askp .fd{grid-template-columns:1fr;font-size:14px}
.askp .fd::before{display:none}
.askp .ans-rest{margin-left:0}
@keyframes ask-spin{to{transform:rotate(360deg)}}
@keyframes ask-shine{to{background-position:-150% 0}}
.qb{align-self:flex-end;max-width:88%;padding:9px 13px;border-radius:14px 14px 4px 14px;background:var(--acc-soft-2);color:var(--ink);font-size:12.5px;line-height:1.45;animation:ui-pop .45s var(--spring) both}
@keyframes ui-pop{from{opacity:0;transform:translateY(6px) scale(.96)}}
.trl{display:grid;gap:6px;margin-left:26px}
.trl .st{display:grid;grid-template-columns:12px 1fr;gap:9px;align-items:center;font-size:11.5px;color:var(--ink-2);animation:ui-pop .35s var(--ease) both}
.trl .st i{width:10px;height:10px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ice-2) 30%,transparent);border-top-color:var(--ice-2);animation:ui-spin .8s linear infinite}
.trl .st.done i{border:0;width:6px;height:6px;margin-left:2px;background:var(--ink-2);animation:none}
.trl .st em{font-style:normal;color:var(--dim)}
.trl .hd{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.fd{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:13.5px;line-height:1.48;font-weight:500;color:var(--ink)}
.fd::before{content:"";width:12px;height:12px;margin-top:4px;background:var(--ice-2);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.fd b{font-family:var(--mono);font-weight:500;color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);padding:0 3px;border-radius:3px}
.caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-2px;margin-left:1px;animation:ui-blink 1s steps(1) infinite}
@keyframes ui-blink{50%{opacity:0}}
.ans-rest{display:grid;gap:10px;margin-left:26px}
.tls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tl{position:relative;padding:9px 10px;border-radius:9px;background:var(--card-2);border:1px solid var(--line-2);display:grid;gap:4px;min-width:0}
.tl .lbl{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl .v{font-family:var(--mono);font-size:15px;font-weight:500;white-space:nowrap}
.tl .v.good{color:var(--good)} .tl .v.bad{color:var(--warn)}
@property --orb{syntax:'<angle>';inherits:false;initial-value:0deg}
.tl.orb{border-color:transparent;background:linear-gradient(var(--card-2),var(--card-2)) padding-box,conic-gradient(from var(--orb),var(--ice-1),var(--ice-3),var(--ice-1)) border-box;animation:ui-orb 2.4s linear 2}
@keyframes ui-orb{to{--orb:360deg}}
.ev{padding:10px 12px;border-radius:9px;background:var(--card-2);display:grid;gap:7px}
.ev .r{display:grid;grid-template-columns:minmax(58px,.7fr) minmax(0,2fr) 52px;gap:9px;align-items:center;font-size:11.5px;color:var(--mut)}
.ev .r .f{height:8px;border-radius:2px;width:var(--w);background:var(--bar-2);transform-origin:left;animation:ui-grow .9s var(--ease) both}
.ev .r.hi{color:var(--ink);font-weight:600}
.ev .r.hi .f{background:var(--ink-2)}
.ev .r .num{color:var(--ink-2)}
@keyframes ui-grow{from{transform:scaleX(0)}}
.so{font-size:11.5px;line-height:1.55;color:var(--mut)}
.so b{color:var(--ink);font-weight:600}
.nx{display:flex;gap:6px;flex-wrap:wrap}
.nx span{height:24px;padding:0 10px;border-radius:12px;display:inline-flex;align-items:center;font-size:10.5px;background:var(--acc-soft);color:var(--ink-2)}
.nx span.was{opacity:.42;cursor:default;background:var(--card-2);color:var(--mut)}
/* an alert drafted inside the panel: the Alerts composer's sentence, at panel size */
.adr{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:11px 12px;display:grid;gap:9px}
.adr .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.adr .sent{font-size:12px;line-height:1.9;color:var(--ink-2)}
.adr .sent b{font-weight:500;color:var(--ink);padding:2px 6px;border-radius:5px;border:1px dashed color-mix(in srgb,var(--ink-2) 45%,var(--line));background:var(--card-2);white-space:nowrap}
.adr .sent b.set{color:var(--ink)}
.adr .row{display:flex;gap:6px;justify-content:flex-end}
.adr .row span{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:7px;border:1px solid var(--line);font-size:11.5px;color:var(--ink-2);cursor:pointer}
.adr .row span.go{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.adr .made{font-family:var(--mono);font-size:11px;color:var(--good);text-align:right}
.adr .made.no{color:var(--mut)}

/* ── Monitor tiles ── */
.wall{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.mt{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 16px 13px;display:flex;flex-direction:column;gap:11px;min-width:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mt.over{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.mt.close{border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.mt-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mt-h b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;white-space:nowrap}
.vd::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.vd.ok{color:var(--good)} .vd.over{color:var(--bad)} .vd.close{color:var(--warn)} .vd.clear{color:var(--ink-2)}
.vd.ok::before,.vd.over::before{animation:ui-ping2 2.4s var(--ease) infinite}
@keyframes ui-ping2{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
.mt{gap:9px}
.mt-h{align-items:center}
.mt-w{margin-top:-6px;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt.clear .mt-h b{font-weight:500;color:var(--ink-2)}
/* the cells: the number you set in a tinted box, then Now (and a goal's Pacing to), one flush strip */
.mt-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mt-c.three{grid-template-columns:1.2fr 1fr 1fr}
.mt-cl{padding:9px 0;display:flex;flex-direction:column;gap:3px;min-width:0}
.mt-cl+.mt-cl{padding-left:12px;border-left:1px solid var(--line)}
.mt-cl.set{background:var(--acc-soft);border-radius:8px;padding:9px 10px;margin:4px 0}
.mt-cl.set+.mt-cl{border-left:0;padding-left:10px}
.mt-c.three .mt-cl+.mt-cl{padding-left:10px}
.mt-cl .l{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.mt-cl .v{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-c.three .mt-cl .v{font-size:16px}.mt-c.three .mt-cl.set .v{font-size:17px}
/* a drawing is often narrower than the app's narrowest tile (the hero's side column), so the three figures step down there */
.mt{container-type:inline-size}
@container (max-width:310px){.mt-c.three .mt-cl .v{font-size:14px}.mt-c.three .mt-cl.set .v{font-size:15px}.mt-c.three .mt-cl .p{font-size:10px}.mt-c.three .mt-cl.set{padding:8px 8px}}
@container (max-width:268px){.mt-c.three{grid-template-columns:1fr 1fr}.mt-c.three .mt-cl.set{grid-column:1/-1}.mt-c.three .mt-cl.set+.mt-cl{padding-left:0}}
.mt-cl .v.bad{color:var(--bad)}
.mt-cl .p{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-cl .p b{font-weight:600;color:var(--ink)}
.mt.ok .mt-cl.pace .p b{color:var(--good)}
/* the picture under the cells, with its label in a column of its own */
.mt-row{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center}
.mt-row.days{grid-template-columns:52px 1fr}
.mt-row .bl{font-family:var(--mono);font-size:9px;color:var(--dim);text-align:right;white-space:nowrap}
.mt-mk{position:relative;height:8px;margin-top:4px}
.mt-mk i{position:absolute;top:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--pace)}
/* the scope, as pills */
.mt-pills{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.mt-pills span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);background:var(--acc-soft);border-radius:6px;padding:3px 9px;line-height:1.5}
.mt-pills em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.mt-bar{position:relative;height:7px;border-radius:4px;background:var(--line-2)}
.mt-bar .fl{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:2px;background:var(--good);transform-origin:left;transition:transform 1.4s var(--ease)}
.mt-mk i{transition:opacity .4s var(--ease) 1.2s}
.ui:not(.in) .mt-bar .fl{transform:scaleX(0)} .ui:not(.in) .mt-mk i{opacity:0}
.days{display:grid;grid-template-columns:repeat(14,1fr);gap:3px}
.days i{height:9px;border-radius:2px;background:var(--line-2);transition:background-color .3s,transform .4s var(--ease)}
.days i.on{background:var(--bad)} .days i.ok{background:var(--good);opacity:.85} .days i.w{background:var(--warn)}
.ui:not(.in) .days i{transform:scaleY(.2)}

/* ── Funnel ── */
.fn{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:18px;align-items:start}
.fn svg{width:100%;height:auto;display:block}
.fn .band{transition:opacity .5s var(--ease),transform .7s var(--ease);transform-origin:50% 0}
.ui:not(.in) .fn .band{opacity:0;transform:scaleY(.4)}
.fn .bt{font-family:var(--mono);font-size:10px;font-weight:500}
.fn .sl{font-size:10.5px;fill:var(--mut)}
.fn .sv{font-family:var(--mono);font-size:10px;fill:var(--ink-2)}
.callout{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:8px;padding:10px 12px;display:grid;gap:4px;font-size:11.5px;color:var(--mut);line-height:1.5}
.callout b{color:var(--ink);font-size:12px}
.callout em{font-style:normal;color:var(--warn);font-weight:600}

/* ── Slack, a draft, a decline ── */
.convo{border-radius:14px;background:var(--card);box-shadow:var(--shadow-up);padding:18px;display:flex;flex-direction:column;gap:12px}
.convo .hob-q{max-width:82%}

/* phone: replicas keep their shape and drop columns */
@media (max-width:720px){
  .app-body{grid-template-columns:minmax(0,1fr)} .rail{display:none}
  .two,.fn{grid-template-columns:minmax(0,1fr)}
  .kpis{--n:2!important}.kpi:nth-child(3){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--line-2)}
  .sparks{--n:2!important}.spk:nth-child(3){border-left:0}.spk:nth-child(n+3){border-top:1px solid var(--line-2)}
  .wall{grid-template-columns:minmax(0,1fr)!important}
  .qt .r{grid-template-columns:minmax(0,1fr) repeat(2,34px) 34px}.qt .r>:nth-child(4),.qt .r>:nth-child(5){display:none}
  .ct .r{grid-template-columns:18px minmax(0,1fr) 70px 46px}.ct .r>:nth-child(4){display:none}
  .pg{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .ui *,.ui *::before{animation:none!important;transition:none!important}
  .ui .later{opacity:1;transform:none}
}

/* ── pointing: one tooltip, a crosshair on every chart, and rows that answer ── */
.ui-tip{position:fixed;z-index:120;pointer-events:none;display:grid;gap:3px;min-width:120px;max-width:260px;padding:8px 10px;border-radius:8px;
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:10.5px;line-height:1.45;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s}
.ui-tip.show{opacity:1;transform:none}
.ui-tip b{font-weight:500;opacity:.65;letter-spacing:.02em}
.ui-tip .r{display:flex;align-items:center;gap:7px}
.ui-tip .r i{width:10px;height:2px;border-radius:2px;flex:none}
.ui-tip .r i.dash{border-top:2px dashed currentColor;height:0;opacity:.6}
.ui-tip .r em{font-style:normal;margin-left:auto;padding-left:14px;font-weight:600}
.ch .hit{cursor:crosshair}
.ch .xh{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3;opacity:0;transition:opacity .15s}
.ch .xd{opacity:0;stroke:var(--card);stroke-width:1.6;transition:opacity .15s}
.ch.hov .xh{opacity:.7}.ch.hov .xd{opacity:1}
.br,.ev .r,.qt .r:not(.h),.ct .r:not(.h),.lb .r:not(.h){border-radius:6px;transition:background-color .18s}
.br{margin-inline:-6px;padding:3px 6px;cursor:default}
.br:hover,.ev .r:hover,.qt .r:not(.h):hover,.ct .r:not(.h):hover{background:var(--line-2)}
.br:hover .f{filter:brightness(.92) saturate(1.15)}
.kpi[data-tab]{cursor:pointer}
.kpi[data-tab]:not(.on):hover{background:var(--card-2)}
.tl{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tl:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.nx span{cursor:pointer;transition:background-color .2s}
.nx span:hover{background:var(--acc-soft-2)}
.days i{cursor:default}.days i:hover{transform:scaleY(1.3)}
.fn .band{cursor:default}.fn .band:hover path{filter:brightness(.94)}
.mt:hover{transform:translateY(-2px);box-shadow:0 0 0 4px var(--line-2),var(--shadow)}
.seg span[data-eng]:not(.on):hover{color:var(--ink)}

/* ── every control in a replica answers: a pointer, a hover, a neutral focus ring ── */
.ui .pr-on{cursor:pointer}
.ui .pr-on:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px;border-radius:6px}
.seg span.pr-on:not(.on):hover{color:var(--ink);background:color-mix(in srgb,var(--card) 60%,transparent)}
.kpi.pr-on:not(.on):hover{background:var(--card-2)}
.br[data-brand]{will-change:transform}
/* Questions: a row opens in place to what the engines said */
.qt .qd{grid-column:1/-1;display:none;font-size:11.5px;line-height:1.45;color:var(--mut);padding:2px 0 2px}
.qt .r.open{background:var(--line-2)}
.qt .r.open .qd{display:block}
.qt .r[hidden]{display:none}
.seg .c{font-weight:500;font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-left:2px}
.seg .on .c{color:inherit}
/* Citations: a type tile is a filter; the rows it holds back go */
.ct .r[hidden]{display:none}
.ct .ty.pr-on:hover{filter:brightness(.95)}
/* AI Marketer's smaller surfaces */
.convo[data-trail].pr-on:hover{box-shadow:0 0 0 1px var(--line),var(--shadow-up)}
.inpage .kpi.pr-on:not(.on):hover{background:var(--card-2)}
/* Analytics' smaller surfaces */
.spk.pr-on:hover{background:var(--card-2)}
.spk.on{box-shadow:inset 0 2px 0 var(--ink)}
.spk.on .lbl{color:var(--ink)}
.chip-ui.pr-on{transition:opacity .2s,border-color .2s}
.chip-ui.pr-on:not(.on){opacity:.45;text-decoration:line-through}
.chip-ui.pr-on:hover{border-color:var(--ink-2)}
.fn .band.sel path{stroke:var(--ink-2);stroke-width:1.5}
.fn .band:focus-visible{outline:none}.fn .band:focus-visible path{stroke:var(--ink-2);stroke-width:2}
.fcap{font-size:11.5px;color:var(--mut);line-height:1.5;padding:2px 4px}
.fcap b{color:var(--ink);font-weight:600}.fcap em{font-style:normal;color:var(--warn);font-weight:600}
.mt[hidden]{display:none}
.days i.pr-on{cursor:pointer}
.days i.sel{outline:1.5px solid var(--ink-2);outline-offset:1px}
.fn .band:focus{outline:none}
/* a leaderboard that carries the "you" tag gives every row's name column the room for it, so the
   tag never runs under the bar and every bar still starts at one edge */
.brs:has(.tag) .br{grid-template-columns:104px minmax(0,2fr) 38px 0;column-gap:10px}
.br>span:first-child{white-space:nowrap;display:flex;align-items:center;min-width:0}
.br .tag{flex:none}

/* ── Budget planner (the report) ── */
.pl-bud{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.pl-bud .lbl{font-size:11.5px;color:var(--mut)}
.pl-bud input{accent-color:var(--ink);width:100%}
.pl-bud b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pl-k{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.pl-k>div{display:grid;gap:3px}
.pl-k span{font-size:11px;color:var(--mut)}
.pl-k b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pl-k .seg span{font-size:11px}
.pl-leg{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--mut)}
.pl-leg span{display:inline-flex;align-items:center;gap:6px}.pl-leg i{width:7px;height:7px;border-radius:2px}
.pl-leg .dot{color:var(--dim)}
[data-plchart]{width:100%;height:auto;display:block;overflow:visible}
[data-plchart] .pd{cursor:pointer;transition:cx .35s var(--ease),cy .35s var(--ease)}


/* ── The hero dashboard: spend by channel with a forecast, a goal and an alert, and a Customize door ── */
.hdash .pg-h .hd-cust{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:11.5px;color:var(--ink-2);transition:box-shadow .3s var(--ease),border-color .3s}
.hdash .pg-h .hd-cust svg{width:13px;height:13px}
.hdash .hd-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:stretch}
.hdash .hd-side{display:grid;gap:10px;align-content:start;transition:box-shadow .3s var(--ease);border-radius:12px}
.hdash .hd-main{transition:box-shadow .3s var(--ease)}
.hdash .hd-side .mt{padding:11px 12px;gap:8px}
.hdash .legend{display:flex;gap:10px;flex-wrap:wrap}
.hdash .legend span{display:inline-flex;align-items:center;gap:5px}
.hdash .legend i{width:8px;height:8px;border-radius:2px}
@media (max-width:700px){.hdash .hd-row{grid-template-columns:minmax(0,1fr)}}

/* ── An isometric plate (ui.plate): the drawer's layer ── */
.pl{transition:opacity .4s}
.pl .top{fill:var(--card);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round;transition:stroke .35s}
.pl .sd{fill:var(--card-2);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.pl .sd.r{fill:var(--bg-2)}
.pl .glow{opacity:0;transition:opacity .45s}
.pl.lit .glow{opacity:1}

/* ── AI Marketer: a conversation in the app (the AI Marketer page's hero) ──
   One quiet app window — title bar, a sidebar of skeleton rows, the earlier chats grayed, a TODAY
   divider — in which a conversation plays itself on a 16-second CSS loop. Every rule is prefixed
   .acv-; every keyframe acv-. The colors are the site's tokens, mapped from the approved mock:
   the window is --card, the sidebar and the side panel --bg-2, a skeleton row and your bubble
   --acc-soft, a chip --acc-soft-2, a tile --card-2, the one solid button --ink on --on-ink.
   The loop runs only while ui.js has given the window .acv-play (on screen) and not .acv-hold
   (under the pointer); under reduced motion it holds the story's last frame. */
.acv{--acv-sk:var(--acc-soft);--acv-bub:var(--acc-soft);--acv-chip:var(--acc-soft-2);--acv-tile:var(--card-2);--acv-side:var(--bg-2);width:min(100%,1080px);margin-inline:auto;font-size:13px;line-height:1.45}
.acv-win{height:640px;display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-up)}
.acv b{font-weight:600}
.acv i{font-style:normal}
.acv-sk{display:block;height:8px;border-radius:4px;background:var(--acv-sk)}
.acv-cap{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.acv-tb{height:34px;flex:none;position:relative;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--line)}
.acv-tls{display:flex;gap:6px}
.acv-tls i{width:10px;height:10px;border-radius:50%;background:#E5675C}.acv-tls i:nth-child(2){background:#E3B341}.acv-tls i:nth-child(3){background:#5DBB63}
.acv-tt{position:absolute;left:0;right:0;text-align:center;font-size:11.5px;font-weight:600;color:var(--mut);pointer-events:none}
.acv-body{flex:1;display:flex;min-height:0}
/* the sidebar */
.acv-side{width:212px;flex:none;background:var(--acv-side);border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:14px}
.acv-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
.acv-sw{display:flex;padding:3px;gap:3px;background:var(--acv-tile);border:1px solid var(--line);border-radius:8px;font-size:11px}
.acv-sw span{flex:1;text-align:center;padding:5px 0;border-radius:6px}
.acv-sw-on{position:relative;overflow:hidden;font-weight:600;background:var(--ink);color:var(--card)}
.acv-sw-on i{position:absolute;left:0;top:0;bottom:0;width:3px;background:#5B8DEF}
.acv-sw-off{font-weight:500;color:var(--mut)}
.acv-nav{display:flex;flex-direction:column;gap:2px}
.acv-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;background:var(--acv-tile);border:1px solid var(--line);font-size:12px;font-weight:600}
.acv-mark{display:block;flex:none;color:var(--ink)}
.acv-recent{display:flex;flex-direction:column;gap:4px;padding:6px 8px 6px 33px}
.acv-recent .acv-sk{height:7px;margin:4px 0}
.acv-rec{font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acv-side>.acv-cap{padding:0 8px}
.acv-skl{display:flex;flex-direction:column;gap:12px;padding:0 8px}
.acv-skl>div,.acv-user{display:flex;gap:9px;align-items:center}
.acv-skl .acv-sk{height:7px}
.acv-ico{width:14px;height:14px!important}
.acv-ava{width:22px;height:22px!important;border-radius:50%;flex:none}
.acv-user{margin-top:auto;padding:0 8px}.acv-user .acv-sk{height:7px}
/* the chat */
.acv-main{flex:1;min-width:0;display:flex;flex-direction:column}
.acv-hd{height:46px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px}
.acv-ttl{position:relative;height:18px;flex:1;min-width:0}
.acv-ttl>span{position:absolute;inset:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acv-t1{font-size:13px;font-weight:600}.acv-t2{font-size:13px;color:var(--dim)}
.acv-hdbtn{width:64px;height:22px!important;border-radius:6px;flex:none}
.acv-chat{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 32px 6px}
/* the thread outgrows the window as the answer lands, so the EARLIER chats give way — clipped at
   the top, as a chat scrolls — and never the bubble or the answer (flex-shrink:0 on both) */
.acv-hist{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;min-height:0;overflow:hidden}
.acv-today,.acv-ub,.acv-ai{flex-shrink:0}
.acv-hrow{display:flex;gap:10px;align-items:flex-start}
.acv-hrow>div{flex:1;display:flex;flex-direction:column;gap:7px}
.acv-hq{display:flex;justify-content:flex-end}.acv-hq .acv-sk{height:26px;border-radius:10px}
.acv-today{display:flex;align-items:center;gap:12px;margin-top:20px}.acv-today i{flex:1;height:1px;background:var(--line)}
.acv-ub{display:flex;justify-content:flex-end}
.acv-bub{max-width:70%;background:var(--acv-bub);border-radius:12px;padding:9px 13px;font-size:13px;line-height:1.45}
.acv-ai{display:flex;gap:11px;align-items:flex-start}
.acv-av{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.acv-av2{width:22px;height:22px}
.acv-aib{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.acv-who{display:flex;align-items:center;gap:8px;height:20px;font-size:12.5px}
.acv-st{position:relative;height:16px;width:140px}
.acv-st>span{position:absolute;inset:0;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);white-space:nowrap}
.acv-thought{gap:5px}
.acv-spin{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line);border-top-color:var(--mut);flex:none;animation:acv-spin .9s linear infinite}
.acv-steps{display:flex;flex-direction:column;gap:6px;padding-left:2px}
.acv-steps>div{display:flex;align-items:center;gap:8px;font-size:12px}
.acv-steps em{font-style:normal;color:var(--dim)}
.acv-dot{width:7px;height:7px;border-radius:50%;background:var(--mut);border:1px solid var(--mut);flex:none}
.acv-ans{font-size:14px;line-height:1.5;max-width:560px}
.acv-ans code{font-family:var(--mono);font-weight:500;font-size:13px;padding:1px 5px;border-radius:5px;background:var(--acv-chip)}
.acv-tiles{display:flex;gap:8px;max-width:560px}
.acv-tiles>div{flex:1 1 0;min-width:0;background:var(--acv-tile);border:1px solid var(--line);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:5px}
.acv-tiles b,.acv-br b,.acv-cells b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.acv-tiles b{font-size:16px}
.acv-good{color:var(--good)}.acv-bad{color:var(--bad)}
.acv-bars{max-width:560px;background:var(--acv-tile);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.acv-br{display:flex;align-items:center;gap:10px;font-size:11.5px}
.acv-br>span{width:62px;flex:none;color:var(--mut)}.acv-lead>span{color:var(--ink);font-weight:600}
.acv-br>div{flex:1;height:6px}
.acv-br i{display:block;height:6px;border-radius:3px;background:var(--dim)}
.acv-hi{background:var(--ink-2)}
.acv-bw1{width:42%}.acv-bw2{width:55%}.acv-bw3{width:70%}
.acv-br b{width:46px;text-align:right;font-size:11px;flex:none}
.acv-chips{display:flex;gap:6px;flex-wrap:wrap}
.acv-chips>span{font-size:11.5px;padding:5px 10px;border-radius:12px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.acv-comp{flex:none;padding:10px 32px 18px}
.acv-box{border:1px solid var(--line);border-radius:12px;background:var(--acv-tile);padding:11px 12px 9px 14px;display:flex;flex-direction:column;gap:10px}
.acv-line{position:relative;height:18px;font-size:13px}
.acv-line>span{position:absolute;inset:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acv-ph{color:var(--dim)}
.acv-type{opacity:0;color:var(--ink)}
.acv-caret{display:inline-block;width:1.5px;height:14px;margin-left:2px;vertical-align:-2px;background:var(--ink);animation:acv-caret 1s steps(1) infinite}
.acv-foot{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:11px}
.acv-foot svg{flex:none}
.acv-send{margin-left:auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--acv-chip);color:var(--dim);flex:none}
/* the side panel: the drafted alert */
.acv-panel{flex:none;width:344px;overflow:hidden}
.acv-pin{width:344px;height:100%;border-left:1px solid var(--line);background:var(--acv-side);display:flex;flex-direction:column}
.acv-phd{height:46px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px;font-size:12.5px;color:var(--mut)}
.acv-phd b{color:var(--ink)}.acv-phd .acv-cap{margin-left:4px}.acv-x{margin-left:auto;color:var(--dim);font-size:14px}
.acv-pbody{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0}
.acv-pq{display:flex;justify-content:flex-end}.acv-pq .acv-bub{max-width:none;padding:8px 12px;font-size:12.5px}
.acv-pai{display:flex;gap:9px;align-items:flex-start}
.acv-pwho{font-size:12px}
.acv-chk{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim)}
.acv-card{display:flex;flex-direction:column;gap:10px}
.acv-card p{margin:0;font-size:12.5px;line-height:1.5}
.acv-alert{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:11px}
.acv-ah{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px}
.acv-over{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--bad)}.acv-over i{width:6px;height:6px;border-radius:50%;background:var(--bad)}
.acv-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.acv-cells>div{padding:8px 0 8px 10px;display:flex;flex-direction:column;gap:4px}
.acv-cells>div:first-child{padding:8px 10px;margin:4px 0;border-radius:8px;background:var(--acc-soft)}  /* the number you set, in its tinted cell, as the app draws it */
.acv-cells b{font-size:15px}
.acv-days{display:flex;align-items:center;gap:8px}.acv-days>.acv-cap{width:44px;flex:none}
.acv-days>div{flex:1;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:2px}
.acv-days i{display:block;height:9px;border-radius:2px;background:var(--acv-sk)}.acv-days i.acv-hit{background:var(--bad)}
.acv-pills{display:flex;gap:6px;flex-wrap:wrap}.acv-pills span{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 9px;border-radius:6px;background:var(--acc-soft);color:var(--ink-2)}
.acv-pills em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.acv-when{margin-top:-7px;font-size:11px;color:var(--ink-2)}
.acv-sub{font-size:10.5px;color:var(--dim)}
.acv-btns{display:flex;gap:8px}
.acv-press{font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;background:var(--ink);color:var(--on-ink)}
.acv-ghost{font-size:12px;padding:7px 14px;border-radius:8px;border:1px solid var(--line);color:var(--mut)}
.acv-done{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--good)}
.acv-pcomp{padding:10px 16px 18px}
.acv-reply{flex-direction:row;align-items:center;justify-content:space-between;padding:11px 12px;font-size:12.5px;color:var(--dim)}
.acv-reply .acv-send{width:24px;height:24px;margin:0}
/* the story, 16 seconds: type · send · think · answer · press the follow-up · the draft opens beside · create · rest */
.acv-an{animation-duration:16s;animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:paused}
.acv-play:not(.acv-hold) .acv-an,.acv-play:not(.acv-hold) .acv-spin,.acv-play:not(.acv-hold) .acv-caret{animation-play-state:running}
.acv-spin,.acv-caret{animation-play-state:paused}
.acv-ph{animation-name:acv-ph}.acv-type{animation-name:acv-type;animation-timing-function:steps(46)}
.acv-send.acv-an{animation-name:acv-send}.acv-t1{animation-name:acv-t1}.acv-t2{animation-name:acv-t2}
.acv-ub{animation-name:acv-ub;overflow:hidden}.acv-ai{animation-name:acv-ai;overflow:hidden}
.acv-steps{animation-name:acv-steps;overflow:hidden}.acv-s1{animation-name:acv-s1}.acv-s2{animation-name:acv-s2}.acv-s3{animation-name:acv-s3}
.acv-d1{animation-name:acv-d1}.acv-d2{animation-name:acv-d2}
.acv-think{animation-name:acv-think}.acv-thought{animation-name:acv-thought}
.acv-ans{animation-name:acv-ans}.acv-tiles{animation-name:acv-tiles}.acv-bars{animation-name:acv-bars}
.acv-bw1{animation-name:acv-bw1}.acv-bw2{animation-name:acv-bw2}.acv-bw3{animation-name:acv-bw3}
.acv-chips{animation-name:acv-chips}.acv-chip{animation-name:acv-chip}
.acv-panel{animation-name:acv-panel}.acv-p1{animation-name:acv-p1}
.acv-chk{animation-name:acv-chk;overflow:hidden}.acv-card{animation-name:acv-card}
.acv-press{animation-name:acv-press}.acv-btns{animation-name:acv-btns;overflow:hidden}.acv-done{animation-name:acv-done;overflow:hidden}
.acv-rec{animation-name:acv-rec;overflow:hidden}
@keyframes acv-ph{0%,6%{opacity:1}6.3%,22.4%{opacity:0}22.6%,100%{opacity:1}}
@keyframes acv-type{0%,6.25%{clip-path:inset(0 100% 0 0);opacity:1}21%,22.4%{clip-path:inset(0 0 0 0);opacity:1}22.5%,100%{clip-path:inset(0 100% 0 0);opacity:0}}
@keyframes acv-send{0%,6%{background:var(--acv-chip);color:var(--dim)}6.5%,22.3%{background:var(--ink);color:var(--on-ink)}22.6%,100%{background:var(--acv-chip);color:var(--dim)}}
@keyframes acv-t1{0%,23%{opacity:1}24.5%,93%{opacity:0}96%,100%{opacity:1}}
@keyframes acv-t2{0%,23%{opacity:0}24.5%,93%{opacity:1}96%,100%{opacity:0}}
@keyframes acv-ub{0%,22.5%{max-height:0;opacity:0;margin-top:0}24%{max-height:60px;opacity:1;margin-top:16px}91%{max-height:60px;opacity:1;margin-top:16px}96%,100%{max-height:0;opacity:0;margin-top:0}}
@keyframes acv-ai{0%,25%{max-height:0;opacity:0;margin-top:0}27%{max-height:96px;opacity:1;margin-top:16px}41.5%{max-height:96px}44.5%{max-height:380px}91%{max-height:380px;opacity:1;margin-top:16px}96%,100%{max-height:0;opacity:0;margin-top:0}}
@keyframes acv-steps{0%,25%{max-height:0;opacity:0}27%,41.5%{max-height:72px;opacity:1}44%,100%{max-height:0;opacity:0}}
@keyframes acv-s1{0%,28%{opacity:0;transform:translateX(-4px)}30%,100%{opacity:1;transform:none}}
@keyframes acv-s2{0%,33%{opacity:0;transform:translateX(-4px)}35%,100%{opacity:1;transform:none}}
@keyframes acv-s3{0%,38%{opacity:0;transform:translateX(-4px)}40%,100%{opacity:1;transform:none}}
@keyframes acv-d1{0%,33%{background:transparent}33.5%,100%{background:var(--mut)}}
@keyframes acv-d2{0%,38%{background:transparent}38.5%,100%{background:var(--mut)}}
@keyframes acv-think{0%,42%{opacity:1}42.5%,100%{opacity:0}}
@keyframes acv-thought{0%,42%{opacity:0}42.5%,100%{opacity:1}}
@keyframes acv-ans{0%,42.5%{opacity:0;transform:translateY(6px)}45.5%,100%{opacity:1;transform:none}}
@keyframes acv-tiles{0%,44%{opacity:0;transform:translateY(6px)}47%,100%{opacity:1;transform:none}}
@keyframes acv-bars{0%,45.5%{opacity:0;transform:translateY(6px)}48.5%,100%{opacity:1;transform:none}}
@keyframes acv-bw1{0%,46%{width:0}50%,100%{width:42%}}
@keyframes acv-bw2{0%,46.5%{width:0}50.5%,100%{width:55%}}
@keyframes acv-bw3{0%,47%{width:0}51%,100%{width:70%}}
@keyframes acv-chips{0%,47.5%{opacity:0}49.5%,100%{opacity:1}}
@keyframes acv-chip{0%,51%{background:transparent;border-color:var(--line);color:var(--mut)}52%,55%{background:var(--acv-chip);border-color:var(--dim);color:var(--ink)}57%,100%{background:transparent;border-color:var(--line);color:var(--mut)}}
@keyframes acv-panel{0%,54%{width:0}58%,91%{width:344px}96%,100%{width:0}}
@keyframes acv-p1{0%,57%{opacity:0;transform:translateY(6px)}60%,100%{opacity:1;transform:none}}
@keyframes acv-chk{0%,60.5%{opacity:0;max-height:0}62%,67%{opacity:1;max-height:24px}68.5%,100%{opacity:0;max-height:0}}
@keyframes acv-card{0%,68%{opacity:0;transform:translateY(8px)}70.5%,100%{opacity:1;transform:none}}
@keyframes acv-press{0%,76.5%{transform:none}77.5%{transform:scale(.94)}78.5%,100%{transform:none}}
@keyframes acv-btns{0%,79%{opacity:1;max-height:44px}80.5%,100%{opacity:0;max-height:0}}
@keyframes acv-done{0%,80%{opacity:0;max-height:0}82%,100%{opacity:1;max-height:30px}}
@keyframes acv-rec{0%,45%{opacity:0;max-height:0}47%,93%{opacity:1;max-height:28px}96%,100%{opacity:0;max-height:0}}
@keyframes acv-spin{to{transform:rotate(360deg)}}
@keyframes acv-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* reduced motion: the story's last frame, held still */
@media (prefers-reduced-motion:reduce){
  .acv-an,.acv-spin,.acv-caret{animation:none!important}
  .acv-type,.acv-chk,.acv-btns,.acv-st>.acv-think,.acv-steps,.acv-t1{display:none}
  .acv-ub,.acv-ai{margin-top:16px}
}
/* a tablet drops the sidebar; a phone drops the side panel too, so the chat keeps its width, and
   the window stands shorter with the chat's gutters pulled in */
@media (max-width:980px){ .acv-side{display:none} }
@media (max-width:640px){
  .acv-panel{display:none}
  .acv-win{height:600px}
  .acv-chat{padding:0 16px 6px}.acv-comp{padding:10px 16px 16px}.acv-hd{padding:0 16px}
  .acv-hist{gap:14px}
  .acv-bub{max-width:88%}
  .acv-tiles{gap:6px}.acv-tiles>div{padding:8px 9px}.acv-tiles b{font-size:14px}
  .acv-st{width:120px}
}

/* ── the homepage's middle window (_ui.html home_chat): AI Marketer answering three questions.
   Every class is .hob-, every keyframe hob-. One 18-second story, no pauses: each question types in
   while the last answer settles, and the thread scrolls the moment it is sent. Question one reads
   Analytics, two reads AI Insights, three reads both. The base styles are the LAST frame, so reduced motion
   (no animation) holds the finished conversation; the loop runs only while ui.js has given the
   block .acv-play and not .acv-hold (initConvo, through data-aconvo). ── */
.hob{font-size:12.5px}
.hob b{font-weight:600}.hob i{font-style:normal}
.hob-sw{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--c,var(--dim));flex:none}
.hob-win{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-up)}
.hob-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hob-tile{background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:4px;min-width:0}
.hob-tile.hi{border-color:var(--dim)}
.hob-cap9{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.hob-m{font-family:var(--mono);font-weight:500;font-size:15px}
.hob-m.up{color:var(--good)}
.hob-row{display:grid;grid-template-columns:76px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:5px 0}
.hob-bar{display:block;height:6px;border-radius:3px;background:var(--acc-soft-2)}
.hob-bar.me{background:var(--ink)}
.hob-you{font-weight:600;color:var(--ink)}
.hob-n{font-family:var(--mono);font-size:10.5px;text-align:right}
/* the chat */
.hob-chat{height:620px;display:flex;flex-direction:column}
.hob-hd{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px;border-bottom:1px solid var(--line);font-size:13.5px}
.hob-feed{flex:1;position:relative;overflow:hidden}
.hob-thr{position:absolute;left:20px;right:20px;top:120px;display:flex;flex-direction:column;transform:translateY(-640px)}
.hob-turn{height:320px;flex:none;overflow:hidden;display:flex;flex-direction:column;gap:11px}
.hob-o1,.hob-o2{opacity:.3}
.hob-q{align-self:flex-end;max-width:330px;padding:10px 14px;border-radius:12px 12px 4px 12px;background:var(--acc-soft);font-size:13.5px}
.hob-th{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--dim);overflow:hidden;opacity:0;max-height:0}
.hob-th>span:not(.hob-st){padding-left:18px}
.hob-st{display:flex;align-items:center;gap:8px;color:var(--mut)}
.hob-spin{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--acc-soft-2);border-top-color:var(--mut);animation:hob-spin .9s linear infinite paused}
.hob-ans{margin:0;font-size:15px;line-height:1.5;font-weight:500}
.hob-ans code{font-family:var(--mono);font-weight:500;font-size:13.5px;padding:1px 5px;border-radius:5px;background:var(--acc-soft-2)}
.hob-more{display:flex;flex-direction:column;gap:10px}
.hob-rows{gap:0;padding:4px 12px}
.hob-plan{border:1px solid var(--line);border-radius:8px;background:var(--card-2)}
.hob-plan>div{display:flex;align-items:baseline;gap:12px;padding:11px 13px;font-size:12.5px}
.hob-plan>div+div{border-top:1px solid var(--line)}
.hob-plan>div>span:nth-child(2){flex:1}
.hob-k{font-family:var(--mono);font-size:10px;color:var(--dim)}
.hob-src{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.hob-comp{position:relative;flex:none;height:48px;margin:0 14px 14px;display:flex;align-items:center;padding:0 8px 0 15px;border:1px solid var(--line);border-radius:12px;font-size:13px}
.hob-ph{position:absolute;left:15px;color:var(--dim)}
.hob-ty{position:absolute;left:15px;right:52px;white-space:nowrap;overflow:hidden;opacity:0}
.hob-send{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft-2);color:var(--dim)}
/* the story, 22 seconds */
.hob-an-x{animation-duration:18s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:ease;animation-play-state:paused}
.acv-play:not(.acv-hold) .hob-an-x,.acv-play:not(.acv-hold) .hob-spin{animation-play-state:running}
@keyframes hob-thr{0%,33.8%{transform:translateY(0);opacity:1}35%,63.3%{transform:translateY(-320px);opacity:1}64.5%,95%{transform:translateY(-640px);opacity:1}96.5%{transform:translateY(-640px);opacity:0}97.5%,100%{transform:translateY(0);opacity:0}}
@keyframes hob-q1{0%,6.5%{opacity:0;transform:translateY(6px)}7.3%,100%{opacity:1;transform:none}}
@keyframes hob-q2{0%,33.8%{opacity:0;transform:translateY(6px)}34.6%,100%{opacity:1;transform:none}}
@keyframes hob-q3{0%,63.3%{opacity:0;transform:translateY(6px)}64.1%,100%{opacity:1;transform:none}}
@keyframes hob-o1{0%,33.8%{opacity:1}35%,100%{opacity:.3}}
@keyframes hob-o2{0%,63.3%{opacity:1}64.5%,100%{opacity:.3}}
@keyframes hob-th1{0%,7.3%{opacity:0;max-height:0}8%,12.5%{opacity:1;max-height:90px}13.3%,100%{opacity:0;max-height:0}}
@keyframes hob-th2{0%,34.6%{opacity:0;max-height:0}35.3%,39.8%{opacity:1;max-height:90px}40.6%,100%{opacity:0;max-height:0}}
@keyframes hob-th3{0%,64.1%{opacity:0;max-height:0}64.8%,69.3%{opacity:1;max-height:90px}70.1%,100%{opacity:0;max-height:0}}
@keyframes hob-a1{0%,13%{opacity:0;transform:translateY(6px)}14.3%,100%{opacity:1;transform:none}}
@keyframes hob-x1{0%,14.5%{opacity:0;transform:translateY(6px)}15.8%,100%{opacity:1;transform:none}}
@keyframes hob-a2{0%,40.3%{opacity:0;transform:translateY(6px)}41.6%,100%{opacity:1;transform:none}}
@keyframes hob-x2{0%,41.8%{opacity:0;transform:translateY(6px)}43.1%,100%{opacity:1;transform:none}}
@keyframes hob-a3{0%,69.8%{opacity:0;transform:translateY(6px)}71.1%,100%{opacity:1;transform:none}}
@keyframes hob-x3{0%,71.3%{opacity:0;transform:translateY(6px)}72.6%,100%{opacity:1;transform:none}}
@keyframes hob-ph{0%,.8%{opacity:1}1%,6.6%{opacity:0}6.8%,28%{opacity:1}28.2%,33.9%{opacity:0}34.1%,57.5%{opacity:1}57.7%,63.4%{opacity:0}63.6%,100%{opacity:1}}
@keyframes hob-t1{0%,.8%{clip-path:inset(0 100% 0 0);opacity:1}6.2%,6.6%{clip-path:inset(0 0 0 0);opacity:1}6.7%,100%{opacity:0}}
@keyframes hob-t2{0%,28%{opacity:0;clip-path:inset(0 100% 0 0)}28.1%{opacity:1;clip-path:inset(0 100% 0 0)}33.5%,33.9%{opacity:1;clip-path:inset(0 0 0 0)}34%,100%{opacity:0}}
@keyframes hob-t3{0%,57.5%{opacity:0;clip-path:inset(0 100% 0 0)}57.6%{opacity:1;clip-path:inset(0 100% 0 0)}62.6%,63.4%{opacity:1;clip-path:inset(0 0 0 0)}63.5%,100%{opacity:0}}
@keyframes hob-send{0%,.8%{background:var(--acc-soft-2);color:var(--dim)}1%,6.6%{background:var(--ink);color:var(--on-ink)}6.8%,28%{background:var(--acc-soft-2);color:var(--dim)}28.2%,33.9%{background:var(--ink);color:var(--on-ink)}34.1%,57.5%{background:var(--acc-soft-2);color:var(--dim)}57.7%,63.4%{background:var(--ink);color:var(--on-ink)}63.6%,100%{background:var(--acc-soft-2);color:var(--dim)}}
@keyframes hob-spin{to{transform:rotate(360deg)}}
.hob-thr{animation-name:hob-thr}
.hob-q1{animation-name:hob-q1}.hob-q2{animation-name:hob-q2}.hob-q3{animation-name:hob-q3}
.hob-o1{animation-name:hob-o1}.hob-o2{animation-name:hob-o2}
.hob-th1{animation-name:hob-th1}.hob-th2{animation-name:hob-th2}.hob-th3{animation-name:hob-th3}
.hob-a1{animation-name:hob-a1}.hob-x1{animation-name:hob-x1}.hob-a2{animation-name:hob-a2}.hob-x2{animation-name:hob-x2}.hob-a3{animation-name:hob-a3}.hob-x3{animation-name:hob-x3}
.hob-ph{animation-name:hob-ph}.hob-t1{animation-name:hob-t1;animation-timing-function:steps(40)}.hob-t2{animation-name:hob-t2;animation-timing-function:steps(42)}.hob-t3{animation-name:hob-t3;animation-timing-function:steps(32)}
.hob-send{animation-name:hob-send}
@media (prefers-reduced-motion:reduce){ .hob-an-x,.hob-spin{animation:none!important} }
/* a phone: the chat stands a little shorter, its gutters pulled in */
@media (max-width:700px){
  .hob-chat{height:560px}
  .hob-thr{left:14px;right:14px;top:96px}
  .hob-ans{font-size:14px}
  .hob-q{font-size:13px}
}