/* ============================================================ design tokens
DARK NEON — near-black canvas, bone text, lime-green (#321847) primary accent
with vibrant red (#f9100c) as the secondary. Soft-serif display, hairline
rules, ZERO corner radius. The whole look is driven from here. */
:root{
--bg:#f4f1f7; --surface:#fcfbfd; --surface-2:#eeebf4; --sidebar:#f4f1f7;
--ink:#241730; --ink-soft:#4a4258; --muted:#6f6980;
--line:#e3deea; --line-soft:#eae4f1;
--rule:#241730; /* editorial emphasis hairline */
--accent:#321847; --accent-ink:#321847; --accent-tint:#e9e2f4; --accent-2:#6a4a8a; --accent-3:#c9c2d4;
--primary:#321847; --primary-fg:#f7f4f8;
/* --faint is the DISABLED/EMPTY tone only (2.5:1). Never use it for real
content — "not reviewed yet" must not look like a value. Content that
happens to be quiet uses --muted (4.7:1), which passes. */
--faint:#a49eb0;
/* --warn/--bad are fills and tints. As *text* they fail WCAG badly (1.8:1 and
3.1:1), and as ring arcs they fail 3:1 against the track — so anything that
draws them as type or as a meaningful shape uses the -text pair instead.
The two are also separated in lightness, not just hue, so the score bands
stay tellable apart without colour vision. */
--ok:#4a7a2e; --warn:#f5a623; --warn-text:#8f6200; --bad:#f15153; --bad-text:#96241f;
/* the same two hues for use ON DARK grounds (the violet presence board).
--warn-text on #321847 is 2.88:1; these are 9.6:1 and 6.8:1. */
--warn-on-dark:#ffc250; --bad-on-dark:#ff8a80;
--ring:rgba(50,24,71,.3);
/* sharp edges everywhere: the redesign has no rounded corners */
--r-lg:0px; --r:0px; --r-sm:0px;
--sh-sm:0 1px 2px rgba(0,0,0,.4);
--sh:0 1px 2px rgba(0,0,0,.4),0 10px 24px -14px rgba(0,0,0,.6);
--sh-lg:0 18px 48px -20px rgba(0,0,0,.7);
--font:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--display:'Fraunces','Space Grotesk',Georgia,serif; /* soft Recoleta-style display */
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;
font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.muted{color:var(--muted)}
.hidden{display:none !important}
code{font-family:var(--mono);font-size:.88em;background:var(--line-soft);padding:1px 6px;border-radius:6px}
h1{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h2{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.card-title,.tc-title,.bc-name,.logo{font-family:var(--display);letter-spacing:-.015em}
/* ================================================================== shell
Top-nav shell (fresh-casual). A full-width horizontal bar replaces the old
left sidebar; page content flows beneath it in one centred column. */
body.app{display:flex;flex-direction:column;min-height:100vh}
/* ---- top bar ---- */
.cc-topbar{
--cc-text:var(--ink); --cc-text-dim:#6f6980; --cc-label:#6f6980;
--cc-hover:var(--surface-2); --cc-elevated:var(--accent-tint); --bubble:var(--accent);
position:sticky;top:0;z-index:100;display:flex;align-items:stretch;gap:8px;
height:60px;padding:0 clamp(20px,4vw,40px);background:rgba(244,241,247,.86);
backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);
font-family:var(--font)}
.cc-brand{display:flex;align-items:center;gap:9px;padding-right:22px;margin-right:6px;
text-decoration:none;color:var(--ink);border-right:1px solid var(--line)}
.cc-brand svg{width:19px;height:19px;color:var(--accent);flex:none}
.cc-brand span{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:-.01em}
/* primary nav — inline groups with drop panels */
.cc-nav{display:flex;align-items:stretch;gap:2px;flex:1;min-width:0}
.cc-sec{position:relative;display:flex;align-items:stretch}
.cc-sec-head{display:inline-flex;align-items:center;gap:8px;height:100%;background:none;border:0;cursor:pointer;
font-size:14px;font-weight:500;color:var(--cc-text-dim);padding:0 14px;
font-family:inherit;letter-spacing:-.005em;position:relative;transition:color .14s}
.cc-sec-head:hover,.cc-sec.open .cc-sec-head{color:var(--ink)}
.cc-sec-head.is-active{color:var(--ink);font-weight:600}
.cc-sec-head.is-active::after,.cc-sec-head.open::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;
height:2px;background:var(--accent)}
.cc-sec-head.is-soon{opacity:.5;cursor:default}
.cc-sec-head.is-soon:hover{color:var(--cc-text-dim)}
.cc-sec-ic{width:17px;height:17px;flex:none}
.cc-chev{width:14px;height:14px;flex:none;opacity:.55;transition:transform .18s ease}
.cc-sec.open .cc-chev{transform:rotate(180deg)}
/* drop panel — anchored beneath its head (positioned by JS) */
.cc-sec-items{position:fixed;z-index:200;min-width:236px;background:var(--surface);
border:1px solid var(--line);box-shadow:var(--sh-lg);padding:7px;display:none}
.cc-sec.open .cc-sec-items{display:block}
.cc-sec-inner{display:flex;flex-direction:column;gap:1px}
.cc-item{display:flex;align-items:center;gap:11px;padding:9px 11px;color:var(--cc-text-dim);
font-size:13.5px;text-decoration:none;position:relative;transition:background .14s,color .14s}
.cc-item svg{width:18px;height:18px;flex:none;stroke-width:1.8;color:var(--faint)}
.cc-item:hover{background:var(--cc-hover);color:var(--ink)}
.cc-item:hover svg{color:var(--accent)}
.cc-item.is-active{background:var(--cc-elevated);color:var(--ink);font-weight:600}
.cc-item.is-active svg{color:var(--accent)}
.cc-item.is-active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--bubble)}
.cc-item.is-soon{opacity:.5;cursor:default;pointer-events:none}
.cc-soon{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:2px 6px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
/* right cluster — brand chip + settings/sign-out ("footer" markup, now inline) */
.cc-right{display:flex;align-items:center;gap:4px;margin-left:auto;padding-left:8px}
.cc-switcher{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 7px;
border:1px solid var(--line);background:var(--surface);color:inherit;font-family:inherit;cursor:pointer;
text-decoration:none;transition:background .15s,border-color .15s}
.cc-switcher:hover{background:var(--cc-hover);border-color:var(--accent-2)}
.cc-switcher .avatar{width:26px;height:26px;background:var(--accent);color:#fcfbfd;font-weight:600;
font-size:11px;font-family:var(--display);display:flex;align-items:center;justify-content:center;flex:none}
.cc-switcher .meta{line-height:1;min-width:0;display:block}
.cc-switcher .name{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:150px}
.cc-switcher .chev{color:var(--cc-label);flex:none}
.cc-switcher .chev svg{width:15px;height:15px;display:block}
/* footer icon buttons (settings / sign out) */
.cc-footer{display:flex;align-items:center;gap:2px}
.cc-footer .divider{display:none}
.cc-footer .cc-item{padding:8px;color:var(--cc-text-dim)}
.cc-footer .cc-item span:not(.cc-soon){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cc-footer .cc-item svg{width:19px;height:19px}
.cc-item:focus-visible,.cc-switcher:focus-visible,.cc-sec-head:focus-visible{outline:2px solid var(--bubble);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cc-item,.cc-switcher{transition:none}}
@media(max-width:820px){.cc-sec-head .cc-sec-lab{display:none}.cc-switcher .meta{display:none}}
@media(max-width:640px){
.cc-brand span{display:none}
.cc-topbar{gap:2px;padding:0 12px}
/* On a phone the bar was overrunning itself: the nav kept shrinking while the
right-hand cluster had nothing holding its size, so the brand chip ended up
underneath the "Soon" badge. Pin the right cluster and let the nav be the
only thing that gives. */
.cc-right{flex:none;padding-left:4px;gap:2px}
.cc-nav{flex:1 1 auto;min-width:0;overflow:hidden}
.cc-sec-head{padding:0 9px}
/* "Grow · Soon" is a disabled placeholder — it cannot be tapped and costs more
room than the two live sections. Drop it, and any Soon badge with it, rather
than let real controls collide with a label for something that isn't built. */
.cc-nav .cc-sec-head.is-soon{display:none}
.cc-topbar .cc-soon{display:none}
}
.main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.pagehead{position:sticky;top:60px;z-index:6;width:100%;background:rgba(244,241,247,.82);
backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line);
padding:22px clamp(20px,4vw,40px) 18px;display:flex;align-items:flex-end;
justify-content:space-between;gap:18px;max-width:1180px;margin:0 auto}
.pagehead::after{content:"";position:absolute;left:clamp(20px,4vw,40px);bottom:-1px;width:34px;height:2px;background:var(--accent)}
.ph-title h1{margin:0;font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.ph-title p{margin:5px 0 0;color:var(--muted);font-size:13.5px;font-weight:400;max-width:64ch}
.ph-title p:empty{display:none}
.ph-actions{display:flex;gap:10px;align-items:center;flex:none;padding-bottom:3px}
.content{padding:30px clamp(20px,4vw,40px) 90px;width:100%;max-width:1180px}
.content.narrow{max-width:920px}
@media(max-width:680px){.pagehead{padding:20px 22px 14px}.content{padding:24px 22px 80px}
.ph-title h1{font-size:24px}}
/* ================================================================ buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;
font-size:14px;cursor:pointer;transition:.12s;text-decoration:none;line-height:1.2;font-family:inherit}
.btn:hover{background:var(--surface-2);border-color:#e3deea}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn-primary,.btn.accent{background:var(--accent);border-color:var(--accent);color:#fcfbfd;box-shadow:none}
.btn-primary:hover,.btn.accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
/* ===================================================== editorial dashboard */
.profstrip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:30px;
margin-bottom:6px;border-bottom:1px solid var(--line)}
.pc-swatches{display:flex;gap:6px;flex:none}
.pc-swatches i{width:22px;height:22px;border-radius:6px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pc-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px}
.pc-meta a{color:var(--accent-ink);text-decoration:none;font-weight:600}
.pc-meta a:hover{text-decoration:underline}
section.health{margin-top:38px}
section.block{margin-top:46px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-head h2{font-size:15px;font-weight:600;color:var(--ink)}
.sec-meta{font-size:13px}
/* ===== home dashboard (hm-*) ===== */
.hm-sh{margin:34px 0 16px}
.hm-sh h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
.hm-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ---- single-restaurant home: Review (focus) / Create / Grow ---- */
.hs-sec{margin-top:36px}
.hs-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
/* section eyebrow — a sharp uppercase tag with an accent tick */
.hs-head h2{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:11px;font-weight:700;line-height:1;
letter-spacing:.14em;text-transform:uppercase;padding:0 0 0 12px;color:var(--ink);background:none;position:relative}
.hs-head h2::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:3px;background:var(--accent)}
.hs-review .hs-head h2::before{background:var(--accent)}
.hs-create .hs-head h2::before{background:var(--accent-2)}
.hs-grow .hs-head h2::before{background:var(--faint)}
.hs-sub{font-size:13.5px;color:var(--muted)}
.hs-review{margin-top:6px}
.pv-wrap{border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden}
.pv-banner{display:flex;align-items:center;gap:22px;padding:24px 26px;
background:linear-gradient(180deg,var(--accent-tint),#eeebf4);border-bottom:1px solid var(--line)}
.pv-ring{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;flex:none}
.pv-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.pv-ring b{position:relative;font-family:var(--display);font-size:25px;font-weight:700;font-variant-numeric:tabular-nums}
.pv-ring.band-good{background:conic-gradient(var(--accent) calc(var(--p)*1%),#e3deea 0)}
.pv-ring.band-warn{background:conic-gradient(var(--warn-text) calc(var(--p)*1%),#e3deea 0)}
.pv-ring.band-bad{background:conic-gradient(var(--bad-text) calc(var(--p)*1%),#e3deea 0)}
.pv-ring.band-none{background:#e3deea} .pv-ring.band-none b{color:var(--faint)}
.pv-banner-mid{min-width:0}
.pv-verdict{font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pv-verdict span{font-weight:500;color:var(--muted);font-size:14px}
.pv-insight{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:6px;max-width:82ch}
.pv-guide{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:8px;max-width:88ch}
.pv-channels{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.pv-channels{grid-template-columns:1fr}}
.pv-chan{display:flex;flex-direction:column;gap:9px;padding:18px 20px;
background:#fcfbfd;text-decoration:none;color:inherit;border-left:1px solid var(--line);
transition:background .15s}
.pv-chan:first-child{border-left:0}
@media(max-width:900px){.pv-chan{border-left:0;border-top:1px solid var(--line)}}
.pv-chan:hover{background:var(--surface-2)}
.pv-chan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pv-chan-lab{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.pv-ring.mini{width:42px;height:42px}
.pv-ring.mini::before{inset:4px}
.pv-ring.mini b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.pv-ring.mini .spin{position:relative;width:16px;height:16px}
.pv-chan-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-top:-2px}
.pv-chan-meta svg{width:15px;height:15px;flex:none;color:var(--accent)}
.pv-chan-meta svg.star{color:#8a7a5a}
.pv-chan-meta b{font-weight:800;font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.pv-chan-meta span{color:var(--muted)}
.pv-chan-k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#a49eb0);margin-top:2px}
.pv-chan-ord{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:center}
.pv-none{font-size:12.5px;color:var(--faint,#a49eb0)}
/* "No order links found" is a genuine gap — flag it red (but not the neutral
"Not reviewed yet" / "Analysing…" states, which keep the muted grey above) */
.pv-nolinks{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#321847}
.pv-nolinks::before{content:"✕";font-size:10px;font-weight:800;width:15px;height:15px;flex:none;
display:grid;place-items:center;border-radius:50%;background:#fce4e4;color:#321847}
.pv-chan-go{margin-top:auto;padding-top:4px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.pv-chan-go b{transition:margin-left .14s}
.pv-chan:hover .pv-chan-go b{margin-left:3px}
/* Create — brand-aware visual tool cards (preview on top) */
.hs-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;--c1:#26262e;--c2:#f3f1ec;--c3:#321847}
@media(max-width:900px){.hs-tools{grid-template-columns:1fr}}
.hs-tool{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;
background:#fcfbfd;text-decoration:none;color:inherit;box-shadow:var(--sh-sm);
transition:border-color .15s,box-shadow .15s,transform .09s}
.hs-tool:hover{border-color:var(--accent);box-shadow:var(--sh);transform:translateY(-2px)}
/* coming-soon tool cards + section badge */
.hs-tool.is-soon{opacity:.6;pointer-events:none;box-shadow:none}
.hs-tool.is-soon .hs-tool-go{color:var(--muted)}
.hs-soon{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;
border-radius:999px;background:var(--surface-2,#eeebf4);color:var(--muted);border:1px solid var(--line)}
.hs-prev{position:relative;height:120px;display:grid;place-items:center;overflow:hidden;
background:radial-gradient(120% 120% at 50% 0,#fcfbfd,#eeebf4);border-bottom:1px solid var(--line)}
.hs-tool-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.hs-tool-t{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.hs-tool-d{font-size:12.5px;color:var(--muted);line-height:1.42}
.hs-tool-go{margin-top:10px;font-size:13px;font-weight:700;color:var(--accent-ink);transition:letter-spacing .15s}
.hs-tool:hover .hs-tool-go{color:var(--accent)}
/* mini flyer mockup */
.mflyer{position:relative;width:68px;height:94px;border-radius:6px;background:var(--c2);padding:9px;
display:flex;flex-direction:column;gap:5px;box-shadow:0 8px 20px rgba(0,0,0,.16);transform:rotate(-3deg);transition:transform .2s}
.hs-tool:hover .mflyer{transform:rotate(-3deg) translateY(-3px)}
.mflyer .h{height:12px;width:80%;border-radius:2px;background:var(--c1)}
.mflyer .l{height:4px;border-radius:2px;background:var(--c1);opacity:.32}
.mflyer .l.s{width:58%}
.mflyer .chip{margin-top:auto;height:16px;width:60%;border-radius:3px;background:var(--c3)}
/* mini carousel (3 fanned frames) */
.mcar{position:relative;width:104px;height:70px}
.mcar span{position:absolute;top:8px;left:24px;width:56px;height:56px;border-radius:9px;box-shadow:0 5px 14px rgba(0,0,0,.14);transition:transform .2s}
.mcar span:nth-child(1){background:var(--c2);transform:translateX(-24px) rotate(-9deg)}
.mcar span:nth-child(2){background:var(--c3);transform:translateX(0) rotate(0)}
.mcar span:nth-child(3){background:var(--c1);transform:translateX(24px) rotate(9deg)}
.hs-tool:hover .mcar span:nth-child(1){transform:translateX(-30px) rotate(-11deg)}
.hs-tool:hover .mcar span:nth-child(3){transform:translateX(30px) rotate(11deg)}
/* mini editorial (typographic tile) */
.med{width:80px;height:94px;border-radius:6px;background:var(--c1);box-shadow:0 8px 20px rgba(0,0,0,.16);
display:flex;flex-direction:column;justify-content:center;padding:11px;transform:rotate(2.5deg);transition:transform .2s}
.hs-tool:hover .med{transform:rotate(2.5deg) translateY(-3px)}
.med b{font-family:var(--display);font-size:30px;font-weight:800;line-height:.85;letter-spacing:-.03em;color:var(--c2)}
.med i{display:block;height:4px;border-radius:2px;background:var(--c3);margin-top:8px;width:78%}
.med i.s{background:var(--c2);opacity:.4;width:52%;margin-top:4px}
/* mini calendar (campaign planner) */
.mcal{width:106px;border-radius:7px;background:var(--c2);padding:9px;box-shadow:0 8px 20px rgba(0,0,0,.15);
transform:rotate(-2.5deg);transition:transform .2s}
.hs-tool:hover .mcal{transform:rotate(-2.5deg) translateY(-3px)}
.mcal .top{display:block;height:8px;width:54%;border-radius:2px;background:var(--c1);margin-bottom:7px}
.mcal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mcal .g i{aspect-ratio:1;border-radius:1.5px;background:var(--c1);opacity:.16}
.mcal .g i.on{background:var(--c3);opacity:1}
/* mini map (company finder) */
.mmap{position:relative;width:110px;height:82px;border-radius:8px;overflow:hidden;background:var(--c2);
box-shadow:0 8px 20px rgba(0,0,0,.15);transform:rotate(2.5deg);transition:transform .2s}
.hs-tool:hover .mmap{transform:rotate(2.5deg) translateY(-3px)}
.mmap::before,.mmap::after{content:"";position:absolute;background:var(--c1);opacity:.13}
.mmap::before{left:0;right:0;top:45%;height:7px}
.mmap::after{top:0;bottom:0;left:37%;width:7px}
.mmap .pin{position:absolute;width:15px;height:15px;border-radius:50% 50% 50% 0;background:var(--c3);
transform:rotate(-45deg);box-shadow:0 3px 6px rgba(0,0,0,.28);transition:transform .2s}
.mmap .pin::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:var(--c2)}
.mmap .pin.a{top:13px;left:20px}
.mmap .pin.b{top:33px;left:66px}
.mmap .pin.c{top:50px;left:34px;background:var(--c1)}
.hs-tool:hover .mmap .pin.b{transform:rotate(-45deg) translateY(-3px)}
/* Grow — two wide utility cards */
.hs-grow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.hs-grow-grid{grid-template-columns:1fr}}
.hs-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.hs-opts{grid-template-columns:1fr}}
.hs-opt{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:18px;border:1px solid var(--line);
border-radius:12px;background:#fcfbfd;color:inherit;text-decoration:none;box-shadow:var(--sh-sm);
transition:border-color .15s,box-shadow .15s,transform .08s}
.hs-opt .oic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;flex:none;
background:var(--accent-tint);color:var(--accent);transition:background .15s,color .15s}
.hs-opt .oic svg{width:20px;height:20px}
.hs-opt-t{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);margin-top:2px}
.hs-opt-d{font-size:12.5px;color:var(--muted);line-height:1.4}
.hs-opt-go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.hs-opt-go b{transition:margin-left .14s}
.hs-opt:hover{border-color:var(--accent-2);box-shadow:0 6px 20px rgba(24,20,50,.07);transform:translateY(-1px)}
.hs-opt:hover .oic{background:var(--accent);color:#fcfbfd}
.hs-opt:hover .hs-opt-go b{margin-left:3px}
.hm-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.hm-grid3{grid-template-columns:1fr}}
.hm-health{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);
border-radius:9px;padding:20px;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .16s,transform .16s}
.hm-health:hover{border-color:#e3deea;box-shadow:0 10px 28px -16px rgba(40,40,80,.25);transform:translateY(-2px)}
.hm-health-top{display:flex;align-items:center;gap:16px}
.hm-ring{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;flex:none}
.hm-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.hm-ring b{position:relative;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.hm-ring.band-good{background:conic-gradient(var(--accent) calc(var(--p)*1%),#e3deea 0)}
.hm-ring.band-warn{background:conic-gradient(var(--warn-text) calc(var(--p)*1%),#e3deea 0)}
.hm-ring.band-bad{background:conic-gradient(var(--bad-text) calc(var(--p)*1%),#e3deea 0)}
.hm-ring.band-none{background:#e3deea}.hm-ring.band-none b{color:#a49eb0;font-size:18px}
.hm-ring-meta h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hm-badge{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.hm-badge i{width:7px;height:7px;border-radius:50%;flex:none}
.hm-scope{color:var(--muted);font-size:12px;margin-top:6px}
.hm-break{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line-soft)}
.hm-break-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.hm-break-row .lab{flex:0 0 96px;color:var(--ink-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-bar{flex:1;height:6px;border-radius:999px;background:#eeebf4;overflow:hidden}
.hm-bar i{display:block;height:100%;border-radius:999px}
.hm-break-row .val{flex:0 0 26px;text-align:right;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.hm-runfirst{font-size:13px;color:var(--accent-ink);font-weight:600}
.hm-trend{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.hm-trend-head{display:flex;align-items:baseline;gap:8px}
.hm-trend-head .lab{font-weight:650;font-size:14px;color:var(--ink);margin-right:auto}
.hm-trend-now{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-trend-delta{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.hm-trend-delta.up{color:#321847;background:#eae4f1}
.hm-trend-delta.down{color:#321847;background:#eae4f1}
.hm-spark{width:100%;height:52px;display:block}
.hm-trend-empty{font-size:12.5px;color:var(--muted);padding:14px 0}
.hm-ops{background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.hm-op{display:flex;align-items:flex-start;gap:16px;padding:18px 22px;border-top:1px solid var(--line-soft);text-decoration:none;color:inherit;transition:background .12s}
.hm-op:first-child{border-top:none}
.hm-op:hover{background:#eeebf4}
.hm-op-rank{flex:none;font-size:13px;font-weight:700;color:#a49eb0;font-variant-numeric:tabular-nums;line-height:1.5;padding-top:1px}
.hm-op-body{flex:1;min-width:0}
.hm-op-head{font-size:15px;font-weight:700;color:var(--accent-ink);margin:0 0 3px;letter-spacing:-.01em;line-height:1.3}
.hm-op-desc{font-size:13.5px;font-weight:400;color:var(--ink-soft);line-height:1.55;margin:0}
.hm-op-desc b,.hm-op-desc strong{font-weight:650;color:var(--ink)}
.hm-op-arrow{flex:none;color:#a49eb0;font-weight:700;transition:color .15s,transform .15s;padding-top:2px}
.hm-op:hover .hm-op-arrow{color:var(--accent);transform:translateX(3px)}
.hm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.hm-cards{grid-template-columns:1fr}}
.hm-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:9px;
padding:20px;min-height:152px;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .16s,transform .16s}
.hm-card:hover{transform:translateY(-3px);border-color:#e3deea;box-shadow:0 10px 30px -16px rgba(40,40,80,.22)}
.hm-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hm-card-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-ink);flex:none}
.hm-card-ic svg{width:21px;height:21px}
.hm-pill{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-tint);padding:5px 11px;border-radius:999px}
.hm-card h3{margin:14px 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hm-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.hm-card .go{margin-top:auto;padding-top:14px;color:var(--accent-ink);font-weight:600;font-size:13.5px}
/* the marketing-health hero — oversized typographic scores */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--rule)}
@media(max-width:720px){.statrow{grid-template-columns:1fr;border-top:0}}
.stat{display:block;text-decoration:none;color:inherit;padding:22px 26px 24px;position:relative;
border-right:1px solid var(--line);transition:background .14s}
.stat:last-child{border-right:0}
.stat:hover{background:var(--surface-2)}
@media(max-width:720px){.stat{border-right:0;border-bottom:1px solid var(--line)}}
.stat-num{font-family:var(--display);font-weight:700;font-size:68px;line-height:.92;letter-spacing:-.04em;color:var(--ink)}
.stat-num .stat-out{font-family:var(--font);font-weight:600;font-size:18px;letter-spacing:0;color:var(--muted);margin-left:3px}
.stat-num.is-none{color:var(--line);font-size:56px}
.stat-num.is-running{font-size:40px;display:flex;align-items:center;min-height:62px}
.stat[data-tone="ok"] .stat-num{color:var(--accent)}
.stat[data-tone="warn"] .stat-num{color:var(--accent-2)}
.stat[data-tone="bad"] .stat-num{color:var(--bad-text)}
.stat-rule{height:1px;background:var(--line);margin:16px 0 12px}
.stat-label{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.stat-sub{font-size:13px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:8px}
.stat:hover .stat-sub{color:var(--ink-soft)}
/* create-content cards — type-led, no gradient art */
.createrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.createrow{grid-template-columns:1fr}}
.makecard{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:22px 24px 20px;text-decoration:none;color:var(--ink);
transition:transform .15s cubic-bezier(.2,.7,.2,1),box-shadow .15s,border-color .15s}
.makecard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:#d8d8e2}
.mk-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--accent-ink);background:var(--accent-tint);padding:3px 9px;border-radius:999px}
.mk-title{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;margin-top:4px}
.mk-blurb{font-size:13.5px;color:var(--muted);line-height:1.5;flex:1}
.mk-go{font-weight:600;font-size:14px;color:var(--accent-ink)}
.makecard:hover .mk-go{color:var(--accent)}
/* grow & audit — editorial list, hairline rows */
.growlist{border-top:1px solid var(--line)}
.growrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 4px;
border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:padding .14s,background .14s}
.growrow:hover{background:var(--surface-2);padding-left:14px;padding-right:14px}
.gr-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.gr-title{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.gr-blurb{font-size:13.5px;color:var(--muted)}
.gr-go{flex:none;font-size:18px;color:var(--muted);transition:transform .14s,color .14s}
.growrow:hover .gr-go{color:var(--accent);transform:translateX(3px)}
/* ============================================================== tool cards */
.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.toolcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;text-decoration:none;color:var(--ink);transition:.15s;display:flex;
flex-direction:column;box-shadow:var(--sh-sm)}
.toolcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#e3deea}
.tc-art{height:128px;display:grid;place-items:center;font-size:44px;font-weight:800;color:#fcfbfd}
.tc-flyer{background:linear-gradient(135deg,#321847,#321847)}
.tc-photo{background:linear-gradient(135deg,#f97316,#fb9a4b)}
.tc-editorial{background:linear-gradient(135deg,#0d6b5f,#14a08c)}
.tc-body{padding:18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.tc-title{font-size:18px;font-weight:700}
.tc-blurb{font-size:13.5px;color:var(--muted);flex:1;line-height:1.45}
.tc-meta{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px}
/* =============================================================== list cards */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:18px;text-decoration:none;color:var(--ink);transition:.14s;display:flex;
flex-direction:column;gap:5px;min-height:120px;box-shadow:var(--sh-sm)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:#e3deea}
.card-title{font-size:16px;font-weight:700}
.card-sub{font-size:13px;color:var(--muted)}
.card-go{margin-top:auto;padding-top:14px;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card-go a{color:var(--accent);text-decoration:none;font-weight:600}
.card-go a.edit{color:var(--muted);font-weight:600}
.card-add{border-style:dashed;background:var(--surface-2);justify-content:center;color:var(--muted);box-shadow:none;min-height:120px}
.card-add .card-title{color:var(--accent)}
/* enhanced list cards (neutral, no per-brand personalisation) */
.card{position:relative;overflow:hidden}
.card:not(.card-add)::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;
transition:transform .2s ease}
.card:not(.card-add):hover::before{transform:scaleX(1)}
.card-top{display:flex;align-items:flex-start;gap:13px}
.mono{width:46px;height:46px;flex:none;border-radius:7px;display:grid;place-items:center;
font-family:var(--display);font-weight:600;font-size:19px;background:var(--accent-tint);
color:var(--accent);border:1px solid rgba(50,24,71,.16)}
.card-top>div{min-width:0}
.card-top .card-title{font-size:16px;line-height:1.25}
.card-top .card-sub{margin-top:3px}
.pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:2px 8px;
border-radius:999px;background:var(--line-soft);color:var(--muted);letter-spacing:.03em;
text-transform:uppercase;margin-left:8px;vertical-align:middle}
.pill.ok{background:#fcfbfd;color:#321847}
/* ================================================================ stepper */
/* Create hero — explains the tool + shows the brand colours prominently */
.cw-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center;
background:#fcfbfd;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);
padding:24px 26px;margin:0 0 20px}
@media(max-width:760px){.cw-hero{grid-template-columns:1fr;gap:18px}}
.cw-eyebrow{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:700;line-height:1;
letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#fcfbfd;color:#321847;margin-bottom:10px}
.cw-hero-main h1{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.cw-hero-main p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;max-width:60ch}
.cw-editbtn{margin-top:16px}
.cw-editbtn svg{width:16px;height:16px}
.cw-hero-cues{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.cw-cue{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.cw-cue svg{width:15px;height:15px;color:var(--accent)}
.cw-hero-brand{background:radial-gradient(120% 120% at 100% 0,#eeebf4,#eeebf4);border:1px solid var(--line);
border-radius:13px;padding:15px 16px}
.cw-brand-lab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.cw-swatches{display:flex;gap:10px}
.cw-sw{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.cw-sw i{display:block;width:100%;height:44px;border-radius:9px;background:var(--c);
box-shadow:inset 0 0 0 1px rgba(16,8,60,.08),var(--sh-sm)}
.cw-sw b{font-size:11px;font-weight:700;color:var(--ink-soft)}
.cw-sw em{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--faint,#a49eb0);letter-spacing:.02em}
.cw-brand-edit{display:inline-block;margin-top:13px;font-size:12.5px;font-weight:600;color:var(--accent-ink)}
.cw-brand-edit:hover{color:var(--accent)}
/* onboarding-style steps: light chips, accent number circles, no heavy borders */
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;align-items:center;justify-content:center}
/* the stage heading and stepper sit outside #wizard-body but must vanish with
it (library open). #stagehead joined them when it moved above the stepper. */
body:has(#wizard-body.hidden) .stepper,
body:has(#wizard-body.hidden) #stagehead,
body:has(#wizard-body.hidden) .wiz-noterow{display:none}
.step{background:none;border:0;border-radius:999px;padding:6px 12px 6px 6px;
font-weight:600;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;cursor:default;
transition:background .12s,color .12s}
.step i{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;
background:var(--line-soft);color:var(--muted);font-style:normal;font-size:12px;font-weight:700}
.step.active{color:var(--accent-ink);background:var(--accent-tint)}
.step.active i{background:var(--accent);color:#fcfbfd}
.step.done{color:var(--ink-soft);cursor:pointer}
.step.done i{background:#fcfbfd;color:#321847}
.step.done:hover{background:var(--accent-tint);color:var(--accent-ink)}
#stagehead{margin-bottom:6px}
#stagehead h1{font-size:24px;font-weight:750}
#stagehead p{color:var(--muted);margin-top:3px}
/* =================================================================== tiles */
.tilegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:16px 0 40px}
@media(max-width:1100px){.tilegrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.tilegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.tilegrid{grid-template-columns:1fr}}
.wiz-editnote{font-size:12.5px;color:var(--muted);margin:-6px 0 16px;text-align:center}
/* group heading inside a tile board — spans the grid so the shelf below it reads
as one set. First one loses its top margin so the board doesn't start indented. */
.tilegrid .tile-group{grid-column:1/-1;margin:14px 0 -2px;padding-top:14px;
border-top:1px solid var(--line)}
.tilegrid .tile-group:first-child{margin-top:0;padding-top:0;border-top:0}
.tilegrid .tile-group h3{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tilegrid .tile-group p{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:3px;max-width:62ch}
/* no card — the whole poster shows uncropped; selection is a ring on the image */
.tile{background:none;border:0;cursor:pointer;transition:transform .1s;display:flex;flex-direction:column}
.tile:hover{transform:translateY(-3px)}
.tile .thumb{position:relative}
/* "No photos" switch above the design board. Some brands have nothing
photographed yet; every design still renders using the menu/price proof. */
.nophoto-bar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
margin:0 0 18px;padding:13px 16px;border-radius:12px;
background:var(--surface-2,#3a3e46);border:1px solid var(--line)}
.nophoto-bar label{display:flex;align-items:center;gap:10px;cursor:pointer;
font-size:14.5px;font-weight:600;color:var(--ink)}
.nophoto-bar input{width:17px;height:17px;accent-color:var(--accent,#c3f53c);cursor:pointer}
.nophoto-bar em{font-style:normal;font-size:13px;color:var(--muted)}
/* was scoped to .tile .thumb to beat the settings gallery's generic .thumb img;
that one lives under .thumbs now, so this no longer has anything to outrank */
.tile .thumb img{width:100%;height:auto;object-fit:contain;display:block;border-radius:0;background:#eeebf4;
box-shadow:var(--sh-sm);transition:box-shadow .12s;border:0}
.tile:hover .thumb img{box-shadow:var(--sh)}
.tile.sel .thumb img{box-shadow:0 0 0 3px var(--ring),0 0 0 4px var(--accent)}
.qflag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;line-height:1;
padding:4px 7px;border-radius:7px;color:#fcfbfd;letter-spacing:.01em;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.q-ok{background:var(--ok)}
.q-soft{background:var(--warn)}
.q-low{background:var(--bad)}
.tile .cap{padding:11px 2px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tile .cap-txt{min-width:0}
.tile .cap b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);text-transform:capitalize}
.tile .cap-txt span{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:2px}
.tile-select{flex:none;background:var(--accent);color:#fcfbfd;border:0;border-radius:8px;padding:7px 15px;
font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;transition:background .12s}
.tile-select:hover{background:var(--accent-ink)}
.tile-select.is-sel{background:var(--ok)}
/* big, clear, centred loading state */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
min-height:260px;color:var(--ink-soft);font-weight:600;font-size:16px}
.loading-txt{font-family:var(--display)}
.spin{width:16px;height:16px;border:2.5px solid var(--line);border-top-color:var(--accent);
border-radius:50%;animation:sp .8s linear infinite;display:inline-block;vertical-align:-3px;margin-right:6px}
.spin.big{width:44px;height:44px;border-width:4px;margin:0;vertical-align:0}
@keyframes sp{to{transform:rotate(360deg)}}
/* back button + "my flyers" pinned at the top of the wizard */
.wiz-top{margin:0 0 12px;display:flex;align-items:center;gap:10px}
.wiz-top #back{padding:6px 14px}
.wiz-top #open-lib{margin-left:auto}
.lib-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
border-radius:999px;background:var(--accent);color:#fcfbfd;font-size:11px;font-weight:700;font-family:var(--mono)}
/* resume draft: just a Start over button, far right of the jump-back note row */
.wiz-noterow{position:relative;margin:0 0 16px}
.wiz-noterow .wiz-editnote{margin:0}
.wiz-noterow-btns{position:absolute;right:0;top:50%;transform:translateY(-50%);
display:flex;align-items:center;gap:8px}
/* saved flyers library */
.lib{margin:6px 0 40px}
.lib-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.lib-head h1{font-size:24px;font-weight:750}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px;margin-top:16px}
.lib-card{display:flex;flex-direction:column}
.lib-thumb{display:block;border-radius:10px;overflow:hidden;background:#eeebf4;box-shadow:var(--sh-sm)}
.lib-thumb img{width:100%;height:auto;display:block}
.lib-meta{margin:10px 2px 8px}
.lib-name{font-weight:700;font-size:14px;color:var(--ink)}
.lib-date{font-size:12px;color:var(--muted);margin-top:1px}
/* The name is an that reads as a heading until you go near it. A saved
print called "Flyer 3" is unfindable once there are five of them, and a
rename dialog for one short string is more ceremony than the job deserves. */
/* Doubled with body[data-report] throughout: the dark theme styles every input
as a filled form field, and that rule outranks a plain `input.lib-name`. A
library of boxed text inputs reads as a form to fill in, not a list to read. */
input.lib-name,body[data-report] input.lib-name{display:block;width:100%;
font:inherit;font-weight:700;font-size:14px;color:var(--ink);
background:transparent;border:1px solid transparent;border-radius:7px;
padding:3px 8px;margin:-3px -8px 0;cursor:text;text-overflow:ellipsis;
box-shadow:none;transition:background .12s,border-color .12s}
input.lib-name:hover,body[data-report] input.lib-name:hover{
background:var(--line-soft);border-color:var(--line)}
input.lib-name:focus,body[data-report] input.lib-name:focus{outline:none;cursor:auto;
background:var(--line-soft);border-color:var(--accent)}
input.lib-name:disabled,body[data-report] input.lib-name:disabled{opacity:.6}
input.lib-name.ok,body[data-report] input.lib-name.ok{border-color:var(--accent);
background:var(--accent-tint,rgba(195,245,60,.16))}
input.lib-name.bad,body[data-report] input.lib-name.bad{border-color:#f2836f;
background:rgba(242,131,111,.16)}
.lib-actions{display:flex;gap:8px}
/* final stage save + export row */
.final-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.final-save-note{font-size:12.5px;margin:10px 0 0;color:var(--ok)}
/* live "X / N rendered" counter for long boards (e.g. the 16 colourways),
where the "takes a little longer" note now lives — right at the render */
.tile-prog{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
color:var(--accent-ink);background:var(--accent-tint);border-radius:10px;padding:9px 14px;margin:4px 0 14px}
.tile-prog .spin{margin:0}
.tile-prog b{font-variant-numeric:tabular-nums}
/* each tile streams its own render — shimmer in its place until the image lands */
.tile .thumb{overflow:hidden}
.tile.rendering .thumb{aspect-ratio:1748/2480;background:#eeebf4}
.tile.rendering .thumb img{opacity:0}
.tile.rendering .thumb::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,#eeebf4 30%,#eeebf4 50%,#eeebf4 70%);background-size:220% 100%;
animation:shimmer 1.25s linear infinite}
.tile .thumb img{transition:opacity .25s}
@keyframes shimmer{to{background-position:-220% 0}}
.offer-hint{font-size:12.5px;color:var(--muted);margin:0 0 10px}
/* carousel review stage (single-mode step 1) */
.car-photos-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px;font-size:13.5px}
.car-photos-head b{font-weight:700;color:var(--ink)}
.car-count{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);
background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 11px}
.car-count.full{color:#321847;background:#fcfbfd;border-color:#c9c2d4}
.car-photos{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 8px}
.car-photo{position:relative;width:84px;height:105px;border-radius:10px;overflow:hidden;border:1px solid var(--line);flex:none;background:#eeebf4}
.car-photo img{width:100%;height:100%;object-fit:cover;display:block}
.car-photo.low{box-shadow:0 0 0 2px var(--bad)}
.car-slotn{position:absolute;bottom:4px;left:4px;min-width:18px;height:18px;padding:0 4px;border-radius:6px;
background:rgba(20,19,25,.72);color:#fcfbfd;font-size:11px;font-weight:700;font-family:var(--mono);
display:flex;align-items:center;justify-content:center}
.car-rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;
background:rgba(20,19,25,.72);color:#fcfbfd;font-size:16px;line-height:1;cursor:pointer;display:flex;
align-items:center;justify-content:center;opacity:0;transition:opacity .12s;padding:0}
.car-photo:hover .car-rm{opacity:1}
.car-add-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
border:1.5px dashed var(--line);background:var(--surface-2);color:var(--muted);font-size:22px;
cursor:pointer;font-family:inherit;line-height:1}
.car-add-photo span{font-size:11px;font-weight:600}
.car-add-photo:hover{border-color:var(--accent);color:var(--accent)}
.car-note{font-size:12.5px;margin:2px 0 20px}
.car-headline{font-family:var(--display);font-size:18px;font-weight:650;color:var(--ink);margin:4px 0 22px;max-width:600px}
#cstage-review .actions,#slides-wrap .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#cstage-review .actions .btn{white-space:nowrap}
/* colours stage */
.cw-colours{margin:6px 0 40px;max-width:640px}
.cw-colours .cw-swatches{margin-bottom:22px}
.cw-colours .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cw-colours .actions .btn{white-space:nowrap}
.cw-colours .actions svg{width:16px;height:16px;flex:none}
/* editable colour swatches (native colour input styled as the swatch block) */
.cw-edit .cw-pick{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:44px;border:0;
border-radius:9px;padding:0;cursor:pointer;background:var(--c);
box-shadow:inset 0 0 0 1px rgba(16,8,60,.08),var(--sh-sm)}
.cw-edit .cw-pick::-webkit-color-swatch-wrapper{padding:0}
.cw-edit .cw-pick::-webkit-color-swatch{border:0;border-radius:9px}
.cw-edit .cw-pick::-moz-color-swatch{border:0;border-radius:9px}
.cw-edit .cw-pick:hover{box-shadow:inset 0 0 0 1px rgba(16,8,60,.12),0 0 0 3px var(--ring)}
.cw-edit .cw-hex{font-family:var(--mono);font-size:10.5px;color:var(--faint,#a49eb0);letter-spacing:.02em;
border:1px solid transparent;background:none;padding:2px 4px;border-radius:5px;width:78px;text-transform:uppercase}
.cw-edit .cw-hex:hover{border-color:var(--line)}
.cw-edit .cw-hex:focus{border-color:var(--accent);outline:none;color:var(--ink-soft)}
.cw-cnote{font-size:12.5px;margin:14px 0 0}
.cw-saved{color:var(--ok);font-weight:600;margin-left:4px}
/* ================================================================ discount */
.discount-panel{margin:6px 0 40px;max-width:640px}
.bigtoggle{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;cursor:pointer;box-shadow:var(--sh-sm)}
.bigtoggle input{width:18px;height:18px;accent-color:var(--accent)}
.offerlist{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.offer{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:13px 16px;cursor:pointer;transition:.12s}
.offer:hover{border-color:#e3deea}
.offer.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.offer .amt{font-weight:800;font-size:17px}
.offer .meta{color:var(--muted);font-size:14px}
.custom{margin-top:8px}.custom summary{cursor:pointer;color:var(--accent);font-weight:600}
.fields{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.fields input{flex:1;min-width:180px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px}
.actions{margin-top:20px}
.navbtns{margin:10px 0 40px}
/* =================================================================== final */
.finalwrap{display:grid;grid-template-columns:360px 1fr;gap:36px;margin:8px 0 60px;align-items:start}
/* Square corners: this is a print preview. A rounded frame reads as a promise
that the printed sheet has rounded corners - it is trimmed square. */
.preview img{width:100%;border-radius:0;box-shadow:var(--sh-lg);background:#eee}
.downloads .opt{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:600}
.downloads .opt input{accent-color:var(--accent)}
.links{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.links a{color:var(--accent);font-weight:600}
/* ============================================================== setup forms */
.setup{max-width:880px}
.fset{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:22px 24px;margin:0 0 18px;box-shadow:var(--sh-sm)}
.fset h2{font-size:16px;margin-bottom:4px}
.fset>p.muted{font-size:13px;margin-bottom:6px}
.fset label{display:block;margin:12px 0;font-weight:600;font-size:13.5px}
.fset input:not([type=color]):not([type=radio]):not([type=file]),
.fset select,.fset textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
font-size:14.5px;font-weight:500;font-family:inherit;color:var(--ink);transition:.12s}
.fset input[type=file]{margin-top:6px;font-size:13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media(max-width:640px){.row2{grid-template-columns:1fr}}
.colours{display:flex;gap:16px;flex-wrap:wrap;margin:0}
.col{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;margin:0}
.col input[type=color]{width:56px;height:56px;border:1px solid var(--line);border-radius:12px;cursor:pointer;padding:0;
box-shadow:var(--sh-sm);transition:transform .1s,box-shadow .1s}
.col:hover input[type=color]{transform:translateY(-2px);box-shadow:0 7px 16px rgba(24,20,50,.18)}
.col-hex{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--muted)}
.col-hex::before{content:"✎ ";color:var(--faint,#a49eb0);font-size:10px}
.col label{font-weight:600;font-size:13px;display:flex;align-items:center;gap:5px;margin:0} /* setup form's 'pop' radio */
.cwpreview{margin-top:8px;height:68px;border-radius:7px;display:flex;align-items:center;gap:16px;
padding:0 22px;border:1px solid var(--line)}
.cwpreview span{font-size:32px;font-weight:800}
.cwpreview i{width:54px;height:14px;border-radius:4px;display:block}
.logoprev{margin-top:12px}
.logoprev img{max-height:70px;background:repeating-conic-gradient(#e8e8e8 0 25%,#fcfbfd 0 50%) 0/22px 22px;padding:8px;border-radius:8px}
/* Scoped to .thumbs — this .thumb is an uploaded image on the setup page, and
a board tile's .thumb is a rendered flyer. They were sharing three rules:
`.thumb button` was sizing the board's zoom pill to 24×24 (it wins on
specificity, so the pill has never been the size its own rule asked for),
and `.thumb img` had to be fought off with `.tile .thumb img` below. */
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.thumbs .thumb{position:relative}
.thumbs .thumb img{height:92px;width:92px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.thumbs .thumb button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:none;
background:var(--ink);color:#fcfbfd;cursor:pointer}
.offerrow{display:flex;gap:8px;margin:8px 0}
.offerrow input{flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;min-width:0}
.offerrow .rm{border:none;background:var(--line-soft);border-radius:8px;width:36px;cursor:pointer}
.saverow{display:flex;align-items:center;gap:16px;margin-top:8px;position:sticky;bottom:0;
background:linear-gradient(transparent,var(--bg) 30%);padding:16px 0 8px}
#font-status{margin-left:4px}
/* find-your-restaurant box */
.lookupbox{background:linear-gradient(180deg,#1c2609,#fcfbfd);border-color:#d6e4f5}
.lookupbox h2{display:flex;align-items:center;gap:8px}
/* new-brand guided steps (agency) */
.nb-progress{margin:0 0 22px}
.nb-h{font-family:var(--display);font-size:24px;margin-bottom:6px;letter-spacing:-.01em}
.nb-sub{margin-bottom:18px;max-width:560px}
.or-divider{display:flex;align-items:center;gap:14px;margin:4px 0 16px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.nb-manual-row{margin-top:4px}
.nb-back{margin-bottom:16px}
/* AI generate box */
.aibox{background:linear-gradient(180deg,#fcfbfd,#fcfbfd);border-color:#dcdaf4}
.aibox h2{display:flex;align-items:center;gap:8px}
.aibox textarea{width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--line);
border-radius:var(--r-sm);font:inherit;font-size:14px;resize:vertical;background:#fcfbfd}
.airow{display:flex;align-items:center;gap:12px;margin-top:10px}
/* import box */
.importbox{background:linear-gradient(180deg,#eeebf4,#fcfbfd);border-color:#dcdcef}
.importbox h2{display:flex;align-items:center;gap:8px}
.importrow{display:flex;gap:10px;margin:10px 0}
.importrow{position:relative}
.importrow input{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:15px}
.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden;padding:5px}
.ac-item{padding:10px 12px;border-radius:8px;font-size:14px;cursor:pointer}
.ac-item:hover{background:var(--accent-tint)}
.suggest{margin-top:16px;display:flex;gap:28px;flex-wrap:wrap}
.sug-block b{display:block;margin-bottom:8px;font-size:13.5px}
.sugbtn{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);
background:#fcfbfd;border-radius:6px;padding:10px;cursor:pointer}
.sugbtn img{max-height:48px;max-width:200px;background:repeating-conic-gradient(#eee 0 25%,#fcfbfd 0 50%) 0/16px 16px}
.sugbtn span{font-size:12px;font-weight:700;color:var(--accent)}
.sugthumb{border:1px solid var(--line);border-radius:6px;padding:0;overflow:hidden;cursor:pointer;background:#fcfbfd}
.sugthumb img{height:72px;width:72px;object-fit:cover;display:block}
.sugthumb:hover,.sugbtn:hover{border-color:var(--accent)}
.import-note{font-size:12.5px;color:var(--warn-text);font-weight:600;margin-top:8px}
/* =========================================================== carousel setup */
.palette{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
.palette label{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.04em;margin:0}
.palette input[type=color]{width:64px;height:48px;border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:0}
.slide-row{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line-soft)}
.slide-row:first-child{border-top:none;padding-top:6px}
.sr-photo{width:148px;flex:none}
.sr-thumb{width:148px;aspect-ratio:1080/1350;border:1px solid var(--line);border-radius:6px;overflow:hidden;
background:var(--surface-2);display:grid;place-items:center;margin-bottom:8px;color:var(--muted);font-size:12px}
.sr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sr-copy{flex:1;min-width:0}
.sr-h{font-weight:700;font-size:14px;margin-bottom:8px;text-transform:capitalize}
.sr-copy input{display:block;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
font-size:14px;font-weight:500;margin-bottom:8px;font-family:inherit}
.qline{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;min-height:18px;font-size:12px;color:var(--muted);align-items:center}
.pairs{margin-top:12px}
.pairs-h{font-size:13px;margin-bottom:6px}
.pair-row{display:flex;gap:8px;margin-bottom:8px}
.pair-row input{flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;min-width:0;font-family:inherit}
/* ============================================================= carousel tool */
.carcard .card-go{display:flex;gap:10px;flex-wrap:wrap}
.slides{display:flex;gap:14px;overflow-x:auto;padding:8px 0 24px}
.slides img{height:420px;width:auto;border-radius:6px;border:1px solid var(--line);box-shadow:var(--sh);flex:none;display:block}
/* shimmer placeholder while a slide renders (portrait 1080×1350 → 336×420) */
.slide-skel{flex:none;width:336px;height:420px;border-radius:6px;border:1px solid var(--line);
background:linear-gradient(100deg,#eeebf4 30%,#eeebf4 50%,#eeebf4 70%);background-size:220% 100%;
animation:shimmer 1.25s linear infinite}
.slide-dl{position:relative;flex:none;text-decoration:none}
.slide-dl::after{content:"⬇";position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;
align-items:center;justify-content:center;border-radius:8px;background:rgba(27,27,29,.66);color:#fcfbfd;
font-size:14px;opacity:0;transition:opacity .15s ease}
.slide-dl:hover::after{opacity:1}
#slides-wrap{margin-top:18px}
.slides-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}
.slides-head h2{margin:0}
.slides-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.car-savenote{font-size:12.5px;margin:6px 0 0;color:var(--ok)}
/* carousel saved-versions strip (reuses .lib-grid / .lib-card) */
.car-saved{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.car-saved-h{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 4px}
.lib-thumb.view-saved{border:0;padding:0;cursor:pointer;width:100%}
@media (prefers-reduced-motion: reduce){.slide-dl::after{transition:none}}
#cstatus{font-size:13px}
/* ============================================================ onboarding (single) */
body.onboard{display:block;background:radial-gradient(120% 90% at 50% 0,#eeebf4,#eeebf4 60%)}
.onboard-wrap{min-height:100dvh;display:grid;place-items:center;padding:40px 20px}
.onboard-card{width:100%;max-width:600px;background:var(--surface);border:1px solid var(--line);
border-radius:16px;box-shadow:var(--sh-lg);padding:20px 32px 24px;overflow:visible}
.ob-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;
padding-bottom:13px;border-bottom:1px solid var(--line-soft)}
.ob-logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:16px;
letter-spacing:-.01em;color:var(--ink)}
.ob-logo svg{width:22px;height:22px;color:var(--accent)}
.ob-progress{display:flex;gap:6px}
.ob-progress i{width:24px;height:5px;border-radius:3px;background:var(--line);transition:.25s}
.ob-progress i.active{background:var(--accent)}
.ob-progress i.done{background:var(--accent-2)}
/* dashboard-style coloured eyebrow pill (mirrors the home section headers) */
.ob-eyebrow{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:700;line-height:1;
letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
background:#eae4f1;color:#321847;margin-bottom:9px}
.ob-eyebrow-done{background:#fcfbfd;color:#321847}
.ob-step h1{font-family:var(--display);font-size:23px;font-weight:700;margin-bottom:5px;letter-spacing:-.02em;color:var(--ink)}
.ob-step>.muted{font-size:14px;margin-bottom:16px;line-height:1.5;max-width:60ch}
.ob-emoji{font-size:34px;margin-bottom:8px}
.ob-benefits{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.ob-benefits li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--ink-soft);
background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
box-shadow:var(--sh-sm)}
.ob-benefits li span{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;
background:var(--accent-tint);color:var(--accent);font-size:14px}
.ob-benefits li span svg{width:16px;height:16px}
.ob-benefits li b{color:var(--ink);font-weight:700}
/* tint each pillar to match the home section headers (Review/Create/Grow) */
.ob-b-review{background:#eae4f1!important;color:#321847!important}
.ob-b-create{background:#fcfbfd!important;color:#321847!important}
.ob-b-grow{background:#f7ecd6!important;color:var(--warn-text)!important}
/* wider card for the 2-column confirm + locations steps */
.onboard-card:has(.ob-step.ob-wide:not(.hidden)){max-width:880px}
.ob-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
@media(max-width:720px){.ob-grid2{grid-template-columns:1fr;gap:18px}}
.ob-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-f{display:block}
.ob-f-lab{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.01em}
.ob-f-note{font-style:normal;font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#321847;margin-left:2px}
.ob-input{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;
padding:0 13px;background:#fcfbfd;transition:border-color .12s,box-shadow .12s,background .12s}
.ob-input svg{width:17px;height:17px;color:var(--muted);flex:none}
.ob-input input{flex:1;min-width:0;border:none;outline:none;background:none;padding:10px 0;
font-size:15px;font-family:inherit;color:var(--ink)}
.ob-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.ob-input:focus-within svg{color:var(--accent)}
.ob-f.needs .ob-input{border-color:#e8bdb6;background:#fce4e4}
.ob-f.needs .ob-input svg{color:#c98a83}
/* light groups, not boxes — just a label + a hairline divider between them */
.ob-block{border:0;padding:0;background:none}
.ob-block + .ob-block{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ob-block .ob-f-lab{margin-bottom:10px}
.ob-block .colours{margin:0}
.ob-block .rv-imgs,.ob-block .rv-logo{margin-bottom:8px}
.ob-block .rv-up{margin-bottom:0}
.ob-hint-inline{font-weight:500;text-transform:none;letter-spacing:0;font-size:11px;color:var(--faint,#a49eb0);font-style:normal}
.ob-actions{display:flex;gap:11px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ob-actions .btn-primary{flex:1;justify-content:center;width:auto;margin:0;padding:11px 16px;font-size:15px}
.ob-actions .ob-back{margin:0;order:-1}
.ob-go{width:100%;justify-content:center;margin-bottom:8px;padding:12px 16px;font-size:15px}
/* Live homepage capture in onboarding — the evidence behind the brand colours. The
shot is deliberately small and unclickable: it is proof, not a photo to choose. */
.rv-shot{margin:16px 0 4px;display:flex;flex-direction:column;gap:8px}
.rv-shot-img{width:100%;max-width:340px;border:1px solid var(--line);border-radius:8px;display:block}
.rv-shot-note{font-size:12px;color:var(--muted);margin:2px 0 0;line-height:1.45}
.rv-shot-pal{display:flex;flex-wrap:wrap;gap:8px}
.rv-sw{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;
background:none;border:0;cursor:pointer;font:inherit}
.rv-sw span{width:40px;height:28px;border-radius:5px;border:1px solid var(--line);display:block;transition:.12s}
.rv-sw:hover span{transform:scale(1.06)}
.rv-sw.on span{outline:2px solid var(--ink);outline-offset:2px}
.rv-sw code{font-family:var(--mono);font-size:10px;color:var(--muted)}
.rv-sw:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:5px}
.rv-logo{margin-bottom:14px}
.rv-logo-chip{position:relative;display:inline-block;background:repeating-conic-gradient(#e3deea 0 25%,#fcfbfd 0 50%) 0/20px 20px;
border:1px solid var(--line);border-radius:6px;padding:8px}
.rv-logo-chip img{max-height:56px;max-width:200px;display:block}
.rv-imgs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.rv-thumb{position:relative;width:92px;height:92px;border-radius:6px;overflow:hidden;
border:2px solid var(--line);cursor:pointer;transition:.12s}
.rv-thumb:hover{border-color:#c9c2d4}
/* empty "add a photo" slot — always padded to 5 so the target is obvious */
.rv-add{width:92px;height:92px;border-radius:6px;border:1.5px dashed var(--line);background:var(--surface-2);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
color:var(--muted);font-family:inherit;padding:0;transition:border-color .12s,background .12s,color .12s}
.rv-add:hover{border-color:var(--accent);background:var(--accent-tint);color:var(--accent)}
.rv-add-plus{font-size:22px;line-height:1;font-weight:400}
.rv-add-t{font-size:10.5px;font-weight:600}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rv-thumb::after{content:"";position:absolute;inset:0;background:rgba(25,23,43,.32);opacity:0;transition:.12s}
.rv-thumb:not(.on):hover::after{opacity:1}
.rv-thumb.on{border-color:var(--accent)}
.rv-check{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;display:none;
place-items:center;background:var(--accent);color:#fcfbfd;font-size:12px;font-weight:700;z-index:2}
.rv-thumb.on .rv-check{display:grid}
.rv-q{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;font-weight:700;text-align:center;
padding:2px 0;color:#fcfbfd;z-index:2;letter-spacing:.01em}
.rv-q.q-ok{background:rgba(21,127,63,.92)}
.rv-q.q-soft{background:rgba(143,98,0,.92)}
.rv-q.q-low{background:rgba(193,42,30,.92)}
.rv-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:none;
background:var(--ink);color:#fcfbfd;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.rv-up{display:inline-block;margin-bottom:16px;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer}
.rv-up:hover{text-decoration:underline}
/* onboarding: multi-location confirm tick-list */
.rv-locs-help{font-size:13px;margin:2px 0 12px}
.rv-locs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.rv-loc{display:flex;align-items:baseline;gap:10px;padding:11px 13px;border:1px solid var(--line);
border-radius:6px;cursor:pointer;background:var(--surface-2);transition:.12s}
.rv-loc:hover{border-color:#c9c2d4}
.rv-loc.on{border-color:var(--accent);background:var(--accent-tint)}
.rv-loc input{margin:0;flex:none}
.rv-loc-name{font-weight:700;font-size:14px}
.rv-loc-addr{font-size:12.5px;color:var(--muted)}
.rv-loc-addrow{margin-top:10px;position:relative}
.ob-search{margin-bottom:6px}
.ob-search input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);font-size:15px}
.ob-link{display:inline-block;margin:10px 0 4px;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer}
.ob-field{display:block;font-weight:600;font-size:12px;letter-spacing:.01em;color:var(--muted);margin:0 0 16px}
.ob-field input,.ob-field select{display:block;width:100%;margin-top:7px;padding:11px 14px;border:1px solid var(--line);
border-radius:10px;font:inherit;font-size:14px;color:var(--ink);background:#fcfbfd;transition:border-color .14s,background .14s,box-shadow .14s}
.ob-field input:hover,.ob-field select:hover{border-color:#d3d3e4}
.ob-field input:focus,.ob-field select:focus{background:#fcfbfd}
#manual{margin:10px 0 6px;padding:16px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:7px}
.ob-back{margin-top:10px}
/* input with leading icon / prefix */
.fic{position:relative;display:block;margin-top:7px}
.fic-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.fic-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;font-weight:500;pointer-events:none}
.fset .fic input:not([type=color]):not([type=radio]):not([type=file]){margin-top:0;padding-left:40px}
.fset .fic-at input:not([type=color]):not([type=radio]):not([type=file]){padding-left:28px}
.colours{display:flex;gap:14px;margin:8px 0 18px}
.col{display:flex;flex-direction:column;align-items:center;gap:7px}
.col-hex{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--muted)}
.col input[type=color]{width:54px;height:54px;border:none;border-radius:12px;cursor:pointer;padding:0;background:none;
box-shadow:0 1px 3px rgba(20,20,40,.12)}
.col input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.col input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.08);border-radius:12px}
.col input[type=color]::-moz-color-swatch{border:1px solid rgba(0,0,0,.08);border-radius:12px}
/* build checklist */
.ob-checklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ob-checklist li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:var(--muted);transition:.2s}
.ob-checklist li .ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;
display:grid;place-items:center;font-size:12px;color:#fcfbfd;transition:.2s}
.ob-checklist li.active{color:var(--ink)}
.ob-checklist li.active .ck{border-color:var(--accent);border-top-color:transparent;animation:sp .8s linear infinite}
.ob-checklist li.done{color:var(--ink)}
.ob-checklist li.done .ck{background:var(--ok);border-color:var(--ok)}
.ob-checklist li.done .ck::after{content:"✓"}
.ob-checklist li.skip{color:var(--muted)}
.ob-checklist li.skip .ck{background:var(--line);border-color:var(--line)}
.ob-checklist li.skip::after{content:attr(data-note);color:var(--muted);font-size:12px}
.success-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#fcfbfd;
border:2px solid #bfe6cf;display:grid;place-items:center;font-size:26px;color:var(--ok)}
.ob-step[data-step="done"]{text-align:center}
.ob-step[data-step="done"] .btn{width:100%;justify-content:center;margin-bottom:8px}
.pc-swatches i{width:22px;height:22px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.08)}
/* single-mode home */
.profilecard{margin-bottom:8px}
.pc-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pc-swatches{display:flex;gap:7px}
.pc-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.pc-meta a{color:var(--accent);text-decoration:none;font-weight:600}
.sec-h{margin:26px 0 14px;font-size:15px}
.toolcard.mk .tc-body{padding:18px 20px}
.toolcard.mk .tc-title{font-size:16px}
.src-note{font-size:11.5px;color:var(--muted);font-style:italic}
/* ordering & fulfilment */
.ordering-set{display:flex;flex-direction:column;gap:14px}
.ord-block{display:flex;flex-direction:column;gap:9px}
.ord-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ord-svcs{display:flex;flex-wrap:wrap;gap:8px}
.ord-svc{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-ink);
background:var(--accent-tint);border:1px solid rgba(50,24,71,.16);border-radius:999px;padding:5px 13px}
.ord-svc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ord-provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
/* each card tinted with the brand's primary colour (--brand set per card) */
.ord-prov{--brand:#6f6980;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;
background:var(--surface-2);background:color-mix(in srgb,var(--brand) 7%,#fcfbfd);
border-color:color-mix(in srgb,var(--brand) 22%,#fcfbfd);
display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;transition:border-color .14s,box-shadow .14s}
a.ord-prov{cursor:pointer}
a.ord-prov:hover{border-color:color-mix(in srgb,var(--brand) 48%,#fcfbfd);
box-shadow:0 3px 12px color-mix(in srgb,var(--brand) 22%,transparent)}
.ord-prov-url{margin-top:2px;font-size:12px;color:var(--muted)}
/* name on top, role badge always underneath — consistent whatever the name length */
.ord-prov-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ord-prov-role{align-self:flex-start}
.ord-prov-id{display:flex;align-items:center;gap:8px;min-width:0}
.ord-prov-logo{width:34px;height:34px;border-radius:7px;object-fit:contain;flex:none;background:#fcfbfd;border:1px solid var(--line);padding:3px}
.ord-prov-name{font-weight:700;font-size:14px;color:var(--ink);text-decoration:none}
.ord-prov-role{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:5px;
color:#fcfbfd;background:var(--brand);background:color-mix(in srgb,var(--brand) 80%,#000);white-space:nowrap}
.ord-prov-ful{font-size:12.5px;color:var(--muted)}
.ord-none{background:#fce4e4;border:1px solid #e8bdb6;color:#321847;border-radius:var(--r);padding:13px 15px;font-size:13.5px;line-height:1.55}
.ord-none b{color:#321847;font-weight:700}
.ord-note{font-size:11.5px;margin:2px 0 0;line-height:1.45}
/* empty states */
/* --- competitor benchmark ------------------------------------------------- */
.comp-headline{font-family:var(--display);font-size:17px;line-height:1.42;margin:2px 0 10px}
.comp-advice{font-size:13.5px;line-height:1.5;color:var(--ink);background:var(--surface-2);
border-left:3px solid var(--accent);padding:10px 12px;margin:0 0 16px}
.comp-scope{font-size:12px}
.comp-table{border:1px solid var(--line)}
.comp-row{display:grid;grid-template-columns:34px 1fr 92px 62px 74px;align-items:center;
gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.comp-row:last-child{border-bottom:0}
.comp-head{background:var(--surface-2);font-size:11px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted)}
/* Their own row is the one they're looking for — make it findable at a glance. */
.comp-row.me{background:color-mix(in srgb,var(--accent) 8%,transparent);font-weight:600}
.comp-row .c-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comp-row .c-rating,.comp-row .c-revs{text-align:right}
.c-you{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
background:var(--accent);color:var(--on-accent,#fff);padding:2px 6px;margin-left:6px}
.comp-foot{font-size:11.5px;line-height:1.5;margin-top:10px}
.comp-loading{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 0}
@media(max-width:640px){
.comp-row{grid-template-columns:26px 1fr 54px 62px}
.comp-row .c-dist{display:none}
}
.emptystate{border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-2);
padding:40px 24px;text-align:center;margin-top:6px}
/* Wizard failure state. Same shape as .emptystate so a failed step reads as part
of the product, not a browser error — but bordered in --bad so it's not mistaken
for an ordinary empty list. */
.wiz-error{border:1.5px solid var(--bad);background:var(--surface-2);
padding:36px 24px;text-align:center;margin-top:6px}
.wiz-error .es-sub{margin-bottom:16px}
.wiz-error .btn{margin-top:4px}
.es-icon{font-size:30px;opacity:.55;margin-bottom:8px}
.es-title{font-family:var(--display);font-weight:600;font-size:16px}
.es-sub{font-size:13.5px;color:var(--muted);margin-top:4px;max-width:420px;margin-left:auto;margin-right:auto}
/* ============================================================ marketing pages */
.score-hero{display:flex;align-items:center;gap:22px;margin:6px 0 20px}
.score-ring{width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;
background:conic-gradient(var(--accent) 0deg,var(--line-soft) 0)}
.score-ring span{width:74px;height:74px;border-radius:50%;background:var(--surface);display:grid;
place-items:center;font-family:var(--display);font-weight:600;font-size:28px}
.sectiongrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
@media(max-width:680px){.sectiongrid{grid-template-columns:1fr}}
/* ====================================================== GBP review redesign */
/* report pages get a tighter title than the editorial dashboard */
body[data-report] .ph-title h1{font-size:24px;font-weight:680;letter-spacing:-.02em}
/* GBP list view uses the full width of the screen, with a tighter header so all rows fit */
body[data-report] .content{max-width:none;padding-top:22px;padding-bottom:32px}
/* the audit wrapper is normally capped at 880px; break out for the multi-location list AND the full report */
/* GBP list (hero + locations table): centred, contained — not full-bleed */
.setup:has(> #gbp-switcher:not(.hidden)){max-width:1080px;margin-left:auto;margin-right:auto}
/* the full report reads best as one centred, contained column (text-heavy) */
.setup:has(> #result:not(.hidden)){max-width:940px;margin-left:auto;margin-right:auto}
/* report = a horizontal quick-jump nav on top, then the centred main column */
.report-cols{display:flex;flex-direction:column;gap:22px}
.report-main{width:100%;min-width:0;display:flex;flex-direction:column;gap:20px}
/* Airbnb-style white cards: one consistent radius, subtle low elevation, generous
padding. White page, cards float gently; blue accent used sparingly. */
body[data-report]{background:#fcfbfd}
body[data-report] .pagehead{background:#fcfbfd;border-bottom:1px solid #e3deea}
body[data-report] .report-main > .fset,
body[data-report] .report-main > .hero,
body[data-report] .report-main > .breakdown-card,
body[data-report] .report-main > #ordering > .fset,
body[data-report] .report-main > #changes > .fset{
background:#fcfbfd;border:1px solid #e3deea;border-radius:10px;margin:0;padding:26px;min-width:0;
box-shadow:0 1px 2px rgba(24,20,50,.04),0 8px 24px rgba(24,20,50,.05)}
body[data-report] .report-main > #changes:empty,
body[data-report] .report-main > #ordering:empty{display:none}
body[data-report] .report-main .secard{padding:16px 0 0}
body[data-report] .report-main > #rep-checklist{order:20}
/* minimal section headings — small bold label, no bulky band */
body[data-report] .report-main .cl-head,
body[data-report] .report-main .checklist-head,
body[data-report] .report-main .breakdown-card .shead{margin:0 0 14px}
/* ClickUp-style soft-coloured section header pills — snug uppercase labels */
body[data-report] .report-main h2,
body[data-report] .report-main .cl-head .t,
body[data-report] .report-main .shead .t{
display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;line-height:1;
letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:7px;
color:var(--ink);background:var(--surface-2);margin:0;border:none}
body[data-report] #rep-checklist .cl-head .t{background:#eae4f1;color:#321847} /* action plan · indigo */
body[data-report] #features-box h2{background:#f7ecd6;color:var(--warn-text)} /* completeness · amber */
body[data-report] #sections .shead .t{background:#eae4f1;color:#321847} /* breakdown · purple */
body[data-report] #changes h2{background:#fcfbfd;color:#321847} /* changes · green */
body[data-report] #replies-box h2{background:#fce4e4;color:#321847} /* replies · pink */
body[data-report] .report-main .cl-help,
body[data-report] .report-main .muted{color:var(--muted)}
body[data-report] .sectiongrid{gap:6px 36px;margin:0}
body[data-report] .metricsrow{margin:0}
/* horizontal quick-jump bar, pinned under the page header, above the report */
.report-key{order:-1;width:100%;position:sticky;top:60px;z-index:6;
display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;
padding:11px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.report-key::before{content:"On this page";font-size:10.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--faint);padding:0 16px 0 20px}
.report-key a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
padding:6px 13px;border:1px solid transparent;transition:color .12s,border-color .12s,background .12s}
.report-key a:hover,.report-key a.active{color:var(--accent-ink);background:var(--accent-tint);border-color:var(--accent-3)}
@media(max-width:560px){.report-key::before{display:none}}
/* on report pages the title scrolls away (not sticky) so the "On this page" bar
below it can own the single sticky slot under the main nav — no stacking */
body[data-report] .pagehead{padding-top:18px;padding-bottom:14px;position:static}
body[data-report] .ph-title p{margin-top:4px;font-size:13px}
/* scoped palette for the GBP list view (per design spec) */
#gbp-switcher{
--surface:#fcfbfd; --line:#e3deea; --line-soft:#eae4f1;
--ink:#241730; --muted:#6f6980; --faint:#a49eb0;
--accent:#321847; --accent-ink:#321847; --accent-2:#6a4a8a; --accent-3:#c9c2d4; --accent-soft:#eae4f1;
--good:#321847; --good-soft:#fcfbfd; --warn:#f5a623; --warn-text:#8f6200; --warn-soft:#f7ecd6;
--bad:#f15153; --bad-soft:#fce4e4; --star:#8a7a5a; --track:#e3deea; --radius:9px;
display:block;
}
#gbp-switcher *{font-variant-numeric:tabular-nums}
/* summary strip */
#gbp-switcher .summary{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 22px;margin-bottom:12px}
#gbp-switcher .avg{display:flex;align-items:center;gap:13px}
#gbp-switcher .avg .num{font-size:29px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--accent-ink)}
#gbp-switcher .avg .lab{font-size:12.5px;color:var(--muted);line-height:1.35}
#gbp-switcher .avg .lab b{color:var(--ink);font-weight:600}
#gbp-switcher .dist{display:flex;flex-direction:column;gap:9px;min-width:0}
#gbp-switcher .dist-bar{height:9px;border-radius:6px;overflow:hidden;display:flex;background:var(--track)}
#gbp-switcher .dist-bar span{display:block;height:100%}
#gbp-switcher .dist-key{display:flex;gap:18px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
#gbp-switcher .dist-key i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
#gbp-switcher .dist-key b{color:var(--ink);font-weight:600}
/* network summary hero (top of the list page) */
#gbp-switcher .gbp-hero{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:16px}
#gbp-switcher .gh-score{display:flex;flex-direction:column;align-items:center;gap:9px;flex:none}
#gbp-switcher .gh-ring{width:78px;height:78px}
#gbp-switcher .gh-ring::before{inset:6px}
#gbp-switcher .gh-ring b{font-size:24px}
#gbp-switcher .gh-bandlbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:3px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
#gbp-switcher .gh-bandlbl.s-good{color:var(--good);background:var(--good-soft)}
#gbp-switcher .gh-bandlbl.s-warn{color:var(--warn-text);background:var(--warn-soft)}
#gbp-switcher .gh-bandlbl.s-bad{color:var(--bad-text);background:var(--bad-soft)}
#gbp-switcher .gh-mid{min-width:0}
#gbp-switcher .gh-title{font-weight:650;font-size:15px;color:var(--ink)}
#gbp-switcher .gh-title span{color:var(--muted);font-weight:500}
#gbp-switcher .gh-sum{font-size:13px;color:var(--muted);line-height:1.5;margin:5px 0 12px;max-width:74ch}
#gbp-switcher .gh-stats{display:flex;flex:none;border-left:1px solid var(--line)}
#gbp-switcher .gh-stat{padding:0 20px;text-align:center}
#gbp-switcher .gh-stat:last-child{padding-right:2px}
#gbp-switcher .gh-stat b{display:block;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
#gbp-switcher .gh-stat span{font-size:11.5px;color:var(--muted);font-weight:600}
#gbp-switcher .tbl-controls-l{font-weight:650;font-size:14px;color:var(--ink)}
@media(max-width:880px){
#gbp-switcher .gbp-hero{grid-template-columns:1fr;justify-items:center;text-align:center}
#gbp-switcher .gh-stats{border-left:none;border-top:1px solid var(--line);padding-top:12px;justify-content:center;width:100%}
}
/* table shell */
#gbp-switcher .tbl{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#gbp-switcher .tbl-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:2px 2px 14px}
#gbp-switcher .avg-inline{font-size:14px;color:var(--muted);display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
background:#fcfbfd;border:1px solid var(--line);border-radius:10px;padding:8px 15px;box-shadow:0 1px 2px rgba(20,22,28,.07)}
#gbp-switcher .avg-inline b{font-size:22px;font-weight:700;color:var(--accent-ink);letter-spacing:-.02em;line-height:1}
#gbp-switcher .avg-inline span{color:var(--muted);font-size:13px}
#gbp-switcher .sort{display:flex;background:var(--accent-soft);border-radius:9px;padding:3px}
#gbp-switcher .sort button{font:inherit;font-size:12.5px;font-weight:550;color:var(--muted);background:none;border:none;padding:5px 11px;border-radius:7px;cursor:pointer}
#gbp-switcher .sort button.on{background:#fcfbfd;color:var(--ink);box-shadow:0 1px 2px rgba(20,22,28,.08)}
#gbp-switcher .sort button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#gbp-switcher .colhead,#gbp-switcher .row{
display:grid;grid-template-columns:minmax(220px,2.4fr) 60px minmax(160px,1.4fr) minmax(130px,1fr) minmax(200px,2fr) 20px;
align-items:center;gap:24px;padding:0 28px}
#gbp-switcher .colhead{height:34px;border-bottom:1px solid var(--line);background:#fcfbfd}
#gbp-switcher .colhead div{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#gbp-switcher .row{min-height:47px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .1s;color:inherit;text-decoration:none}
#gbp-switcher .row:last-child{border-bottom:none}
#gbp-switcher .row:hover{background:#eeebf4}
#gbp-switcher .row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
#gbp-switcher .row:hover .chev,#gbp-switcher .row:focus-visible .chev{color:var(--accent);transform:translateX(2px)}
/* order-online mini pills in the locations table (favicon + brand colour) */
#gbp-switcher .orderlinks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;padding:6px 0}
.miniprov{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;line-height:1;
padding:3px 9px 3px 3px;border-radius:999px;white-space:nowrap;max-width:100%;
background:var(--surface-2);background:color-mix(in srgb,var(--brand,#6f6980) 10%,#fcfbfd);
border:1px solid var(--line);border-color:color-mix(in srgb,var(--brand,#6f6980) 24%,#fcfbfd);
color:var(--ink-soft);color:color-mix(in srgb,var(--brand,#6f6980) 72%,#000)}
.miniprov img{width:16px;height:16px;border-radius:4px;flex:none;background:#fcfbfd;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.miniprov.more{--brand:#9a9aa8;padding:3px 9px;font-variant-numeric:tabular-nums;font-weight:700}
/* home channel cards: larger, more legible order-online chips */
.pv-chan-ord{gap:8px}
.pv-chan-ord .miniprov{font-size:13.5px;gap:7px;padding:5px 12px 5px 5px;border-radius:999px}
.pv-chan-ord .miniprov img{width:20px;height:20px;border-radius:5px}
/* order-online split into Pick-up / Delivery rows */
#gbp-switcher .orderlinks2{display:flex;flex-direction:column;gap:6px;min-width:0;padding:7px 0}
.ol-row{display:flex;align-items:center;gap:9px;min-width:0}
.ol-lbl{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint,#a49eb0);width:56px;flex:none}
.ol-pills{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.ol-dash{color:var(--faint,#a49eb0);font-size:13px}
/* demoted: errors whisper — a subtle muted-amber text link, not a loud block */
.ol-unread{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;
color:#b39152;background:none;border:0;padding:0;cursor:pointer}
.ol-unread:hover{color:#d3a95e;text-decoration:underline}
.ol-unread::before{content:"↻";font-weight:700}
/* genuine "no order links" per branch — red, matching the home/report gap flag */
.ol-nolinks{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
color:#321847;background:#fce4e4;border:1px solid #e8bdb6;border-radius:999px;padding:3px 10px}
.ol-nolinks::before{content:"✕";font-size:10px;font-weight:800}
/* compact icon-only provider chips (dense locations table) */
.provdot{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
background:color-mix(in srgb,var(--brand,#6f6980) 15%,#fcfbfd);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand,#6f6980) 32%,#fcfbfd);
transition:transform .1s,box-shadow .1s;cursor:default}
.provdot:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 45%,#fcfbfd),0 3px 8px rgba(24,20,50,.12)}
.provdot img{width:16px;height:16px;border-radius:3px;object-fit:contain}
.provdot b{display:none;font-size:11px;font-weight:800;color:var(--brand,#6f6980);line-height:1}
.provdot.noimg img{display:none}
.provdot.noimg b{display:block}
#gbp-switcher .loc{min-width:0}
#gbp-switcher .loc .name{font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gbp-switcher .loc .addr{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
/* score ring */
#gbp-switcher .ring{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
#gbp-switcher .ring::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--surface)}
#gbp-switcher .row:hover .ring::before{background:#eeebf4}
#gbp-switcher .ring b{position:relative;font-size:13px;font-weight:700}
#gbp-switcher .ring.s-good{background:conic-gradient(var(--good) calc(var(--p)*1%),var(--track) 0)}
#gbp-switcher .ring.s-good b{color:var(--good)}
#gbp-switcher .ring.s-warn{background:conic-gradient(var(--warn) calc(var(--p)*1%),var(--track) 0)}
#gbp-switcher .ring.s-warn b{color:var(--warn-text)}
#gbp-switcher .ring.s-bad{background:conic-gradient(var(--bad) calc(var(--p)*1%),var(--track) 0)}
#gbp-switcher .ring.s-bad b{color:#321847}
#gbp-switcher .ring.s-none{background:var(--track)}
#gbp-switcher .ring.s-none b{color:var(--faint);font-size:12px;font-weight:600}
/* completeness */
#gbp-switcher .comp{display:flex;align-items:center;gap:10px}
#gbp-switcher .comp .bar{flex:1;height:6px;border-radius:4px;background:var(--track);overflow:hidden}
#gbp-switcher .comp .bar i{display:block;height:100%;background:#50505f;border-radius:4px} /* neutral: let the ring carry the score colour */
#gbp-switcher .comp .v{font-size:12.5px;color:var(--muted);white-space:nowrap}
/* rating */
#gbp-switcher .rate{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
#gbp-switcher .rate .star{color:var(--star)}
#gbp-switcher .rate .val{font-weight:600;color:var(--ink)}
#gbp-switcher .rate .cnt{font-size:12.5px;color:var(--muted)}
#gbp-switcher .rate .dash{color:var(--faint)}
/* needs */
#gbp-switcher .needs{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
#gbp-switcher .needs .cnt{flex:none;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
border-radius:6px;font-size:12px;font-weight:650;background:var(--accent-soft);color:var(--accent-ink)}
#gbp-switcher .needs .cnt.zero{background:var(--good-soft);color:var(--good)}
#gbp-switcher .tag{flex:0 1 auto;min-width:0;font-size:12px;font-weight:500;color:#4a3fb0;background:var(--accent-soft);border-radius:6px;padding:3px 9px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gbp-switcher .tag.ok{background:var(--good-soft);color:var(--good)}
#gbp-switcher .chev{color:var(--faint);transition:color .1s,transform .12s;display:grid;place-items:center}
#gbp-switcher .chev svg{width:16px;height:16px;stroke-width:2;fill:none;stroke:currentColor}
@media(max-width:880px){
#gbp-switcher .colhead .c-comp,#gbp-switcher .colhead .c-rate,
#gbp-switcher .row .comp,#gbp-switcher .row .rate{display:none}
#gbp-switcher .colhead,#gbp-switcher .row{grid-template-columns:1fr 64px minmax(120px,1fr) 22px}
#gbp-switcher .summary{grid-template-columns:1fr}
}
/* Below 640px this stops being a table. The four-column grid kept its desktop
24px gaps and 28px padding, so on a 390px phone the name track was squeezed to
about 12px — and because .loc .name is nowrap + ellipsis it truncated silently
to a single letter. Every branch rendered as "O". A multi-site owner could not
tell Hampstead from Richmond on the screen they use most.
Stack instead: name on its own full-width line, score and order links beneath. */
@media(max-width:640px){
#gbp-switcher .colhead{display:none}
#gbp-switcher .row{display:flex;flex-wrap:wrap;align-items:center;
gap:8px 14px;padding:14px 16px}
#gbp-switcher .row .loc{flex:1 1 100%;order:-1;min-width:0}
#gbp-switcher .row .loc .name{white-space:normal;overflow:visible;font-size:15px;line-height:1.25}
#gbp-switcher .row .loc .addr{white-space:normal;overflow:visible;text-overflow:clip}
#gbp-switcher .row .ring{flex:none}
#gbp-switcher .row .ol{flex:1 1 auto;min-width:0}
#gbp-switcher .row .chev{flex:none;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
#gbp-switcher .row,#gbp-switcher .chev{transition:none}
#gbp-switcher .row:hover .chev{transform:none}
}
/* billing page */
.bill-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.bill-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--accent-tint);color:var(--accent-ink)}
.bill-badge.trial{background:#f7ecd6;color:#8a6100}
.bill-badge.active{background:#eae4f1;color:#321847}
.bill-amt{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.bill-amt span{font-family:var(--font);font-size:15px;font-weight:600;color:var(--muted)}
.bill-feats{margin:16px 0 6px}
.bill-card-none{display:flex;align-items:center;gap:12px;border:1px dashed var(--line);border-radius:10px;padding:14px 16px;color:var(--muted);font-weight:600}
/* brand & assets — logo + photo manager */
.img-row{display:flex;gap:16px;align-items:flex-start;margin:6px 0 4px}
.img-logo{width:104px;height:104px;flex:none;border:1.5px dashed var(--line);border-radius:12px;background:var(--surface-2);
display:grid;place-items:center;cursor:pointer;overflow:hidden;position:relative;color:var(--muted);transition:border-color .14s,color .14s}
.img-logo:hover{border-color:var(--accent);color:var(--accent-ink)}
.img-logo img{width:100%;height:100%;object-fit:cover}
.img-logo-ed{position:absolute;bottom:0;left:0;right:0;background:rgba(20,19,25,.72);color:#fcfbfd;font-size:11px;font-weight:600;padding:3px;text-align:center}
.img-logo-add{font-size:13px;font-weight:600}
.img-gal-wrap{flex:1;min-width:0}
.img-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;min-height:56px}
.img-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.img-thumb button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;border:none;
background:rgba(20,19,25,.75);color:#fcfbfd;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.img-thumb button:hover{background:#321847}
.img-add{margin-top:12px}
.img-count{font-size:12.5px;font-weight:500;color:var(--muted)}
/* settings — preference rows + segmented controls */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;flex:none}
.seg button{font:inherit;font-size:12.5px;font-weight:550;color:var(--muted);background:none;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .12s,color .12s}
.seg button.on{background:#fcfbfd;color:var(--ink);box-shadow:0 1px 2px rgba(20,22,28,.08)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pref-grid{display:flex;flex-direction:column}
.pref-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.pref-item:last-child{border-bottom:none}
.pref-lab{display:flex;flex-direction:column;gap:2px;min-width:0}
.pref-lab b{font-size:14px;font-weight:600;color:var(--ink)}
.pref-lab span{font-size:12.5px;color:var(--muted)}
.pref-links{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:560px){.pref-item{flex-direction:column;align-items:flex-start;gap:10px}}
/* legal docs */
.legal-doc h2{font-size:15px;margin:22px 0 6px}
.legal-doc h2:first-of-type{margin-top:6px}
.legal-doc h3{font-size:13.5px;margin:16px 0 4px;color:var(--ink)}
.legal-doc p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 4px;max-width:72ch}
.legal-doc p.in-short{font-style:italic}
.legal-doc .bullets{margin:6px 0 4px;max-width:72ch}
.legal-doc .bullets .bullets{margin-top:4px}
.legal-flag{font-size:13px;color:#8a6100;background:#f7ecd6;border:1px solid #8a6a10;border-radius:8px;padding:10px 13px;margin:0 0 6px}
/* compact table of contents for the longer, full-length privacy policy --
plain anchor links, no JS, matching the rest of this page's simplicity */
.legal-toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
padding:16px 20px;margin:10px 0 18px;max-width:72ch}
.legal-toc p{margin:0 0 8px;font-weight:600;color:var(--ink)}
.legal-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.legal-toc li{font-size:13px}
.legal-toc a{color:var(--ink-soft)}
.legal-toc a:hover{color:var(--accent-ink,var(--ink))}
.legal-doc .contact-block{background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r);padding:14px 18px;margin:6px 0 12px;max-width:72ch}
.legal-doc .contact-block p{margin:0 0 4px}
/* view preferences applied app-wide */
[data-reduce-motion] *{animation:none!important;transition:none!important}
[data-density=compact] .content{padding-top:18px;padding-bottom:44px}
[data-density=compact] .fset{padding:16px 18px}
[data-density=compact] .hm-grid3,[data-density=compact] .hm-cards{gap:12px}
.fset.danger{border-color:#e8bdb6}
.btn.danger-btn{border-color:#c98a80;color:#321847}
/* ===== Brand & assets page (scoped .ba) ===== */
.ba{max-width:1060px;margin:0 auto}
.ba-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.ba-span{grid-column:1 / -1}
/* the two card columns share row tracks via subgrid, so Details/Instagram and
Colours/Logo pair up at exactly the same heights — every edge aligns */
.ba-stack{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:34px}
/* one continuous hairline between the first row of cards and the rest —
drawn once from the left column, stretched across the gap and the right column */
.ba-stack>.ba-panel+.ba-panel{position:relative}
.ba-stack:first-of-type>.ba-panel+.ba-panel::before{content:"";position:absolute;
top:-17px;left:0;width:calc(200% + 16px);height:1px;background:var(--line)}
@media(max-width:860px){.ba-stack:first-of-type>.ba-panel+.ba-panel::before{display:none}}
@supports not (grid-template-rows:subgrid){
.ba-stack{display:flex;flex-direction:column}
.ba-stack>.ba-panel:last-child{flex:1}}
.ba-c2{grid-column:span 2}
.ba-c3{grid-column:span 3}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr}
.ba-grid>.ba-panel,.ba-grid .ba-c2,.ba-grid .ba-c3,.ba-grid .ba-span{grid-column:auto}}
.ba-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px}
.ba-panel h2{margin:0 0 5px;font-size:18px;font-weight:700;letter-spacing:-.4px}
.ba-desc{margin:0 0 22px;color:var(--muted);font-size:13.5px;line-height:1.55}
.ba-desc b{color:var(--ink-soft);font-weight:600}
.ba-help{font-size:11.5px;color:var(--muted);font-weight:400;display:block;margin-top:6px}
/* Instagram engagement mode — radio cards. Each states what it counts and the
exact formula, because the same account can score several times higher or lower
depending on which one is picked; the choice has to be legible, not a dropdown. */
/* One per row, full panel width. Three columns inside this panel gave each card
one row per mode — radio · title · one-liner, columns aligned across rows
(formula in the tooltip). */
.ig-subhead{margin:18px 0 2px;font-size:13.5px;font-weight:700;color:var(--ink)}
.ig-modes{display:grid;grid-template-columns:auto minmax(150px,auto) 1fr;gap:6px;margin-top:10px}
.ig-mode{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;
column-gap:12px;padding:10px 13px;cursor:pointer;border:1px solid var(--line);
background:var(--surface);border-radius:8px;transition:border-color .14s,background .14s}
.ig-mode:hover{border-color:var(--accent-3);background:var(--surface-2)}
.ig-mode.is-sel{border-color:var(--accent);background:var(--accent-tint)}
.ig-mode input{margin:0;accent-color:var(--accent)}
.ig-mode:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ig-mode-t{font-size:12.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
.ig-rec{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:var(--accent);padding:2px 6px}
.ig-mode-d{font-size:11.5px;line-height:1.4;color:var(--muted)}
@media(max-width:700px){.ig-modes,.ig-mode{display:flex;flex-wrap:wrap}}
.ba-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
@media(max-width:520px){.ba-row2{grid-template-columns:1fr}}
.ba-field>label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.ba-control{position:relative}
.ba-pfx{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none}
.ba-pfx.txt{font-size:14px;font-weight:600}
.ba-inp{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 13px;font:inherit;font-size:14px;color:var(--ink);background:#fcfbfd;transition:border-color .14s,background .14s,box-shadow .14s}
.ba-inp.has-icon{padding-left:38px}
.ba-inp::placeholder{color:#6f6980}
.ba-inp:focus{outline:none;border-color:var(--accent);background:#fcfbfd;box-shadow:0 0 0 3px var(--accent-tint)}
select.ba-inp{cursor:pointer}
/* colours */
.ba-col-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.ba-col-row:last-of-type{border-bottom:none}
.ba-swatch{width:44px;height:44px;border-radius:12px;flex:0 0 auto;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden}
.ba-swatch input[type=color]{position:absolute;inset:-25%;width:150%;height:150%;border:none;padding:0;cursor:pointer;background:none}
.ba-col-fields{flex:1;display:flex;gap:8px;min-width:0}
.ba-col-fields .nm{flex:1;min-width:0}
.ba-col-fields .hx{flex:0 0 116px;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.ba-col-del{flex:0 0 auto;border:none;background:none;color:#6f6980;cursor:pointer;padding:7px;border-radius:9px;display:flex;transition:color .13s,background .13s}
.ba-col-del:hover{color:#321847;background:#fce4e4}
.ba-add-col{margin-top:14px;width:100%;border:1.5px dashed var(--line);background:transparent;color:var(--ink-soft);font:inherit;font-size:13.5px;font-weight:600;padding:11px;border-radius:12px;cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.ba-add-col:hover{border-color:var(--accent);color:var(--accent);background:#eeebf4}
/* images */
.ba-img-head{display:flex;align-items:baseline;justify-content:space-between}
.ba-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ba-img-row{display:flex;gap:14px;align-items:stretch;margin-top:4px}
.ba-drop{border:1.5px dashed var(--line);border-radius:9px;background:#fcfbfd;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;color:var(--muted);gap:7px;transition:border-color .15s,background .15s,color .15s;padding:16px}
.ba-drop:hover{border-color:var(--accent);background:#eeebf4;color:var(--accent)}
.ba-drop.logo{width:112px;flex:0 0 auto}
.ba-drop.wide{flex:1}
.ba-drop strong{font-size:13px;font-weight:600;color:var(--ink-soft)}
.ba-drop small{font-size:11px;line-height:1.4}
/* object-fit:cover crops a wide wordmark to a square and hides most of it; contain
shows the actual asset. The checkerboard is because logos are usually transparent
knockouts (the flyer tints them per colourway) — a white mark on a white panel
looks like a broken image, which is how this read before. */
/* Wordmarks are wide — Ottolenghi's is 584x30. A 112px square cropped that to an
unrecognisable sliver, so the slot is a landscape box that fits either shape. */
.ba-logo-prev{width:100%;max-width:260px;height:96px;flex:0 0 auto;border-radius:9px;object-fit:contain;
border:1px solid var(--line);cursor:pointer;padding:10px;
background-color:#e9e6ee;
background-image:linear-gradient(45deg,#d9d5e0 25%,transparent 25%,transparent 75%,#d9d5e0 75%),
linear-gradient(45deg,#d9d5e0 25%,transparent 25%,transparent 75%,#d9d5e0 75%);
background-size:14px 14px;background-position:0 0,7px 7px}
.ba-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:13px}
@media(max-width:520px){.ba-gallery{grid-template-columns:repeat(4,1fr)}}
.ba-thumb{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.ba-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ba-thumb .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:7px;border:none;background:rgba(20,19,25,.78);color:#fcfbfd;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.ba-thumb .x:hover{background:#321847}
/* buttons + action bar */
.ba-btn{border:1px solid var(--line);background:#fcfbfd;color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:11px 20px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .14s,transform .14s,background .14s;text-decoration:none}
.ba-btn:hover{border-color:#cfcfe2;transform:translateY(-1px)}
.ba-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ba-btn-primary{background:var(--accent);border-color:var(--accent);color:#fcfbfd}
.ba-btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.ba-btn-primary:disabled{background:var(--accent);border-color:var(--accent)}
.ba-inline{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.ba-startover{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ba-startover h2{margin:0 0 3px}
@media(max-width:560px){.ba-startover{flex-direction:column;align-items:flex-start}}
.ba-actionbar{position:sticky;bottom:20px;margin-top:22px;display:flex;align-items:center;gap:12px;background:rgba(252,251,253,.86);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;padding:13px 16px;box-shadow:0 10px 30px -16px rgba(40,40,80,.25)}
.ba-spacer{flex:1}
#rebuildNote{font-size:13px;color:var(--ink-soft);display:none;align-items:center;gap:7px}
#rebuildNote.show{display:inline-flex}
#rebuildNote i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
#rebuildBtn{display:none}
#rebuildBtn.show{display:inline-flex}
.ba-details{margin-top:8px;font-size:12.5px;color:var(--muted)}
.ba-details summary{cursor:pointer;font-weight:600;color:var(--ink-soft)}
.ba-details ol{padding-left:18px;margin-top:8px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
.ba-details code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:11.5px}
.ba-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--ink);color:#fcfbfd;padding:12px 22px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:0 14px 40px -8px rgba(20,19,25,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60}
.ba-toast.show{opacity:1;transform:translate(-50%,-6px)}
[data-reduce-motion] .ba-btn:hover{transform:none}
.btn.danger-btn:hover{background:#fce4e4;border-color:#321847}
.gbp-back{display:inline-block;font-size:13px;font-weight:600;color:var(--accent-ink);
text-decoration:none;cursor:pointer;margin-bottom:12px}
.gbp-back:hover{text-decoration:underline}
/* ---- dashboard marketing-health scorecards ---- */
.scorecards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
@media(max-width:760px){.scorecards{grid-template-columns:1fr}}
.scorecard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
transition:border-color .12s,box-shadow .12s,transform .12s}
.scorecard:hover{border-color:#e3deea;box-shadow:var(--sh);transform:translateY(-1px)}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-label{font-weight:700;font-size:14px;color:var(--ink-soft)}
.sc-score{font-family:var(--display);font-weight:600;font-size:46px;line-height:1;color:var(--ink)}
.sc-score .sc-out{font-family:var(--font);font-weight:600;font-size:16px;color:var(--muted);margin-left:2px}
.sc-score.none{color:var(--line)}
.sc-score.running{font-size:30px;min-height:46px;display:flex;align-items:center}
.sc-foot{font-size:12.5px}
.scorecard[data-tone="ok"] .sc-score{color:#321847}
.scorecard[data-tone="warn"] .sc-score{color:#321847}
.scorecard[data-tone="bad"] .sc-score{color:#321847}
/* ---- report layout (single-mode review report) ---- */
.report-head{display:flex;align-items:stretch;justify-content:space-between;gap:20px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:18px}
.report-head .score-hero{margin:0}
.score-meta{min-width:0}
.score-line{display:flex;align-items:center;gap:12px}
.score-line h2{margin:0}
.report-meta{font-size:12.5px;margin-top:8px}
.delta{font-size:13px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.delta.up{background:#fcfbfd;color:#321847}
.delta.down{background:#fce4e4;color:#321847}
.delta.flat{background:var(--surface-2);color:var(--muted);font-weight:600}
.secard-scores{display:inline-flex;align-items:center;gap:8px}
.trendbox{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
border-left:1px solid var(--line-soft);padding-left:20px;min-width:200px}
.trend-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#sparkline{display:block}
.trend-foot{font-size:12px}
@media(max-width:680px){.report-head{flex-direction:column}.trendbox{border-left:0;border-top:1px solid var(--line-soft);padding-left:0;padding-top:14px}}
/* ---- running / loading ---- */
.report-loading{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:48px 24px;margin-top:6px}
.spin.big{width:34px;height:34px;border-width:3.5px}
.rl-title{font-family:var(--display);font-weight:600;font-size:17px;margin-top:6px}
.rl-sub{font-size:13.5px;max-width:440px}
/* ---- action plan checklist (redesigned) ---- */
.cl-help{font-size:13px;margin:2px 0 14px}
.checklist-box{margin-top:4px}
.cl-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cl-progwrap{display:flex;align-items:center;gap:10px;flex:none}
.cl-progbar{width:120px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
/* fill scales inside the clipped, rounded track — animates transform, not width */
.cl-progfill{height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;
transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cl-progtxt{font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;color:var(--muted);min-width:30px;text-align:right}
/* table-like list — rows separated by hairlines, not individual cards */
.checklist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.cl-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
padding:13px 6px;border:none;border-bottom:1px solid var(--line-soft);border-radius:0;background:none;
cursor:pointer;font:inherit;color:inherit;transition:background .12s}
.cl-item:last-child .cl-card{border-bottom:none}
.cl-card:hover{background:#eeebf4}
.cl-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* left indicator: numbered step that becomes an accent-filled tick when done */
.cl-step{flex:none;position:relative;width:26px;height:26px;border-radius:50%;
border:1.8px solid var(--line);display:grid;place-items:center;
transition:background .15s,border-color .15s}
.cl-num{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;transition:opacity .12s}
.cl-tick{position:absolute;width:14px;height:14px;color:#fcfbfd;stroke-width:3;opacity:0;transform:scale(.7);
transition:opacity .16s,transform .22s cubic-bezier(.16,1,.3,1)}
/* body flows horizontally; detail fills the middle, chips sit at the right */
.cl-body{display:flex;align-items:center;gap:6px 12px;min-width:0;flex:1;flex-wrap:wrap}
.cl-startpill{flex:none;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:#fcfbfd;background:var(--accent);padding:2px 8px;border-radius:999px}
.cl-action{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink);flex:none}
.cl-detail{font-size:13px;font-weight:400;line-height:1.4;color:var(--muted);flex:1 1 200px;min-width:0}
.cl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;flex:none}
.cl-chip{font-size:11.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:6px;white-space:nowrap}
.cl-chip-effort{background:var(--line-soft);color:var(--ink-soft)}
.cl-chip-impact.hi{background:#fcfbfd;color:#321847} /* AA on light green */
.cl-chip-impact.md{background:#f7ecd6;color:var(--warn-text)} /* AA on light amber */
/* priority row — marked by the accent step + 'Start here' pill, no card chrome */
.cl-prio .cl-step{border-color:var(--accent)}
.cl-prio .cl-num{color:var(--accent)}
/* checked state */
.cl-item.on .cl-card{background:none}
.cl-item.on .cl-step{background:var(--accent);border-color:var(--accent)}
.cl-item.on .cl-num{opacity:0}
.cl-item.on .cl-tick{opacity:1;transform:scale(1)}
.cl-item.on .cl-action{color:var(--muted);text-decoration:line-through;text-decoration-color:#cdcabb}
.cl-item.on .cl-body{opacity:.6}
/* all-done state */
.cl-done-all{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;
background:#fcfbfd;border:1px solid #c9c2d4;color:#321847;font-weight:600;font-size:13.5px}
.cl-done-tick{font-size:16px;line-height:1}
@media(prefers-reduced-motion:reduce){.cl-progfill,.cl-card,.cl-step,.cl-tick{transition:none}}
@media(max-width:400px){.cl-progbar{width:80px}.cl-card{padding:14px}}
/* ---- GBP profile completeness: grouped single-column list ---- */
.features{display:flex;flex-direction:column;gap:2px}
.feat-group{display:flex;flex-direction:column}
.feat-grouphd{display:flex;align-items:center;gap:9px;margin:18px 0 4px;
font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.feat-group:first-child .feat-grouphd{margin-top:6px}
.feat-grouphd .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
font-size:11px;font-weight:700;background:var(--accent-soft);color:var(--accent-ink)}
.feat-grouphd.needs .n{background:#fce4e4;color:var(--bad-text)}
.feat-grouphd.done .n{background:#eae4f1;color:#321847}
.feat{display:flex;align-items:flex-start;gap:12px;padding:13px 2px;border-radius:0;
border:none;border-bottom:1px solid var(--line-soft);background:none}
.feat:last-child{border-bottom:none}
.feat-mark{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
font-size:12px;font-weight:800;color:#fcfbfd;line-height:1;margin-top:1px}
.feat.on .feat-mark{background:#321847}
.feat.partial .feat-mark{background:#321847}
.feat.off .feat-mark{background:var(--bad)}
.feat.unknown .feat-mark{background:var(--muted)}
.feat-body{display:flex;flex-direction:column;gap:2px;min-width:0}
/* "already done" → a clearly-completed checklist, not generic chips */
.done-group{background:var(--good-soft,#eae4f1);border:1px solid rgba(50,24,71,.16);
border-radius:var(--r-lg);padding:14px 18px 8px;margin-bottom:8px}
.done-group .feat-grouphd{margin-top:0}
.done-group .feat-grouphd.done{color:#321847}
.feat-on-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:6px}
@media(max-width:680px){.feat-on-list{grid-template-columns:1fr}}
.feat-on{display:flex;align-items:flex-start;gap:11px;padding:10px 0;
border-bottom:1px solid rgba(50,24,71,.12)}
.feat-on i{flex:none;width:20px;height:20px;border-radius:50%;background:#321847;color:#fcfbfd;
display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px;margin-top:1px}
.feat-on-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.feat-on-l{font-weight:600;font-size:13.5px;color:var(--ink)}
.feat-on-d{font-size:12px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere;min-width:0}
/* needs-attention & can't-verify reuse the panel + circular-mark look */
.need-group{background:#fce4e4;border:1px solid rgba(196,42,30,.18);border-radius:var(--r-lg);padding:14px 18px 8px;margin-bottom:8px}
.verify-group{background:#eeebf4;border:1px solid rgba(183,216,74,.32);border-radius:var(--r-lg);padding:14px 18px 8px;margin-bottom:8px}
.verify-group .feat-grouphd{color:#321847}
.verify-group .feat-list .feat{border-bottom-color:rgba(183,216,74,.2)}
.verify-group .feat-mark{background:#321847!important}
.need-group .feat-grouphd,.verify-group .feat-grouphd{margin-top:0}
.need-group .feat-grouphd.needs{color:var(--bad-text)}
.feat-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:6px;align-items:start}
@media(max-width:680px){.feat-list{grid-template-columns:1fr}}
.feat-list .feat{padding:11px 0;border-bottom:1px solid rgba(20,20,40,.07)}
.need-group .feat-list .feat{border-bottom-color:rgba(196,42,30,.14)}
.feat-list .feat-mark{border-radius:50%;width:20px;height:20px}
.feat-list .feat:has(.feat-gen){grid-column:1 / -1} /* generator items get full width */
/* category breakdown card */
.report-spark{width:100%;max-width:380px;height:64px;display:block;margin-top:2px}
.trendbox .checklist-head{margin-bottom:4px}
.breakdown-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.breakdown-card:empty{display:none}
.shead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.shead .t{display:flex;align-items:center;gap:10px;font-weight:650;font-size:15px;color:var(--ink)}
.shead .t::before{content:"";flex:none;width:3px;height:15px;border-radius:2px;background:var(--accent)}
.shead .meta{font-size:13px;color:var(--faint,#a49eb0);font-weight:500}
.breakdown-card .grid{display:grid;grid-template-columns:1fr;gap:18px}
.breakdown-card .cat + .cat{padding-top:18px;border-top:1px solid var(--line)}
.cat{display:flex;flex-direction:column;gap:12px;min-width:0}
.cat .ch{display:flex;align-items:center;gap:11px}
.cat .ch .ti{flex:1;min-width:0}
.cat .ch .ti .nm{font-weight:650;font-size:14.5px;text-transform:capitalize}
.cat .ch .ti .vd{font-size:12.5px;font-weight:600;margin-top:2px}
.cat .ring{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.cat .ring::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--surface)}
.cat .ring b{position:relative;font-size:13px;font-weight:700;line-height:1}
.cat .ring.r-good{background:conic-gradient(#321847 calc(var(--p)*1%),var(--track,#e3deea) 0)}
.cat .ring.r-good b{color:#321847}
.cat .ring.r-warn{background:conic-gradient(var(--warn-text) calc(var(--p)*1%),var(--track,#e3deea) 0)}
.cat .ring.r-warn b{color:var(--warn-text)}
.cat .ring.r-bad{background:conic-gradient(#321847 calc(var(--p)*1%),var(--track,#e3deea) 0)}
.cat .ring.r-bad b{color:#321847}
.cat .vd.good{color:#321847}
.cat .vd.warn{color:var(--warn-text)}
.cat .vd.bad{color:#321847}
.cat ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.cat li{display:flex;gap:8px;font-size:13px;color:var(--muted);line-height:1.45}
.cat li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--faint,#a49eb0);margin-top:7px}
/* tagged findings: a clear good / issue / tip marker instead of a neutral dot */
.cat li.fnd-good,.cat li.fnd-issue,.cat li.fnd-tip{color:var(--ink-soft)}
.cat li.fnd-good::before,.cat li.fnd-issue::before,.cat li.fnd-tip::before{display:none}
.fnd-i{flex:none;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
font-size:11px;font-weight:800;margin-top:1px;line-height:1}
.fnd-good .fnd-i{background:#fcfbfd;color:#321847}
.fnd-issue .fnd-i{background:#fce4e4;color:#321847}
.fnd-tip .fnd-i{background:#eae4f1;color:#321847}
.cat .more{font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;margin-top:2px;display:inline-block}
.cat .more:hover{color:var(--accent-ink)}
/* ---- report hero ---- */
.hero{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line);
background:radial-gradient(120% 140% at 0% 0%,rgba(50,24,71,.08),transparent 44%),
radial-gradient(120% 160% at 100% 0%,rgba(183,216,74,.12),transparent 46%),var(--surface);
padding:26px}
.hero-top{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.hero .score{position:relative;width:168px;height:168px;flex:none;display:grid;place-items:center;--bc:var(--accent);margin-bottom:26px}
.hero .score svg{display:block}
.hero .score .arc{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--bc) 42%,transparent))}
.hero .score .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.hero .score .num{font-size:52px;font-weight:780;letter-spacing:-.03em;line-height:1;color:var(--bc)}
.hero .score .den{font-size:13px;font-weight:600;color:var(--faint,#a49eb0);margin-top:2px}
.hero .score .band{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,100%);
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bc);
background:var(--bsoft,#eee);padding:4px 11px;border-radius:999px;white-space:nowrap}
.hero-mid{min-width:0}
.hero .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.hero .name{font-size:14px;font-weight:600;color:var(--muted)}
.hero .pill{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--track,#e3deea);color:var(--muted)}
.hero .hero-gmaps{font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.hero .hero-gmaps:hover{text-decoration:underline}
.hero .verdict{font-size:25px;font-weight:720;letter-spacing:-.02em;line-height:1.18;margin-bottom:10px;color:var(--ink);text-wrap:balance}
.hero .desc{color:var(--muted);font-size:14px;line-height:1.55;max-width:62ch}
.hero .win{display:flex;gap:10px;align-items:flex-start;margin-top:16px;background:var(--accent-tint);
border:1px solid rgba(50,24,71,.18);border-left:3px solid var(--accent);border-radius:7px;padding:12px 14px}
.hero .win svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:1px}
.hero .win b{color:var(--accent-ink)}
.hero .win .tx{font-size:13.5px;line-height:1.5;color:#36344f}
.hero .stand{width:208px;flex:none;border-left:1px solid var(--line);padding-left:26px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hero .stand .lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint,#a49eb0);margin-bottom:16px}
.hero .stand .rank{font-size:34px;font-weight:760;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.hero .stand .rank small{font-size:15px;font-weight:600;color:var(--faint,#a49eb0)}
.hero .stand .rk-cap{font-size:12.5px;color:var(--muted);margin-top:4px}
.hero .net{margin-top:18px}
.hero .net .bar{position:relative;height:7px;border-radius:5px;background:var(--track,#e3deea)}
.hero .net .fill{position:absolute;left:0;top:0;height:100%;border-radius:5px;background:var(--accent);width:0;transition:width 1s .25s cubic-bezier(.2,.7,.2,1)}
.hero .net .mk{position:absolute;top:50%;width:3px;height:15px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.hero .net .key{display:flex;justify-content:space-between;margin-top:9px;font-size:12px}
.hero .net .key .a{color:var(--accent-ink);font-weight:700}
.hero .net .key .b{color:var(--muted)}
.hero .net .key b{font-variant-numeric:tabular-nums}
.hero .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.hero .stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;position:relative;overflow:hidden}
.hero .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--accent))}
.hero .stat .v{font-size:28px;font-weight:760;letter-spacing:-.02em;line-height:1;color:var(--c,var(--ink))}
.hero .stat .v .u{font-size:16px;font-weight:700}
.hero .stat .k{font-size:12.5px;color:var(--faint,#a49eb0);font-weight:600;margin-top:5px}
.hero .stat .ctx{font-size:12px;color:var(--muted);margin-top:9px;display:flex;align-items:center;gap:6px}
.hero .stat .dot{width:6px;height:6px;border-radius:50%;background:var(--c,var(--accent));flex:none}
@media(max-width:880px){
.hero-top{grid-template-columns:1fr;justify-items:center;text-align:center}
.hero .stand{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:20px;width:100%;max-width:340px}
.hero .desc,.hero .verdict{text-align:center}.hero .win{text-align:left}
.hero .stats{grid-template-columns:1fr;gap:10px}
}
@media(prefers-reduced-motion:reduce){.hero .net .fill{transition:none}}
/* summary hero — formatted header: title row · score+summary · stats · links */
#rep-overview .sh{display:flex;flex-direction:column}
.sh-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sh-title{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.sh-sub{font-size:14px;color:var(--faint,#a49eb0);font-weight:500}
.sh-link{margin-left:auto;font-size:13px;font-weight:600;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.sh-link:hover{text-decoration:underline}
.sh-body{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;padding:22px 0 0}
.sh-side{display:flex;flex-direction:column;align-items:center;gap:20px;flex:none;width:158px}
.sh-content{display:flex;flex-direction:column;min-width:0}
.sh-score{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.sh-ring{position:relative;width:112px;height:112px;border-radius:50%;display:grid;place-items:center}
.sh-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fcfbfd}
.sh-ring b{position:relative;font-size:35px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sh-ring.s-good{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .sh-ring.s-good b{color:#321847}
.sh-ring.s-warn{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .sh-ring.s-warn b{color:#321847}
.sh-ring.s-bad{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .sh-ring.s-bad b{color:#321847}
.sh-band{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 11px;border-radius:999px}
.sh-band.s-good{color:#321847;background:#eae4f1}
.sh-band.s-warn{color:#321847;background:#eae4f1}
.sh-band.s-bad{color:#321847;background:#eae4f1}
.sh-sum{font-size:14.5px;color:var(--ink-soft);line-height:1.62;max-width:72ch;min-width:0}
/* stats stacked in the side column */
.sh-statscol{display:flex;flex-direction:column;gap:13px;width:100%;padding-top:18px;border-top:1px solid var(--line)}
.sh-statscol .sh-stat{padding:0;text-align:center}
.sh-stat b{display:block;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.sh-stat span{font-size:11.5px;color:var(--faint,#a49eb0);font-weight:600;text-transform:capitalize}
/* ordering, moved into the hero */
.sh-ordering:not(:empty){margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.hero-ord{display:flex;flex-direction:column;gap:14px}
/* Instagram "content at a glance" — its own section under the hero */
.ig-box{margin-top:16px}
.ig-metrics-h{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.glance-src{font-size:12px;line-height:1.5;color:var(--faint,#a49eb0);margin:0 0 14px;max-width:78ch}
/* compact single row of 4 stat tiles (was 2×2 with descriptions + scales) */
.ig-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.ig-metrics-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ig-metrics-grid{grid-template-columns:1fr}}
/* All three engagement definitions, side by side. The figure is the hero of each
card and the formula sits right under it, because the whole point is that the
same account scores differently depending on which one you read. */
.engm-grid{display:grid;gap:10px;margin:6px 0 4px}
@media(min-width:820px){.engm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.engm{border:1px solid var(--line);padding:14px 15px 15px;background:var(--surface);
display:flex;flex-direction:column;gap:7px;box-shadow:var(--sh-sm)}
.engm.is-chosen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--sh-sm)}
.engm-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.engm-k{font-size:13px;font-weight:700;color:var(--ink)}
.engm-badge{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:var(--accent);padding:2px 6px}
.engm-v{font-family:var(--display);font-size:34px;font-weight:600;line-height:1;
letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.engm-good .engm-v{color:var(--ok)}
.engm-warn .engm-v{color:var(--warn-text)}
.engm-bad .engm-v{color:var(--bad-text)}
.engm-none .engm-v{color:var(--faint)}
.engm-inc{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.engm-f{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);
background:var(--surface-2);border:1px solid var(--line-soft);padding:3px 6px;
align-self:flex-start;max-width:100%;overflow-wrap:anywhere}
.engm-meta{font-size:11.5px;line-height:1.45;color:var(--muted)}
.engm-meta b{color:var(--ink)}
.engm-caveat{font-size:11px;line-height:1.45;color:var(--warn-text);background:var(--warn-soft);
border:1px solid color-mix(in srgb,var(--warn-text) 26%,transparent);padding:7px 9px}
.igm{border:1px solid var(--line);border-radius:0;padding:14px 15px 15px;background:#fcfbfd;box-shadow:var(--sh-sm)}
/* the tile carries just number + label + band tag — descriptions & scale bars are noise here */
.igm-d,.igm-scale,.igm-zones{display:none}
.igm-k{margin-top:8px}
.igm-none{background:linear-gradient(180deg,#fcfbfd,#fcfbfd);border-color:#e3deea}
.igm-good{background:linear-gradient(180deg,#fcfbfd,#fcfbfd);border-color:#c9c2d4}
.igm-warn{background:linear-gradient(180deg,#f7ecd6,#eae4f1);border-color:#c9c2d4}
.igm-bad{background:linear-gradient(180deg,#fce4e4,#fce4e4);border-color:#3a2430}
.igm-top{display:flex;align-items:center;gap:10px}
.igm-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none}
.igm-ic svg{width:17px;height:17px}
.igm-none .igm-ic{background:#eae4f1;color:#321847}
.igm-good .igm-ic{background:#fcfbfd;color:#321847}
.igm-warn .igm-ic{background:#f7ecd6;color:var(--warn-text)}
.igm-bad .igm-ic{background:#fce4e4;color:#321847}
.igm-v{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.igm-tag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.igm-good .igm-tag{background:#321847;color:#fcfbfd}
/* near-white on amber is 1.96:1 — amber is a light fill, so its text goes dark */
.igm-warn .igm-tag{background:#f5a623;color:var(--ink)}
.igm-bad .igm-tag{background:#321847;color:#fcfbfd}
.igm-k{font-weight:700;font-size:14px;color:var(--ink);margin-top:11px}
.igm-d{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:5px}
/* benchmark scale: red→amber→green zones with a marker at the value */
.igm-scale{margin:10px 0 2px}
.igm-bar{position:relative;height:7px;border-radius:999px;
background:linear-gradient(90deg,#e8695d 0 20%,#e6a93e 20% 60%,#3aa869 60% 100%)}
.igm-mark{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fcfbfd;
border:2.5px solid var(--ink);transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.igm-zones{display:flex;justify-content:space-between;margin-top:6px;font-size:9.5px;font-weight:600;
letter-spacing:.02em;color:var(--faint,#a49eb0)}
.igm-zones span:first-child{color:#321847}.igm-zones span:nth-child(2){color:var(--warn-text)}.igm-zones span:last-child{color:#321847}
/* key photos pulled from the Google listing */
.gp-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.gp-thumb{flex:none;width:120px;height:120px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
box-shadow:var(--sh-sm);transition:transform .1s,box-shadow .1s}
.gp-thumb:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,20,50,.14)}
.gp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* quick order/bio links in the header */
.sh-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding-top:16px;border-top:1px solid var(--line)}
.sh-links-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint,#a49eb0);margin-right:2px}
.sh-linkpill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;text-decoration:none;
padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);background:var(--surface);transition:.14s}
.sh-linkpill::after{content:"↗";font-size:11px;opacity:.55}
.sh-linkpill:hover{border-color:var(--accent-2);color:var(--accent-ink);background:#eeebf4}
/* the bio / link-hub pill (Linktree etc.) is called out distinctly */
.sh-linkpill.hub{border-color:var(--accent-2);background:var(--accent-tint);color:var(--accent-ink);padding-left:9px}
.sh-linkpill.hub::after{content:none}
.sh-hubi{width:13px;height:13px;flex:none}
.sh-hubtag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
background:rgba(50,24,71,.16);color:var(--accent-ink);padding:2px 6px;border-radius:999px;margin-left:1px}
@media(max-width:640px){
.sh-body{grid-template-columns:1fr;gap:18px}
.sh-side{width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px}
.sh-statscol{flex-direction:row;justify-content:center;border-top:none;padding-top:0;width:auto;gap:20px}
.sh-head{justify-content:center}
.sh-link{margin-left:0;flex-basis:100%}
}
.feat-label{font-weight:700;font-size:14px;color:var(--ink)}
.feat-detail{font-size:12.5px;color:var(--muted);line-height:1.35}
.feat.wide{grid-column:1 / -1}
.feat-toggle{align-self:flex-start;margin-top:6px;background:none;border:none;padding:0;cursor:pointer;
font:inherit;font-size:12.5px;font-weight:700;color:var(--accent-ink)}
.feat-toggle:hover{text-decoration:underline}
.feat-fix{margin-top:10px}
.feat-why{font-size:13px;line-height:1.45;color:var(--ink-soft);margin:0 0 10px;
padding:10px 12px;background:var(--surface);border:1px solid var(--line-soft);border-radius:6px}
.feat-how{margin:0 0 10px;padding:10px 12px;background:#fcfbfd;border:1px solid #c9c2d4;border-radius:6px}
.feat-how-k{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#321847;margin-bottom:4px}
.feat-how p{margin:0;font-size:13px;line-height:1.5;color:#1f4a30}
.feat-gen-out{margin-top:10px}
.feat-gen-text{width:100%;border:1px solid var(--line);border-radius:6px;padding:11px 13px;
font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);background:var(--surface);resize:vertical}
.feat-gen-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.feat-gen-hint{font-size:12px}
.feat-apply.done{background:var(--ok);border-color:var(--ok)}
.feat-apply-msg{font-size:12.5px;margin-top:8px}
/* ---- reviews awaiting a reply ---- */
.replies{display:flex;flex-direction:column;gap:12px}
.reply-card{border:1px solid var(--line);border-radius:7px;padding:14px 16px;background:var(--surface-2)}
.reply-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.reply-stars{color:var(--star);font-size:14px;letter-spacing:1px}
.reply-author{font-weight:700;font-size:13.5px;color:var(--ink-soft)}
.reply-date{margin-left:auto;font-size:12px;color:var(--faint,#a49eb0);font-variant-numeric:tabular-nums}
.reply-text{font-size:13.5px;line-height:1.5;color:var(--ink);margin-bottom:10px}
.reply-out{margin-top:10px}
/* ---- strengths (collapsed by default) ---- */
.strengths-d{margin-top:4px}
.strengths-d summary{font-family:var(--display);font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.strengths-d summary::-webkit-details-marker{display:none}
.strengths-d summary::before{content:"▸ ";color:var(--muted)}
.strengths-d[open] summary::before{content:"▾ "}
.secard{margin:0;background:none;border:none;box-shadow:none;padding:16px 0 0;border-top:2px solid var(--ink)}
.secard-top{display:flex;align-items:center;justify-content:space-between}
.secard-top b{text-transform:capitalize;font-size:15px}
.sbadge{color:#fcfbfd;font-weight:700;font-size:13px;padding:2px 10px;border-radius:999px}
.secard-label{font-size:13px;margin:2px 0 6px}
.bullets{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.bullets li{font-size:13.5px}
.priority{background:var(--accent-tint);border:1px solid rgba(50,24,71,.22);border-radius:var(--r-lg);
padding:18px 20px;border-left:4px solid var(--accent)}
.priority .t{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--accent-ink);font-size:14px;margin-bottom:7px}
.priority .t svg{width:16px;height:16px}
.priority p{font-size:14px;line-height:1.55;color:#322f54;max-width:75ch}
/* campaign planner */
.setup textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);
border-radius:var(--r-sm);font:inherit;font-size:14px;resize:vertical;background:var(--surface)}
.month{margin:0 0 12px}
/* Inline month editor — replaces a browser prompt(), so it has to look like the
product rather than an OS dialog. */
.m-editor{margin:12px 0 4px;padding:14px;background:var(--surface-2);border:1px solid var(--line)}
.m-editor-l{display:block;font-size:12.5px;font-weight:600;margin-bottom:8px}
.m-editor-row{display:flex;gap:8px;flex-wrap:wrap}
.m-editor-row .m-instr{flex:1;min-width:220px}
.m-err:empty{display:none}
.m-err{margin-top:8px;font-size:12.5px;color:var(--bad-text)}
.month>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.month>summary::-webkit-details-marker{display:none}
.month>summary::before{content:"▸";color:var(--muted);transition:.15s}
.month[open]>summary::before{display:inline-block;transform:rotate(90deg)}
.m-name{font-family:var(--display);font-weight:600;font-size:17px}
.m-theme{flex:1;font-size:13px}
.m-edit{margin-left:auto}
.m-ov{margin:10px 0 14px}
.emails{margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.email{font-size:13px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:6px;padding:8px 11px}
.etag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
background:var(--accent-tint);color:var(--accent-ink);padding:1px 7px;border-radius:6px;margin-right:6px}
.weeks{display:flex;flex-direction:column;gap:14px}
.wk-h{font-weight:600;font-size:14px;margin-bottom:4px}
.wk-dates{font-size:12.5px;margin-bottom:8px}
.posts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:680px){.posts{grid-template-columns:1fr}}
.post{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--surface)}
.post-day{font-size:12px;font-weight:700;color:var(--ink)}
.post-pill{color:#fcfbfd;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:6px}
.post-ch{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.post-idea{font-size:13.5px;margin-top:6px}
.post-cta{font-size:12px;margin-top:4px}
/* audit metrics row */
.metricsrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 18px;min-width:96px;box-shadow:var(--sh-sm)}
.metric-n{font-family:var(--display);font-weight:600;font-size:22px}
.metric-l{font-size:12px;color:var(--muted);text-transform:capitalize}
/* leads table */
.leadtable{width:100%;border-collapse:collapse;font-size:13.5px}
.leadtable th{text-align:left;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);
font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);position:sticky;top:0}
.leadtable td{padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.leadtable tr:hover td{background:var(--surface-2)}
.leadtable a{color:var(--accent);font-weight:600;text-decoration:none}
/* ============================================================ accessibility */
/* Visible keyboard focus on every interactive element (inputs handled above) */
.btn:focus-visible,.navlink:focus-visible,.card:focus-visible,.toolcard:focus-visible,
.tile:focus-visible,.offer:focus-visible,a:focus-visible,summary:focus-visible,
.ac-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
/* Honour reduced-motion: no transforms/animations, instant transitions */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
.card:hover,.toolcard:hover,.tile:hover{transform:none}
}
/* (dark-sidebar override removed — editorial direction uses a light, type-led shell) */
/* ==================================================================
FRESH-CASUAL ENFORCEMENT + POLISH (loads last, wins the cascade)
The design has NO rounded corners. This squares every element whose
radius was hardcoded through the file, then restores the few shapes
that must stay truly circular (score rings, spinner, colour dots).
================================================================== */
[class]{border-radius:0}
/* two-class rules that beat the single-class reset above */
.btn.sm,.cc-item,.pill,.hm-badge,.post-pill,.mk-tag,.cw-eyebrow,.hm-pill,
.car-count,.cw-cue,.resume-bar,.tile-prog,.cc-soon,.hs-soon{border-radius:0}
/* keep genuine circles */
.pv-ring,.pv-ring::before,.hm-ring,.hm-ring::before,.spin,.spin.big,
.pv-chan .miniprov img,.cw-sw i,.avatar-dot,.hm-badge i{border-radius:50%}
.spin,.spin.big{border-radius:50%}
/* the little printed-item mockups read as physical cards — leave their soft edge */
.mflyer,.mcar span,.med,.mcal,.mmap{border-radius:4px}
/* ---- buttons: crisp, confident, olive primary ---- */
.btn{font-family:var(--font);font-weight:600;letter-spacing:-.005em;
transition:background .14s,border-color .14s,color .14s}
.btn:hover{background:var(--surface-2);border-color:var(--accent-2)}
.btn-primary,.btn.accent{background:var(--accent);border-color:var(--accent);color:#fcfbfd}
.btn-primary:hover,.btn.accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
/* ---- form controls: square, warm, olive focus ----
.lib-name is exempt: an editable name in the saved list is a heading you can
type into, not a form control, and the !important here would otherwise square
and fill it whatever the component says. */
input[type=text]:not(.lib-name),input[type=email],input[type=password],input[type=url],
input[type=search],input[type=number],textarea,select{
border-radius:0 !important;border-color:var(--line);background:var(--surface);
font-family:var(--font)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--ring)}
/* ---- headings pick up the grotesk display face ---- */
h1,h2,h3,.card-title,.tc-title,.hs-tool-t,.pv-chan-lab,.pv-verdict,.mk-title,.gr-title,
.stat-num,.stat-label{font-family:var(--display)}
/* ---- warm the create-tool preview wells + square them ---- */
.hs-prev{background:radial-gradient(130% 130% at 50% 0,#fcfbfd,#fcfbfd)}
.hs-tool,.pv-wrap,.hs-opt,.makecard,.toolcard,.card,.hm-card,.cw-hero,.metric{
box-shadow:var(--sh-sm)}
/* ---- accent-tinted chips/monograms that referenced the old indigo rgba ---- */
.mono{background:var(--accent-tint);color:var(--accent-ink);border:1px solid var(--accent-3)}
.hm-card-ic,.hs-opt .oic{background:var(--accent-tint);color:var(--accent-ink)}
/* ---- brand switcher avatar squared to match the sharp language ---- */
.cc-switcher .avatar{border-radius:0}
/* accessibility focus ring shouldn't reintroduce rounding */
.btn:focus-visible,.navlink:focus-visible,.card:focus-visible,.toolcard:focus-visible,
.tile:focus-visible,.offer:focus-visible,a:focus-visible,summary:focus-visible,
.ac-item:focus-visible{border-radius:0}
/* ==================================================================
EDITORIAL BOARD SYSTEM (eb-*)
The dashboard + review pages share this: a dark olive "menu board"
hero with an oversized score, leader-dot rows, and sharp cream panels.
Consistent with the login / onboarding canvas.
================================================================== */
:root{--board:#22301b;--board-2:#2f4023;--cream:#f4f1e8;--cream-dim:#c9d1bd;--leaf:#c9d9b6}
.eb-eyebrow{display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;line-height:1;
letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:0}
.eb-sec{margin-top:44px}
.eb-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap;
border-bottom:1px solid var(--ink);padding-bottom:12px}
.eb-sec-head h2{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink);margin:0}
.eb-sec-head .sub{font-size:13.5px;color:var(--muted);margin-left:auto;text-align:right}
.eb-sec-head .soon{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:3px 8px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
/* --- the board hero (light, editorial) --- */
.eb-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
background:linear-gradient(155deg,#eeebf4 0%,#eeebf4 60%,#321847 130%);color:var(--ink);border:1px solid var(--line)}
@media(max-width:860px){.eb-hero{grid-template-columns:1fr}}
.eb-hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background:repeating-linear-gradient(0deg,transparent 0 33px,rgba(255,255,255,.05) 33px 34px)}
.eb-hero-l{position:relative;padding:34px 34px 34px;display:flex;flex-direction:column;
border-right:1px solid rgba(255,255,255,.13)}
@media(max-width:860px){.eb-hero-l{border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}}
.eb-hero-l .eb-eyebrow{color:var(--accent-ink)}
.eb-score{display:flex;align-items:baseline;gap:8px;margin:22px 0 6px;font-family:var(--display);line-height:.85}
.eb-score b{font-size:104px;font-weight:600;letter-spacing:-.05em;color:var(--ink)}
.eb-score span{font-size:24px;font-weight:500;color:var(--muted)}
/* An em-dash set at the 104px score size renders as a long grey bar that reads as
a half-loaded score rather than "nothing here yet". Set the placeholder at the
scale of the /100 suffix so the empty state reads as empty, not broken. */
.eb-score.na b{color:var(--faint);font-size:46px;letter-spacing:0}
/* Activity — export counts. A leader-dot list rather than stat tiles: the numbers
are small and the label matters more than the figure. */
.eb-act{border:1px solid var(--line);background:var(--surface);padding:22px 24px}
.eb-act-tot{display:flex;align-items:baseline;gap:10px;padding-bottom:16px;
border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.eb-act-tot b{font-family:var(--display);font-size:38px;font-weight:600;line-height:1;
letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.eb-act-tot span{font-size:13.5px;color:var(--muted)}
.eb-act-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.eb-act-list li{display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:var(--ink)}
.eb-act-list .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-3px)}
.eb-act-list .n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.eb-act-foot{margin-top:16px;font-size:12.5px;color:var(--muted)}
.eb-act-empty p{font-size:13.5px;color:var(--muted);margin-bottom:14px;max-width:56ch}
.eb-act-empty .eb-cta-review{margin-top:0}
.eb-cta-review{align-self:flex-start;margin-top:14px;display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600;text-decoration:none;
background:var(--accent-ink);color:#fff;transition:opacity .12s}
.eb-cta-review:hover{opacity:.88}
.eb-cta-review:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Focus on the violet surfaces. The global ring is var(--accent) — which IS
#321847 — and both the topbar and the presence board are #321847 grounds, so
the indicator was drawing itself in its own background colour: 1:1, invisible.
WCAG 1.4.11 wants 3:1 for a focus indicator; #f7f4f8 on #321847 is 13.4:1.
Scoped to those two surfaces so the light-ground ring elsewhere is untouched. */
.cc-topbar a:focus-visible,.cc-topbar button:focus-visible,
.cc-topbar .cc-item:focus-visible,.cc-topbar .cc-switcher:focus-visible,
.cc-topbar .cc-sec-head:focus-visible,.cc-brand:focus-visible,
.eb-hero a:focus-visible,.eb-hero button:focus-visible{
outline:2px solid #f7f4f8;outline-offset:2px}
.eb-verdict{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--accent-ink)}
.eb-insight{font-size:14px;line-height:1.6;color:var(--ink-soft);margin-top:14px;max-width:44ch}
.eb-hero-l .eb-foot{margin-top:auto;padding-top:20px;font-size:12.5px;color:var(--muted)}
/* --- menu-board rows (channels / metrics) --- */
.eb-menu{position:relative;display:flex;flex-direction:column;padding:14px 30px 18px}
.eb-menu-lab{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);padding:14px 0 6px}
.eb-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:14px;
padding:16px 0;border-top:1px solid rgba(255,255,255,.13);text-decoration:none;color:inherit;transition:padding-left .15s}
.eb-row:hover{padding-left:6px}
.eb-row-lab{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.eb-row-meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eb-dots{grid-column:2;border-bottom:1.5px dotted rgba(255,255,255,.22);transform:translateY(-5px);min-width:20px}
.eb-row-val{font-family:var(--display);font-weight:600;font-size:30px;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eb-row-val.na{color:var(--faint);font-size:22px}
.eb-row-val.warnband{color:#8a6a1e}
.eb-row-val.badband{color:#321847}
.eb-row-go{color:var(--muted);font-weight:700;transition:transform .15s}
.eb-row:hover .eb-row-go{transform:translateX(3px);color:var(--ink)}
/* a full-width sub-line under a row: order-online chips */
.eb-row-sub{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-6px;padding-bottom:2px}
.eb-row-sub .k{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eb-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-soft);
background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand,var(--line));padding:3px 9px 3px 8px}
.eb-chip img{width:15px;height:15px;object-fit:contain;flex:none}
/* brand-colour dot fallback: shown only when the favicon is missing/failed */
.eb-chip .eb-dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--brand,var(--accent));flex:none}
.eb-chip img.noimg{display:none}
.eb-chip img.noimg + .eb-dot{display:inline-block}
.eb-chip:not(:has(img)) .eb-dot{display:inline-block}
.eb-chip.miss{color:#321847;border-color:rgba(249,16,12,.35);border-left-color:#321847;background:#fce4e4}
/* --- create tiles (editorial, index-numbered) --- */
.eb-create{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:820px){.eb-create{grid-template-columns:1fr}}
.eb-tile{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;text-decoration:none;color:inherit;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);
transition:background .15s}
.eb-tile:last-child{border-right:0}
@media(max-width:820px){.eb-tile{border-right:0}}
.eb-tile:hover{background:var(--surface-2)}
.eb-tile-n{font-family:var(--display);font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.1em}
.eb-tile-t{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:16px 0 8px}
.eb-tile-d{font-size:13.5px;line-height:1.5;color:var(--muted);flex:1}
.eb-tile-go{margin-top:18px;font-family:var(--display);font-size:13px;font-weight:600;color:var(--accent-ink);
display:flex;align-items:center;gap:8px}
.eb-tile:hover .eb-tile-go{color:var(--accent)}
.eb-tile-go b{transition:transform .15s;font-weight:700}
.eb-tile:hover .eb-tile-go b{transform:translateX(3px)}
.eb-tile.soon{pointer-events:none;background:var(--surface)}
.eb-tile.soon .eb-tile-t,.eb-tile.soon .eb-tile-d{opacity:.5}
.eb-tile.soon .eb-tile-go{color:var(--muted)}
/* --- grow rows (muted menu list) --- */
.eb-grow{border-top:1px solid var(--line)}
.eb-grow-row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:14px;padding:18px 2px;
border-bottom:1px solid var(--line);color:var(--muted)}
.eb-grow-row .l{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink-soft)}
.eb-grow-row .d{font-size:13px;color:var(--muted)}
.eb-grow-row .dots{border-bottom:1.5px dotted var(--line);transform:translateY(-5px);min-width:20px}
.eb-grow-row .v{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
/* ==================================================================
REVIEW PAGE RE-SKIN (blend: keeps the familiar report layout + every
platform favicon; only the palette + edges move to the olive language)
================================================================== */
:root{--track:#e3deea}
/* section eyebrow pills → one olive-family family (was indigo/amber/purple/pink) */
body[data-report] #rep-checklist .cl-head .t{background:var(--accent-tint);color:var(--accent-ink)}
body[data-report] #features-box h2{background:#eeebf4;color:var(--warn-text)}
body[data-report] #sections .shead .t{background:var(--accent-tint);color:var(--accent-ink)}
body[data-report] #changes h2{background:#eae4f1;color:var(--accent-ink)}
body[data-report] #replies-box h2{background:#fce4e4;color:#321847}
.report-key a:hover,.report-key a.active{color:var(--accent-ink);background:var(--accent-tint);border-color:var(--accent-3)}
/* dashboard scorecards tone */
.scorecard[data-tone="ok"] .sc-score{color:var(--accent)}
.scorecard[data-tone="warn"] .sc-score{color:var(--accent-2)}
.scorecard[data-tone="bad"] .sc-score{color:var(--bad-text)}
/* action-plan checklist */
.cl-card:hover{background:var(--surface-2)}
.cl-item.on .cl-action{text-decoration-color:var(--accent-3)}
/* completeness marks + "already done" / verify panels → olive & clay */
.feat.on .feat-mark{background:var(--accent)}
.feat.partial .feat-mark{background:var(--accent-2)}
.feat-grouphd.done .n{background:var(--accent-tint);color:var(--accent-ink)}
.done-group{background:var(--accent-tint);border-color:var(--accent-3)}
.done-group .feat-grouphd.done{color:var(--accent-ink)}
.feat-on i{background:var(--accent)}
.feat-on{border-bottom-color:rgba(50,24,71,.16)}
.verify-group{background:#eae4f1;border-color:rgba(183,216,74,.4)}
.verify-group .feat-grouphd{color:#321847}
.verify-group .feat-mark{background:var(--accent-2)!important}
.verify-group .feat-list .feat{border-bottom-color:rgba(183,216,74,.25)}
/* the score hero: a touch more editorial — bigger Space Grotesk number, hairline top rule */
.hero{border-top:2px solid var(--ink)}
.hero .score .num{font-family:var(--display);font-weight:600;font-size:56px}
.hero .verdict{font-family:var(--display);font-weight:600}
.hero .name{font-family:var(--display)}
/* GBP locations list — re-map its scoped purple palette to olive */
#gbp-switcher{--accent:#321847;--accent-ink:#321847;--accent-2:#6a4a8a;--accent-3:#c9c2d4;--accent-soft:#eae4f1;
--good:#321847;--good-soft:#fcfbfd;--warn:#f5a623; --warn-text:#8f6200;--warn-soft:#f7ecd6;--bad:#f15153; --bad-text:#96241f;--bad-soft:#fce4e4;
--line:#e3deea;--line-soft:#eae4f1;--ink:#241730;--muted:#6f6980;--faint:#a49eb0;--track:#e3deea}
#gbp-switcher .ring.s-bad b{color:#321847}
/* the summary-hero score ring + band (renderSummaryHero) — olive/clay, was indigo */
.sh-ring.s-good{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .sh-ring.s-good b{color:#321847}
.sh-ring.s-warn{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .sh-ring.s-warn b{color:#321847}
.sh-ring.s-bad{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .sh-ring.s-bad b{color:#321847}
.sh-ring b{font-family:var(--display)}
.sh-band.s-good{color:var(--accent-ink);background:#eae4f1}
.sh-band.s-warn{color:#321847;background:#eae4f1}
.sh-band.s-bad{color:#321847;background:#fce4e4}
.sh-title{font-family:var(--display)}
/* the global no-radius reset squared these data-viz rings — restore them to circles */
.sh-ring,.sh-ring::before,.cat .ring,.cat .ring::before,
#gbp-switcher .ring,#gbp-switcher .ring::before,#gbp-switcher .gh-ring{border-radius:50%}
/* square the colour-swatch family (two-class rules that survived the global reset) */
.cw-sw i,.cw-pick,.cw-edit .cw-pick,.cw-edit .cw-pick::-webkit-color-swatch,
.col input[type=color],.col input[type=color]::-webkit-color-swatch,
input[type=color],input[type=color]::-webkit-color-swatch,input[type=color]::-webkit-color-swatch-wrapper{border-radius:0}
/* ================= "This week" action panel (dashboard) ================= */
.eb-week-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.eb-week-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
padding:20px 20px 20px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
border-left:3px solid var(--line);background:var(--surface);transition:background .14s,border-left-color .14s}
.eb-week-item:hover{background:var(--surface-2)}
.eb-week-item.k-order{border-left-color:var(--warn-text)} /* money gap — amber */
.eb-week-item.k-fix{border-left-color:var(--accent)} /* a fix — olive */
.eb-week-item.k-moment{border-left-color:var(--accent-2)}/* calendar — soft olive */
.eb-week-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;
background:var(--accent-tint);color:var(--accent-ink)}
.eb-week-item.k-order .eb-week-ic{background:#f6eeda;color:#7a5600}
.eb-week-ic svg{width:20px;height:20px}
.eb-week-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.eb-week-t{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.eb-week-d{font-size:13px;color:var(--muted);line-height:1.45}
.eb-week-cta{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
font-weight:600;font-size:13.5px;color:#fcfbfd;background:var(--accent);padding:10px 16px;white-space:nowrap;
transition:background .14s}
.eb-week-item:hover .eb-week-cta{background:var(--accent-ink)}
.eb-week-cta b{transition:transform .14s;font-weight:700}
.eb-week-item:hover .eb-week-cta b{transform:translateX(3px)}
@media(max-width:720px){.eb-week-item{grid-template-columns:auto 1fr;gap:12px 14px}
.eb-week-cta{grid-column:2;justify-self:start;margin-top:4px}}
/* dark form controls (catch browser-default white inputs on any page).
.lib-name is exempt: it is an editable heading in the saved-prints list, not
a field on a form, and three :not()s make this rule specific enough to beat
anything the component itself can reasonably say. */
input:not([type=color]):not([type=checkbox]):not([type=radio]):not(.lib-name),textarea,select{background:var(--surface);color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* platform favicons on a light plate so dark logos (Slerp) stay visible */
.eb-chip img,.ord-prov-logo,.miniprov img,.provdot img{
background:#fff;padding:1px;box-sizing:content-box;border-radius:0}
/* GBP location score: ring + explicit band label (Good/Fair/Poor) so colour isn't doing all the work */
#gbp-switcher .scorecell{display:flex;flex-direction:column;align-items:center;gap:4px}
#gbp-switcher .ring-band{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1}
#gbp-switcher .ring-band.s-good{color:var(--good)}
#gbp-switcher .ring-band.s-warn{color:var(--warn-text)}
#gbp-switcher .ring-band.s-bad{color:var(--bad-text)}
/* ============ Category breakdown → tabbed scores + sliding insight panels ============ */
.cat-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2px}
@media(max-width:640px){.cat-tabs{grid-template-columns:1fr}}
.cat-tab{display:flex;align-items:center;gap:13px;padding:14px 16px;text-align:left;font:inherit;color:inherit;
background:var(--surface);border:1px solid var(--line);cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.cat-tab:hover{border-color:var(--accent-3)}
.cat-tab.active{border-color:var(--accent);background:#eeebf4}
.cat-tab.active::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:var(--accent)}
.cat-tab .ring{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none}
.cat-tab .ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.cat-tab.active .ring::before{background:#eeebf4}
.cat-tab .ring b{position:relative;font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cat-tab .ring.r-good{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .cat-tab .ring.r-good b{color:#321847}
.cat-tab .ring.r-warn{background:conic-gradient(var(--warn-text) calc(var(--p)*1%),#e3deea 0)} .cat-tab .ring.r-warn b{color:var(--warn-text)}
.cat-tab .ring.r-bad{background:conic-gradient(#321847 calc(var(--p)*1%),#e3deea 0)} .cat-tab .ring.r-bad b{color:#321847}
.cat-tab-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.cat-tab .nm{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);line-height:1.15;text-transform:capitalize}
.cat-tab .vd{font-size:11.5px;font-weight:600}
.cat-tab .vd.good{color:#321847}.cat-tab .vd.warn{color:var(--warn-text)}.cat-tab .vd.bad{color:#321847}
/* sliding viewport */
.cat-panels{overflow:hidden;margin-top:18px;transition:height .32s cubic-bezier(.2,.7,.2,1)}
.cat-track{display:flex;align-items:flex-start;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.cat-panel{flex:0 0 100%;min-width:0}
.cat-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cat-panel li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-soft);line-height:1.5;align-items:flex-start}
.cat-panel li .fnd-i{margin-top:1px}
@media(prefers-reduced-motion:reduce){.cat-track,.cat-panels{transition:none}}
/* light cream+cherry theme: keep GREEN for good/done so success != error red */
.ring.r-good,.sh-ring.s-good,.cat .ring.r-good,.cat-tab .ring.r-good{background:conic-gradient(#4a7a2e calc(var(--p)*1%),#e3deea 0)}
.ring.r-good b,.sh-ring.s-good b,.cat .ring.r-good b,.cat-tab .ring.r-good b{color:#4a7a2e}
.vd.good,.cat-tab .vd.good,.sh-band.s-good,.ring-band.s-good,.gh-bandlbl.s-good,#gbp-switcher .ring.s-good b{color:#4a7a2e}
.sh-band.s-good{background:#e7f0db}
.fnd-good .fnd-i{background:#e7f0db;color:#4a7a2e}
.feat.on .feat-mark,.feat-on i,#gbp-switcher .ring.s-good{background:#4a7a2e}
#gbp-switcher .ring.s-good{background:conic-gradient(#4a7a2e calc(var(--p)*1%),#e3deea 0)}
.feat-grouphd.done .n,.done-group .feat-grouphd.done,.feat-on-l,.hm-op-arrow{color:#4a7a2e}
.done-group{background:#e7f0db;border-color:#cfe0bd}
.igm-good .igm-ic,.igm-good .igm-tag{background:#e7f0db;color:#4a7a2e}
.cl-chip-impact.hi{background:#e7f0db;color:#3a6a1e}
/* violet brand → negative/bad rendered in coral #f15153 (never violet) */
.ring.r-bad,.sh-ring.s-bad,.cat .ring.r-bad,.cat-tab .ring.r-bad,#gbp-switcher .ring.s-bad{background:conic-gradient(#f15153 calc(var(--p)*1%),#e3deea 0)}
.ring.r-bad b,.sh-ring.s-bad b,.cat .ring.r-bad b,.cat-tab .ring.r-bad b,#gbp-switcher .ring.s-bad b{color:#e0393b}
.vd.bad,.cat-tab .vd.bad,.sh-band.s-bad,.ring-band.s-bad,.gh-bandlbl.s-bad{color:#e0393b}
.sh-band.s-bad{background:#fce4e4}
.fnd-issue .fnd-i{background:#fce4e4;color:#e0393b}
.feat.off .feat-mark{background:#f15153}
.eb-row-val.badband{color:#e0393b}
.ord-none b,.pv-nolinks,.ol-nolinks{color:#e0393b}
.eb-chip.miss{color:#e0393b;border-color:#f0b6b6;background:#fce4e4}
.stat[data-tone=bad] .stat-num,.scorecard[data-tone=bad] .sc-score,.sc-score.bad{color:#e0393b}
.delta.down{background:#fce4e4;color:#e0393b}
.need-group{background:#fce4e4;border-color:#f0b6b6}
.need-group .feat-grouphd.needs{color:#e0393b}
/* =====================================================================
BOLD TWO-TONE — violet #321847 (primary) + coral #f15153 (secondary),
soft-white as the accent/relief. Big violet surfaces, coral pops.
===================================================================== */
:root{--violet:#321847; --coral:#f15153; --soft:#f7f4f8; --violet-2:#452363}
/* ---- top bar: solid violet, soft-white nav, coral active ---- */
.cc-topbar{background:#321847;border-bottom:1px solid #26123a}
.cc-brand{color:#f7f4f8;border-right-color:rgba(255,255,255,.16)}
.cc-brand svg{color:#f15153}
.cc-topbar .cc-sec-head{color:rgba(247,244,248,.72)}
.cc-topbar .cc-sec-head:hover,.cc-topbar .cc-sec.open .cc-sec-head{color:#fff}
.cc-topbar .cc-sec-head.is-active{color:#fff}
.cc-topbar .cc-sec-head.is-active::after{background:#f15153;height:3px}
.cc-topbar .cc-sec-head.is-soon{color:rgba(247,244,248,.4)}
.cc-topbar .cc-soon{background:rgba(255,255,255,.12);color:rgba(247,244,248,.75);border-color:rgba(255,255,255,.18)}
.cc-switcher{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.cc-switcher:hover{background:rgba(255,255,255,.16);border-color:#f15153}
.cc-switcher .name{color:#fff}
.cc-switcher .avatar{background:#f15153;color:#2a1240}
.cc-footer .cc-item{color:rgba(247,244,248,.72)}
.cc-footer .cc-item:hover{background:rgba(255,255,255,.1);color:#fff}
.cc-footer .cc-item:hover svg{color:#f15153}
/* ---- page ground: soft white, coral tick under the title ---- */
body.app{background:#f7f4f8}
.pagehead{background:rgba(247,244,248,.86)}
.pagehead::after{background:#f15153;width:44px;height:3px}
/* ---- the presence board: a solid violet slab with coral pops ---- */
.eb-hero{background:#321847;border:0;color:#f7f4f8}
.eb-hero::before{background:repeating-linear-gradient(0deg,transparent 0 33px,rgba(255,255,255,.07) 33px 34px);opacity:1}
.eb-hero-l{border-right:1px solid rgba(255,255,255,.16)}
@media(max-width:860px){.eb-hero-l{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}}
.eb-hero-l .eb-eyebrow{color:#f15153}
.eb-score b{color:#f7f4f8}
.eb-score.na b{color:rgba(247,244,248,.45)}
.eb-score span{color:rgba(247,244,248,.6)}
.eb-cta-review{background:#f15153;color:#fff}
.eb-verdict{color:#f15153}
.eb-insight{color:rgba(247,244,248,.82)}
.eb-hero-l .eb-foot{color:rgba(247,244,248,.5)}
.eb-menu-lab{color:rgba(247,244,248,.55)}
.eb-row{border-top-color:rgba(255,255,255,.16)}
.eb-row-lab{color:#fff}
.eb-row-meta{color:rgba(247,244,248,.6)}
.eb-dots{border-bottom-color:rgba(255,255,255,.3)}
.eb-row-val{color:#f7f4f8}
.eb-row-val.badband{color:var(--bad-on-dark)}
.eb-row-val.warnband{color:var(--warn-on-dark)}
.eb-row-val.na{color:rgba(247,244,248,.45)}
.eb-row-go{color:rgba(247,244,248,.6)}
.eb-row:hover .eb-row-go{color:#f15153}
.eb-row-sub .k{color:rgba(247,244,248,.45)}
.eb-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#f7f4f8}
.eb-chip.miss{background:rgba(241,81,83,.14);border-color:rgba(241,81,83,.5);color:#ff8f90}
/* ---- section eyebrows + tiles: coral ticks, violet type ---- */
.eb-sec-head{border-bottom-color:#321847}
.eb-sec-head h2::before,.eb-review .eb-sec-head h2::before{background:#f15153}
.eb-create .eb-sec-head h2::before{background:#321847}
.eb-tile-n{color:#f15153}
.eb-tile-go{color:#321847}
.eb-tile:hover .eb-tile-go{color:#321847}
/* ---- "This week": coral CTA buttons (the action colour) ---- */
.eb-week-cta{background:#321847;color:#f7f4f8}
.eb-week-item:hover .eb-week-cta{background:#f15153;color:#2a1240}
.eb-week-item.k-fix{border-left-color:#321847}
.eb-week-item.k-moment{border-left-color:#452363}
.eb-week-ic{background:#ece4f3;color:#321847}
/* white hairlines so containers separate cleanly on the violet ground */
.eb-week-item,.eb-tile,.pv-wrap,.card,.toolcard,.makecard,.hm-card,.igm,.cat-tab,
.report-main > .fset,.report-main > .hero,.report-main > .breakdown-card,.metric,.ba-drop,
#gbp-switcher .summary,#gbp-switcher .gbp-hero,#gbp-switcher .table,.setup .fset{
border:1px solid #e3deea}
.eb-week-list{border-top:1px solid #e3deea}
.eb-create{border-top:1px solid #e3deea}
#gbp-switcher .row{border-bottom-color:#e8e3ee}
.cat-panel li{border:0}
.comp-gap{background:var(--surface-2);font-size:12px;color:var(--muted)}
.comp-gap .c-rank{opacity:.6}
/* --- email draft drawer ---------------------------------------------------- */
.em-wrap{position:fixed;inset:0;z-index:60;background:rgba(20,10,30,.55);
display:flex;align-items:center;justify-content:center;padding:24px}
.em-panel{background:var(--surface);border:1px solid var(--line);width:min(1080px,100%);
max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
.em-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 20px;border-bottom:1px solid var(--line)}
.em-kicker{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.em-subj{font-family:var(--display);font-size:17px;font-weight:600;margin-top:2px}
.em-body{display:grid;grid-template-columns:1fr 340px;gap:0;overflow:hidden;flex:1;min-height:0}
.em-preview{background:var(--surface-2);overflow:auto;padding:18px;min-height:0}
.em-preview iframe{width:100%;height:640px;border:1px solid var(--line);background:#fff}
.em-side{border-left:1px solid var(--line);padding:18px;overflow:auto;min-height:0}
.em-l{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin:14px 0 5px}
.em-l:first-child{margin-top:0}
.em-val{font-size:13.5px;line-height:1.5;background:var(--surface-2);border:1px solid var(--line);padding:8px 10px}
.em-url{word-break:break-all;font-size:12.5px}
.em-acts{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.em-note{font-size:12px;line-height:1.5;margin-top:14px}
.em-note code{font-size:11px;background:var(--surface-2);padding:1px 4px}
.em-status{margin-top:10px;font-size:12.5px;min-height:1em}
.email .e-write{margin-left:auto}
.email{display:flex;align-items:center;gap:8px}
@media(max-width:900px){
.em-body{grid-template-columns:1fr}
.em-side{border-left:0;border-top:1px solid var(--line)}
.em-preview iframe{height:420px}
}
/* --- outcome strip --------------------------------------------------------- */
.out-strip{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;
background:var(--surface-2);border:1px solid var(--line);font-size:13.5px}
.out-dot{width:7px;height:7px;border-radius:50%;background:var(--ok,#4a7a2e);flex:none}
.out-spark{margin-left:auto;font-size:11.5px;color:var(--muted)}
/* ── 2 · font stage (12 Aug) ───────────────────────────────────────────────
Specimen cards, not flyer renders: the question is "what does this face look
like", and 49 A5 previews answer it slowly and badly. */
.font-stage{display:flex;flex-direction:column;gap:16px}
.font-stage.hidden{display:none}
.fs-bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;justify-content:space-between}
.fs-shelves{display:flex;gap:7px;flex-wrap:wrap}
.fs-shelf{font:600 12.5px/1 inherit;padding:8px 13px;border-radius:999px;cursor:pointer;
background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.fs-shelf:hover{border-color:var(--accent-3)}
.fs-shelf.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fs-sample{display:flex;flex-direction:column;gap:5px}
.fs-sample span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--faint)}
.fs-sample input{font:400 14px/1 inherit;padding:9px 12px;border-radius:8px;min-width:230px;
background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.fs-head{grid-column:1/-1}
.fs-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;
min-height:132px;padding:16px 17px;border-radius:11px;cursor:pointer;
background:var(--surface);border:1px solid var(--line);transition:border-color .14s,transform .14s}
.fs-card:hover{border-color:var(--accent-3);transform:translateY(-1px)}
.fs-card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
/* the specimen: big enough to judge, clipped rather than reflowed so every card
stays the same height whatever the family does with its ascenders */
.fs-spec{font-size:31px;line-height:1.15;color:var(--ink);flex:1 1 auto;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
word-break:break-word}
.fs-name{font-size:11.5px;font-weight:600;color:var(--faint);letter-spacing:.02em}
/* ── 1 · size stage + the running summary (14 Aug) ─────────────────────────
Flyer and poster were two routes, two drafts and two libraries for what is
one render flag. Now they are checkboxes on one job. */
.size-stage{display:flex;flex-direction:column;gap:14px}
.size-stage.hidden,.sofar.hidden{display:none}
.size-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:10px}
.size-card{position:relative;display:flex;align-items:center;gap:13px;text-align:left;
padding:14px 15px;border-radius:10px;cursor:pointer;font:inherit;
background:var(--surface);border:1px solid var(--line);transition:border-color .14s}
.size-card:hover{border-color:var(--accent-3)}
.size-card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
/* the paper, actual 1:root-2, so the two sizes are visibly different objects */
.sz-paper{flex:none;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;align-self:center}
/* height/width come from the real scale ratio, set inline */
.sz-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sz-txt b{font-size:14.5px;color:var(--ink)}
.sz-sub{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.sz-note{font-size:11.5px;line-height:1.4;color:var(--faint)}
.sz-tick{position:absolute;top:10px;right:11px;width:19px;height:19px;border-radius:50%;
display:grid;place-items:center;font-size:12px;font-weight:700;
background:var(--accent);color:#fff;opacity:0;transition:opacity .14s}
.size-card.sel .sz-tick{opacity:1}
.size-note{margin:0}
.sofar{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:12px 14px;
border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.sofar-thumb{flex:none;width:52px;height:74px;border-radius:4px;overflow:hidden;
display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)}
.sofar-thumb .sofar-ph{font-size:8.5px;line-height:1.3;text-align:center;color:var(--faint);padding:4px}
.sofar-thumb.has .sofar-ph{display:none}
.sofar-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sofar-body{min-width:0;display:flex;flex-direction:column;gap:7px}
.sofar-lab{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.sofar-chips{display:flex;flex-wrap:wrap;gap:7px}
.sofar-chip{display:inline-flex;align-items:baseline;gap:6px;font:inherit;cursor:pointer;
padding:5px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.sofar-chip:hover{border-color:var(--accent)}
.sofar-chip span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.sofar-chip b{font-size:12.5px;color:var(--ink);text-transform:capitalize}
/* final: one preview per size, and a way back into any stage */
#final-previews{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.fp{margin:0;display:flex;flex-direction:column;gap:7px;max-width:340px}
.fp img{width:100%;border-radius:6px;display:block;box-shadow:var(--sh-lg)}
.fp figcaption{font-size:11.5px;color:var(--faint);text-align:center}
.final-edit{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fe-lab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.fe-btns{display:flex;flex-wrap:wrap;gap:7px}
.fe-btn{font:600 12.5px/1 inherit;padding:8px 13px;border-radius:999px;cursor:pointer;
text-decoration:none;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.fe-btn:hover{border-color:var(--accent);color:var(--ink)}
.dl-size{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--faint);margin:10px 0 2px;width:100%}
/* ── 1 · purpose (14 Aug) ──────────────────────────────────────────────────
Twelve compact cards. The lime label is the house eyebrow (same language as
the channel cards on the home page) and does the work the icons were doing:
it gives every card a fixed point your eye lands on before the headline. */
.purpose-stage.hidden{display:none}
.purpose-grid{display:flex;flex-direction:column;gap:12px}
/* The lead card of each shelf takes two columns and sets its headline bigger.
Twenty identical boxes is a list; giving the first of each group weight makes
the grid readable at a glance and says which one is the common choice. */
/* every card the same: with a preview on each one, varying the size made the
grid restless without saying anything the shelf heading does not already */
@media(max-width:1180px){
.purpose-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
.purpose-grid{grid-template-columns:1fr 1fr}
.purpose-card.lead{grid-column:span 2}
}
.pg-head{grid-column:1/-1}
.purpose-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
padding:14px 15px;border-radius:10px;cursor:pointer;font:inherit;
background:var(--surface);border:1px solid var(--line);
transition:border-color .14s,background .14s}
.purpose-card:hover{border-color:var(--accent);background:var(--accent-tint,rgba(195,245,60,.06))}
.purpose-card.sel{border-color:var(--accent);background:var(--accent-tint,rgba(195,245,60,.10));
box-shadow:0 0 0 1px var(--accent) inset}
.pc-lab{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent)}
/* the headline on a purpose card is the product's own voice, so it wears the
product's face. Honey Basil sits smaller than Inter at the same px, so it
goes up a couple of points to hold the same weight in the card. */
.pc-hero{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.pc-claim{font-size:11.5px;line-height:1.45;color:var(--faint);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ── "with a photo, or not" — on the size step (14 Aug) ────────────────────
Was a checkbox floating above the design tiles, which is where you find out
too late. It decides which designs are worth looking at, so it is asked
before the design board and shows in the summary from then on. */
.withphoto{margin-top:6px}
.wp-lab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.wp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:10px}
.wp-card{position:relative;display:flex;flex-direction:column;gap:5px;align-items:flex-start;
text-align:left;padding:14px 15px;border-radius:10px;cursor:pointer;font:inherit;
background:var(--surface);border:1px solid var(--line);transition:border-color .14s,background .14s}
.wp-card:hover:not(.off){border-color:var(--accent);background:var(--accent-tint,rgba(195,245,60,.06))}
.wp-card.sel{border-color:var(--accent);background:var(--accent-tint,rgba(195,245,60,.10));
box-shadow:0 0 0 1px var(--accent) inset}
.wp-card b{font-size:14.5px;color:var(--ink)}
.wp-card span{font-size:11.5px;line-height:1.4;color:var(--faint)}
/* no photos uploaded: the option stays visible so the reason is visible too */
.wp-card.off{cursor:not-allowed;opacity:.55}
.wp-fix{margin-top:4px;font-size:11.5px;font-weight:700;color:var(--accent);text-decoration:none}
.wp-fix:hover{text-decoration:underline}
/* ── size step layout (14 Aug) ─────────────────────────────────────────────
Five sizes in one row, then the two secondary settings side by side. Stacked
full-width they pushed Continue below the fold on a laptop. */
.size-cards{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.size-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.size-cards{grid-template-columns:1fr 1fr}}
.size-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:26px;
align-items:start;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:900px){.size-row{grid-template-columns:1fr;gap:20px}}
.size-row .wp-cards{grid-template-columns:1fr 1fr}
/* the colours block was centred while everything around it was left-aligned */
.size-row #colours-stage{margin:0}
.size-row .cw-swatches{justify-content:flex-start;margin:0}
.size-row .cw-cnote{text-align:left;font-size:11.5px;margin:10px 0 0}
.size-row #colours-stage .actions{display:none} /* Continue lives on the step, not in here */
/* .actions is only `margin-top` globally, so it needed to be a row before
flex-end meant anything - and the Edit button's icon had no size, which is
why it came out as a giant pencil with the label wrapped under it */
.size-actions{display:flex;justify-content:flex-end;align-items:center;
gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.size-actions .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.size-actions .btn svg{width:15px;height:15px;flex:none}
/* the swatches were bigger than they need to be next to a two-card choice */
.size-row .cw-sw{gap:6px}
.size-row .cw-chip{width:52px;height:52px}
/* a step you have already been past is clickable in both directions */
.step.reachable{cursor:pointer}
.step.reachable:hover i{border-color:var(--accent)}
/* font step: search sits beside the preview-text box */
.fs-inputs{display:flex;gap:12px;flex-wrap:wrap}
.fs-inputs .fs-sample input{min-width:190px}
#fs-search{font-variant-numeric:tabular-nums}
/* ── the wizard's sections (14 Aug) ────────────────────────────────────────
One treatment, used everywhere: a lime eyebrow, then the thing. Steps that
stack several blocks were reading as one undifferentiated field. */
body[data-report] .wiz-seclab{display:block;font-size:10px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:#c3f53c;margin-bottom:10px}
body[data-report] .wiz-sec{margin-bottom:26px}
/* your flyer so far */
/* dotted, so it reads as a running note about the job rather than another
panel of things to choose from */
body[data-report] .sofar{display:block;padding:14px 16px;border-radius:12px;
background:rgba(0,0,0,.22);border:1px dashed rgba(195,245,60,.55)}
body[data-report] .sofar-body-wrap{display:flex;align-items:center;gap:16px}
body[data-report] .sofar-chips{flex:1 1 auto}
/* ── font step: two options, picker on demand ───────────────────────────── */
.fs-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.fs-opts{grid-template-columns:1fr}}
body[data-report] .fs-opt{position:relative;display:flex;flex-direction:column;gap:9px;
align-items:flex-start;text-align:left;min-height:150px;padding:18px 20px;border-radius:13px;
cursor:pointer;font:inherit;background:var(--surface,#31343c);
border:1px solid rgba(255,255,255,.12);transition:border-color .14s,background .14s}
body[data-report] .fs-opt:hover{border-color:#c3f53c;background:rgba(195,245,60,.06)}
body[data-report] .fs-opt.sel{border-color:#c3f53c;background:rgba(195,245,60,.10);
box-shadow:0 0 0 1px #c3f53c inset}
body[data-report] .fs-opt-spec{font-size:31px;line-height:1.15;color:#f2f4f6;
flex:1 1 auto;display:flex;align-items:center}
body[data-report] .fs-opt-spec-alt{letter-spacing:-.02em;color:#7d838d}
body[data-report] .fs-opt-note{font-size:12px;line-height:1.45;color:#b6bdc6}
body[data-report] .fs-opt-note b{color:#f2f4f6}
body[data-report] .fs-opt-tick{position:absolute;top:14px;right:15px;width:20px;height:20px;
border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;
background:#c3f53c;color:#1a2400;opacity:0;transition:opacity .14s}
body[data-report] .fs-opt.sel .fs-opt-tick{opacity:1}
/* the picker itself, revealed only when asked for */
body[data-report] .fs-browser{margin-top:26px;padding-top:22px;
border-top:1px solid rgba(255,255,255,.12)}
body[data-report] .fs-browser.hidden{display:none}
body[data-report] .fs-toolbar{display:flex;flex-direction:column;gap:13px;min-width:0;
padding:13px;border-radius:12px;margin-bottom:18px;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10)}
/* min-width:0 on both, or the scrolling rail expands the whole panel and pushes
the inputs off the right of the card - which is exactly what it did */
body[data-report] .fs-shelfwrap{position:relative;min-width:0;overflow:hidden}
body[data-report] .fs-shelves{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
padding:4px;border-radius:999px;background:rgba(0,0,0,.24);
border:1px solid rgba(255,255,255,.10);scrollbar-width:none}
body[data-report] .fs-shelves::-webkit-scrollbar{display:none}
body[data-report] .fs-shelf{flex:none;font:600 12.5px/1 inherit;padding:8px 14px;
border-radius:999px;cursor:pointer;white-space:nowrap;background:transparent;border:0;
color:#b6bdc6;transition:background .13s,color .13s}
body[data-report] .fs-shelf:hover{background:rgba(255,255,255,.07);color:#f2f4f6}
body[data-report] .fs-shelf.on{background:#c3f53c;color:#1a2400;font-weight:700}
body[data-report] .fs-shelf[data-shelf="g-sans"]{margin-left:8px;
box-shadow:-9px 0 0 -8px rgba(255,255,255,.22)}
body[data-report] .fs-shelfwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;
width:40px;pointer-events:none;background:linear-gradient(90deg,rgba(43,47,54,0),rgba(43,47,54,.95))}
body[data-report] .fs-inputs{display:flex;gap:13px;flex-wrap:wrap}
body[data-report] .fs-sample input{background:rgba(0,0,0,.30);
border:1px solid rgba(255,255,255,.14);color:#f2f4f6;min-width:180px}
body[data-report] .fs-sample input:focus{outline:none;border-color:#c3f53c}
/* the confirm rides the bottom of the viewport, and names the font */
/* Was pulled out to the wizard card's edges with negative margins and rounded to
match its bottom corners. There is no card now, so it sits on the ground: full
width, a hairline above it, square. */
body[data-report] .fs-actions{position:sticky;bottom:0;z-index:5;
display:flex;justify-content:space-between;align-items:center;
margin:26px 0 0;padding:14px 0;
background:rgba(30,33,38,.94);backdrop-filter:blur(8px);
border-top:1px solid rgba(255,255,255,.12);border-radius:0}
body[data-report] .fs-actions .btn-primary b{font-family:var(--pickfont),inherit;font-weight:inherit}
body[data-report] .fs-chosen{font-size:12.5px;color:#7d838d}
/* "Pick another" has to look like a thing you can choose, not a caption. A taste
of the faces inside, and an explicit action line. */
body[data-report] .fs-opt-taste{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
flex:1 1 auto;padding:2px 0}
body[data-report] .fs-opt-taste i{font-style:normal;font-size:25px;line-height:1.1;color:#f2f4f6}
body[data-report] .fs-opt-cta{font-size:12.5px;font-weight:700;color:#c3f53c}
body[data-report] .fs-opt-cta b{font-weight:700}
body[data-report] #fs-opt-browse:hover .fs-opt-cta{text-decoration:underline}
.wp-lab2{margin-top:16px}
/* ── confirm dialog (14 Aug) ───────────────────────────────────────────────
Replaces window.confirm on the four destructive actions. The native one puts
"127.0.0.1:5002 says" above the question, which reads like a warning about
the site rather than one from it, and it cannot name what you are deleting. */
.cfm-back{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:22px;
background:rgba(10,12,15,.72);backdrop-filter:blur(3px);
animation:cfmIn .14s ease-out}
.cfm-back.out{animation:cfmOut .13s ease-in forwards}
@keyframes cfmIn{from{opacity:0}to{opacity:1}}
@keyframes cfmOut{to{opacity:0}}
.cfm{width:min(420px,100%);padding:26px;border-radius:16px;text-align:center;
background:#31343c;border:1px solid rgba(255,255,255,.14);
box-shadow:0 24px 70px rgba(0,0,0,.55);animation:cfmPop .16s cubic-bezier(.2,.8,.3,1)}
@keyframes cfmPop{from{transform:translateY(8px) scale(.98)}to{transform:none}}
.cfm-ic{width:46px;height:46px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.07);color:#b6bdc6}
.cfm-ic.danger{background:rgba(242,131,111,.14);color:#f2836f}
.cfm-ic svg{width:22px;height:22px}
.cfm h2{margin:0;font:700 18.5px/1.3 Inter,system-ui,sans-serif;color:#f2f4f6;letter-spacing:-.01em}
/* what you are deleting, said back to you - the native dialog could not do this */
.cfm-item{margin:12px auto 0;max-width:100%;padding:8px 13px;border-radius:8px;
font:600 13px/1.35 Inter,system-ui,sans-serif;color:#f2f4f6;
background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.10);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfm p{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:#b6bdc6}
.cfm-btns{display:flex;gap:9px;margin-top:22px}
.cfm-btn{flex:1 1 0;font:700 13.5px/1 Inter,system-ui,sans-serif;padding:12px 14px;
border-radius:10px;cursor:pointer;transition:background .13s,border-color .13s}
.cfm-btn:focus-visible{outline:2px solid #c3f53c;outline-offset:2px}
.cfm-cancel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.20);color:#f2f4f6}
.cfm-cancel:hover{background:rgba(255,255,255,.11)}
.cfm-go{background:#c3f53c;border:1px solid #c3f53c;color:#1a2400}
.cfm-go:hover{background:#d3ff5c}
.cfm-go.danger{background:#f2836f;border-color:#f2836f;color:#2a0d07}
.cfm-go.danger:hover{background:#ff9683;border-color:#ff9683}
@media(prefers-reduced-motion:reduce){
.cfm-back,.cfm{animation:none}
}
/* ── purpose previews (14 Aug) ─────────────────────────────────────────────
A miniature of the flyer on each card, ported from Liam's flyerpicker mock.
Container-query units, so one block of markup works at any card width. The
headline face is Permanent Marker from Google (the CSP already allows it),
falling back to the house display font. */
body[data-report] .purpose-grid{
--paper:#f2efe4; --paper-2:#e8e3d3; --paperink:#1b1a17;
--marker:'Permanent Marker','Honey Basil',cursive}
body[data-report] .purpose-grid .grid.hero .pv{aspect-ratio:5/4.9}
body[data-report] .purpose-grid .card:hover .pv{transform:scale(1.018) rotate(-.35deg)}
body[data-report] .purpose-grid .pv.dark{background:#191c22;color:#f2efe4}
body[data-report] .purpose-grid .pv.tint{background:var(--paper-2)}
body[data-report] .purpose-grid .pvin{position:absolute;inset:0;padding:8cqw 7.5cqw;display:flex;flex-direction:column}
body[data-report] .purpose-grid .hl{font-family:var(--marker);font-weight:400;line-height:1.02;letter-spacing:.005em}
body[data-report] .purpose-grid .h-xl{font-size:15cqw}
body[data-report] .purpose-grid .h-lg{font-size:12cqw}
body[data-report] .purpose-grid .h-md{font-size:9.5cqw}
body[data-report] .purpose-grid .h-sm{font-size:7.5cqw}
body[data-report] .purpose-grid .kick{font-size:3.6cqw;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
body[data-report] .purpose-grid .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:4cqw}
body[data-report] .purpose-grid .url{font-size:3.5cqw;font-weight:700;letter-spacing:.02em;opacity:.7}
body[data-report] .purpose-grid .qr{width:15cqw;height:15cqw;border-radius:1.5cqw;background:currentColor;opacity:.9;
-webkit-mask-image:var(--qrm);mask-image:var(--qrm);}
body[data-report] .purpose-grid .qrbig{width:34cqw;height:34cqw;margin:2cqw auto}
body[data-report] .purpose-grid .rule{height:.6cqw;background:currentColor;opacity:.22;margin:4cqw 0}
body[data-report] .purpose-grid .row{display:flex;justify-content:space-between;font-size:4cqw;font-weight:600;gap:2cqw;opacity:.85;margin-bottom:2.4cqw}
body[data-report] .purpose-grid .row .dots{flex:1;border-bottom:.4cqw dotted currentColor;opacity:.4;margin-bottom:1.2cqw}
body[data-report] .purpose-grid .pill{display:inline-block;font-size:3.4cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
border:.5cqw solid currentColor;border-radius:20cqw;padding:1.2cqw 3cqw}
body[data-report] .purpose-grid .solid{background:currentColor;border-radius:2cqw;padding:2.6cqw 3cqw;text-align:center;
font-size:4.2cqw;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
body[data-report] .purpose-grid .solid span{color:var(--paper);mix-blend-mode:normal}
body[data-report] .purpose-grid .pv.dark .solid span{color:#191c22}
body[data-report] .purpose-grid .stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:2.6cqw;margin:3cqw 0}
body[data-report] .purpose-grid .stamps i{aspect-ratio:1;border-radius:50%;border:.7cqw dashed currentColor;opacity:.45}
body[data-report] .purpose-grid .stamps i.on{background:currentColor;border-style:solid;opacity:.9}
body[data-report] .purpose-grid .disc{width:38cqw;height:38cqw;border-radius:50%;
background:currentColor;display:grid;place-items:center;margin:3cqw 0 1cqw;
transform:rotate(-6deg);}
body[data-report] .purpose-grid .disc b{font-family:var(--marker);font-weight:400;font-size:11cqw;color:var(--paper)}
body[data-report] .purpose-grid .pv.dark .disc b{color:#191c22}
body[data-report] .purpose-grid .photo{flex:1;min-height:0;border-radius:2cqw;margin:3cqw 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 6cqw, transparent 6cqw 12cqw),
linear-gradient(160deg,#3a4150,#22262e);
display:grid;place-items:center;}
body[data-report] .purpose-grid .photo em{font-style:normal;font-size:3.4cqw;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.5;color:#fff}
body[data-report] .purpose-grid .big{font-family:var(--marker);font-size:22cqw;line-height:.9}
body[data-report] .purpose-grid .giftcard{margin:3cqw 0;border-radius:2cqw;aspect-ratio:1.6;
background:currentColor;position:relative;display:grid;place-items:center;transform:rotate(-2deg)}
body[data-report] .purpose-grid .giftcard::after{content:'';position:absolute;left:0;right:0;top:58%;height:12%;background:var(--paper);opacity:.35}
body[data-report] .purpose-grid .giftcard b{font-family:var(--marker);font-size:9cqw;color:var(--paper);z-index:1}
body[data-report] .purpose-grid .pv.dark .giftcard b{color:#191c22}
body[data-report] .purpose-grid .split{display:flex;gap:2cqw;margin:3cqw 0}
body[data-report] .purpose-grid .split div{flex:1;border:.7cqw solid currentColor;border-radius:2cqw;padding:3cqw 2cqw;text-align:center;font-size:3.6cqw;font-weight:800;opacity:.85}
body[data-report] .purpose-grid .split div.fill{background:currentColor;border-color:currentColor}
body[data-report] .purpose-grid .split div.fill span{color:var(--paper)}
body[data-report] .purpose-grid .pv.dark .split div.fill span{color:#191c22}
body[data-report] .purpose-grid .cat{display:flex;align-items:center;gap:7px;margin-bottom:5px}
body[data-report] .purpose-grid .cat .g{width:15px;height:15px;color:var(--lime);flex:none}
body[data-report] .purpose-grid .cat b{font-size:13.5px;font-weight:700;letter-spacing:-.005em}
body[data-report] .purpose-grid .desc{font-size:12.5px;line-height:1.42;color:var(--dim)}
body[data-report] .purpose-grid .grid.hero .desc{font-size:13px}
body[data-report] .purpose-grid .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
body[data-report] .purpose-grid .tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--dimmer);border:1px solid var(--line);border-radius:5px;padding:2.5px 6px;}
body[data-report] .purpose-grid .card:hover .tag, body[data-report] .purpose-grid .card.sel .tag{border-color:var(--line-hi);color:var(--dim)}
body[data-report] .purpose-grid .barinfo{font-size:13px;color:var(--dim)}
body[data-report] .purpose-grid .barinfo b{color:var(--ink)}
body[data-report] .purpose-grid .btn{margin-left:auto;height:42px;padding:0 22px;border-radius:11px;border:0;
background:var(--lime);color:#1b2109;font:700 14px InterVar,Inter,sans-serif;cursor:pointer;
transition:.16s;}
body[data-report] .purpose-grid .btn:disabled{background:#2e3340;color:var(--dimmer);cursor:not-allowed}
body[data-report] .purpose-grid .btn:not(:disabled):hover{filter:brightness(1.08)}
body[data-report] .purpose-grid .ghost{background:transparent;border:1px solid var(--line);color:var(--dim);margin-left:0}
body[data-report] .purpose-grid .ghost:hover{color:var(--ink);border-color:var(--line-hi)}
body[data-report] .purpose-grid .notes.open{transform:none}
body[data-report] .purpose-grid .notes h3{font-size:15px;margin-bottom:4px}
body[data-report] .purpose-grid .notes .lede{font-size:12.5px;color:var(--dimmer);margin-bottom:18px}
body[data-report] .purpose-grid .notes ol{list-style:none;counter-reset:n}
body[data-report] .purpose-grid .notes li{counter-increment:n;position:relative;padding-left:32px;margin-bottom:16px;font-size:12.5px;line-height:1.5;color:var(--dim)}
body[data-report] .purpose-grid .notes li::before{content:counter(n);position:absolute;left:0;top:0;
width:21px;height:21px;border-radius:50%;background:var(--lime);color:#1b2109;
display:grid;place-items:center;font-size:10px;font-weight:800;}
body[data-report] .purpose-grid .notes li b{color:var(--ink);display:block;margin-bottom:2px;font-size:12.5px}
body[data-report] .purpose-grid .notes .x{position:absolute;top:22px;right:22px;background:none;border:0;color:var(--dimmer);font-size:20px;cursor:pointer}
/* the card becomes a frame for the preview rather than a text block */
body[data-report] .purpose-card{gap:11px}
/* The base .pv rule was lost when I scoped the ported stylesheet - it sat behind
a comment, so the whole declaration got filtered out. This is it, restored:
the paper, its proportions, and the container context every cqw unit needs. */
body[data-report] .purpose-grid .pv{
display:block;width:100%;position:relative;
aspect-ratio:5/6.15;border-radius:9px;overflow:hidden;
container-type:inline-size;
background:var(--paper);color:var(--paperink);
box-shadow:0 2px 0 rgba(0,0,0,.35), 0 10px 22px -12px rgba(0,0,0,.8);
transition:transform .22s cubic-bezier(.2,.7,.3,1)}
body[data-report] .purpose-card:hover .pv{transform:scale(1.018) rotate(-.35deg)}
body[data-report] .purpose-card .pvin{display:flex}
/* ── step 1 as two shelves (14 Aug) ────────────────────────────────────────
Opening a wizard with twenty flyer previews asks too much too early. The
shelf is the smaller question: everyday, or a one-off. */
body[data-report] .shelf{border-radius:12px;background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.11);overflow:hidden;transition:border-color .15s}
body[data-report] .shelf:hover{border-color:rgba(255,255,255,.22)}
body[data-report] .shelf.open{background:rgba(255,255,255,.05);border-color:rgba(195,245,60,.35)}
body[data-report] .shelf-head{display:flex;align-items:center;gap:14px;width:100%;
padding:18px 20px;cursor:pointer;font:inherit;background:none;border:0;text-align:left}
body[data-report] .shelf-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
body[data-report] .shelf-txt b{font-family:'Honey Basil',var(--display),system-ui;font-weight:400;
font-size:23px;color:#f2f4f6;letter-spacing:.01em}
body[data-report] .shelf-txt span{font-size:12.5px;color:#b6bdc6}
body[data-report] .shelf-n{flex:none;font:700 12px/1 Inter,system-ui,sans-serif;padding:6px 11px;
border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);color:#b6bdc6}
body[data-report] .shelf.open .shelf-n{background:rgba(195,245,60,.14);border-color:rgba(195,245,60,.45);color:#c3f53c}
body[data-report] .shelf-chev{flex:none;width:26px;height:26px;border-radius:50%;display:grid;
place-items:center;font-size:16px;font-weight:700;color:#1a2400;background:#c3f53c}
body[data-report] .shelf-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;padding:0 16px 16px}
@media(max-width:1180px){body[data-report] .shelf-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){body[data-report] .shelf-cards{grid-template-columns:1fr 1fr}}
/* ── open a tile full size (14 Aug) ────────────────────────────────────────
A board tile is ~200px of a 1748px flyer. You cannot read the menu rows or
judge the type at that scale, so every tile gets a magnifier. */
.tile .thumb{position:relative}
/* It was a 32px magnifier at opacity:0 until you hovered the tile, so unless
you happened to be over one there was nothing on the board saying a flyer
could be opened — and on a touch screen there is no hover to find it with.
Always on, named, and big enough to aim at. */
.tile-zoom{position:absolute;top:9px;right:9px;height:34px;padding:0 12px;gap:7px;
border-radius:999px;display:inline-flex;align-items:center;cursor:pointer;
font:800 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.03em;
background:rgba(15,17,20,.80);border:1px solid rgba(255,255,255,.30);color:#f2f4f6;
backdrop-filter:blur(4px);transition:background .14s,color .14s,border-color .14s}
.tile-zoom svg{width:17px;height:17px;flex:none}
/* hovering the tile firms it up; hovering the pill itself is the lime commit */
.tile:hover .tile-zoom{background:rgba(15,17,20,.93);border-color:rgba(255,255,255,.46)}
.tile-zoom:hover,.tile-zoom:focus-visible{background:#c3f53c;color:#1a2400;border-color:#c3f53c}
.zoom-back{position:fixed;inset:0;z-index:4200;display:grid;place-items:center;padding:26px;
background:rgba(10,12,15,.82);backdrop-filter:blur(4px);animation:cfmIn .15s ease-out}
/* max-width capped the box but `width:auto` on the image let it push wider than
the screen anyway — at 390px the box measured 560px and both buttons in the
bar sat off the right edge, unclickable, with Escape the only way out. */
.zoom{display:flex;flex-direction:column;gap:14px;max-height:100%;
max-width:min(560px,100%);width:100%;min-width:0}
.zoom img{min-height:0;max-height:calc(100vh - 150px);max-width:100%;width:auto;object-fit:contain;
border-radius:8px;box-shadow:0 26px 70px rgba(0,0,0,.6);background:#fff}
.zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.zoom-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.zoom-txt b{font-size:15px;color:#f2f4f6;text-transform:capitalize}
.zoom-txt span{font-size:12.5px;color:#b6bdc6}
.zoom-btns{display:flex;gap:9px;flex:none}
@media(prefers-reduced-motion:reduce){.zoom-back{animation:none}}
/* the flyer reads as the thing you click to look at */
.tile .thumb{cursor:zoom-in}
.tile:hover .thumb img{filter:brightness(1.04)}
/* a real render rather than the drawn miniature: no paper chrome needed, the
flyer brings its own */
body[data-report] .purpose-grid .pv-real{background:none;box-shadow:0 8px 20px -12px rgba(0,0,0,.8)}
body[data-report] .purpose-grid .pv-real img{width:100%;height:100%;object-fit:cover;
display:block;border-radius:9px}
/* the open control reads as a button, not a bullet: it was a 26px circle at the
far right of a wide row and people were not finding it */
body[data-report] .shelf-n{display:none}
body[data-report] .shelf-go{flex:none;display:inline-flex;align-items:center;gap:10px;
font:700 14px/1 Inter,system-ui,sans-serif;padding:13px 18px;border-radius:999px;
background:#c3f53c;color:#1a2400;transition:background .14s,transform .14s}
body[data-report] .shelf-head:hover .shelf-go{background:#d3ff5c;transform:translateX(2px)}
body[data-report] .shelf.open .shelf-go{background:rgba(255,255,255,.10);color:#f2f4f6}
body[data-report] .shelf-chev{width:20px;height:20px;border-radius:50%;display:grid;
place-items:center;font-size:15px;background:rgba(0,0,0,.18)}
body[data-report] .shelf.open .shelf-chev{background:rgba(255,255,255,.14)}
/* step-1 examples at half size: six across rather than four */
body[data-report] .shelf-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
body[data-report] .shelf-cards .purpose-card{padding:11px 12px;gap:5px}
body[data-report] .shelf-cards .pc-lab{font-size:8.5px;letter-spacing:.08em}
body[data-report] .shelf-cards .pc-hero{font-size:14px;line-height:1.2}
body[data-report] .shelf-cards .pc-claim{font-size:10.5px;line-height:1.4;-webkit-line-clamp:2}
@media(max-width:1400px){body[data-report] .shelf-cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1180px){body[data-report] .shelf-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){body[data-report] .shelf-cards{grid-template-columns:1fr 1fr}}
/* ── step 1: wide cards, three across (15 Aug) ─────────────────────────────
The flyer previews are gone from here. They were doing a job the design step
does better, and at six across they had shrunk to the point of being texture.
What remains is the decision itself: the job, and the headline it produces. */
body[data-report] .shelf-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body[data-report] .shelf-cards .purpose-card{
min-height:0;padding:16px 18px;gap:7px;border-radius:11px}
body[data-report] .shelf-cards .pc-lab{font-size:9.5px;letter-spacing:.1em}
body[data-report] .shelf-cards .pc-hero{font-size:19px;line-height:1.2}
body[data-report] .shelf-cards .pc-claim{font-size:12px;line-height:1.45;-webkit-line-clamp:2}
@media(max-width:1180px){body[data-report] .shelf-cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){body[data-report] .shelf-cards{grid-template-columns:1fr}}
/* plain type on both headers - the display face was doing decoration where the
page needs a list of jobs to read down */
body[data-report] .shelf-txt b{font-family:Inter,system-ui,sans-serif;font-weight:700;
font-size:18px;letter-spacing:-.01em;text-transform:none}
body[data-report] .shelf-cards .pc-hero{font-family:Inter,system-ui,sans-serif;
font-weight:700;font-size:16.5px;line-height:1.28;letter-spacing:-.01em}
/* label + headline only: the card is now the size of the decision it carries */
body[data-report] .shelf-cards .purpose-card{padding:14px 16px;gap:6px}
/* ── step 1: three jobs, then the list (15 Aug) ────────────────────────────
Same shape as the font step - a few big options, and the twenty only appear
once you have said which kind of job this is. */
body[data-report] .purpose-grid{display:flex;flex-direction:column;gap:12px}
body[data-report] .pgroup{border-radius:13px;overflow:hidden;transition:background .15s}
body[data-report] .pgroup.open{background:rgba(255,255,255,.04);
border:1px solid rgba(195,245,60,.32)}
body[data-report] .p-opt{position:relative;display:flex;flex-direction:column;gap:7px;
align-items:flex-start;text-align:left;width:100%;padding:20px 22px;cursor:pointer;font:inherit;
background:var(--surface,#31343c);border:1px solid rgba(255,255,255,.12);border-radius:13px;
transition:border-color .14s,background .14s}
body[data-report] .p-opt:hover{border-color:#c3f53c;background:rgba(195,245,60,.06)}
body[data-report] .p-opt.sel{border-color:transparent;background:rgba(195,245,60,.10);
border-radius:13px 13px 0 0}
body[data-report] .p-opt-h{font-size:24px;font-weight:700;letter-spacing:-.015em;color:#f2f4f6;
line-height:1.15}
body[data-report] .p-opt-note{font-size:13px;line-height:1.45;color:#b6bdc6;max-width:62ch}
body[data-report] .p-opt-taste{font-size:11.5px;color:#7d838d;letter-spacing:.01em}
body[data-report] .p-opt .fs-opt-tick{top:20px;right:20px}
body[data-report] .pgroup .shelf-cards{padding:4px 16px 16px}
/* three across, list underneath (15 Aug) */
body[data-report] .p-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1000px){body[data-report] .p-opts{grid-template-columns:1fr}}
body[data-report] .p-opt{height:100%;gap:8px;padding:22px 22px 20px}
body[data-report] .p-opt.sel{border-color:#c3f53c;background:rgba(195,245,60,.10);
border-radius:13px}
body[data-report] .p-opt-h{font-size:21px}
body[data-report] .p-opt-note{flex:1 1 auto;max-width:none}
body[data-report] .p-opt-taste{font-size:11px;line-height:1.4}
/* the count moves out of the eyebrow and becomes the thing you click */
body[data-report] .p-cta{margin-top:6px;font:700 13px/1 Inter,system-ui,sans-serif;color:#c3f53c;
display:inline-flex;align-items:center;gap:7px}
body[data-report] .p-opt:hover .p-cta{text-decoration:underline}
body[data-report] .p-open{margin-top:16px;padding-top:16px;
border-top:1px solid rgba(195,245,60,.28)}
/* ── step 1 cards in the font picker's shape (15 Aug) ──────────────────────
Specimen first, name underneath in muted type — same as .fs-card, where the
thing you are judging leads and the label only confirms it. */
body[data-report] .p-opts .p-opt.open{border-color:#c3f53c;background:rgba(195,245,60,.08)}
body[data-report] .p-opt.sel{border-color:#c3f53c;background:rgba(195,245,60,.10);
box-shadow:0 0 0 1px #c3f53c inset}
body[data-report] .p-opt .fs-opt-tick{opacity:0}
body[data-report] .p-opt.sel .fs-opt-tick{opacity:1}
body[data-report] .shelf-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body[data-report] .shelf-cards .purpose-card{
display:flex;flex-direction:column;gap:11px;align-items:flex-start;
min-height:118px;padding:20px 20px 18px;border-radius:12px}
body[data-report] .shelf-cards .pc-hero{flex:1 1 auto;font-size:21px;font-weight:700;
line-height:1.22;letter-spacing:-.015em;color:#f2f4f6}
body[data-report] .shelf-cards .pc-name{font-size:11.5px;font-weight:600;color:#7d838d;
letter-spacing:.02em}
body[data-report] .shelf-cards .purpose-card.sel .pc-name{color:#c3f53c}
@media(max-width:1000px){body[data-report] .shelf-cards{grid-template-columns:1fr 1fr}}
/* ── open vs chosen (15 Aug) ───────────────────────────────────────────────
Both states painted lime, so with one group open and another chosen you had
two lime cards and a 20px tick to tell them apart. Browsing is now a quiet
outline; the chosen one is filled and says so in words. */
body[data-report] .p-opts .p-opt.open{background:transparent;
border-color:rgba(255,255,255,.34);box-shadow:none}
body[data-report] .p-opts .p-opt.sel{background:rgba(195,245,60,.12);
border-color:#c3f53c;box-shadow:0 0 0 1px #c3f53c inset}
body[data-report] .p-chosen{position:absolute;top:16px;right:16px;
font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
padding:7px 11px;border-radius:999px;background:#c3f53c;color:#1a2400}
body[data-report] .p-opt .fs-opt-tick{display:none}
/* the tick marks the card you clicked */
body[data-report] .p-opts .p-opt.sel{background:rgba(195,245,60,.12);
border-color:#c3f53c;box-shadow:0 0 0 1px #c3f53c inset}
body[data-report] .p-tick{position:absolute;top:16px;right:16px;width:26px;height:26px;
border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;
background:#c3f53c;color:#1a2400}
/* the job leads, the headline it produces sits under it as evidence (15 Aug) */
body[data-report] .shelf-cards .pc-name{order:0;font-size:20px;font-weight:700;
line-height:1.22;letter-spacing:-.015em;color:#f2f4f6;text-transform:none}
body[data-report] .shelf-cards .purpose-card.sel .pc-name{color:#f2f4f6}
body[data-report] .shelf-cards .pc-hero{order:1;flex:1 1 auto;font-size:12.5px;
font-weight:500;line-height:1.4;letter-spacing:0;color:#7d838d}
body[data-report] .shelf-cards .purpose-card.sel .pc-hero{color:#c3f53c}
/* ── step 1 options in the size card's clothes (15 Aug) ────────────────────
Same object: paper on the left, label, lime sub-line, muted note, tick. */
body[data-report] .shelf-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body[data-report] .shelf-cards .purpose-card{min-height:0;padding:14px 15px;
flex-direction:row;align-items:center;gap:13px}
body[data-report] .shelf-cards .sz-paper{width:34px;height:48px}
body[data-report] .shelf-cards .sz-note{-webkit-line-clamp:2;display:-webkit-box;
-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1000px){body[data-report] .shelf-cards{grid-template-columns:1fr 1fr}}
/* the paper square becomes a real miniature of that purpose's flyer */
body[data-report] .shelf-cards .pc-thumb{width:36px;height:51px;overflow:hidden;
border-radius:3px;background:#f2efe4;border:1px solid rgba(255,255,255,.16)}
body[data-report] .shelf-cards .pc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* ── step 1 options, stripped back (15 Aug) ────────────────────────────────
Mark, name, count. The description and the sample list were explaining a
choice that three plain phrases already make. */
body[data-report] .p-opt{flex-direction:row;align-items:center;gap:14px;
padding:16px 18px;min-height:0}
body[data-report] .p-opt-h{flex:1 1 auto;font-size:18px;line-height:1.2}
body[data-report] .p-cta{margin:0;flex:none;font-size:12.5px;white-space:nowrap}
body[data-report] .p-tick{position:static;width:22px;height:22px;flex:none;font-size:12px}
/* Cards size to their content instead of to an equal third: with a fixed grid,
"Keep them coming back" wrapped while the other two sat on one line. Flex
with a sensible floor keeps all three on one line and the row balanced. */
body[data-report] .p-opts{display:flex;flex-wrap:wrap;gap:12px}
body[data-report] .p-opts .p-opt{flex:1 1 auto;min-width:280px}
body[data-report] .p-opt-h{white-space:nowrap;font-size:17px}
@media(max-width:1000px){body[data-report] .p-opts .p-opt{flex:1 1 100%}}
/* Back to three equal columns. flex:1 1 auto sized each card to max-content,
which overflowed the row and wrapped every card onto its own line. The count
loses the word "options" so the longest heading fits beside it on one line. */
body[data-report] .p-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body[data-report] .p-opts .p-opt{flex:none;min-width:0}
body[data-report] .p-opt-h{font-size:16.5px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
body[data-report] .p-cta{font-size:13px;font-variant-numeric:tabular-nums}
@media(max-width:1000px){body[data-report] .p-opts{grid-template-columns:1fr}}
/* ── option cards get a real button (15 Aug) ───────────────────────────────
The count was a text link sharing one line with the heading, so opening a
card added "Hide" and a tick and squeezed "Keep them coming back" into an
ellipsis. Heading on top, button beneath: nothing competes for the width. */
body[data-report] .p-opt{flex-direction:column;align-items:stretch;gap:13px;padding:16px}
body[data-report] .p-top{display:flex;align-items:center;gap:12px;min-width:0}
body[data-report] .p-opt-h{flex:1 1 auto;white-space:normal;font-size:17px;line-height:1.2}
body[data-report] .p-tick{flex:none;width:22px;height:22px}
body[data-report] .p-btn{display:flex;align-items:center;justify-content:center;gap:8px;
padding:11px 14px;border-radius:9px;font:700 13px/1 Inter,system-ui,sans-serif;
background:#c3f53c;color:#1a2400;transition:background .14s}
body[data-report] .p-opt:hover .p-btn{background:#d3ff5c}
body[data-report] .p-opt.sel .p-btn{background:rgba(255,255,255,.10);color:#f2f4f6}
body[data-report] .p-opt.sel:hover .p-btn{background:rgba(255,255,255,.16)}
/* ── the question gets room to be a question (15 Aug) ──────────────────────
Eyebrow, heading and the line under it were set 3-4px apart and the whole
block sat 6px off the cards, so the top of every stage read as one grey
slab. Now: the eyebrow stands off, the question is the biggest thing on the
page, and there is a clear gap before the choices start. */
body[data-report] #stagehead{margin:10px 0 40px}
body[data-report] #stagehead .acct-eyebrow{margin-bottom:14px}
body[data-report] #stagehead h1{font-size:29px;line-height:1.12}
body[data-report] #stagehead p{margin-top:14px;font-size:14.5px;line-height:1.55}
/* Cards without their glyph. The heading was competing with a 42px box for a
third of the width; it takes that back and sets bigger. */
body[data-report] .p-opt{gap:18px;padding:22px}
body[data-report] .p-top{align-items:flex-start}
body[data-report] .p-opt-h{font-size:21px;font-weight:750;letter-spacing:-.02em;
line-height:1.16}
body[data-report] .p-tick{margin-top:1px}
body[data-report] .p-btn{padding:12px 14px;font-size:13.5px}
/* ── the job title gets something to be the title of (15 Aug) ──────────────
A heading with nothing under it but a lime slab isn't a heading, it's a
button label that drifted up. What makes type read as a title is having
something subordinate beneath it — so the group's note comes back, and the
pair centres over the button, whose own label was centred all along.
No eyebrow. Three of them would all have to say the same word, and an
eyebrow that repeats across every card is decoration, not signposting. */
body[data-report] .p-opt{align-items:center;text-align:center;gap:12px;
padding:26px 20px 20px}
/* The tick is out of the flow, so the title has to keep clear of it or the
longest one runs underneath — "Keep them coming back" lost its "back". The
gutter is reserved on both sides, always, so nothing moves when it appears. */
body[data-report] .p-top{justify-content:center;align-items:baseline;padding:0 24px}
body[data-report] .p-opt-h{flex:0 1 auto;font-size:20px;line-height:1.22}
body[data-report] .p-opt-note{display:block;flex:1 1 auto;max-width:32ch;margin:0 auto;
font-size:13px;line-height:1.5;color:#b6bdc6}
/* back out of the flow: a tick in the row would push the centred title off-centre */
body[data-report] .p-tick{position:absolute;top:12px;right:12px;margin:0;
width:22px;height:22px;font-size:12px}
body[data-report] .p-btn{width:100%;margin-top:4px}
/* ── the numbered rail: steps 1, 2 and 3 all use it (15 Aug) ───────────────
Written for step 1, where three cards with lime buttons read as the choice
but are really a filter — the flyer you are choosing sits underneath. With
no numbering people clicked a job, watched its button go quiet, and waited,
because Continue stayed dead until they picked the thing below. Drawing the
second step before it has anything in it is the part that does the work.
The font step borrows it for the same shape: which font, then pick one.
Three states — .off nothing here yet, .on act here now, .done answered. */
body[data-report] .p-rail{list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:32px}
body[data-report] .p-step{position:relative;display:grid;
grid-template-columns:30px minmax(0,1fr);gap:16px;align-items:start}
/* the line from one number to the next, lime once that step is answered */
body[data-report] .p-step:not(:last-child)::before{content:"";position:absolute;
left:14px;top:38px;bottom:-34px;width:2px;border-radius:1px;
background:rgba(255,255,255,.11)}
body[data-report] .p-step.done::before{background:rgba(195,245,60,.42)}
body[data-report] .p-num{width:30px;height:30px;border-radius:50%;display:grid;
place-items:center;font:800 13px/1 Inter,system-ui,sans-serif;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
color:#7d838d;transition:background .14s,color .14s,border-color .14s}
body[data-report] .p-step.on .p-num{background:#23252b;border-color:#c3f53c;color:#c3f53c;
box-shadow:0 0 0 2px rgba(195,245,60,.28)}
body[data-report] .p-step.done .p-num{background:#c3f53c;border-color:#c3f53c;color:#1a2400}
body[data-report] .p-step-b{min-width:0}
body[data-report] .p-step-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:4px 0 15px;font:700 15.5px/1.2 Inter,system-ui,sans-serif;color:#f2f4f6}
body[data-report] .p-step.off .p-step-h{color:#7d838d}
/* which job the flyers below belong to — replaces the old section eyebrow */
body[data-report] .p-step-chip{font:800 10px/1 Inter,system-ui,sans-serif;
letter-spacing:.09em;text-transform:uppercase;color:#1a2400;background:#c3f53c;
border-radius:999px;padding:5px 9px}
body[data-report] .p-wait{margin:0;padding:28px 22px;border-radius:12px;
border:1px dashed rgba(255,255,255,.17);background:rgba(255,255,255,.02);
font-size:13.5px;color:#7d838d;text-align:center}
/* ═════════════ social: format switcher + food post ═════════════════════════
Lived in