:root { --ink:#17231d; --muted:#637168; --line:#dce5df; --paper:#fbfcfa; --mint:#dff6e6; --green:#16734a; --deep:#0d3c29; --coral:#e87555; }
/* Dark mode is scoped to the signed-out marketing page only, the same way App Dev Labs' dark
   mode only ever covers their one marketing page — there's no dashboard equivalent to theme
   there, and Amplifi's dashboard/Campaign Studio/Amp/Analytics screens were never designed
   against these tokens, so retheming them is a separate job. Scoping the redefinition to
   `body:has(#auth-screen:not([hidden]))` means the moment a user logs in and #auth-screen gets
   `hidden`, every token here snaps back to the light values above — the toggle can never leak
   dark colors into the authenticated app, whether or not the preference is still saved. */
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) {
  --ink:#eef4ef; --muted:#8fa89b; --line:#20362a; --paper:#0e1712; --mint:#12291c; --green:#3ecf8e; --deep:#1c6b45; --coral:#f0876a;
  background:linear-gradient(135deg,#0a100c 0%,#0e1712 42%,#0a120d 100%);
}
/* .card, .domain-input and .modal-close are shared with the signed-in dashboard (translucent
   card, form inputs, dashboard modals), which never runs under dark tokens — so their hardcoded
   #fff / rgba(255,255,255,..) stay put as base rules, and only get a dark-specific replacement
   here, under the same signed-out scope, rather than being edited in place. */
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .card { background:rgba(20,32,26,.72); }
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .domain-input { background:var(--paper); border-color:var(--line); }
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .domain-input:focus-within { box-shadow:0 0 0 3px rgba(62,207,142,.18); }
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .modal-close { background:var(--paper); }
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .modal-close:hover { border-color:var(--green); }
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .topbar.is-stuck::before { background:rgba(10,16,12,.82); }
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .button-secondary { color:var(--ink); }
:root[data-theme="dark"] body:has(#auth-screen:not([hidden])) .button-secondary:hover { background:rgba(62,207,142,.10); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(135deg,#f6fbf7 0%,#fbfcfa 42%,#f5f8f1 100%); font-family:Manrope,Arial,sans-serif; transition:background-color .25s ease,color .25s ease; }
.shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:14px 0 32px; }
/* Pins the footer to the bottom of the viewport on short pages (the login screen) without
   touching amp-mode/campaign-mode's own height:100vh .shell override below. */
body:not(.amp-mode):not(.campaign-mode) { min-height:100vh; display:flex; flex-direction:column; }
body:not(.amp-mode):not(.campaign-mode) .shell { flex:1; display:flex; flex-direction:column; }
/* A real menu bar: the rule under it separates chrome from content, and the nav is split into a
   left navigation group and a right account group so the two aren't read as one row of buttons. */
/* Layering, low to high: sticky topbar (50) < scroll progress (55) < mission/demo/signup
   overlays (60) < connect-a-store modal (70). The bar has to sit under the overlays or it
   paints over their dim backdrop. */
.scroll-progress { display:none; position:fixed; top:0; left:0; width:100%; height:3px; z-index:55; pointer-events:none; }
body:has(#auth-screen:not([hidden])) .scroll-progress { display:block; }
/* Multi-stop like ADL's indigo/violet/amber, drawn from Amplifi's own palette: deep green
   through the brand green and its bright mint into the coral accent. */
#scroll-progress-bar { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--deep),var(--green) 32%,#3ecf8e 66%,var(--coral)); }
.topbar { position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:22px; padding:10px 0 12px; border-bottom:1px solid transparent; }
/* The band behind the bar is painted by a pseudo-element that bleeds out to the viewport rather
   than by widening the element, so the bar itself keeps the same geometry on every screen and
   the brand and nav never shift between pages. Signed in it is solid and always on — a sticky
   bar with a transparent background lets dashboard content scroll through it, and the
   full-width content in dashboard mode would otherwise show past a shell-width band. */
.topbar::before {
  content:''; position:absolute; top:0; bottom:-1px; left:calc(50% - 50vw); width:100vw; z-index:-1;
  background:var(--paper); border-bottom:1px solid var(--line);
  transition:background-color .3s ease,border-color .3s ease;
}
/* Signed out it starts invisible and fades in on scroll, the way ADL's does. */
.shell:has(#auth-screen:not([hidden])) .topbar { padding:12px 0; transition:padding .3s ease; }
.shell:has(#auth-screen:not([hidden])) .topbar::before { background:transparent; border-bottom-color:transparent; }
.shell:has(#auth-screen:not([hidden])) .topbar.is-stuck { padding:9px 0; }
.shell:has(#auth-screen:not([hidden])) .topbar.is-stuck::before {
  background:rgba(251,253,251,.86);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
/* 100vw exceeds the content width wherever a classic (non-overlay) scrollbar is present. Clip
   rather than let that become a horizontal scrollbar; overflow-y stays visible, so this creates
   no scroll container and both the sticky topbar and the analytics table's sticky header still
   stick (which plain overflow-x:hidden would break). */
body { overflow-x:clip; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.topbar-nav { display:flex; align-items:center; gap:4px; }
.topbar-meta { display:flex; align-items:center; gap:12px; padding-left:14px; margin-left:4px; border-left:1px solid var(--line); }
/* Signed out there is no vendor badge and no Log out, so this group is empty — but its padding,
   margin and divider still reserved ~29px, holding the burger short of the edge the brand sits
   flush against. Most visible on a phone, where the bar is only the brand and the burger. */
.shell:has(#auth-screen:not([hidden])) .topbar-meta { display:none; }
.topbar-home-nav { display:none; align-items:center; gap:30px; }
.shell:has(#auth-screen:not([hidden])) .topbar-home-nav { display:flex; }
.topbar-home-nav a { position:relative; color:var(--muted); text-decoration:none; font:600 14.5px Manrope,sans-serif; padding:4px 0; transition:color .15s; }
.topbar-home-nav a:hover { color:var(--deep); }
.topbar-home-nav a::after { content:''; position:absolute; left:50%; right:50%; bottom:0; height:2px; background:var(--green); border-radius:2px; transition:left .2s,right .2s; }
.topbar-home-nav a:hover::after { left:0; right:0; }
.topbar-home-nav a.is-current { color:var(--deep); }
.topbar-home-nav a.is-current::after { left:0; right:0; }

/* ── Marketing sections: Mission / Gallery / Pricing / Contact ──
   Same page rhythm as App Dev Labs' own site (full-bleed alternating bands, a constrained
   inner column, a mono-label + h2 + sec-sub header repeated per section) with Amplifi's own
   green in place of their indigo, and built from Amplifi's existing tokens rather than a
   parallel set — no --accent/--ink-2/etc, just --green/--deep/--muted/--line/--paper. */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
#marketing-sections { display:none; }
#auth-screen:not([hidden]) ~ #marketing-sections { display:block; }
.section { width:100vw; margin-left:calc(50% - 50vw); padding:76px 0; scroll-margin-top:90px; }
.section.alt { background:var(--paper); border-block:1px solid var(--line); }
.section-inner { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.mono-label { font:700 11px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
.sec-head { max-width:640px; margin-bottom:40px; }
.sec-head h2 { font-size:clamp(26px,3vw,36px); letter-spacing:-.03em; line-height:1.18; }
.sec-sub { color:var(--muted); font-size:15.5px; line-height:1.7; margin-top:12px; max-width:56ch; }
/* Mission runs the full column rather than sitting in a narrow strip with the right half empty,
   one bulleted paragraph per row across the whole width. */
#mission .sec-head, #pricing .sec-head { max-width:none; }
#mission .sec-sub, #pricing .sec-sub { max-width:none; }
.mission-copy { max-width:none; }
.mission-copy { max-width:46em; }
.mission-copy p { color:var(--muted); font-size:19px; line-height:1.7; margin:0 0 18px; letter-spacing:-.01em; }
.mission-copy p:first-child { color:var(--ink); font-weight:700; font-size:22px; letter-spacing:-.02em; }

.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.price-card { border:1px solid var(--line); border-radius:16px; background:var(--paper); padding:26px 22px; display:flex; flex-direction:column; }
.price-card.is-featured { border-color:var(--green); box-shadow:0 18px 40px rgba(13,60,41,.10); }
.price { display:flex; align-items:baseline; gap:5px; font:800 29px Manrope,sans-serif; letter-spacing:-.03em; margin:2px 0 10px; }
.price span { font-size:29px; }
/* The Scale card carries words where the others carry a number. "Talk to our team" is long
   enough to wrap at the plan-price size, so it steps down and is allowed to sit on two
   lines without pushing the card taller than its neighbours. */
.price-card:last-child .price span { font-size:21px; line-height:1.2; display:inline-block; }
.price-blurb { color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 20px; }
.price-feats { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.price-feats li { position:relative; padding-left:22px; color:var(--ink); font-size:13.5px; font-weight:600; }
.price-feats li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--green); font-weight:800; }

.mkt-btn { width:auto; border-radius:100px; padding:12px 22px; font:700 13px Manrope,sans-serif; border:0; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
.mkt-btn-primary { background:var(--deep); color:#fff; }
.mkt-btn-primary:hover { background:#145337; transform:translateY(-1px); }
.mkt-btn-ghost { background:var(--paper); color:var(--deep); border:1px solid var(--line); }
.mkt-btn-ghost:hover { border-color:var(--green); transform:translateY(-1px); }
.price-card .mkt-btn { width:100%; justify-content:center; margin-top:auto; }

.section.contact .section-inner { display:flex; }
/* A light card like the pricing ones rather than the dark slab it started as: the label, heading
   and body take the same colours as every other section, and the buttons keep the page's normal
   green primary / outlined ghost pair instead of inverting to white-on-green. */
.mkt-cta { position:relative; flex:1; overflow:hidden; border-radius:24px; background:var(--paper); border:1px solid var(--line); padding:56px 48px; text-align:center; }
.mkt-cta .mono-label, .mkt-cta h2, .mkt-cta .sec-sub { position:relative; }
.mkt-cta .sec-sub { margin:12px auto 0; }
.mkt-cta-glow { position:absolute; inset:-40% -10% auto; height:160%; background:radial-gradient(circle,rgba(22,115,74,.10),transparent 68%); pointer-events:none; }
.mkt-cta-actions { position:relative; display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }


/* ── Product showcase: ADL's Amplifi panel, recoloured to Amplifi's green ──
   Their indigo/violet accents become --green/--deep; the structure, the count-up KPIs and the
   grow-on-scroll bars are carried over as-is. */
.product { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.kicker { font:500 11.5px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin:0; }
.product-copy h3 { font-size:clamp(32px,3.4vw,43px); letter-spacing:-.04em; margin:8px 0 18px; }
.product-body { color:var(--muted); font-size:15.5px; line-height:1.75; margin:0; }
.feat { list-style:none; margin:27px 0 0; padding:0; display:grid; gap:14px; }
.feat li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--muted); }
.feat svg { width:19px; height:19px; flex:none; margin-top:2px; color:var(--green); background:rgba(22,115,74,.14); border-radius:50%; padding:2px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:30px; }
.chips span { font:500 11.5px 'DM Mono',monospace; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:5px 12px; background:var(--paper); }
.product-visual { display:grid; place-items:center; }

.dash { width:min(100%,440px); border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:0 24px 60px rgba(13,60,41,.14); }
.dash-bar { display:flex; align-items:center; gap:6px; padding:11px 14px; background:var(--mint); border-bottom:1px solid var(--line); }
.dash-bar i { width:10px; height:10px; border-radius:50%; background:var(--line); }
.dash-url { margin-left:auto; font:500 11px 'DM Mono',monospace; color:var(--muted); }
.dash-body { display:flex; min-height:300px; }
.dash-side { width:52px; border-right:1px solid var(--line); padding:13px 10px; display:grid; gap:9px; align-content:start; }
.s-item { height:9px; border-radius:4px; background:var(--mint); }
.s-item.is-on { background:linear-gradient(90deg,var(--green),var(--deep)); }
.dash-main { flex:1; padding:16px; display:flex; flex-direction:column; gap:14px; }
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.kpi { position:relative; border:1px solid var(--line); border-radius:11px; padding:10px 11px 9px; background:var(--paper); }
/* The headline metric earns a tint and a green rule so the three tiles read as a hierarchy
   rather than three identical boxes. */
.kpi.is-hero { border-color:rgba(22,115,74,.32); background:linear-gradient(160deg,rgba(22,115,74,.09),rgba(22,115,74,0) 70%); }
.kpi.is-hero::before { content:''; position:absolute; left:11px; right:11px; top:0; height:2px; border-radius:0 0 2px 2px; background:linear-gradient(90deg,var(--green),#3ecf8e); }
.kpi-l { font:500 9.5px 'DM Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:0; }
.kpi-v { display:flex; align-items:baseline; gap:1px; font-size:19px; font-weight:800; letter-spacing:-.03em; margin:3px 0 0; font-variant-numeric:tabular-nums; }
.kpi-unit { font-size:12px; font-weight:800; color:var(--muted); }
.kpi-d { display:flex; align-items:center; gap:4px; margin:4px 0 0; font:700 9.5px 'DM Mono',monospace; color:var(--green); letter-spacing:.02em; }
.kpi-arrow { font-size:7px; line-height:1; }
.kpi-since { color:var(--muted); font-weight:500; }
.dash-chart { display:flex; align-items:flex-end; gap:5px; height:96px; padding:5px 0; }
.dash-chart span { flex:1; height:var(--h); border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--green),var(--deep)); }
/* The bars grow when the dashboard scrolls into view, not on load. JS adds .will-grow only when
   it can drive the animation, so with JS off or reduced motion on they render at full height. */
.dash-chart.will-grow span { height:0; opacity:0; }
.dash-chart.will-grow.is-in span { animation:grow-bar 1.25s cubic-bezier(.22,1,.36,1) forwards; }
.dash-chart.will-grow.is-in span:nth-child(1) { animation-delay:0s; }
.dash-chart.will-grow.is-in span:nth-child(2) { animation-delay:.12s; }
.dash-chart.will-grow.is-in span:nth-child(3) { animation-delay:.24s; }
.dash-chart.will-grow.is-in span:nth-child(4) { animation-delay:.36s; }
.dash-chart.will-grow.is-in span:nth-child(5) { animation-delay:.48s; }
.dash-chart.will-grow.is-in span:nth-child(6) { animation-delay:.60s; }
.dash-chart.will-grow.is-in span:nth-child(7) { animation-delay:.72s; }
.dash-chart.will-grow.is-in span:nth-child(8) { animation-delay:.84s; }
@keyframes grow-bar { from { height:0; opacity:0; } to { height:var(--h); opacity:1; } }
.dash-camp { margin-top:auto; display:flex; align-items:center; gap:11px; padding:11px; border-radius:12px; border:1px dashed rgba(22,115,74,.45); background:rgba(22,115,74,.07); }
.sparkle { color:var(--green); font-size:16px; }
.camp-t { font-size:13px; font-weight:700; margin:0; }
.camp-s { font:500 10.5px 'DM Mono',monospace; color:var(--muted); margin:2px 0 0; }
.camp-go { margin-left:auto; font-size:11px; font-weight:700; color:var(--paper); background:var(--deep); padding:5px 12px; border-radius:100px; }
@media (max-width:820px) { .product { grid-template-columns:1fr; gap:40px; } }
@media (max-width:1060px) { .pricing-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .pricing-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .section { padding:56px 0; } .mkt-cta { padding:40px 24px; } }
/* No margin-left here: with the theme toggle hidden this group is empty on desktop, where a
   margin only held the last nav link short of the edge the brand is flush against — and on mobile
   the group is right-aligned, so a left margin never moved it anyway. If the toggle comes back,
   .topbar-actions' own gap separates it. */
.topbar-home-tools { display:none; align-items:center; gap:8px; }
.shell:has(#auth-screen:not([hidden])) .topbar-home-tools { display:flex; }
.theme-toggle-btn { width:38px; height:38px; display:grid; place-items:center; cursor:pointer; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--muted); padding:0; transition:color .16s ease,border-color .16s ease,transform .16s ease; }
.theme-toggle-btn:hover { color:var(--deep); border-color:var(--green); transform:translateY(-1px); }
.theme-toggle-btn svg { width:18px; height:18px; }
/* Hidden for now — the theme is pinned to light in app.js while this is off. Sits after the
   rule above because that one sets display:grid. */
.theme-toggle-btn { display:none; }
.ico-moon { display:none; }
:root[data-theme="dark"] .ico-sun { display:none; }
:root[data-theme="dark"] .ico-moon { display:block; }
/* No nav on a phone. Mission, Pricing and Contact are sections of this same page rather than
   separate routes, so scrolling already reaches all of them — a burger only added a tap and a
   panel over the hero to arrive at the place the thumb was heading anyway. */
@media (max-width:760px) {
  .topbar-home-nav { display:none !important; }
}
.brand { color:var(--ink); text-decoration:none; display:flex; gap:10px; align-items:center; font-size:20px; font-weight:800; letter-spacing:-1px; }
/* Ribbon A with circuit traces in the counter, white on a green gradient tile. */
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#fff; background:linear-gradient(140deg,#25a86d,#0d3c29); }
.brand-mark svg { width:19px; height:19px; display:block; }
.environment,.pill { display:flex; gap:7px; align-items:center; border:1px solid var(--line); border-radius:99px; padding:6px 10px; color:var(--muted); font:500 11px 'DM Mono',monospace; letter-spacing:.02em; }
.environment i { width:7px; height:7px; background:#54c87a; border-radius:50%; }
.hero { padding:86px 0 58px; max-width:760px; }
/* Borrowed from App Dev Labs' marketing site (soft radial blobs behind the headline, without
   their dot-grid — dropped earlier at the user's call) — recolored to Amplifi's own green rather
   than their indigo/violet, and scoped only to the auth hero so it doesn't creep into any in-app
   screen. var(--green) already goes from a deep forest shade in light mode to a bright mint in
   dark mode, so the glow reads as "light green" against the dark background without a separate
   dark-mode override. */
.auth-hero { position:relative; }
.auth-hero::before, .auth-hero::after { content:''; position:absolute; border-radius:50%; pointer-events:none; z-index:-1; filter:blur(70px); }
.auth-hero::before { width:38vw; height:38vw; max-width:520px; max-height:520px; left:-10vw; top:-15vw; background:radial-gradient(circle,var(--green),transparent 68%); opacity:.24; }
.auth-hero::after { width:28vw; height:28vw; max-width:400px; max-height:400px; right:-6vw; top:-2vw; background:radial-gradient(circle,var(--green),transparent 66%); opacity:.16; }
@media (max-width:760px) { .auth-hero::before { left:-22vw; top:-18vw; } .auth-hero::after { display:none; } }
.eyebrow { color:var(--green); text-transform:uppercase; letter-spacing:.11em; font:500 11px 'DM Mono',monospace; margin:0 0 14px; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(42px,6vw,72px); line-height:1.05; letter-spacing:-.065em; margin-bottom:22px; } h1 em { color:var(--green); font-style:normal; } h2 { font-size:23px; letter-spacing:-.045em; margin:0; } h3 { font-size:16px; margin-bottom:7px; letter-spacing:-.02em; }
.lede { color:var(--muted); max-width:590px; line-height:1.7; font-size:16px; }
.layout { display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:20px; }
.dashboard-shell { display:flex; gap:20px; align-items:flex-start; }.dashboard-shell .catalog-card { flex:1; min-width:0; }
/* With a single connector the store is the subject of the page, so it gets a header of its own
   rather than an icon in a rail: who's connected, whether it's healthy, and when it last synced,
   with the totals reading as properties of that store instead of a free-floating strip. */
.store-panel { padding:22px 24px; margin-bottom:16px; }
.store-panel-head { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.store-identity { display:flex; align-items:center; gap:13px; min-width:0; }
.store-mark { flex:none; width:42px; height:42px; border-radius:12px; background:var(--deep); color:#fff; display:grid; place-items:center; font:800 18px Manrope,sans-serif; }
.store-identity-text { min-width:0; }
.store-identity-text .eyebrow { margin-bottom:3px; }
.store-domain { margin:0; font:800 17px Manrope,sans-serif; letter-spacing:-.02em; color:var(--ink); word-break:break-all; }
.store-actions { display:flex; align-items:center; gap:12px; flex:none; }
.store-status { display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:5px 12px; background:var(--mint); color:var(--green); font:700 11px 'DM Mono',monospace; }
.store-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#54c87a; }
.store-action-button { width:auto; padding:9px 16px; border-radius:10px; font:700 12.5px Manrope,sans-serif; }
/* Totals sit inside the panel as divided columns — they describe this store, not the page. */
.store-metrics { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
/* Exactly three: count, value, last synced (see statStripGrid) — stated outright so auto-fit
   doesn't spawn empty phantom tracks alongside them. */
.store-metrics .metric-grid { margin-bottom:0; gap:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:640px) { .store-metrics .metric-grid { grid-template-columns:1fr; gap:14px; } .store-metrics .metric-tile { padding:0; border-left:0; } }
.store-metrics .metric-tile { background:none; border-radius:0; padding:0 18px; border-left:1px solid var(--line); }
.store-metrics .metric-tile:first-child { padding-left:0; border-left:0; }
.store-metrics .metric-tile.accent .metric-value { color:var(--green); }

/* Sized like .campaign-content so both screens' bodies line up under the same rail width. */
.dashboard-content { width:min(1000px,100%); margin:26px auto 48px; padding:0 28px; }
/* The store chips reuse .campaign-step-chip wholesale; these only add what a store needs that a
   wizard step doesn't — a reconnect affordance, and a "connected" dot. */
.store-chip-dot { flex:none; width:6px; height:6px; border-radius:50%; background:var(--green); margin-left:auto; }
.campaign-step-chip.active .store-chip-dot { background:rgba(255,255,255,.85); }
/* width:auto is load-bearing: the global `button` rule sets width:100%, which made this stretch
   past the chip it lives inside. */
/* width:auto is load-bearing: the global `button` rule sets width:100%, which made this stretch
   past the chip it lives inside. A circular target rather than bare text — at 24px it's a real
   thing to aim at, and the tinted disc reads as a control instead of stray punctuation.
   transform:none cancels the global button lift, which looked broken on something this small. */
.store-chip-reconnect {
  width:24px; height:24px; flex:none; margin-left:auto; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(232,117,85,.12); color:var(--coral);
  font:700 13px/1 Manrope,sans-serif;
  cursor:pointer; transition:background .15s,color .15s;
}
.store-chip-reconnect:hover { background:var(--coral); color:#fff; transform:none; }
/* On the active (dark) chip the coral tint disappears into the green, so it borrows white. */
.campaign-step-chip.active .store-chip-reconnect { background:rgba(255,255,255,.16); color:#ffd9cc; }
.campaign-step-chip.active .store-chip-reconnect:hover { background:rgba(255,255,255,.3); color:#fff; }
.rail-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.rail-avatar { position:relative; width:42px; height:42px; border-radius:13px; background:#fff; border:1px solid var(--line); color:var(--muted); display:grid; place-items:center; font:800 13px Manrope,sans-serif; cursor:pointer; transition:background .16s,color .16s,border-color .16s; }
.rail-avatar:hover { border-color:#b9cabe; }
.rail-avatar.active { background:var(--deep); color:#fff; border-color:var(--deep); }
.rail-label { font:600 8.5px 'DM Mono',monospace; color:var(--muted); text-align:center; letter-spacing:.01em; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-label.active { color:var(--deep); font-weight:700; }
.rail-reconnect-dot { position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background:var(--coral); color:#fff; border:2px solid var(--paper); display:grid; place-items:center; font-size:9px; cursor:pointer; line-height:1; }
.rail-reconnect-dot:hover { background:#c85a3a; }
.rail-add { width:42px; height:42px; border-radius:13px; border:1.5px dashed var(--line); color:var(--green); background:transparent; display:grid; place-items:center; font:800 17px Manrope,sans-serif; cursor:pointer; padding:0; }
.rail-add:hover { border-color:var(--green); background:#f1f5f2; }

/* A segmented control beside the heading rather than an underlined row: the store panel above
   already owns a horizontal divider, and a second one directly under it read as a stack of rules. */
.datatype-tabs { display:flex; gap:3px; flex:none; background:#eef4ef; border-radius:10px; padding:3px; }
.datatype-tab { width:auto; border:0; background:transparent; color:var(--muted); font:700 12px Manrope,sans-serif; padding:7px 15px; border-radius:8px; cursor:pointer; transition:background .15s,color .15s; }
.datatype-tab:hover { color:var(--ink); background:transparent; transform:none; }
.datatype-tab.active { color:var(--deep); background:#fff; }
.modal-overlay { position:fixed; inset:0; background:rgba(13,44,31,.4); display:flex; align-items:flex-start; justify-content:center; padding:220px 24px 24px; overflow-y:auto; z-index:70; opacity:0; transition:opacity .2s ease; }.modal-overlay.open { opacity:1; }
.modal { position:relative; width:100%; max-width:460px; max-height:80vh; overflow-y:auto; transform:translateY(24px); opacity:0; transition:transform .22s ease,opacity .22s ease; }.modal-overlay.open .modal { transform:translateY(0); opacity:1; }
/* .card is deliberately translucent (78%) so page cards sit on the background tint — but this
   panel floats over the dashboard, where that let the catalog behind it read straight through
   the connect form. Scoped to this modal only, since the translucency is wanted elsewhere. */
#source-modal .modal { background:#fff; }
.modal-close { position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:16px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0; }.modal-close:hover { color:var(--ink); border-color:#b9cabe; }.modal .card-heading { padding-right:36px; }

.mission-overlay { position:fixed; inset:0; background:rgba(13,44,31,.45); display:flex; align-items:flex-end; justify-content:center; z-index:60; opacity:0; pointer-events:none; transition:opacity .28s ease; }
.mission-overlay.open { opacity:1; pointer-events:auto; }
.mission-panel { position:relative; width:100%; max-width:660px; max-height:82vh; overflow-y:auto; background:var(--paper); border-radius:26px 26px 0 0; padding:48px 48px 40px; box-shadow:0 -24px 70px rgba(13,44,31,.22); transform:translateY(100%); transition:transform .36s cubic-bezier(.2,.9,.25,1); }
.mission-overlay.open .mission-panel { transform:translateY(0); }
.mission-title { margin:10px 0 18px; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.mission-lede { color:var(--ink); font-size:17px; font-weight:700; line-height:1.6; margin:0 0 18px; }
.mission-panel p { color:var(--muted); font-size:14.5px; line-height:1.75; margin:0 0 16px; }
.mission-close-line { color:var(--green) !important; font-weight:700; font-style:italic; margin-top:24px !important; padding-top:20px; border-top:1px solid var(--line); }
@media (max-width:640px) { .mission-panel { padding:36px 24px 30px; border-radius:20px 20px 0 0; } .mission-title { font-size:22px; } }

.demo-panel { max-width:480px; }
.demo-panel .auth-form { margin-top:24px; }
.demo-panel #demo-message { margin-top:0; }
.onboard-panel { max-width:800px; max-height:94vh; padding:30px 44px 26px; }
.job-detail-panel { max-width:920px; max-height:88vh; }
.job-detail-panel .mission-title { margin-bottom:18px; }
.quick-launch-panel { max-width:640px; }
.quick-launch-panel .recipient-row img { flex-shrink:0; }
.onboard-panel .mission-lede { margin-bottom:10px; }
.onboard-panel .auth-form { margin-top:16px; }
.onboard-panel #onboard-message { margin-top:0; }
.onboard-panel .onboard-section { margin:14px 0 10px; }
.onboard-panel .onboard-row { margin-bottom:7px; }
.onboard-panel .onboard-row label { margin-bottom:5px; }
.onboard-panel .field-note { margin:5px 0 10px; }
@media (max-width:640px) { .onboard-panel { padding:28px 24px 24px; } }
.card { background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:0 16px 40px rgba(22,69,44,.05); }
.catalog-card .card-heading { align-items:center; margin-bottom:18px; }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.card-heading .eyebrow { margin-bottom:8px; }.pill { color:var(--green); background:#effbf2; border-color:#cfead7; }.description { color:var(--muted); font-size:14px; line-height:1.6; margin:24px 0; }
.provider-tabs { display:flex; gap:6px; margin-top:20px; border:1px solid var(--line); border-radius:11px; padding:4px; background:#fff; }.provider-tab { flex:1; border:0; border-radius:8px; background:transparent; color:var(--muted); padding:9px 10px; font:700 12px Manrope,sans-serif; cursor:pointer; transition:background .16s,color .16s; }.provider-tab:hover { color:var(--ink); }.provider-tab.active { background:var(--deep); color:#fff; }
.auth-layout { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items:center; margin-top:24px; }.auth-hero { padding:0; max-width:none; }.auth-card { width:100%; max-width:440px; margin-left:auto; }.auth-form + .auth-form { margin-top:0; }.auth-form button { margin-top:18px; }
/* Smaller than the shared h1 clamp, and pinned to one line — "Your commerce data, working
   harder." wrapped across three lines at the shared size once the trailing <br> was removed. */
.auth-hero h1 { font-size:clamp(26px,3vw,42px); white-space:nowrap; }
label { display:block; margin:0 0 9px; font-size:13px; font-weight:700; }.domain-input { display:flex; align-items:center; border:1px solid #b9cabe; background:#fff; border-radius:10px; overflow:hidden; }.domain-input:focus-within { border-color:var(--green); box-shadow:0 0 0 3px #dbf4e3; }.domain-input input { min-width:0; flex:1; border:0; outline:0; padding:13px 4px 13px 14px; font:14px 'DM Mono',monospace; }.domain-input span { padding:13px 13px 13px 0; color:var(--muted); font:14px 'DM Mono',monospace; }.field-note { margin:9px 0 18px; color:var(--muted); font-size:11px; line-height:1.5; } code { font-family:'DM Mono',monospace; }
button { border:0; width:100%; border-radius:10px; background:var(--deep); color:white; padding:13px 16px; font:700 13px Manrope,sans-serif; cursor:pointer; transition:transform .16s,background .16s; } button:hover { background:#145337; transform:translateY(-1px); } button span { margin-left:8px; }.text-button { width:auto; padding:6px 0; color:var(--green); background:transparent; font-size:12px; }.text-button:hover { color:var(--deep); background:transparent; }.text-button:disabled { opacity:.5; cursor:wait; }a.text-button { display:inline-block; text-decoration:none; }
.button-secondary { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; border-radius:10px; padding:13px 16px; font:700 13px Manrope,sans-serif; text-decoration:none; cursor:pointer; transition:transform .16s,background .16s,border-color .16s; background:transparent; color:var(--deep); border:1px solid var(--line); }
.button-secondary:hover { background:rgba(13,60,41,.06); border-color:var(--green); transform:translateY(-1px); }
.button-secondary span { margin-left:8px; }
.auth-secondary-actions { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
button:disabled { opacity:.4; cursor:not-allowed; }button:disabled:hover { background:var(--deep); transform:none; }
.message { margin-top:14px; padding:10px 12px; border-radius:8px; font-size:12px; line-height:1.45; }.error { color:#a23922; background:#fff0ec; }.success { color:#17613e; background:#e9f9ee; }
.empty-state { text-align:center; padding:65px 20px 38px; color:var(--muted); }.empty-state p { font-size:13px; line-height:1.6; max-width:270px; margin:auto; }
/* An empty view should carry the action that fills it, rather than describing a button elsewhere. */
#catalog-empty-action { margin:18px auto 0; }.empty-icon { display:grid; place-items:center; margin:0 auto 13px; width:42px; height:42px; border-radius:14px; background:var(--mint); color:var(--green); font-size:26px; }.summary { color:var(--muted); margin:22px 0 13px; font:11px 'DM Mono',monospace; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:13px; } th { color:var(--muted); font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; text-align:left; } th,td { padding:12px 8px; border-bottom:1px solid #edf1ee; } th:first-child,td:first-child { padding-left:0; font-weight:700; } td:nth-child(2),td:nth-child(3) { color:var(--muted); font:11px 'DM Mono',monospace; }
#products-results td:first-child { font-weight:400; width:1%; }
#products-results td:nth-child(2) { font-weight:700; color:var(--ink); font-family:Manrope,sans-serif; }
#products-results td:nth-child(4) { color:var(--muted); font:11px 'DM Mono',monospace; }
.thumb-img { width:36px; height:36px; object-fit:cover; border-radius:6px; display:block; background:#f1f5f2; }
#products-results .description-cell { color:var(--muted); font:12px/1.5 Manrope,sans-serif; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draft-badge { display:inline-block; background:var(--coral); color:#fff; border-radius:99px; padding:2px 8px; font:700 9.5px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; }
/* Inserting Date as column 2 shifts Status to column 4, past the generic muted-mono rule for
   columns 2-3 — restored here so the status codes keep reading as data, not prose. */
#orders-results td:nth-child(4) { color:var(--muted); font:11px 'DM Mono',monospace; }
/* The item count doubles as the disclosure control — the chevron turns when the lines are open. */
.order-lines-toggle { width:auto; display:inline-flex; align-items:center; gap:5px; background:var(--mint); color:var(--green); border:0; border-radius:99px; padding:3px 10px; font:700 10px 'DM Mono',monospace; letter-spacing:.03em; vertical-align:middle; cursor:pointer; }
.order-lines-toggle::after { content:'›'; font-size:12px; line-height:1; transition:transform .16s; }
.order-lines-toggle.open::after { transform:rotate(90deg); }
.order-lines-toggle:hover { background:#cdeed7; color:var(--deep); transform:none; }
.test-badge { display:inline-block; background:#e7edf5; color:#3a5a80; border-radius:99px; padding:2px 8px; font:700 9.5px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; }
.order-lines-row td { background:#f7f9f7; padding:0; }
.order-detail { display:flex; flex-direction:column; gap:12px; padding:12px 0; }
/* Reads top-to-bottom like a receipt, right-aligned so the amounts line up as a column. */
.order-breakdown { max-width:320px; display:flex; flex-direction:column; gap:5px; padding-top:10px; border-top:1px solid var(--line); }
.order-breakdown-row { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
.order-breakdown-value { font:11.5px 'DM Mono',monospace; }
.order-breakdown-total { color:var(--ink); font-weight:700; padding-top:5px; border-top:1px solid var(--line); }
.order-breakdown-total .order-breakdown-value { font-weight:700; color:var(--ink); }
.order-meta { display:flex; flex-wrap:wrap; gap:7px; }
.order-meta-pill { border:1px solid var(--line); background:#fff; border-radius:99px; padding:4px 11px; color:var(--muted); font:600 10.5px 'DM Mono',monospace; }
.order-meta-pill.consent { background:var(--mint); border-color:#cdeed7; color:var(--green); }
.order-lines { display:flex; flex-direction:column; gap:1px; padding:4px 0; }
.order-line { display:flex; align-items:center; gap:12px; padding:8px 8px 8px 0; }
.order-line-qty { flex:none; min-width:30px; color:var(--muted); font:700 11px 'DM Mono',monospace; text-align:right; }
.order-line-title { flex:1; min-width:0; color:var(--ink); font-size:12.5px; font-weight:600; }
.order-line-price { flex:none; color:var(--muted); font:11px 'DM Mono',monospace; }
.thumb-placeholder { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; background:#f1f5f2; color:var(--muted); font-size:11px; }
/* Menu items rather than buttons: no outline at rest, a tint on hover, and the active tab marked
   by a filled pill — so the bar reads as navigation instead of a row of competing calls to action. */
/* Option C from the nav redesign: a small status dot instead of a star glyph, and a bottom
   underline instead of a filled pill for the active state — echoes the Campaign Studio sidebar's
   numbered-circle "done/active" language without copying its pill background wholesale. */
.topbar-studio-button { width:auto; display:flex; align-items:center; gap:7px; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); padding:8px 6px; margin:0 4px; border-radius:0; font:600 13px Manrope,sans-serif; transition:color .15s,border-color .15s; }
.topbar-studio-button::before { content:''; width:7px; height:7px; border-radius:50%; background:#b4b8b2; flex:none; transition:background .15s; }
.topbar-studio-button:hover { background:transparent; color:var(--deep); transform:none; }
.topbar-studio-button.active { background:transparent; color:var(--deep); font-weight:700; border-bottom-color:var(--green); }
.topbar-studio-button.active::before { background:var(--green); }

.domain-input select { min-width:0; flex:1; border:0; outline:0; background:transparent; padding:13px 14px; font:14px 'DM Mono',monospace; color:var(--ink); cursor:pointer; }
.onboard-section { margin:22px 0 14px; color:var(--green); font:700 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.09em; }
.onboard-section:first-of-type { margin-top:4px; }
.onboard-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-card { max-height:82vh; overflow-y:auto; }

.team-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.team-form button { width:auto; padding:12px 22px; }
.checkbox-row { display:flex; align-items:center; gap:8px; margin:0 0 18px; font-size:13px; font-weight:500; color:var(--deep); }
.checkbox-row input { width:auto; margin:0; }
.temp-credential { margin-top:16px; background:var(--mint); border:1px solid #cdeed7; border-radius:12px; padding:16px 18px; }
.temp-credential-label { display:block; color:var(--green); font:700 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }
.temp-credential-value { font:700 15px 'DM Mono',monospace; color:var(--deep); }
.temp-credential-note { color:var(--deep); font-size:12px; line-height:1.55; margin:8px 0 0; }
.role-pill { display:inline-block; border-radius:99px; padding:3px 10px; font:700 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }
.role-pill.admin { background:var(--deep); color:#fff; }
.role-pill.user { background:var(--mint); color:var(--deep); }
.status-note { color:var(--muted); font-size:11.5px; }
.status-note.pending { color:var(--coral); font-weight:700; }

.campaign-shell { width:min(880px,calc(100% - 48px)); margin:0 auto; }
.campaign-topbar { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }.campaign-topbar h2 { font-size:30px; letter-spacing:-.04em; }
.campaign-topbar-actions { display:flex; gap:18px; align-items:center; padding-top:6px; }

.forms-toolbar { display:flex; gap:20px; align-items:flex-start; margin-bottom:22px; }
.forms-builder { flex:0 0 320px; }
.forms-list { flex:1; min-width:0; }
.forms-store-picker { display:flex; gap:6px; margin-bottom:16px; }
.forms-store-pill { flex:1; border:1px solid var(--line); border-radius:9px; padding:9px 10px; text-align:center; font:700 12px Manrope,sans-serif; color:var(--muted); cursor:pointer; background:#fff; }
.forms-store-pill:hover { border-color:#b9cabe; }
.forms-store-pill.active { background:var(--deep); color:#fff; border-color:var(--deep); }
.forms-preview { border:1.5px solid var(--line); border-radius:16px; padding:18px; background:#fff; margin-top:16px; }
.forms-preview-heading { font-size:15px; font-weight:800; margin-bottom:5px; }
.forms-preview-body { font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:12px; }
.forms-preview-input { border:1px solid #b9cabe; border-radius:8px; padding:10px 12px; font-size:13px; color:var(--muted); margin-bottom:10px; background:#fbfcfa; }
.forms-preview-button { border-radius:8px; background:var(--deep); color:#fff; padding:10px; font:700 13px Manrope,sans-serif; text-align:center; }
.forms-card { border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px; background:#fff; }
.forms-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.forms-card-title { font-weight:800; font-size:14px; margin-bottom:3px; }
.forms-card-meta { color:var(--muted); font:11px 'DM Mono',monospace; }
.forms-card-leads { color:var(--green); font:700 11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.forms-snippet { background:#17231d; color:#dff6e6; border-radius:10px; padding:12px 14px; font:12px 'DM Mono',monospace; overflow-x:auto; white-space:pre; margin-bottom:10px; }
.forms-card-actions { display:flex; gap:10px; }
.forms-card-actions button { width:auto; }
.forms-empty { color:var(--muted); font-size:13px; padding:24px; text-align:center; border:1.5px dashed var(--line); border-radius:14px; }
/* Campaign Studio uses the same app shell as Amp: a full-height rail on the left, content on the
   right. As a vertical list the seven steps read as an ordered checklist and stop wrapping onto a
   second row, which is what made them hard to scan as horizontal pills. */
body.campaign-mode { overflow:hidden; }
body.campaign-mode .shell { height:100vh; display:flex; flex-direction:column; padding-bottom:0; }
body.campaign-mode .topbar { flex:none; margin-bottom:0; }
/* Scoped to campaign mode, not to .campaign-shell — the Team screen shares that class and must
   stay a normal centered page. */
body.campaign-mode #campaign-screen { flex:1; min-height:0; width:100vw; margin-left:calc(50% - 50vw); }
/* The dashboard gets the identical treatment: its store rail is the same kind of persistent
   left-hand switcher, so it should sit flush to the viewport edge rather than floating inside a
   centered card like the rest of the page. */
body.dashboard-mode #app-screen { flex:1; min-height:0; width:100vw; margin-left:calc(50% - 50vw); }
.campaign-layout { position:relative; display:flex; height:100%; align-items:stretch; overflow:hidden; }
/* Borrowed from App Dev Labs' translucent floating cards — a soft green blob glow behind the
   already-translucent steps rail, with backdrop-blur added so the rail actually reads as frosted
   glass over it rather than just a flat tint. */
.campaign-layout::before {
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:420px; height:420px; left:-140px; bottom:-160px; border-radius:50%;
  background:radial-gradient(circle,var(--mint),transparent 68%); opacity:.8;
}
.campaign-steps-panel { position:relative; z-index:1; width:258px; flex:none; padding:18px 12px; display:flex; flex-direction:column; gap:16px; background:rgba(255,255,255,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-right:1px solid var(--line); }
.rail-heading { padding:0 8px; }
.rail-title { font:800 17px Manrope,sans-serif; letter-spacing:-.03em; color:var(--ink); margin:4px 0 0; }
.rail-footer { margin-top:auto; padding:10px 8px 2px; border-top:1px solid var(--line); }
.campaign-main { position:relative; z-index:1; flex:1; min-width:0; overflow-y:auto; }
/* The step body keeps the card surface it had before, now sized by the content column rather
   than by the old fixed-width shell. */
.campaign-content { width:min(820px,100%); margin:26px auto 48px; padding:32px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.campaign-step-indicator { list-style:none; display:flex; flex-direction:column; gap:2px; padding:0; margin:0; }
.campaign-step-chip { display:flex; align-items:center; gap:10px; border:0; background:none; border-radius:9px; padding:9px 10px; font:600 12.5px Manrope,sans-serif; color:var(--muted); cursor:default; text-align:left; }
.campaign-step-chip .num { flex:none; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#edf1ee; color:var(--muted); font:700 11px 'DM Mono',monospace; }
.campaign-step-chip.done { color:var(--deep); cursor:pointer; }.campaign-step-chip.done .num { background:var(--green); color:#fff; }
.campaign-step-chip.done:hover { background:var(--mint); }
.campaign-step-chip.active { color:#fff; background:var(--deep); }.campaign-step-chip.active .num { background:rgba(255,255,255,.22); color:#fff; }
@media (max-width:820px) { .campaign-steps-panel { display:none; } }
/* Campaign Studio can hide its rail on a narrow screen because the wizard still moves itself
   forward and back. The dashboard can't: this rail is the only way to change store, so it
   collapses into a horizontal strip above the content instead of disappearing. */
@media (max-width:820px) {
  body.dashboard-mode .campaign-layout { flex-direction:column; }
  body.dashboard-mode .campaign-steps-panel {
    display:flex; width:100%; flex-direction:row; align-items:center; flex-wrap:wrap;
    gap:8px; padding:12px 16px; border-right:0; border-bottom:1px solid var(--line);
  }
  body.dashboard-mode .rail-heading,
  body.dashboard-mode .rail-footer { display:none; }
  body.dashboard-mode .campaign-step-indicator { display:flex; flex-direction:row; gap:8px; margin:0; }
  body.dashboard-mode .dashboard-content { padding:0 16px; margin-top:18px; }
  /* margin-left:auto pins these to the right edge of a full-width vertical chip; in the
     collapsed row the chips are content-width, so auto leaves the marker floating away from
     its own label. */
  body.dashboard-mode .store-chip-reconnect,
  body.dashboard-mode .store-chip-dot { margin-left:6px; }
}

/* Amp runs as an app screen rather than a page: the shell becomes a full-height flex column so
   the chat fills whatever is left under the topbar without hardcoding its height, and the layout
   breaks out of the centered container so the thread rail can sit flush against the viewport edge. */
body.amp-mode { overflow:hidden; }
body.amp-mode .shell { height:100vh; display:flex; flex-direction:column; padding-bottom:0; }
/* Full-bleed so the menu rule runs edge to edge and meets the top of both rails, instead of
   stopping short at the centered container's width. */
body.amp-mode .topbar { flex:none; margin-bottom:0; }
body.amp-mode #amp-screen { flex:1; min-height:0; }
/* Performance and AI Campaigns both scroll normally (no viewport takeover, no overflow:hidden) —
   they only borrow the full-bleed topbar so the menu row looks the same as Amp and Campaign Studio. */
.amp-shell { width:100vw; margin-left:calc(50% - 50vw); }
.amp-layout { display:flex; height:100%; align-items:stretch; }
.amp-threads-panel { width:248px; flex:none; padding:16px 12px; display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.62); border-right:1px solid var(--line); }
.amp-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.amp-main-head { display:flex; justify-content:flex-end; padding:6px 18px 0; }
.amp-panel-toggle { width:32px; height:32px; padding:0; border:0; background:none; border-radius:9px; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s; }
.amp-panel-toggle:hover { background:rgba(255,255,255,.75); color:var(--deep); }
.amp-panel-toggle svg { width:17px; height:17px; }
/* Collapsing the rail is a width change on the aside, so the chat column reflows into the space
   instead of the panel floating over it — same as closing a side panel in Claude. */
.amp-suggestions-panel { width:290px; flex:none; padding:22px 20px; border-left:1px solid var(--line); background:rgba(255,255,255,.62); overflow-y:auto; }
body.amp-suggestions-hidden .amp-suggestions-panel { display:none; }
.amp-new-chat { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; font:700 12.5px Manrope,sans-serif; color:var(--deep); cursor:pointer; transition:border-color .15s,background .15s; }
.amp-new-chat:hover { border-color:var(--green); background:var(--mint); }
.amp-new-chat svg { width:14px; height:14px; }
.amp-threads { display:flex; flex-direction:column; gap:2px; overflow-y:auto; margin:0 -6px; padding:0 6px; }
.amp-thread-group { font:700 9.5px 'DM Mono',monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:12px 8px 5px; }
.amp-thread-row { display:flex; align-items:center; gap:4px; border-radius:9px; transition:background .15s; }
.amp-thread-row:hover { background:var(--mint); }
.amp-thread-row.active { background:var(--mint); }
.amp-thread { flex:1; min-width:0; text-align:left; border:0; background:none; padding:8px 4px 8px 8px; font:600 12.5px Manrope,sans-serif; color:var(--deep); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amp-thread-row.active .amp-thread { color:var(--green); }
.amp-thread-delete { flex:none; width:24px; height:24px; margin-right:4px; padding:0; border:0; background:none; border-radius:6px; color:var(--muted); cursor:pointer; opacity:0; display:flex; align-items:center; justify-content:center; }
.amp-thread-row:hover .amp-thread-delete { opacity:1; }
.amp-thread-delete:hover { background:#fff; color:var(--deep); }
.amp-thread-delete svg { width:13px; height:13px; }
.amp-threads-empty { color:var(--muted); font-size:12px; line-height:1.5; padding:8px; }
.amp-suggestions { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.amp-suggestion-pill { text-align:left; border:1px solid var(--line); background:#fff; border-radius:14px; padding:11px 14px; font:600 12.5px Manrope,sans-serif; color:var(--deep); cursor:pointer; line-height:1.4; transition:border-color .15s,background .15s; }
.amp-suggestion-pill:hover { border-color:var(--green); background:var(--mint); }
.amp-suggestion-pill:disabled { opacity:.5; cursor:default; }
/* Narrow viewports can't afford three columns: the suggestions go first, the thread rail second. */
@media (max-width:1180px) { .amp-suggestions-panel { display:none; } .amp-panel-toggle { display:none; } }
@media (max-width:820px) { .amp-threads-panel { display:none; } }
/* The conversation is a centered column with the composer directly under it, so both stay aligned
   at any window width rather than the text stretching the full span of the screen. */
.amp-messages { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; width:min(760px,100%); margin:0 auto; padding:4px 20px 16px; }
.amp-message { display:flex; gap:10px; align-items:flex-start; max-width:78%; }
.amp-message-bot { align-self:flex-start; }
.amp-message-user { align-self:flex-end; flex-direction:row-reverse; }
.amp-avatar { flex:none; width:30px; height:30px; border-radius:9px; background:var(--deep); color:#fff; display:grid; place-items:center; font:800 13px Manrope,sans-serif; }
.amp-bubble { padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.55; }
.amp-bubble p { margin:0 0 8px; }
.amp-bubble p:last-child { margin-bottom:0; }
.amp-bubble ul { margin:2px 0 8px; padding-left:18px; }
.amp-bubble ul:last-child { margin-bottom:0; }
.amp-bubble li { margin-bottom:2px; }
.amp-bubble strong { font-weight:800; }
.amp-message-bot .amp-bubble { background:var(--mint); color:var(--deep); border-top-left-radius:4px; }
.amp-message-user .amp-bubble { background:var(--deep); color:#fff; border-top-right-radius:4px; }
.amp-thinking .amp-bubble { color:var(--muted); background:#f1f5f2; font-style:italic; }
/* A small elastic settle when a live reply lands — not applied when a saved thread replays, or
   every bubble in it would bounce at once on open. */
@keyframes amp-reply-pop {
  0% { transform:scaleY(.9) translateY(7px); opacity:0; }
  45% { transform:scaleY(1.06) translateY(-5px); opacity:1; }
  70% { transform:scaleY(.98) translateY(2px); }
  100% { transform:scaleY(1) translateY(0); }
}
.amp-reply-pop { transform-origin:bottom center; animation:amp-reply-pop .55s cubic-bezier(.34,1.56,.64,1) both; }
@media (prefers-reduced-motion:reduce) { .amp-reply-pop { animation:none; opacity:1; } }
/* Working indicator: the brand mark breathes between dim and lit rather than spinning, so a slow
   answer reads as "still going" without pulling the eye the way a spinner does. */
@keyframes amp-breathe {
  0%,100% { opacity:.3; box-shadow:0 0 0 0 rgba(22,115,74,0); }
  50% { opacity:1; box-shadow:0 0 14px 2px rgba(22,115,74,.38); }
}
.amp-working { display:flex; align-items:center; gap:11px; padding:4px 2px; }
.amp-working-mark { flex:none; width:26px; height:26px; border-radius:8px; background:var(--deep); color:#fff; display:grid; place-items:center; font:800 12px Manrope,sans-serif; animation:amp-breathe 1.5s ease-in-out infinite; }
.amp-working-meta { color:var(--muted); font:500 12.5px 'DM Mono',monospace; letter-spacing:.01em; }
/* Same line, settled: what the finished answer cost, kept with the message in the saved thread. */
.amp-cost { margin:-6px 0 0 40px; color:var(--muted); font:500 11px 'DM Mono',monospace; letter-spacing:.02em; }
@media (prefers-reduced-motion:reduce) { .amp-working-mark { animation:none; opacity:1; } }

/* Opening a fresh session: the mark arrives, the wordmark writes itself in beside it, the pair
   holds a beat and clears out — then the greeting settles into the middle of the empty canvas. */
@keyframes amp-intro-mark { 0% { opacity:0; transform:scale(.55) translateY(6px); } 55% { opacity:1; transform:scale(1.06); } 100% { opacity:1; transform:scale(1); } }
@keyframes amp-intro-word { 0% { opacity:0; transform:translateX(-10px); filter:blur(5px); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes amp-intro-halo { 0% { opacity:0; transform:scale(.6); } 45% { opacity:.5; } 100% { opacity:0; transform:scale(1.9); } }
@keyframes amp-intro-exit { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-14px) scale(.94); } }
@keyframes amp-greeting-in { 0% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:none; } }

/* Paced so each beat lands separately — mark, then wordmark, then a held breath — rather than
   the whole thing resolving before the eye catches up. */
.amp-intro { margin:auto; display:flex; align-items:center; justify-content:center; gap:14px; position:relative; }
.amp-intro.leaving { animation:amp-intro-exit .7s cubic-bezier(.4,0,1,1) forwards; }
.amp-intro-mark { position:relative; width:52px; height:52px; border-radius:16px; background:var(--deep); color:#fff; display:grid; place-items:center; font:800 24px Manrope,sans-serif; animation:amp-intro-mark 1s cubic-bezier(.2,.9,.3,1.4) both; }
.amp-intro-halo { position:absolute; inset:-6px; border-radius:22px; background:radial-gradient(circle,rgba(22,115,74,.4) 0%,rgba(22,115,74,0) 70%); animation:amp-intro-halo 2s ease-out .5s both; pointer-events:none; }
.amp-intro-word { font:800 34px Manrope,sans-serif; letter-spacing:-.045em; color:var(--deep); animation:amp-intro-word .95s cubic-bezier(.2,.8,.3,1) .55s both; }

/* The first thing in a new session, centered in the empty conversation rather than hugging the
   left edge as a bubble — there's nothing above it for a bubble to line up with. */
.amp-greeting { margin:auto; max-width:430px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; animation:amp-greeting-in .75s cubic-bezier(.2,.8,.3,1) both; }
.amp-greeting-mark { width:38px; height:38px; border-radius:12px; background:var(--deep); color:#fff; display:grid; place-items:center; font:800 16px Manrope,sans-serif; }
.amp-greeting-tagline { margin:0; color:var(--ink); font-size:19px; font-weight:800; line-height:1.4; }
.amp-greeting-detail { margin:0; color:var(--muted); font-size:15px; line-height:1.65; transition:opacity .35s ease; }
.amp-greeting-detail-fading { opacity:0; }
@media (prefers-reduced-motion:reduce) { .amp-greeting-detail { transition:none; } }
@media (prefers-reduced-motion:reduce) {
  .amp-intro-mark,.amp-intro-word,.amp-intro-halo,.amp-greeting { animation:none; opacity:1; transform:none; filter:none; }
}
.amp-input-row { display:flex; gap:10px; align-items:center; width:min(760px,100%); margin:0 auto; padding:14px 20px 22px; }
.amp-input-row input { flex:1; min-width:0; border:1px solid var(--line); border-radius:12px; padding:14px 16px; font:500 14.5px Manrope,sans-serif; background:#fff; }
.amp-input-row input:focus { outline:2px solid var(--green); outline-offset:1px; }
.amp-send-button { width:44px; height:44px; flex:none; padding:0; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.amp-send-button svg { width:19px; height:19px; }
.amp-send-button:disabled svg { opacity:.6; }
.amp-mic-button { width:44px; height:44px; flex:none; padding:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--muted); border:1px solid var(--line); transition:transform .16s,background .16s,color .16s,border-color .16s; }
.amp-mic-button:hover { background:var(--mint); color:var(--deep); transform:none; }
.amp-mic-button svg { width:18px; height:18px; }
.amp-mic-button.listening { background:var(--coral); color:#fff; border-color:var(--coral); animation:mic-pulse 1.4s ease-in-out infinite; }
.amp-mic-button:disabled { opacity:.4; cursor:not-allowed; }
@keyframes mic-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(232,117,85,.45); } 50% { box-shadow:0 0 0 8px rgba(232,117,85,0); } }
.amp-widget { width:calc(100% - 40px); max-width:calc(100% - 40px); margin:2px 0 4px 40px; align-self:flex-start; }
.amp-widget .product-select-grid { grid-template-columns:repeat(3,minmax(150px,1fr)); }

.amp-cw { border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:#fff; }
.amp-cw-progress { display:flex; align-items:center; gap:8px; margin-bottom:14px; font:700 11px Manrope,sans-serif; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.amp-cw-progress-label { color:var(--deep); }
.amp-cw-subtitle { margin:0 0 10px; font:700 14px Manrope,sans-serif; color:var(--ink); }
.amp-cw-loading, .amp-cw-error { margin:0; font-size:14px; color:var(--muted); }
.amp-cw-error { color:var(--coral); margin-bottom:10px; }
.amp-cw-input { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:11px 14px; font:500 14px Manrope,sans-serif; margin-bottom:10px; }
.amp-cw-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.amp-cw-pill { width:auto; background:var(--mint); color:var(--deep); border-radius:20px; padding:7px 14px; font:600 12.5px Manrope,sans-serif; }
.amp-cw-pill:hover { background:var(--line); transform:none; }
.amp-cw-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.amp-cw-item { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; }
.amp-cw-item input { width:auto; margin-top:3px; }
.amp-cw-item.selected { border-color:var(--green); background:var(--mint); }
.amp-cw-item-title { font:700 13.5px Manrope,sans-serif; color:var(--ink); }
.amp-cw-item-detail { margin:3px 0 0; font-size:13px; color:var(--muted); line-height:1.5; }
.amp-cw-item-price { margin-left:auto; font:700 12.5px Manrope,sans-serif; color:var(--muted); }
.amp-cw-tag { font:700 10.5px Manrope,sans-serif; text-transform:uppercase; letter-spacing:.03em; color:var(--green); background:var(--mint); border-radius:6px; padding:2px 7px; }
.amp-cw-bullets { margin:0 0 14px; padding-left:18px; font-size:13.5px; color:var(--ink); line-height:1.6; }
.amp-cw-steps { margin:0 0 14px; padding-left:18px; font-size:13.5px; color:var(--ink); line-height:1.7; }
.amp-cw-creatives { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.amp-cw-creative { border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; }
.amp-cw-creative.selected { border-color:var(--green); background:var(--mint); }
.amp-cw-note { margin:0; font-size:13px; color:var(--muted); font-style:italic; }
.amp-cw-actions { display:flex; justify-content:flex-end; }
.amp-cw-actions button { width:auto; padding:11px 22px; }
.amp-cw-secondary { width:auto; background:transparent; color:var(--green); border:1px solid var(--line); }
.amp-cw-secondary:hover { background:var(--mint); transform:none; }
.carousel-track > .amp-product-card { flex:0 0 170px; scroll-snap-align:start; }
.amp-product-card { cursor:default; }
.amp-product-card:hover { border-color:var(--line); }
.amp-product-card .select-card-media { height:90px; }
/* Rendered as an <a> (it links out to the competitor's store) rather than the plain <div> the
   merchant's own product cards use, so link defaults need resetting explicitly. */
.amp-marketplace-card { display:block; text-decoration:none; color:inherit; cursor:pointer; }
.amp-marketplace-card:hover { border-color:var(--green); }
.amp-marketplace-rating { color:var(--muted); font-size:11px; font-family:'DM Mono',monospace; margin-top:4px; }
.carousel-track > .amp-customer-card { flex:0 0 170px; scroll-snap-align:start; }
.amp-customer-card { cursor:default; display:flex; flex-direction:column; align-items:flex-start; }
.amp-customer-card:hover { border-color:var(--line); }
.amp-customer-avatar { width:40px; height:40px; border-radius:12px; background:var(--deep); color:#fff; display:grid; place-items:center; font:800 14px Manrope,sans-serif; margin-bottom:10px; }
.amp-customer-email { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.amp-customer-stats { display:flex; justify-content:space-between; gap:8px; width:100%; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font:600 11px 'DM Mono',monospace; color:var(--muted); }
.amp-chart-widget { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.amp-chart-title { font:700 11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 14px; }
.amp-bar-chart { display:flex; flex-direction:column; gap:2px; }
.amp-bar-row { display:flex; align-items:center; gap:10px; }
.amp-bar-row:not(:last-child) { padding-bottom:8px; }
.amp-bar-label { flex:0 0 118px; font:600 12px Manrope,sans-serif; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.amp-bar-track { flex:1; height:18px; background:#eef2ef; border-radius:4px; overflow:hidden; }
.amp-bar-fill { height:100%; width:0; background:var(--green); border-radius:0 4px 4px 0; min-width:3px; transition:width .55s cubic-bezier(.22,.61,.36,1); }
.amp-bar-value { flex:0 0 auto; font:700 11.5px 'DM Mono',monospace; color:var(--deep); min-width:64px; text-align:right; }
.amp-chart-footer { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.amp-chart-page-btn { width:26px; height:26px; flex:none; padding:0; border-radius:50%; background:transparent; border:1px solid var(--line); color:var(--ink); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; }
.amp-chart-page-btn:hover:not(:disabled) { background:var(--mint); border-color:#cdeed7; transform:none; }
.amp-chart-page-btn:disabled { opacity:.3; background:transparent; }
.amp-chart-page-label { font:600 10.5px 'DM Mono',monospace; color:var(--muted); }
.amp-chart-note { color:var(--muted); font-size:11px; font-style:italic; margin:10px 0 0; text-align:center; }
.campaign-step-title { font-size:22px; letter-spacing:-.03em; margin-bottom:6px; }
.campaign-step-subtitle { color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:22px; max-width:520px; }
.campaign-loading { display:flex; align-items:center; gap:12px; padding:34px 8px; color:var(--muted); font-size:13px; }
.campaign-spinner { width:18px; height:18px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--green); animation:campaign-spin .8s linear infinite; flex-shrink:0; }
@keyframes campaign-spin { to { transform:rotate(360deg); } }
.ai-reasoning { background:var(--mint); border:1px solid #cdeed7; border-radius:12px; padding:14px 16px; margin-top:18px; }.ai-reasoning p { color:var(--deep); font-size:13px; line-height:1.65; margin:0; }.ai-reasoning .ai-reasoning-label { display:block; color:var(--green); font:700 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }

.product-select-grid,.segment-grid,.creative-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:8px; }
.select-card { border:1.5px solid var(--line); border-radius:14px; padding:14px; cursor:pointer; background:#fff; transition:border-color .15s,box-shadow .15s; }
.select-card:hover { border-color:#b9cabe; }
.select-card.selected { border-color:var(--green); box-shadow:0 0 0 3px #dbf4e3; }
.select-card-media { position:relative; width:calc(100% + 28px); height:110px; margin:-14px -14px 10px; border-radius:14px 14px 0 0; overflow:hidden; background:#f1f5f2; }
.select-card-image { width:100%; height:100%; object-fit:cover; display:block; background:#f1f5f2; }
.select-card-image-placeholder { background:linear-gradient(135deg,#f1f5f2,#e6ede8); }
.recommended-badge { display:inline-block; background:var(--coral); color:#fff; border-radius:99px; padding:3px 9px; font:700 10px Manrope,sans-serif; margin-bottom:6px; }
.amp-source-badge { display:inline-block; background:var(--mint); color:var(--deep); border-radius:99px; padding:3px 9px; font:700 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.select-reason { color:var(--muted); font-size:12px; line-height:1.5; margin-top:8px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-decoration-color:#b9cabe; text-underline-offset:2px; }
.select-reason:hover { color:var(--deep); }

.dashboard-section { margin-bottom:0; }
.pair-insight-banner { background:var(--mint); border:1px solid #cdeed7; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.pair-insight-line { margin:0; font-size:13px; line-height:1.65; color:var(--deep); }
.pair-insight-line + .pair-insight-line { margin-top:6px; }
.pair-insight-label { font:700 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--green); margin-right:6px; }
.pair-rows { display:flex; flex-direction:column; gap:10px; }
.pair-row { display:grid; grid-template-columns:1fr 28px 1fr; align-items:center; gap:10px; }
@media (max-width:640px) { .pair-row { grid-template-columns:1fr; } .pair-arrow { transform:rotate(90deg); justify-self:center; } }
.pair-arrow { color:var(--muted); font-size:15px; text-align:center; }
.pair-cell { position:relative; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:8px 12px 8px 8px; background:#fff; min-width:0; }
.pair-cell-competitor { text-decoration:none; color:inherit; transition:border-color .15s; }
.pair-cell-competitor:hover { border-color:var(--green); }
.pair-cell-empty { color:var(--muted); font-size:12px; font-style:italic; justify-content:center; background:#f7f9f7; border-style:dashed; }
.pair-cell-media { width:44px; height:44px; flex:none; border-radius:8px; overflow:hidden; background:#f1f5f2; }
.pair-cell-image { width:100%; height:100%; object-fit:cover; display:block; }
.pair-cell-image-placeholder { background:linear-gradient(135deg,#f1f5f2,#e6ede8); }
.pair-cell-body { min-width:0; }
.pair-cell-title { font-size:12.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pair-cell-price { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; }
.pair-cell .amp-source-badge { margin-bottom:3px; }
.pair-cell-remove { position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0; }
.pair-cell-remove:hover { color:#a23922; border-color:#f4c6ac; }
.compare-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:18px; }
.compare-card { position:relative; border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff; }
.compare-card-remove { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); font-size:15px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0; z-index:1; }
.compare-card-remove:hover { color:#a23922; border-color:#f4c6ac; background:#fff; transform:none; }
.compare-card-media { width:100%; height:100px; border-radius:8px; margin-bottom:8px; overflow:hidden; background:#f1f5f2; }
.compare-card-image { width:100%; height:100%; object-fit:cover; display:block; }
.compare-card-image-placeholder { background:linear-gradient(135deg,#f1f5f2,#e6ede8); }
.compare-card-title { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.compare-card-price { font-size:11.5px; color:var(--muted); font-family:'DM Mono',monospace; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.metric-tile { background:#f7f9f7; border-radius:10px; padding:12px 14px; }
.metric-label { display:block; font:600 10px 'DM Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.metric-value { font-size:17px; font-weight:800; color:var(--ink); }
.static-note { background:#f1f5f2; border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--ink); line-height:1.6; margin-bottom:10px; }
.reminder-banner { background:#fdf3ee; border:1px solid #f3d9c8; border-left:3px solid var(--coral); border-radius:8px; padding:10px 14px; margin-bottom:18px; }
.reminder-banner-label { display:block; font:700 10px 'DM Mono',monospace; color:var(--coral); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.reminder-banner p { font-size:12.5px; color:var(--ink); line-height:1.6; margin:0; }
.static-caption { color:var(--muted); font-size:11px; line-height:1.5; }
.dashboard-eyebrow { font:700 10px 'DM Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.complement-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.complement-card { border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff; }
.complement-card-media { position:relative; width:100%; height:80px; border-radius:8px; margin-bottom:8px; overflow:hidden; background:#f1f5f2; }
.complement-card-image { width:100%; height:100%; object-fit:cover; display:block; }
.select-check { position:absolute; top:7px; right:7px; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.9); background:rgba(15,25,20,.25); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:background .15s,border-color .15s; }
.select-card.selected .select-check { background:var(--green); border-color:var(--green); }
.select-check::after { content:''; position:absolute; left:50%; top:44%; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%,-55%) rotate(45deg); opacity:0; }
.select-card.selected .select-check::after { opacity:1; }
.complement-card-title { font-size:12px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.complement-card-price { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; margin-bottom:6px; }
.complement-card-pairs { font-size:10px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.complement-pairs-images { display:flex; gap:4px; }
.complement-pair-image { width:26px; height:26px; object-fit:cover; border-radius:6px; border:1.5px solid var(--green); background:#f1f5f2; display:block; }
.complement-card { cursor:pointer; }
.select-card .select-title { font-weight:700; font-size:13px; margin-bottom:4px; }
.select-card .select-meta { color:var(--muted); font-size:11px; font-family:'DM Mono',monospace; }

.carousel-wrap { position:relative; padding:0 30px 8px; margin-bottom:18px; }
.carousel-track { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-track > .compare-card,.carousel-track > .complement-card { flex:0 0 190px; scroll-snap-align:start; }
.compare-card-grid-track > .compare-card { margin-bottom:0; }
/* Wider than the other carousel card types — a group card holds a theme title, bullet list,
   nested complementary-offers grid, and an action button, not just an image/title/price. */
.carousel-track > .product-group-card { flex:0 0 340px; scroll-snap-align:start; margin-bottom:0; }
.carousel-nav { position:absolute; top:44px; width:28px; height:28px; border-radius:50%; border:0; background:var(--green); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.1); font-size:15px; line-height:1; color:#fff; padding:0; }
.carousel-nav.prev { left:0; }
.carousel-nav.next { right:0; }
.carousel-nav:disabled { opacity:.3; cursor:default; }
.carousel-nav:hover:not(:disabled) { background:var(--deep); }
.carousel-footer { display:flex; align-items:center; gap:10px; margin-top:10px; padding:0 4px; }
.carousel-progress-track { position:relative; flex:1; height:4px; background:#e6ede8; border-radius:99px; overflow:hidden; }
.carousel-progress-thumb { position:absolute; top:0; height:100%; background:var(--green); border-radius:99px; }
.carousel-count { font:600 10.5px 'DM Mono',monospace; color:var(--muted); white-space:nowrap; }
.select-card .select-desc { color:var(--muted); font-size:12px; line-height:1.5; margin-top:8px; }

.ai-bullets { margin:0 0 10px; padding-left:18px; }
.ai-bullets li { font-size:13.5px; line-height:1.55; margin-bottom:6px; color:var(--ink); }
.ai-bullets li:last-child { margin-bottom:0; }
.ai-reasoning .ai-bullets li { color:var(--deep); }
.attribute-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.attribute-pill { background:#f1f5f2; color:var(--deep); border-radius:99px; padding:6px 12px; font:600 11px Manrope,sans-serif; }
.choice-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.choice-pill { display:inline-flex; width:auto; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:99px; padding:8px 14px; font:600 12px Manrope,sans-serif; cursor:pointer; transition:border-color .16s,background .16s,color .16s; }
.choice-pill:hover { border-color:#b9cabe; }
.choice-pill.active { background:var(--deep); color:#fff; border-color:var(--deep); }

.segment-card.selectable { cursor:pointer; }
.segment-card .select-title { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.segment-card .segment-count { color:var(--green); font:700 11px 'DM Mono',monospace; cursor:pointer; padding:2px 4px; border-radius:6px; }
.segment-card .segment-count:hover { background:var(--mint); }
.segment-card .segment-count.active { background:var(--green); color:#fff; }
.segment-card .segment-stats { display:flex; gap:14px; margin:8px 0; font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; }

.segment-members { max-height:0; opacity:0; overflow:hidden; transition:max-height .22s ease, opacity .18s ease, margin-top .22s ease; margin-top:0; }
.segment-members.open { max-height:220px; opacity:1; margin-top:10px; overflow-y:auto; }
.segment-members-list { list-style:none; margin:0; padding:0; border-top:1px solid #e7ece8; }
.segment-members-list li { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #eef2ef; font-size:12px; }
.segment-member-name { color:var(--ink); font-weight:600; }
.segment-member-stats { color:var(--muted); font-family:'DM Mono',monospace; font-size:10.5px; white-space:nowrap; }
.segment-members-empty { color:var(--muted); font-size:12px; margin:10px 0 0; }

.creative-card .select-title { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.creative-headline { font-size:15px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; }
.creative-body { color:var(--muted); font-size:12.5px; line-height:1.6; margin-bottom:10px; }
.creative-cta { display:inline-block; background:var(--deep); color:#fff; border-radius:8px; padding:6px 12px; font:700 11px Manrope,sans-serif; margin-bottom:10px; }

.image-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-bottom:8px; }
.carousel-track > .image-pick-card { flex:0 0 190px; scroll-snap-align:start; }
.image-pick-media { height:170px; }
.image-pick-card .select-title { text-align:center; }

.perf-card { padding:22px 24px; margin-bottom:20px; }
.perf-card:last-child { margin-bottom:0; }
.perf-kpi-grid { margin-bottom:20px; }
.perf-kpi-grid .metric-tile { background:#fff; border:1px solid var(--line); }
.perf-funnel-chart { overflow-x:auto; padding-bottom:4px; }
.perf-funnel-chart svg { display:block; margin:0 auto; }
.perf-funnel-chart rect { transition:opacity .15s; }
.perf-funnel-chart rect:hover { opacity:.8; }
.perf-line-chart { overflow-x:auto; padding-bottom:4px; }
.perf-line-chart svg { display:block; margin:0 auto; }
.perf-line-chart circle { transition:r .15s; }
.perf-line-chart circle:hover { r:5; }
.perf-legend { display:flex; gap:18px; margin:2px 0 16px; }
.perf-legend-item { display:flex; align-items:center; gap:6px; font:600 11px Manrope,sans-serif; color:var(--muted); }
.perf-legend-dot { width:9px; height:9px; border-radius:3px; display:inline-block; flex:none; }
.perf-hbar-list { display:flex; flex-direction:column; gap:22px; margin-top:4px; }
/* Shared by the per-campaign chart's list and the campaigns table — applied only past
   PERF_SCROLL_THRESHOLD items (see performance.js), so a short list just grows naturally instead
   of sitting in a half-empty scroll box. */
.perf-scroll { max-height:500px; overflow-y:auto; padding-right:6px; }
.perf-scroll thead th { position:sticky; top:0; background:#fff; }
.perf-hbar-group-title { font:700 13px Manrope,sans-serif; color:var(--ink); margin:0 0 10px; }
.perf-hbar-row { display:grid; grid-template-columns:58px 1fr 56px; align-items:center; gap:10px; margin-bottom:6px; }
.perf-hbar-row:last-child { margin-bottom:0; }
.perf-hbar-label { font:600 10px 'DM Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.perf-hbar-track { height:16px; background:#f1f5f2; border-radius:5px; overflow:hidden; }
.perf-hbar-fill { height:100%; border-radius:5px; transition:width .6s cubic-bezier(.22,.61,.36,1); }
.perf-hbar-value { font:700 11px 'DM Mono',monospace; color:var(--ink); text-align:right; white-space:nowrap; }
.perf-hbar-group:not(:last-child) { padding-bottom:20px; border-bottom:1px solid #eef2ef; }

.aic-schedule-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:14px; }
.aic-schedule-row .domain-input { display:inline-flex; }
.aic-schedule-row select { width:auto; }
.aic-suggestion-card .select-title { margin-bottom:8px; }
.aic-suggestion-goal { font-size:13px; color:var(--ink); line-height:1.6; margin:0 0 10px; }
.aic-suggestion-segment { display:inline-block; background:var(--mint); color:var(--deep); border-radius:99px; padding:4px 10px; font:700 10.5px Manrope,sans-serif; margin-bottom:10px; }
.aic-suggestion-thumbs { display:flex; gap:6px; margin:4px 0 10px; }
.aic-suggestion-thumb { width:36px; height:36px; border-radius:8px; object-fit:cover; background:#f1f5f2; flex:none; }
.aic-job-status { display:inline-block; padding:3px 9px; border-radius:99px; font:700 10px 'DM Mono',monospace; text-transform:uppercase; }
.aic-job-status.running { background:#fef3e2; color:#8a5a12; }
.aic-job-status.succeeded { background:var(--mint); color:var(--green); }
.aic-job-status.failed { background:#fdecea; color:#a23922; }
.aic-audience { margin:2px 0 10px; display:flex; flex-direction:column; gap:2px; }
.aic-audience-row { display:flex; flex-direction:column; }
.aic-audience-toggle { font-size:11.5px; }
.aic-job-row { cursor:pointer; }
.aic-job-row:hover { background:var(--mint); }
.aic-label-empty { background:transparent; border:1px dashed var(--line); color:var(--muted); font-style:italic; }

.email-preview-wrap { margin-top:10px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#f4f6f4; }
.email-preview-frame { display:block; width:100%; height:420px; border:0; }
.recipient-list { max-height:320px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; margin-top:12px; }
.recipient-row { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--line); }
.recipient-row:last-child { border-bottom:0; }
.recipient-row:hover { background:#f7faf8; }
.recipient-row input { width:auto; }

.step-actions { display:flex; justify-content:space-between; gap:12px; margin-top:26px; }.step-actions button { width:auto; padding:12px 22px; }.step-actions .ghost-button { background:transparent; color:var(--muted); border:1px solid var(--line); }.step-actions .ghost-button:hover { color:var(--ink); border-color:#b9cabe; }
.step-actions-end { display:flex; justify-content:flex-end; gap:12px; margin-top:26px; }

.site-footer { display:none; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); text-align:center; }
#auth-screen:not([hidden]) ~ #home-footer { display:block; }
.footer-bottom { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.footer-bottom p { margin:0; color:var(--muted); font:11px 'DM Mono',monospace; }

@media (max-width:760px) { .shell { width:min(100% - 32px,1120px); }.topbar { margin-bottom:8px; }.hero { padding:26px 0 36px; }.layout { grid-template-columns:1fr; }.dashboard-shell { flex-direction:column; }.source-rail { flex-direction:row; width:100%; flex-wrap:wrap; }}

/* Sits just under the Log in button, where people look for it. Deliberately quiet — it competes
   with Signup and the demo button otherwise — and on the palette rather than the browser's
   default link blue, which was the only blue on the page. */
.forgot-row { display:flex; justify-content:flex-end; margin:10px 0 0; }
.forgot-row a { font:600 12px Manrope,sans-serif; color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; transition:color .16s,border-color .16s; }
.forgot-row a:hover, .forgot-row a:focus-visible { color:var(--green); border-bottom-color:currentColor; }