/* AdsEye: the app.
   Ink is the deep green of the mark, mint is its pupil. Mint is a fill colour
   only — on white it is too light to be text or a focus ring, so text accents
   use the darker green and the mint is reserved for edges, dots and marks. */

:root {
  --pine: #003E32;
  --field: #0B5443;
  --leaf: #087951;
  --mist: #A6E7C6;
  --dew: #E1F5EA;
  --mint: #1DDC7C;
  --ink: #003E32;
  --ink-2: #1E4A40;
  --ink-3: #5E7569;
  --ink-4: #7A8F85;
  --bone-3: #DCE7DF;
  --bone-2: #EDF4EF;
  --bone-1: #F6FAF7;
  --bone-0: #FFFFFF;
  --brass: #087951;
  --brass-ink: #06603F;
  --good-ink: #087951; --good-bg: #DCF7E7;
  --ahead-ink: #003E32; --ahead-bg: #C9F2DC;
  --watch-ink: #7A4E00; --watch-bg: #F5E6C8;
  --bad-ink: #8A2B1E; --bad-bg: #F3DEDA;
  --ask-ink: #1E4E9C; --ask-bg: #E3EBF7;
  --c-google: #1E8C70; --c-meta: #D46A2E; --c-linkedin: #B98A12; --c-tiktok: #3F75CF; --c-other: #9B4B98;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --top: 56px;
  --tabbar: 64px;
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone-0); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.num, .mono, td, .kpi .v { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bone-0); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
[hidden] { display: none !important; }
.inline-form { display: inline; margin: 0; }
@media (max-width: 1099px) { .only-desk { display: none !important; } }
@media (min-width: 1100px) { .only-phone { display: none !important; } }

/* ---------------------------------------------------------------- shell */
.app { min-height: 100vh; min-height: 100dvh; border-top: 6px solid var(--mint); display: flex; flex-direction: column; }
.edge { display: none; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: var(--top); background: var(--bone-0); border-bottom: 1px solid var(--bone-3); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mark { width: 32px; height: 32px; background: var(--bone-0); border: 1px solid var(--bone-3); display: grid; place-items: center; flex: none; }
.mark svg { width: 86%; height: 86%; }
.brand .mark { width: 44px; height: 26px; border: 0; }
.brand .mark svg { width: 100%; height: 100%; }
.brand-name { font-size: 21px; font-weight: 700; letter-spacing: -.035em; }
.brand-by { display: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); padding-top: 3px; }
.vr { display: none; width: 1px; height: 28px; background: var(--bone-3); flex: none; }
.spacer { flex: 1; }
.account { position: relative; margin-left: auto; min-width: 0; }
.account > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; text-align: right; }
.account > summary::-webkit-details-marker { display: none; }
.account .acct-name { font-weight: 600; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.account .acct-tag.tag { background: none; padding: 0; }
.account .acct-tag { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.account svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; flex: none; }
.tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; background: var(--bone-2); color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.tag.live { background: var(--good-bg); color: var(--good-ink); }
.tag.dry { background: var(--watch-bg); color: var(--watch-ink); }
.tag.paused { background: var(--bad-bg); color: var(--bad-ink); }
.live { display: none; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.dot { width: 9px; height: 9px; background: #1E8C70; border-radius: 50%; box-shadow: 0 0 0 4px rgba(30,140,112,.18); flex: none; }
.dot.dry { background: var(--brass); box-shadow: 0 0 0 4px rgba(8,121,81,.18); }
.dot.off { background: var(--ink-4); box-shadow: 0 0 0 4px rgba(92,98,94,.16); }
.dot.stop { background: var(--bad-ink); box-shadow: 0 0 0 4px rgba(138,43,30,.18); }
.clock { display: none; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.avatar-menu { position: relative; }
.avatar-menu > summary { list-style: none; cursor: pointer; }
.avatar-menu > summary::-webkit-details-marker { display: none; }
.avatar { width: 34px; height: 34px; background: var(--ink); color: var(--bone-0); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 260px; max-width: 86vw; background: var(--bone-0); border: 1px solid var(--bone-3); box-shadow: 0 18px 40px rgba(16,19,18,.14); padding: 6px; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; min-height: 44px; text-decoration: none; background: none; border: 0; text-align: left; font-size: 14px; cursor: pointer; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--bone-1); }
.menu-pop .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); padding: 10px 12px 4px; }
.menu-pop .who { padding: 10px 12px; border-bottom: 1px solid var(--bone-2); margin-bottom: 4px; }
.menu-pop .who b { display: block; font-size: 14px; }
.menu-pop .who span { font-size: 12.5px; color: var(--ink-4); }
.menu-pop svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }
.menu-pop .on { background: var(--bone-1); box-shadow: inset 3px 0 0 var(--field); font-weight: 600; }
.menu-pop form { margin: 0; }

.sidebar { display: none; }
.nav { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; font-size: 14.5px; font-weight: 500; color: var(--ink-3); text-decoration: none; }
.nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }
.nav:hover { color: var(--ink); background: rgba(252,251,249,.7); }
.nav.on { background: var(--bone-0); color: var(--ink); box-shadow: inset 3px 0 0 var(--field); font-weight: 600; }
.nav .count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.nav .badge { margin-left: auto; font-family: var(--mono); font-size: 11.5px; background: var(--field); color: var(--bone-0); padding: 2px 7px; border-radius: 2px; }
.side-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); padding: 16px 12px 6px; }
.side-foot { margin-top: auto; border-top: 1px solid var(--bone-3); padding: 16px 12px 0; display: flex; flex-direction: column; gap: 7px; }
.side-foot .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.side-foot .v { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.side-foot .v::before { content: ""; width: 5px; height: 5px; background: var(--leaf); flex: none; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--bone-0); border-top: 1px solid var(--bone-3); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a, .tabbar summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tabbar); font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-decoration: none; position: relative; cursor: pointer; list-style: none; }
.tabbar summary::-webkit-details-marker { display: none; }
.tabbar svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tabbar .on { color: var(--ink); box-shadow: inset 0 3px 0 var(--field); }
.tabbar .badge { position: absolute; top: 8px; left: calc(50% + 6px); font-family: var(--mono); font-size: 10.5px; background: var(--field); color: var(--bone-0); padding: 1px 5px; border-radius: 2px; }
.tabbar details { position: static; }
.tabbar .sheet { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); background: var(--bone-0); border-top: 1px solid var(--bone-3); box-shadow: 0 -18px 40px rgba(16,19,18,.12); padding: 8px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.tabbar .sheet .nav { min-height: 48px; }

.main { flex: 1; min-width: 0; padding: 16px 16px calc(var(--tabbar) + 28px); display: flex; flex-direction: column; gap: 14px; }
.demo-strip { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-4); text-align: center; padding: 10px 16px; border-top: 1px solid var(--bone-2); }
.flash { border: 1px solid var(--bone-3); border-left: 4px solid var(--field); background: var(--bone-1); padding: 12px 14px; font-size: 14px; }
.flash.warn { border-left-color: var(--brass); }
.flash.bad { border-left-color: var(--bad-ink); background: var(--bad-bg); }

/* ---------------------------------------------------------------- page head */
.head { display: flex; flex-direction: column; gap: 12px; }
.head .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.h1 { font-size: 27px; line-height: 1.04; letter-spacing: -.04em; font-weight: 700; margin: 6px 0 0; text-wrap: balance; }
.sub { font-size: 14.5px; color: var(--ink-3); margin-top: 6px; max-width: 112ch; }

/* ---------------------------------------------------------------- surfaces */
.panel { background: var(--bone-0); border: 1px solid var(--bone-3); min-width: 0; }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bone-3); flex-wrap: wrap; }
.panel-t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.panel-b { padding: 14px 16px; }
.panel.flex { display: flex; flex-direction: column; }
.panel.dark { background: var(--ink); border-color: var(--ink); color: var(--bone-0); }
.panel.dark .panel-h { border-color: rgba(252,251,249,.14); }
.panel.dark .d, .panel.dark p { color: rgba(252,251,249,.74); }
.sunk { background: var(--bone-1); }
.label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.empty { padding: 22px 16px; color: var(--ink-3); font-size: 14px; }
.empty b { color: var(--ink); display: block; font-size: 15px; margin-bottom: 4px; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { border: 1px solid var(--bone-3); padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bone-0); min-width: 0; }
.kpi.wide { grid-column: 1 / -1; }
.kpi .v { font-size: 28px; line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.kpi .v small { font-size: 14px; letter-spacing: -.01em; font-weight: 500; color: var(--ink-4); margin-left: 5px; }
.kpi .note { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; border-radius: 2px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip i { font-style: normal; font-size: 9px; line-height: 1; }
.chip.good { background: var(--good-bg); color: var(--good-ink); }
.chip.ahead { background: var(--ahead-bg); color: var(--ahead-ink); }
.chip.watch { background: var(--watch-bg); color: var(--watch-ink); }
.chip.bad { background: var(--bad-bg); color: var(--bad-ink); }
.chip.ask { background: var(--ask-bg); color: var(--ask-ink); }
.chip.held, .chip.plain { background: var(--bone-2); color: var(--ink-3); }

.pf { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--bone-0); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .03em; box-shadow: inset 0 -3px 0 var(--c, var(--leaf)); }
.pf.lg { width: 40px; height: 40px; font-size: 13px; box-shadow: inset 0 -4px 0 var(--c, var(--leaf)); }
.pf.sm { width: 26px; height: 26px; font-size: 10px; }
.pf.xs { width: 20px; height: 20px; font-size: 8.5px; box-shadow: inset 0 -2px 0 var(--c, var(--leaf)); }
.pf.g { --c: var(--c-google); } .pf.m { --c: var(--c-meta); } .pf.l { --c: var(--c-linkedin); } .pf.o { --c: var(--c-other); } .pf.x { --c: var(--ink-3); }
.pf.all { background: var(--field); box-shadow: none; }
.pf-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-name { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.pf-meta { font-size: 12.5px; color: var(--ink-4); }
.sub2 { font-size: 12.5px; color: var(--ink-4); margin-top: 1px; }

.bar, .pbar { position: relative; display: block; height: 8px; background: var(--bone-2); }
.bar > b, .pbar > b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--field); }
.bar > u, .pbar > u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.split { display: flex; height: 12px; gap: 2px; margin-top: 4px; }
.split i { display: block; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font-weight: 600; font-size: 14.5px; border: 1px solid var(--ink); background: var(--bone-0); color: var(--ink); white-space: nowrap; text-decoration: none; cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--bone-1); }
.btn.primary { background: var(--field); border-color: var(--field); color: var(--bone-0); }
.btn.primary:hover { background: var(--pine); border-color: var(--pine); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--bone-0); }
.btn.quiet { border-color: var(--bone-3); }
.btn.danger { border-color: var(--bad-ink); color: var(--bad-ink); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.toggle { width: 44px; height: 24px; background: var(--bone-3); position: relative; flex: none; display: inline-block; border: 0; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--bone-0); box-shadow: 0 1px 2px rgba(16,19,18,.25); }
.toggle.on { background: var(--field); }
.toggle.on::after { left: 23px; }
input.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; background: var(--bone-3); position: relative; flex: none; margin: 0; cursor: pointer; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--bone-0); box-shadow: 0 1px 2px rgba(16,19,18,.25); transition: left .15s; }
input.switch:checked { background: var(--field); }
input.switch:checked::after { left: 23px; }
input.switch:disabled { cursor: not-allowed; opacity: .75; }

/* position: relative keeps absolutely placed children (the .sr-only labels) inside the scroll box, so they cannot widen the page. */
.tbl-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; padding: 10px 10px; border-bottom: 1px solid var(--bone-3); white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--bone-2); vertical-align: middle; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { padding-left: 16px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 16px; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tfoot td { border-top: 1px solid var(--bone-3); border-bottom: 0; font-weight: 600; }
.tbl a { text-decoration: none; }
.tbl a:hover .pf-name, .tbl a:hover { text-decoration: underline; }
.tbl .wrap { white-space: normal; }
.num { font-weight: 600; }
.cpe { font-family: var(--mono); font-size: 13px; }
.big { font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.strike { text-decoration: line-through; text-decoration-color: #8A2B1E; text-decoration-thickness: 2px; color: var(--ink-4); }
.mono-s { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }

.fi { display: grid; grid-template-columns: 42px 26px minmax(0, 1fr); gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--bone-2); align-items: start; }
.fi:last-child { border-bottom: 0; }
.fi .pf { width: 26px; height: 26px; font-size: 10px; }
.fi .tm { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); padding-top: 5px; }
.fi .a { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.fi .w { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.fi .q { color: var(--ask-ink); }
.fi .needs { display: inline-flex; margin: 5px 0 0; min-height: 21px; font-size: 11px; vertical-align: 1px; }
.fi a { text-decoration: none; }

.list-row { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--bone-2); }
.list-row:last-child { border-bottom: 0; }
.list-row .t { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.list-row .d { font-size: 13px; color: var(--ink-3); }
.list-row.split2 { grid-template-columns: 1fr auto; column-gap: 12px; align-items: start; }
.list-row.split2 .d { grid-column: 1 / -1; }

.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 12px; font-size: 14px; margin: 0; }
.kv dt, .kv dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--bone-2); }
.kv dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding-top: 10px; }
.kv dd { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.kv dd small { font-weight: 400; color: var(--ink-4); font-size: 12.5px; margin-left: 6px; }
.kv.light dd { font-weight: 500; color: var(--ink-2); }

.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bone-2); font-size: 13.5px; align-items: start; }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; background: var(--good-bg); color: var(--good-ink); font-size: 11px; font-weight: 700; }
.ticks li.no::before { content: "–"; background: var(--bone-2); color: var(--ink-4); }
.ticks li.bad::before { content: "!"; background: var(--bad-bg); color: var(--bad-ink); }
.ticks li small { display: block; font-size: 12px; color: var(--ink-4); }
.ticks li .r { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); text-align: right; }
.ticks.solid li::before { background: var(--field); color: var(--bone-0); }
.ticks.plain li { border-bottom: 0; padding: 5px 0; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 14px; }
.fld { display: grid; gap: 6px; }
.fld > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.fld small { font-size: 12.5px; color: var(--ink-4); }
.input, .select, .textarea { width: 100%; min-height: 46px; border: 1px solid var(--bone-3); background: var(--bone-0); padding: 10px 12px; font-size: 16px; border-radius: 0; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(184,135,58,.35); }
.input.mono-in { font-family: var(--mono); font-size: 14px; }
.row-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.row-form .fld { flex: 1 1 180px; }
.seg { display: inline-flex; border: 1px solid var(--bone-3); flex-wrap: wrap; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 6px 10px; font-size: 12.5px; color: var(--ink-4); border-right: 1px solid var(--bone-3); min-height: 32px; line-height: 20px; }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--ink); color: var(--bone-0); font-weight: 600; }
.seg input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: -3px; }
.seg input:disabled + span { opacity: .45; }
.field { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--bone-3); padding: 4px 10px; background: var(--bone-0); min-width: 0; }
.field input { border: 0; background: none; width: 100%; min-width: 70px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; padding: 4px 0; }
.field input:focus { outline: none; }
.field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(184,135,58,.35); }
.field span { font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
.errors { color: var(--bad-ink); font-size: 13.5px; }

/* ---------------------------------------------------------------- stepper */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--bone-3); }
.step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-4); border-right: 1px solid var(--bone-3); text-decoration: none; min-width: 0; }
.step:last-child { border-right: 0; }
.step .n { width: 26px; height: 26px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; border: 1px solid var(--bone-3); color: var(--ink-3); flex: none; }
.step .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step.done .n { background: var(--dew); color: var(--field); border-color: var(--dew); }
.step.on { color: var(--ink); font-weight: 600; background: var(--bone-1); box-shadow: inset 0 -3px 0 var(--field); }
.step.on .n { background: var(--field); color: var(--bone-0); border-color: var(--field); }

/* ---------------------------------------------------------------- overview */
.pg-overview .ct td { padding-top: 8px; padding-bottom: 8px; }
.pg-overview .ct .big { font-size: 19px; }
.budgets { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--bone-3); background: var(--bone-1); }
.bud { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 9px; }
.bud + .bud { border-top: 1px solid var(--bone-3); }
.bud .bv { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.bud .bv small { font-size: 13px; font-weight: 500; color: var(--ink-4); letter-spacing: 0; }
.bud .bs { font-family: var(--mono); font-size: 11px; color: var(--brass-ink); letter-spacing: .04em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; display: inline-block; }
.legend i.dash { width: 14px; height: 0; border-top: 2px dashed var(--ink); }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-4); }
.chart text.ink { fill: var(--ink); }
.chart text.strong { font-weight: 500; }
.funnel-mini { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; font-size: 13px; }
.funnel-mini .fb { height: 10px; background: var(--bone-2); position: relative; }
.funnel-mini .fb b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--field); }
.funnel-mini .n { font-weight: 700; text-align: right; }
.camp-cards { display: block; }
.cc { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 16px; border-bottom: 1px solid var(--bone-2); text-decoration: none; align-items: center; }
.cc:last-child { border-bottom: 0; }
.cc .st { grid-column: 2 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- platforms */
.goal-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gcard { border: 1px solid var(--bone-3); background: var(--bone-0); display: flex; flex-direction: column; text-decoration: none; }
.gcard.watch { background: #FBF6EC; }
.gcard .gh { display: flex; align-items: center; gap: 12px; padding: 12px 14px 0; }
.gcard .gh .pf-name { margin-right: auto; }
.gcard .gb { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 10px 14px 12px; align-items: center; }
.gcard .gv { font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.gcard .gv small { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-4); margin-left: 5px; }
.gcard .gg { font-size: 12.5px; color: var(--ink-4); margin-top: 4px; }
.gcard .gc { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.gcard .gc .k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.gcard .gc .cv { font-family: var(--mono); font-size: 14px; }
.gcard .gc .cv small { font-size: 11px; color: var(--ink-4); margin-left: 6px; }
.gcard .gn { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--bone-2); margin: 0 0 0; font-size: 13px; color: var(--ink-2); margin-top: auto; }
.gcard .gn .mark { width: 22px; height: 22px; }
.gcard .gn .mark svg { width: 14px; height: 14px; }
.gcard.add { border-style: dashed; border-color: var(--ink-4); background: var(--bone-1); }
.ring text.ring-v { font-family: var(--sans); font-size: 15px; font-weight: 700; fill: var(--ink); letter-spacing: -.02em; }
.filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.flt { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bone-3); font-size: 13px; font-weight: 600; color: var(--ink-3); background: var(--bone-0); text-decoration: none; }
.flt b { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink-4); }
.flt.on { background: var(--ink); border-color: var(--ink); color: var(--bone-0); }
.flt.on b { color: var(--mist); }
.flt-sep { width: 1px; height: 22px; background: var(--bone-3); margin: 0 4px; }
.switchr { display: grid; grid-template-columns: 1fr; gap: 10px; }
.sw-card { border: 1px solid var(--bone-3); background: var(--bone-0); padding: 12px 14px; display: flex; gap: 12px; align-items: center; text-decoration: none; }
.sw-card.on { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--brass); }
.sw-card .n { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sw-card .s { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.sw-add { border: 1px dashed var(--ink-4); background: var(--bone-1); padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 14px; text-decoration: none; }
.sw-add .plus { width: 30px; height: 30px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 18px; font-weight: 500; flex: none; }
.sw-add small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-4); }
.camps .type small, .camps .bid small { display: block; font-size: 12px; color: var(--ink-4); }
.camps .bid { font-weight: 600; font-size: 13.5px; }
.camps tfoot td { background: var(--bone-1); }
.may .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--bone-2); align-items: baseline; }
.may .row:last-child { border-bottom: 0; }
.may .row b { font-size: 13.5px; }
.may .row span { font-family: var(--mono); font-size: 11.5px; color: var(--field); text-align: right; }
.may .row span.person { color: var(--brass-ink); }
.may .row small { grid-column: 1 / -1; font-size: 12px; color: var(--ink-4); }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.rchip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--bone-3); background: var(--bone-1); padding: 2px 8px 2px 3px; min-width: 0; }
.rchip b { font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- campaign */
.foot-row td { color: var(--ink-3); font-size: 13px; background: var(--bone-1); white-space: normal; }
.hist .list-row { padding: 8px 0; }

/* ---------------------------------------------------------------- morning review */
.pipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bone-3); background: var(--bone-0); }
.pipe .st { padding: 12px 14px 13px; position: relative; border-bottom: 1px solid var(--bone-3); }
.pipe .st:nth-child(odd) { border-right: 1px solid var(--bone-3); }
.pipe .no { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
.pipe b { display: block; font-size: 17px; letter-spacing: -.02em; margin-top: 3px; }
.pipe p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.pipe .arr { display: none; }
.props td { vertical-align: top; white-space: normal; }
.props .p1 { font-weight: 600; font-size: 13.5px; }
.props .ev { font-size: 12.5px; color: var(--ink-3); min-width: 180px; }
.props .check { font-size: 12.5px; color: var(--ink-2); min-width: 160px; }
.conf { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.conf .bar { width: 54px; height: 6px; }
.trace { display: flex; flex-direction: column; }
.tr { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--bone-2); }
.tr:last-child { border-bottom: 0; }
.tr .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); padding-top: 2px; }
.tr p { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tr p b { color: var(--ink); }
.tr .ok { color: var(--good-ink); font-weight: 600; }
.tr .cut { color: var(--watch-ink); font-weight: 600; }
.tr.hl { background: var(--bone-1); box-shadow: inset 4px 0 0 var(--brass); }
.big-change { display: flex; align-items: baseline; gap: 10px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; flex-wrap: wrap; }
.big-change s { color: var(--ink-4); font-weight: 500; text-decoration-thickness: 2px; }
.big-change small { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--ink-4); }
.foot-note { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--bone-3); background: var(--bone-1); font-size: 13px; color: var(--ink-3); }
.foot-note b { color: var(--ink); }

/* ---------------------------------------------------------------- approvals */
.askc { border: 1px solid var(--bone-3); border-left: 4px solid var(--brass); background: var(--bone-0); padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; }
.ask-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ask-top h3 { font-size: 17px; letter-spacing: -.02em; flex: 1 1 200px; line-height: 1.25; }
.ask-top .when { margin-left: auto; }
.askc .why { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.askc .why b { color: var(--ink); }
.askc .ev { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); margin-top: 6px; overflow-wrap: anywhere; }
.askc .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; }
.askc .acts form { margin: 0; display: contents; }
.askc .acts .rule-note { grid-column: 1 / -1; }
.askc.done { border-left-color: var(--field); }
.askc.done .acts .btn { display: none; }
.ad { margin-top: 8px; background: var(--bone-1); border: 1px solid var(--bone-3); padding: 10px 12px; }
.ad .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.ad .h { font-size: 14.5px; font-weight: 600; margin-top: 3px; }
.ad .h i { font-style: normal; color: #9AA09C; padding: 0 5px; }
.ad .d { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.ad .p { font-family: var(--mono); font-size: 11px; color: var(--field); margin-top: 3px; }
.ad textarea, .ad input { margin-top: 6px; }
.rule-note { font-size: 12px; color: var(--brass-ink); font-family: var(--mono); letter-spacing: .02em; }
.always ul { margin: 0; padding: 0; }
.always li { font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid rgba(252,251,249,.12); list-style: none; display: flex; gap: 10px; align-items: center; }
.always li:last-child { border-bottom: 0; }
.always li::before { content: ""; width: 6px; height: 6px; background: var(--mint); flex: none; }
.result { font-family: var(--mono); font-size: 12px; color: var(--good-ink); }

/* ---------------------------------------------------------------- plan */
.plan-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bone-3); }
.plan-h .t { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.plan-h .meta { font-size: 12.5px; color: var(--ink-4); margin-top: 1px; }
.sect { padding: 12px 16px; border-bottom: 1px solid var(--bone-2); }
.sect:last-child { border-bottom: 0; }
.sect .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
.ag { font-size: 13.5px; font-weight: 600; margin-top: 7px; }
.kws { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.kw { font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; background: var(--bone-1); border: 1px solid var(--bone-3); color: var(--ink-2); overflow-wrap: anywhere; }
.kw.neg { background: var(--bad-bg); border-color: #E7C4BD; color: var(--bad-ink); }
.kw.dark { background: var(--ink); border-color: var(--ink); color: var(--bone-0); }
.heads { display: flex; flex-wrap: wrap; gap: 5px; }
.hd { font-size: 12.5px; padding: 4px 8px; background: var(--dew); color: var(--pine); font-weight: 600; }
.hd small { font-family: var(--mono); font-weight: 400; color: var(--leaf); margin-left: 5px; font-size: 10.5px; }
.desc { font-size: 13px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.facts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 13px; }
.facts2 b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.mad { border: 1px solid var(--bone-3); background: var(--bone-1); padding: 10px 12px; margin-top: 8px; }
.mad:first-of-type { margin-top: 0; }
.mad .p { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.mad .h { font-size: 13.5px; font-weight: 600; margin-top: 6px; display: flex; justify-content: space-between; gap: 10px; }
.mad .h span { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-4); }
.pnote { font-size: 12.5px; color: var(--ink-3); background: var(--bone-1); border-top: 1px solid var(--bone-3); padding: 12px 16px; margin-top: auto; }
.launchbar { background: var(--ink); color: var(--bone-0); padding: 14px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.launchbar p { flex: 1 1 220px; font-size: 14px; color: rgba(252,251,249,.8); }
.launchbar p b { color: var(--bone-0); }
.launchbar .btn { border-color: rgba(252,251,249,.6); background: transparent; color: var(--bone-0); }
.launchbar .btn.light { background: var(--bone-0); color: var(--ink); border-color: var(--bone-0); }
.drafting { display: flex; gap: 14px; align-items: center; padding: 18px 16px; }
.drafting .mark { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .drafting .mark { animation: none; } }

/* ---------------------------------------------------------------- customers */
.funnel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bone-3); background: var(--bone-0); }
.fs { padding: 13px 14px 15px; position: relative; }
.fs:nth-child(odd) { border-right: 1px solid var(--bone-3); }
.fs:nth-child(-n+2) { border-bottom: 1px solid var(--bone-3); }
.fs .v { font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 8px; }
.fs .v small { font-size: 14px; font-weight: 500; color: var(--ink-4); letter-spacing: 0; margin-left: 6px; }
.fs .bar { margin-top: 12px; }
.fs .rate { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.fs .arrow { display: none; }
.map .st { font-weight: 600; }
.map .ev { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.map .ev small { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--ink-4); }
.sent { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--bone-3); background: var(--bone-1); }
.sent > div { padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
.sent > div + div { border-top: 1px solid var(--bone-3); }
.sent b { display: block; font-size: 22px; letter-spacing: -.03em; line-height: 1.1; }
.sent .s { font-size: 12px; color: var(--ink-4); }
.privacy { padding: 14px 16px; background: var(--ink); color: var(--bone-0); display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.privacy .ic { width: 30px; height: 30px; background: var(--mint); display: grid; place-items: center; }
.privacy .ic svg { width: 16px; height: 16px; fill: none; stroke: var(--pine); stroke-width: 2; }
.privacy b { display: block; font-size: 14.5px; }
.privacy p { font-size: 12.5px; color: rgba(252,251,249,.74); margin-top: 3px; line-height: 1.5; }
.hash { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- rules */
.rules { display: flex; flex-direction: column; }
.rule { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--bone-2); }
.rule:last-child { border-bottom: 0; }
.rule .ic { width: 34px; height: 34px; border: 1px solid var(--bone-3); display: grid; place-items: center; }
.rule .ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.rule .n { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.rule .x { font-size: 12.5px; color: var(--ink-4); margin-top: 1px; }
.rule .rv { grid-column: 2; justify-self: start; }
.val { font-family: var(--mono); font-size: 13px; border: 1px solid var(--bone-3); padding: 6px 11px; min-width: 120px; text-align: right; background: var(--bone-0); display: inline-block; }
.val input { border: 0; background: none; width: 64px; text-align: right; font: inherit; padding: 0; }
.val input:focus { outline: none; }
.sw { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.rule.key { background: var(--bone-1); box-shadow: inset 4px 0 0 var(--brass); }
.leg .list-row { grid-template-columns: 14px 1fr auto; column-gap: 10px; align-items: center; }
.leg .sq { width: 12px; height: 12px; }
.leg .bigc { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.stop { padding: 16px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.stop .ic { width: 34px; height: 34px; background: var(--mint); display: grid; place-items: center; }
.stop .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--pine); stroke-width: 2; }
.stop b { display: block; font-size: 16px; letter-spacing: -.01em; }
.stop p { font-size: 13.5px; margin-top: 4px; line-height: 1.5; }

/* ---------------------------------------------------------------- activity */
.log .day { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); padding: 10px 16px 6px; background: var(--bone-1); border-bottom: 1px solid var(--bone-2); }
.it { display: grid; grid-template-columns: 42px 26px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--bone-2); text-decoration: none; }
.it .tm { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.it .pf { width: 26px; height: 26px; font-size: 10px; }
.it .a { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.it .w { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.it .chip { grid-column: 3; justify-self: start; }
a.it:hover .a { text-decoration: underline; }
.brk .row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 34px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.brk .row > b { text-align: right; font-size: 15px; }
.brk .bar > b { background: var(--c, var(--field)); }
.brk .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 12px 0 4px; }
.brk .k:first-child { margin-top: 0; }
.cnt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cnt div { padding: 14px 14px; }
.cnt div + div { border-left: 1px solid rgba(252,251,249,.14); }
.cnt b { display: block; font-size: 26px; letter-spacing: -.03em; line-height: 1; }
.cnt span { font-size: 12px; color: rgba(252,251,249,.7); display: block; margin-top: 6px; }
.pager { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--bone-3); }

/* ---------------------------------------------------------------- report */
.well { background: var(--bone-2); border: 1px solid var(--bone-3); padding: 12px; }
.paper { background: #FFFFFF; box-shadow: 0 10px 30px rgba(16,19,18,.10); padding: 16px 16px 18px; }
.ptop { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--field); padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.ptop span + span { color: var(--ink-4); }
.phead { font-size: 21px; line-height: 1.2; letter-spacing: -.03em; font-weight: 700; margin-top: 12px; }
.psum { font-size: 13px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
.pk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid var(--bone-3); border-bottom: 1px solid var(--bone-3); }
.pk div { padding: 9px 0 10px; }
.pk div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--bone-3); }
.pk div:nth-child(-n+2) { border-bottom: 1px solid var(--bone-3); }
.pk b { display: block; font-size: 21px; letter-spacing: -.03em; line-height: 1.1; }
.pk span { font-size: 11.5px; color: var(--ink-4); }
.pk .up { color: var(--good-ink); font-weight: 600; }
.pk .down { color: var(--bad-ink); font-weight: 600; }
.charts { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
.ch-t { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); display: flex; justify-content: space-between; gap: 10px; }
.ptab { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.ptab th { text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; padding: 0 8px 5px 0; border-bottom: 1px solid var(--bone-3); white-space: nowrap; }
.ptab td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--bone-2); white-space: nowrap; }
.ptab .r { text-align: right; }
.ptab tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 0; }
.ptab .nm { display: inline-flex; align-items: center; gap: 7px; }
.chg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; align-items: center; }
.chg .k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-right: 4px; }
.chg span.c { font-size: 11.5px; padding: 3px 8px; background: var(--dew); color: var(--pine); font-weight: 600; }
.three { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bone-3); }
.three b { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--field); font-weight: 500; }
.three p { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }
.earlier .list-row { grid-template-columns: 1fr auto; column-gap: 10px; padding: 8px 0; text-decoration: none; }
.earlier .list-row .t { font-size: 13px; }
.earlier .list-row .d { font-family: var(--mono); font-size: 11.5px; text-align: right; }
.earlier a.list-row:hover .t { text-decoration: underline; }
.earlier .list-row.on .t { color: var(--field); }
.morning { padding: 14px 16px; }
.morning .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.morning b { display: block; font-size: 14.5px; margin-top: 4px; }
.morning p { font-size: 12.5px; margin-top: 4px; line-height: 1.5; }

/* ---------------------------------------------------------------- setup */
.conn { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bone-2); }
.conn:last-child { border-bottom: 0; }
.conn .n { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.conn .meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); margin-top: 2px; overflow-wrap: anywhere; }
.conn .s { font-size: 13px; color: var(--ink-2); grid-column: 2; }
.conn .s small { display: block; font-size: 12px; color: var(--ink-4); }
.conn .cx { grid-column: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn .cx form { margin: 0; }
.src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--bone-3); }
.src > div { padding: 10px 10px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.src > div + div { border-left: 1px solid var(--bone-3); }
.src b { display: block; font-size: 22px; letter-spacing: -.03em; line-height: 1; }
.src .s2 { font-size: 12px; color: var(--ink-4); }
.budrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bone-2); font-size: 14px; }
.budrow b { font-size: 15px; }
.budrow.total { border-bottom: 0; font-weight: 600; }
.notes p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.notes p + p { margin-top: 6px; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tile { border: 1px solid var(--bone-3); background: var(--bone-0); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tile.dash { border-style: dashed; border-color: var(--ink-4); }
.tile .th { display: flex; gap: 12px; align-items: center; min-width: 0; }
.tile .th .n { font-weight: 600; font-size: 15px; }
.tile .th .meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); overflow-wrap: anywhere; }
.tile .tv { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.tile .tv b { font-size: 24px; letter-spacing: -.03em; }
.tile .tf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.tile .ok { display: inline-flex; gap: 8px; align-items: center; color: var(--good-ink); font-weight: 600; font-size: 14px; }
.tile .ok::before { content: "✓"; width: 18px; height: 18px; display: grid; place-items: center; background: var(--field); color: var(--bone-0); font-size: 11px; }
.tile p { font-size: 13px; color: var(--ink-3); }
.goals-t td { white-space: normal; }
.goals-t .works { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.gl { display: grid; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bone-2); }
.gl:last-child { border-bottom: 0; }
.gl .gl-top { display: flex; align-items: center; gap: 12px; }
.gl .gl-top .works { margin-left: auto; }
.gl .gl-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gl .gl-in .field { width: 100%; }
.gl .off { font-size: 13px; color: var(--ink-4); }
.stack { display: flex; height: 26px; gap: 2px; }
.stack i { display: block; height: 100%; }
.lgd { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--bone-2); font-size: 13.5px; }
.lgd:last-child { border-bottom: 0; }
.lgd i { width: 12px; height: 12px; display: block; }
.lgd .p { font-family: var(--mono); font-size: 12px; color: var(--ink-4); text-align: right; }
.limit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bone-2); font-size: 13.5px; }
.limit:last-child { border-bottom: 0; }
.total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.total-row b { font-size: 30px; letter-spacing: -.04em; }
.progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 13.5px; }
.progress .bar { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- agency */
.pg-agency .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ctable td { white-space: nowrap; }
.ctable .cn { font-weight: 600; }
.ctable .cn small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-4); }
.killbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--bone-3); background: var(--bone-1); }
.killbar.on { background: var(--bad-bg); border-color: #E7C4BD; }
.killbar p { font-size: 14px; }
details.more > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 10px 0; }

/* ---------------------------------------------------------------- login */
.pg-login { min-height: 100vh; min-height: 100dvh; background:
    radial-gradient(900px 640px at 78% 30%, rgba(156,192,181,.20), rgba(156,192,181,0) 62%),
    radial-gradient(760px 600px at 0% 110%, rgba(42,117,101,.45), rgba(42,117,101,0) 70%),
    linear-gradient(180deg, #0D3A31 0%, var(--pine) 60%, #092C25 100%);
  color: var(--bone-0); display: grid; place-items: center; padding: 24px 16px; }
.login-wrap { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.login-card { background: var(--bone-0); color: var(--ink); border-top: 6px solid var(--field); padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 40px 100px rgba(2,14,11,.45); }
.login-card .brand-by { display: inline; }
.login-card .h1 { font-size: 30px; }
.login-card .sub { font-size: 14.5px; }
.login-card .fine { font-size: 12.5px; color: var(--ink-4); }
.login-card .fine a { color: var(--ink-3); }
.login-card .or { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.login-card .or::before, .login-card .or::after { content: ""; height: 1px; background: var(--bone-3); flex: 1; }
.login-art { display: none; }
.login-art img { width: 100%; height: auto; display: block; border: 1px solid rgba(252,251,249,.14); }
.login-art .cap { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.12; color: var(--dew); margin-top: 14px; }
.login-art .cap2 { font-size: 14px; color: rgba(252,251,249,.7); margin-top: 6px; }
.login-foot { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: rgba(252,251,249,.55); text-align: center; margin-top: 18px; }
.login-foot a { color: rgba(252,251,249,.8); }
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 80px; }
.legal h1 { font-size: 30px; letter-spacing: -.03em; }
.legal h2 { font-size: 18px; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 8px 0; }

/* ---------------------------------------------------------------- phone approval (v07) */
.notice { background: #F1F2EE; border-radius: 18px; padding: 14px 14px 12px; color: var(--ink); display: grid; gap: 8px; }
.notice .nh { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.notice .nh .mark { width: 22px; height: 22px; background: var(--field); border-radius: 5px; }
.notice .nh .mark svg { width: 15px; height: 15px; }
.notice .nh span { margin-left: auto; font-family: var(--sans); letter-spacing: 0; color: var(--ink-4); }
.notice h3 { font-size: 16px; letter-spacing: -.02em; line-height: 1.25; }
.notice p { font-size: 13.5px; color: var(--ink-3); }
.notice .copy { border-left: 3px solid var(--field); background: rgba(255,255,255,.7); padding: 8px 10px; font-size: 13.5px; }
.notice .acts3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; }
.notice .btn { border-radius: 10px; min-height: 40px; border: 0; background: #E6E7E1; }
.notice .btn.primary { background: var(--field); }

/* ---------------------------------------------------------------- tablet */
@media (min-width: 720px) {
  .main { padding: 20px 24px calc(var(--tabbar) + 32px); gap: 16px; }
  .h1 { font-size: 32px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi.wide { grid-column: auto; }
  .kpi .v { font-size: 32px; }
  .goal-grid, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .switchr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipe .st:nth-child(odd) { border-right: 0; }
  .pipe .st:not(:nth-child(3n)) { border-right: 1px solid var(--bone-3); }
  .pipe .st:nth-child(n+4) { border-bottom: 0; }
  .funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs:nth-child(odd) { border-right: 0; }
  .fs + .fs { border-left: 1px solid var(--bone-3); }
  .fs:nth-child(-n+2) { border-bottom: 0; }
  .fs .arrow { display: grid; position: absolute; right: -11px; top: 50%; width: 20px; height: 20px; background: var(--bone-0); border: 1px solid var(--bone-3); place-items: center; z-index: 2; transform: translateY(-50%); font-size: 11px; color: var(--ink-4); }
  .sent { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sent > div + div { border-top: 0; border-left: 1px solid var(--bone-3); }
  .budgets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bud + .bud { border-top: 0; border-left: 1px solid var(--bone-3); }
  .pk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pk div:nth-child(-n+2) { border-bottom: 0; }
  .pk div + div { padding-left: 16px; border-left: 1px solid var(--bone-3); }
  .charts { grid-template-columns: 1fr 1fr; gap: 24px; }
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ptop { flex-direction: row; justify-content: space-between; }
  .paper { padding: 18px 26px; }
  .well { padding: 16px 22px 0; }
  .askc { grid-template-columns: minmax(0, 1fr) 190px; padding: 16px 20px; }
  .ask-top { grid-column: 1 / -1; }
  .askc .acts { grid-template-columns: 1fr; }
  .rule { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .rule .rv { grid-column: 3; justify-self: end; }
  .conn { grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) 150px; }
  .conn .s { grid-column: 3; }
  .conn .cx { grid-column: 4; justify-content: flex-end; }
  .it { grid-template-columns: 46px 30px minmax(0, 1fr) auto; }
  .it .pf { width: 30px; height: 30px; font-size: 11px; }
  .it .chip { grid-column: 4; justify-self: end; }
  .login-card { padding: 30px 30px 26px; }
  .gl { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); align-items: center; }
}

/* ---------------------------------------------------------------- desktop: the kit's window */
@media (min-width: 1100px) {
  :root { --top: 64px; }
  .app { display: grid; grid-template-columns: 8px 214px minmax(0, 1fr); grid-template-rows: var(--top) minmax(0, 1fr) auto; border-top: 0; }
  .edge { display: block; grid-column: 1; grid-row: 1 / 4; background: var(--mint); }
  .topbar { grid-column: 2 / 4; grid-row: 1; gap: 18px; padding: 0 24px; }
  .brand { gap: 12px; }
  .mark { width: 36px; height: 36px; }
  .mark svg { width: 24px; height: 24px; }
  .brand-name { font-size: 23px; }
  .brand-by { display: block; }
  .vr { display: block; }
  .account { margin-left: 0; }
  .account > summary { text-align: left; gap: 10px; }
  .account .acct-name { font-size: 15px; max-width: 360px; display: inline; }
  .account .acct-tag { display: inline; }
  .account .acct-line { display: flex; align-items: center; gap: 10px; }
  .account .acct-tag.tag { font-size: 10.5px; background: var(--bone-2); padding: 3px 7px; }
  .menu-pop.left { left: 0; right: auto; }
  .live { display: flex; }
  .clock { display: block; }
  .sidebar { display: flex; grid-column: 2; grid-row: 2 / 4; position: sticky; top: var(--top); height: calc(100vh - var(--top)); background: var(--bone-1); border-right: 1px solid var(--bone-3); padding: 18px 12px 16px; flex-direction: column; gap: 2px; overflow-y: auto; }
  .tabbar { display: none; }
  .main { grid-column: 3; grid-row: 2; padding: 22px 28px 28px; gap: 16px; }
  .demo-strip { grid-column: 3; grid-row: 3; }
  .h1 { font-size: 34px; letter-spacing: -.038em; }
  .sub { font-size: 15.5px; }
  .head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .head .acts { flex: none; }
  .panel-h { padding: 13px 18px; }
  .panel-b { padding: 16px 18px; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 18px; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 18px; }
  .kpis { gap: 12px; }
  .kpi { padding: 14px 16px 15px; }
  .kpi .v { font-size: 34px; }
  .body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: start; }
  .fi { grid-template-columns: 50px 30px minmax(0, 1fr); gap: 12px; }
  .fi .pf { width: 30px; height: 30px; font-size: 11px; }
  .fi .tm { font-size: 12.5px; padding-top: 6px; }
  .fi .a { font-size: 14px; }
  .fi .w { font-size: 13px; }
  .fi .needs { margin: 0 0 0 8px; }
  .steps .step { padding: 12px 16px; font-size: 14px; }
  .goal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .switchr { grid-template-columns: repeat(3, minmax(0, 1fr)) 250px; }
  .pipe { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pipe .st { border-bottom: 0; border-right: 0 !important; }
  .pipe .st + .st { border-left: 1px solid var(--bone-3); }
  .pipe .arr { display: grid; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: var(--bone-0); border: 1px solid var(--bone-3); place-items: center; font-size: 11px; color: var(--ink-4); z-index: 2; }
  .login-wrap { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; }
  .login-art { display: block; }

  .pg-overview .body { grid-template-columns: minmax(0, 1fr) 452px; align-items: stretch; }
  .pg-overview .body > .panel { display: flex; flex-direction: column; }
  .pg-overview .budgets { margin-top: auto; }
  .pg-platform .body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 400px; }
  .pg-platform .camps-p { grid-column: 1 / -1; }
  .pg-campaign .body { grid-template-columns: minmax(0, 1fr) 430px; }
  .pg-review .body { grid-template-columns: minmax(0, 1fr) 450px; align-items: stretch; }
  .pg-review .body > .panel:first-child { display: flex; flex-direction: column; }
  .pg-approvals .body { grid-template-columns: minmax(0, 1fr) 420px; }
  .pg-switches .body { grid-template-columns: minmax(0, 1fr); }
  .pg-plan .body { grid-template-columns: 350px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .pg-plan .body.two { grid-template-columns: 350px minmax(0, 1fr); }
  .pg-customers .body { grid-template-columns: minmax(0, 1fr) 470px; align-items: stretch; }
  .pg-customers .funnel { grid-column: 1 / -1; }
  .pg-customers .sent { margin-top: auto; }
  .pg-rules .body { grid-template-columns: minmax(0, 1fr) 440px; }
  .pg-activity .body { grid-template-columns: minmax(0, 1fr) 400px; }
  .pg-report .body { grid-template-columns: minmax(0, 1fr) 380px; }
  .pg-setup .body { grid-template-columns: minmax(0, 1fr) 440px; }
  .pg-goals .body { grid-template-columns: minmax(0, 1fr) 344px; }
  .pg-connect .body { grid-template-columns: minmax(0, 1fr) 310px; }
  .pg-agency .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-agency .body, .pg-team .body, .pg-billing .body { grid-template-columns: minmax(0, 1fr) 380px; }
  .pg-single .body { grid-template-columns: minmax(0, 1fr); }
  .brk .row { grid-template-columns: 150px minmax(0, 1fr) 34px; }
}

@media print {
  .topbar, .sidebar, .tabbar, .edge, .skip { display: none !important; }
  .main { padding: 0; }
}

/* helper a: platforms, platform, customers */

/* platforms: the wall (film frame 05) */
.gcard { color: inherit; min-width: 0; }
a.gcard:hover { border-color: var(--ink-4); }
.gcard.watch { border-color: #E9D9B5; }
.gcard .gh .pf-name { font-size: 16px; line-height: 1.25; }
.gcard .gh .chip { flex: none; }
.gcard .gb .ring { display: block; }
.gcard .gf { min-width: 0; }
.gcard .gc .spark { flex: 0 1 120px; min-width: 56px; height: auto; display: block; }
.gcard .gc .cv { white-space: nowrap; }
.gcard .gn { margin: 0; }
.gcard .gn .mark { flex: none; }
.gcard.add .gh .plus { width: 30px; height: 30px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 18px; font-weight: 500; flex: none; }
.gcard.add .ga { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 14px; font-size: 13px; color: var(--ink-3); }
.gcard.add .ga .by { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--brass-ink); }
a.gcard.add:hover { background: var(--bone-2); }

/* platform: one provider (w-platforms) */
.sw-card { color: inherit; min-width: 0; }
a.sw-card:hover { border-color: var(--ink-4); }
.sw-card .s { overflow-wrap: anywhere; }
.sw-add { color: inherit; }
a.sw-add:hover { background: var(--bone-2); }
.camps td { padding-top: 9px; padding-bottom: 9px; }
.camps .type { font-size: 13px; }
.camps tr.off td { color: var(--ink-4); }
.camps tr.off .pf, .cc.off .pf { opacity: .5; }
.cc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 11px 16px; background: var(--bone-1); font-size: 13px; font-weight: 600; }
.kv.set { grid-template-columns: 110px minmax(0, 1fr); font-size: 13px; }
.kv.set dt { padding-top: 9px; }
.kv.set dd { padding: 7px 0; font-weight: 400; color: var(--ink-2); }
.kv.set dd b { font-weight: 600; color: var(--ink); }
.may-none { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.trk { margin: 0; padding: 0; list-style: none; }
.trk li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.trk li::before { content: "✓"; content: "✓" / ""; width: 18px; height: 18px; display: grid; place-items: center; background: var(--good-bg); color: var(--good-ink); font-size: 10px; font-weight: 700; }
.trk li span { font-family: var(--mono); font-size: 11px; color: var(--ink-4); text-align: right; }
ul.rgrid { margin: 0; padding: 0; list-style: none; }
.rchip .pf { flex: none; }

/* customers (w-customers) */
.map th.st { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--bone-2); }
.map th.st, .map td { padding-top: 9px; padding-bottom: 9px; }
.map tbody tr:last-child th { border-bottom: 0; }
.map .ev.none { color: var(--ink-4); }
.map .pf-row { font-weight: 500; }
.stage-list .sl { display: grid; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--bone-2); }
.stage-list .sl .t { font-size: 14px; font-weight: 600; }
.stage-list .sl-r { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.stage-list .ev { font-family: var(--mono); font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.stage-list .ev small { font-family: var(--sans); font-size: 11.5px; color: var(--ink-4); margin-left: 8px; }
.feed-list { padding-top: 2px; padding-bottom: 2px; }
.feed-p .why { border-top: 1px solid var(--bone-3); }
.feed-p .why .list-row:first-child { padding-top: 2px; }

@media (min-width: 720px) {
  .pg-customers .sent { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .pg-platform .switchr { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) 250px; }
  .pg-platform .body { align-items: stretch; }
  .pg-platform .col .ready { flex: 1; }
  .pg-platform .wide2 { grid-column: span 2; }
}

/* helper C: activity, morning review, report */
.log .filters { padding: 10px 12px; border-bottom: 1px solid var(--bone-3); }
.log h3.day { font-weight: 500; }
.log .it { align-items: start; }
.log .it .tm { padding-top: 5px; }
.pcards .pc { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bone-2); }
.pcards .pc:last-child { border-bottom: 0; }
.pcards .p1 { font-weight: 600; font-size: 14px; letter-spacing: -.005em; }
.pcards .ev { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.pcards .rc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.pg-report .well { padding-bottom: 12px; }
.pg-report .kv { grid-template-columns: 76px minmax(0, 1fr); }
@media (min-width: 720px) {
  .log .it { align-items: center; }
  .log .it .tm { padding-top: 0; }
  .pg-report .well { padding-bottom: 22px; }
}
@media (min-width: 1100px) {
  .log .filters { padding: 12px 18px; gap: 8px; }
  .log .day { padding: 10px 18px 6px; }
  .log .it { padding: 8px 18px; }
  .log .pager { padding: 12px 18px; }
  .props td:first-child { min-width: 230px; }
  .props .ev { max-width: 300px; }
  .pg-report .body { align-items: stretch; }
}

/* ---------------------------------------------------------------- setup, connect, goals (main build) */
.ticks.two { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.steps-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.steps-list b { color: var(--ink); }
.tile .form { gap: 8px; }
.tile .fld > span { font-size: 10px; }
.gl-top .switch { margin-right: 2px; }
.gl-top .works { white-space: nowrap; }
.pg-goals .panel .more > summary { padding: 12px 0; }
.askc .acts { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.limit .field { flex: none; }
@media (min-width: 720px) {
  .ticks.two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .askc .acts { grid-template-columns: 1fr; }
  .pg-connect .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* helper B: campaigns, campaign, rules */
.panel-link { font-size: 13px; font-weight: 600; color: var(--ink-3); text-underline-offset: 3px; text-decoration-color: var(--bone-3); }
.panel-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.plans-p .t a { text-decoration: none; }
.plans-p .t a:hover { text-decoration: underline; }
.camps-list .type { font-size: 13px; }
.camps-list .spark { display: block; }
.cc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; background: var(--bone-1); font-size: 13px; font-weight: 600; }
.cc-foot b { margin-left: auto; font-size: 15px; letter-spacing: -.02em; }
.watch-p .none { font-size: 13px; color: var(--ink-3); padding: 12px 0; }
.watch-p .q { color: var(--ask-ink); text-decoration: none; }
.watch-p .q:hover { text-decoration: underline; }
.pg-campaign a.chip { text-decoration: none; }
.pg-campaign a.chip:hover { text-decoration: underline; }
.pg-campaign .foot-note { margin-top: 0; }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--bone-2); }
.mrow:last-child { border-bottom: 0; }
.mrow .n { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.mrow .m { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 719px) { .camps-list .panel-h .label { display: none; } }
.pg-rules .val.edit { padding-top: 2px; padding-bottom: 2px; }
.pg-rules .val input { width: 5ch; min-height: 28px; padding: 4px 0; font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.pg-rules .val input.w2 { width: 3.2ch; }
.pg-rules .val input.w3 { width: 4ch; }
.pg-rules .val input::-webkit-inner-spin-button, .pg-rules .val input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pg-rules .val:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(184,135,58,.35); }
.pg-rules .val input:invalid { color: var(--bad-ink); }
.pg-rules .val input.left { text-align: left; }
.pg-rules .val label { cursor: text; white-space: nowrap; }
.pg-rules .val:has(input[aria-invalid="true"]) { border-color: var(--bad-ink); background: var(--bad-bg); }
@supports (field-sizing: content) { .pg-rules .val input, .pg-rules .val input.w2, .pg-rules .val input.w3 { field-sizing: content; width: auto; min-width: 3.2ch; } }
.rules-save { padding: 12px 16px; border-top: 1px solid var(--bone-3); background: var(--bone-1); }
.leg-note { font-size: 12.5px; color: var(--ink-4); padding: 10px 0 12px; }
.stop h2 { font-size: 16px; letter-spacing: -.01em; }
@media (min-width: 1100px) {
  .pg-campaign .head { align-items: flex-start; }
  .pg-campaign .head .acts { margin-top: 22px; }
  .pg-campaign .kpi { padding-top: 12px; padding-bottom: 13px; }
  .pg-campaign .tbl td { padding-top: 5px; padding-bottom: 5px; }
  .pg-campaign .list-row { padding: 8px 0; }
  .pg-rules .rule { padding: 10px 20px; }
  .pg-rules .val input { font-size: 13px; min-height: 24px; padding: 2px 0; }
  .pg-rules .stop { padding: 16px 20px; }
}

/* goals as the film's table (02-goals) */
.gl-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.gl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bone-2); align-items: center; }
.gl.off .pf-name, .gl.off .field, .gl.off .seg, .gl.off .works { opacity: .55; }
.gl-head { display: none; }
.gl-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gl .field { width: 100%; }
.gl .field input { min-width: 0; }
.gl .field input.unit { font-size: 12.5px; font-weight: 400; color: var(--ink-4); width: auto; min-width: 60px; flex: 1; }
.gl-target input:first-child { max-width: 90px; }
.gl-budget input { max-width: 80px; }
.slider { position: relative; flex: 1; min-width: 60px; height: 4px; background: var(--bone-2); align-self: center; }
.slider i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--field); }
.slider em { position: absolute; top: -6px; width: 16px; height: 16px; background: var(--bone-0); border: 2px solid var(--field); margin-left: -8px; }
.gl .works { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.gl-more > summary { padding: 12px 16px; }
@media (min-width: 1100px) {
  .gl { grid-template-columns: minmax(0, 1fr) auto 190px 210px 128px; gap: 12px; padding: 10px 18px; }
  .gl-head { display: grid; padding-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bone-3); }
  .gl-head .r, .gl .works { text-align: right; }
  .gl .seg span { padding: 5px 8px; }
}

/* previews */
/* Ad previews (helper E). Mock-ups of Google, Meta, LinkedIn and TikTok ads.
   Each frame is a size container; --u is one pixel of the platform's own
   screen width (--pvw), so text wraps where it would on the real screen
   however wide the frame is drawn. Mobile first. */
.pv { margin: 0; min-width: 0; width: 100%; max-width: 400px; --pvw: 390; }
.pv-frame { container-type: inline-size; background: #fff; border: 1px solid var(--bone-3); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,19,18,.06); }
.pv-in { --u: clamp(.8px, calc(100cqw / var(--pvw)), 1px); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1c1e21; font-size: calc(15 * var(--u)); line-height: 1.34; overflow-wrap: anywhere; }
.pv-in p { margin: 0; }
.pv-i { display: block; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.pv-av { flex: none; display: grid; place-items: center; overflow: hidden; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: var(--pv-brand, var(--field)); color: var(--pv-on, #fff); font-weight: 700; font-size: calc(17 * var(--u)); line-height: 1; }
/* A logo is fitted, never cropped: brand logos are often wide. */
.pv-av img, .pv-g-fav img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; padding: 8%; }
.pv-av.pv-sq { border-radius: calc(4 * var(--u)); }
.pv-head { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) 0; }
.pv-who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.pv-who b { font-size: calc(15 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-sub { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(13 * var(--u)); color: #65676b; }
.pv-sub .pv-i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.pv-tools { display: flex; gap: calc(14 * var(--u)); align-self: flex-start; padding-top: calc(4 * var(--u)); color: #65676b; }
.pv-text { padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); white-space: pre-line; }
.pv-more { color: #65676b; font-weight: 600; }
.pv-pic { position: relative; width: 100%; overflow: hidden; background: #e4e6eb; }
.pv-pic > img, .pv-pic > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); padding: calc(16 * var(--u)); text-align: center; background: var(--pv-brand, var(--field)); color: var(--pv-on, #fff); }
.pv-ph::before { content: ""; position: absolute; inset: calc(10 * var(--u)); border: 1px dashed currentColor; opacity: .45; }
.pv-ph b { font-family: var(--sans); font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.pv-ph small { font-family: var(--mono); font-size: calc(11 * var(--u)); letter-spacing: .04em; opacity: .85; }

/* Facebook feed */
.pv-fb-link { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); background: #f0f2f5; }
.pv-fb-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pv-fb-dom { font-size: calc(12 * var(--u)); color: #65676b; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-fb-hl { font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-fb-desc { font-size: calc(14 * var(--u)); color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-btn { flex: none; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(6 * var(--u)); background: #e2e5e9; color: #050505; font-size: calc(15 * var(--u)); font-weight: 600; white-space: nowrap; }
.pv-fb-bar, .pv-li-bar { display: flex; justify-content: space-around; font-weight: 600; }
.pv-fb-bar { margin: 0 calc(12 * var(--u)); padding: calc(4 * var(--u)) 0; border-top: 1px solid #ced0d4; color: #65676b; font-size: calc(14 * var(--u)); }
.pv-fb-bar span, .pv-li-bar span { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) 0; }

/* Instagram feed */
.pv-ig .pv-head { padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.pv-ig .pv-av { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(14 * var(--u)); }
.pv-ig .pv-who b { font-size: calc(14 * var(--u)); }
.pv-ig .pv-sub { font-size: calc(12 * var(--u)); color: #262626; }
.pv-ig .pv-tools { color: #262626; }
.pv-ig-cta { display: flex; align-items: center; justify-content: space-between; padding: calc(11 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid #dbdbdb; color: #000; font-size: calc(14 * var(--u)); font-weight: 600; }
.pv-ig-cta .pv-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-ig-icons { display: flex; justify-content: space-between; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)); color: #000; }
.pv-ig-icons > span { display: flex; gap: calc(14 * var(--u)); }
.pv-ig-icons .pv-i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.pv-ig-cap { padding: calc(2 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)); color: #000; font-size: calc(14 * var(--u)); }
.pv-ig-cap b { font-weight: 600; }
.pv-ig-cap .pv-more { font-weight: 400; color: #737373; }

/* Full screen: Stories, Reels, TikTok */
.pv.pv-st, .pv.pv-re, .pv.pv-tt { --pvw: 360; max-width: 280px; }
.pv-st .pv-frame, .pv-re .pv-frame, .pv-tt .pv-frame { border-radius: 14px; background: #000; border-color: #000; }
.pv-screen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #1b1b1b; color: #fff; }
.pv-fill { position: absolute; inset: 0; }
.pv-fill > img, .pv-fill > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-fit { display: flex; align-items: center; justify-content: center; background: #222; }
.pv-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(calc(24 * var(--u))) brightness(.6); transform: scale(1.25); }
.pv-mid { position: relative; width: 100%; display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.pv-mid .pv-pic { width: min(100%, calc(var(--mid, 640) * var(--u) * var(--r, 1))); margin-inline: auto; background: transparent; }
.pv-st .pv-mid { --mid: 300; }
.pv-st-text { padding: 0 calc(22 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; line-height: 1.3; text-shadow: 0 1px 2px rgba(0,0,0,.45); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pv-st-top { position: absolute; top: 0; left: 0; right: 0; padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(28 * var(--u)); background: linear-gradient(rgba(0,0,0,.5), transparent); }
.pv-st-bar { display: block; height: calc(2 * var(--u)); border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.35); }
.pv-st-bar i { display: block; width: 38%; height: 100%; background: #fff; }
.pv-screen .pv-head { padding: calc(10 * var(--u)) calc(4 * var(--u)) 0; }
.pv-screen .pv-av { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(14 * var(--u)); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.pv-screen .pv-who b { font-size: calc(14 * var(--u)); color: #fff; }
.pv-screen .pv-sub, .pv-screen .pv-tools { color: rgba(255,255,255,.88); }
.pv-screen .pv-sub { font-size: calc(12 * var(--u)); }
.pv-screen .pv-more { color: rgba(255,255,255,.75); }
.pv-st-cta { position: absolute; left: 0; right: 0; bottom: calc(20 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.pv-pill { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(9 * var(--u)) calc(18 * var(--u)); border-radius: 999px; background: #fff; color: #000; font-size: calc(14 * var(--u)); font-weight: 600; }
.pv-pill .pv-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #0064e0; }
.pv-re-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(14 * var(--u)); font-size: calc(20 * var(--u)); background: linear-gradient(rgba(0,0,0,.35), transparent); }
.pv-re-top .pv-i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.pv-re-side, .pv-tt-side { position: absolute; bottom: calc(150 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u)); }
.pv-re-side { right: calc(12 * var(--u)); }
.pv-re-side .pv-i, .pv-tt-side .pv-i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.pv-re-foot, .pv-tt-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.pv-re-foot { padding: calc(44 * var(--u)) calc(56 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); }
.pv-re-foot .pv-head { padding: 0; }
.pv-re-text, .pv-tt-text { font-size: calc(14 * var(--u)); line-height: 1.35; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.pv-re-cta, .pv-tt-cta { display: flex; align-items: center; justify-content: space-between; padding: calc(9 * var(--u)) calc(12 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; background: rgba(255,255,255,.24); }
.pv-re-cta { margin-right: calc(-44 * var(--u)); border-radius: calc(8 * var(--u)); }
.pv-re-cta .pv-i, .pv-tt-cta .pv-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-tt-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)); font-size: calc(16 * var(--u)); color: rgba(255,255,255,.72); background: linear-gradient(rgba(0,0,0,.35), transparent); }
.pv-tt-top b { color: #fff; font-weight: 700; border-bottom: calc(2 * var(--u)) solid #fff; padding-bottom: calc(3 * var(--u)); }
.pv-tt-top .pv-i { position: absolute; right: calc(14 * var(--u)); color: #fff; }
.pv-tt-side { right: calc(8 * var(--u)); }
.pv-tt-side .pv-av { width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: calc(18 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.pv-tt-foot { align-items: flex-start; gap: calc(5 * var(--u)); padding: calc(44 * var(--u)) calc(64 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); }
.pv-tt-foot > b { font-size: calc(16 * var(--u)); font-weight: 600; }
.pv-tt-tag { padding: calc(1 * var(--u)) calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(255,255,255,.22); font-size: calc(12 * var(--u)); }
.pv-tt-cta { align-self: stretch; margin-right: calc(-52 * var(--u)); border-radius: calc(4 * var(--u)); }

/* LinkedIn */
.pv.pv-li { --pvw: 480; max-width: 560px; }
.pv-li .pv-in { font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: rgba(0,0,0,.9); font-size: calc(14 * var(--u)); }
.pv-li .pv-head { padding: calc(12 * var(--u)) calc(16 * var(--u)) 0; }
.pv-li .pv-av { width: calc(48 * var(--u)); height: calc(48 * var(--u)); font-size: calc(20 * var(--u)); }
.pv-li .pv-who b { font-size: calc(14 * var(--u)); }
.pv-li .pv-sub { font-size: calc(12 * var(--u)); color: rgba(0,0,0,.6); }
.pv-li-follow { display: flex; align-items: center; gap: calc(4 * var(--u)); align-self: flex-start; color: #0a66c2; font-size: calc(16 * var(--u)); font-weight: 600; }
.pv-li-follow .pv-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-li .pv-text { padding: calc(10 * var(--u)) calc(16 * var(--u)); }
.pv-li .pv-more { font-weight: 400; color: rgba(0,0,0,.6); }
.pv-li-link { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); background: #edf3f8; }
.pv-li-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pv-li-copy b { font-size: calc(14 * var(--u)); font-weight: 600; }
.pv-li-copy span { font-size: calc(12 * var(--u)); color: rgba(0,0,0,.6); }
.pv-li-btn { flex: none; padding: calc(5 * var(--u)) calc(16 * var(--u)); border: 1px solid #0a66c2; border-radius: 999px; color: #0a66c2; font-size: calc(16 * var(--u)); font-weight: 600; white-space: nowrap; }
.pv-li-bar { margin-top: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); border-top: 1px solid #e8e8e8; color: rgba(0,0,0,.6); font-size: calc(14 * var(--u)); }

/* Google search */
.pv-g .pv-in { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #202124; }
.pv.pv-g.pv-desk { --pvw: 600; max-width: 640px; }
.pv-g-top { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); margin-bottom: calc(14 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; }
.pv-g-hide { display: flex; align-items: center; gap: calc(4 * var(--u)); color: #4d5156; font-size: calc(14 * var(--u)); font-weight: 400; white-space: nowrap; }
.pv-g-hide .pv-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-g-id { display: grid; grid-template-columns: calc(28 * var(--u)) minmax(0, 1fr) auto; column-gap: calc(12 * var(--u)); align-items: center; }
.pv-g-fav { grid-row: 1 / 3; display: grid; place-items: center; overflow: hidden; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border: 1px solid #dadce0; border-radius: 50%; background: var(--pv-brand, #f1f3f4); color: var(--pv-on, #fff); font-size: calc(13 * var(--u)); font-weight: 700; }
.pv-g-name { grid-column: 2; font-size: calc(14 * var(--u)); line-height: 1.43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-g-url { grid-column: 2; font-size: calc(12 * var(--u)); line-height: 1.5; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-g-dots { grid-column: 3; grid-row: 1 / 3; color: #4d5156; }
.pv-g-dots .pv-i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.pv-g-body.has-img { display: grid; grid-template-columns: minmax(0, 1fr) calc(92 * var(--u)); gap: calc(12 * var(--u)); align-items: start; }
.pv-g-h { margin-top: calc(10 * var(--u)); color: #1558d6; font-size: calc(20 * var(--u)); line-height: 1.3; }
.pv-desk .pv-g-h { color: #1a0dab; }
.pv-g-d { margin-top: calc(4 * var(--u)); color: #4d5156; font-size: calc(14 * var(--u)); line-height: 1.58; }
.pv-g-thumb { width: 100%; aspect-ratio: 1; margin-top: calc(12 * var(--u)); border-radius: calc(8 * var(--u)); object-fit: cover; display: block; }
.pv-g-sl { display: flex; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); overflow: hidden; }
.pv-g-sl span { flex: none; padding: calc(7 * var(--u)) calc(14 * var(--u)); border: 1px solid #dadce0; border-radius: 999px; color: #1558d6; font-size: calc(14 * var(--u)); }
.pv-g-sl b { font-weight: 400; }
.pv-desk .pv-g-sl { flex-wrap: wrap; gap: calc(6 * var(--u)) calc(24 * var(--u)); }
.pv-desk .pv-g-sl span { flex: 0 1 auto; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; color: #1a0dab; }
.pv-desk .pv-g-sl small { color: #4d5156; font-size: calc(13 * var(--u)); }

/* Around the mock-ups: tabs, notes, warnings, links */
.pv-tabs { display: grid; gap: 10px; min-width: 0; }
.pv-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.pv-tag { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.pv-tablist { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--bone-3); background: var(--bone-0); }
.pv-tab { min-height: 32px; padding: 5px 12px; border: 0; border-right: 1px solid var(--bone-3); background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pv-tab:last-child { border-right: 0; }
.pv-tab:hover { color: var(--ink); background: var(--bone-1); }
.pv-tab[aria-selected="true"] { background: var(--ink); color: var(--bone-0); }
.pv-tab:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }
.pv-pane { min-width: 0; }
.pv-pane:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.pv-note { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-4); }
.pv-warn { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pv-warn li { position: relative; padding: 6px 9px 6px 27px; background: var(--watch-bg); color: var(--watch-ink); font-size: 12.5px; line-height: 1.4; }
.pv-warn li::before { content: "!"; position: absolute; left: 9px; top: 6px; width: 12px; text-align: center; font-weight: 700; }
.pv-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.pv-links a { color: var(--field); text-underline-offset: 3px; }
.pv-links a:hover { color: var(--pine); }

/* Plan page: one disclosure per ad group or ad, the first open */
.pv-item { margin-top: 8px; border: 1px solid var(--bone-3); background: var(--bone-0); }
.pv-item > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.pv-item > summary::-webkit-details-marker { display: none; }
.pv-item > summary:hover { background: var(--bone-1); }
.pv-item > summary:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }
.pv-item > summary .t { font-size: 13.5px; font-weight: 600; }
.pv-item > summary .n { font-size: 12px; color: var(--ink-4); }
.pv-tog { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--field); white-space: nowrap; }
.pv-tog::after { content: "Preview +"; }
.pv-item[open] .pv-tog::after { content: "Hide -"; }
.pv-body { padding: 2px 12px 12px; display: grid; gap: 8px; min-width: 0; }
.pv-body > .heads, .pv-body > .desc { margin: 0; }
.pv-item.pv-mad > summary { display: block; margin: 0; border: 0; }
.pv-item.pv-mad > summary .p { display: block; }
.pv-item.pv-mad > summary .h > span { display: flex; align-items: baseline; gap: 10px; }
.sect > .pv-item:first-of-type { margin-top: 0; }

/* Approval cards: the mock-up with its notes beside it */
.pv-ad .pv-row { display: grid; gap: 10px; margin-top: 8px; min-width: 0; }
.pv-side { display: grid; gap: 6px; align-content: start; min-width: 0; font-size: 12.5px; color: var(--ink-3); }
.pv-side .pv-note, .pv-side .pv-warn, .pv-side .pv-links { margin-top: 0; }
.pv-side dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; }
.pv-side dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding-top: 2px; }
.pv-side dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* Meta's own preview page */
.pv-grid { display: grid; gap: 22px 18px; grid-template-columns: minmax(0, 1fr); }
.pv-cell { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pv-real { margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pv-real iframe { display: block; max-width: 100%; border: 1px solid var(--bone-3); background: #fff; }
.pv-real figcaption { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.pv-url { overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .pv-ad .pv-row { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .pv-ad .pv-row.pv-row-meta { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); }
  .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A new Meta ad's card is tall: its buttons stay beside the reason and follow the scroll. */
  .askc:has(.pv-row-meta) .acts { align-self: start; align-content: start; position: sticky; top: calc(var(--top) + 16px); }
}
@media (min-width: 1100px) {
  .pg-previews .body { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* end previews */

/* creative studio: library, one file, brand kit (routes-creative.ts) */
.eyebrow a { color: inherit; text-underline-offset: 3px; }
.cr-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.cr-filters::-webkit-scrollbar { display: none; }
.cr-filters .flt, .cr-filters .flt-sep { flex: none; }
.ast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.ast-grid.tight { padding: 0; }
.ast { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--bone-3); background: var(--bone-0); }
.ast:hover, .ast:focus-within { border-color: var(--ink-4); }
.ast-img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--bone-1); border-bottom: 1px solid var(--bone-3); overflow: hidden; }
.ast-img img, .ast-img video { display: block; width: 100%; height: 100%; object-fit: contain; }
.chk .ast-img, .ast-stage.chk, .bk-logo-img { background-color: var(--bone-0); background-image: conic-gradient(var(--bone-2) 25%, transparent 0 50%, var(--bone-2) 0 75%, transparent 0); background-size: 16px 16px; }
.ast-kind { position: absolute; left: 8px; top: 8px; padding: 3px 6px; background: var(--ink); color: var(--bone-0); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ast-b { display: grid; gap: 5px; padding: 9px 10px 10px; min-width: 0; }
.ast-n { font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ast-n a { text-decoration: none; }
.ast-n a::after { content: ""; position: absolute; inset: 0; }
.ast-n a:hover { text-decoration: underline; }
.ast-n a:focus-visible { outline: none; }
.ast:has(.ast-n a:focus-visible) { outline: 3px solid var(--brass); outline-offset: 2px; }
.ast-m { font-family: var(--mono); font-size: 11px; color: var(--ink-4); overflow-wrap: anywhere; }
.ast-c { display: flex; flex-wrap: wrap; gap: 4px; }
.ast-c .chip { min-height: 21px; font-size: 11.5px; padding: 0 6px; }
.ast.mini .ast-n { font-size: 12.5px; }
.chip.ai { background: var(--ink); color: var(--bone-0); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.ast-c .chip.ai { font-size: 10px; }

.drop { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 14px; border: 1px dashed var(--ink-4); background: var(--bone-1); cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--ink); background: var(--dew); }
.drop:focus-within { outline: 3px solid var(--brass); outline-offset: 2px; }
.drop-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-t { font-weight: 600; font-size: 15px; }
.drop-t u { text-underline-offset: 3px; }
.drop-s { font-size: 12.5px; color: var(--ink-4); max-width: 36ch; }
.upl-sum { display: grid; gap: 6px; }
.upl-list { list-style: none; margin: 0; padding: 0; }
.upl-list:empty { display: none; }
.upl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--bone-2); font-size: 13px; align-items: center; }
.upl-list .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.upl-list .s { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.upl-list .ok .s { color: var(--good-ink); }
.upl-list .bad .s, .upl-list .why { color: var(--bad-ink); }
.upl-list .why { grid-column: 1 / -1; font-size: 12.5px; }
.upl-list .pbar { grid-column: 1 / -1; height: 4px; overflow: hidden; }
.upl-list .up .pbar b { width: 30%; animation: upl-slide 1.2s linear infinite; }
.upl-list .ok .pbar, .upl-list .bad .pbar { display: none; }
@keyframes upl-slide { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .upl-list .up .pbar b { animation: none; width: 100%; opacity: .5; } }
.upl-note, .mk-note, .mk-d { font-size: 12.5px; color: var(--ink-4); }
.mk-use { display: grid; gap: 6px; }
.mk-use p { font-size: 13.5px; color: var(--ink-3); }
.mk-use b { color: var(--ink); }
.cr-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.cr-fs legend { padding: 0; margin-bottom: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.cr-fs small { font-size: 12.5px; color: var(--ink-4); }
.cr-fs .seg { justify-self: start; }

.ast-stage { display: grid; place-items: center; min-height: 220px; padding: 12px; background: var(--bone-1); }
.ast-stage img, .ast-stage video { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; }
.ast-view .panel-h .chip { margin-right: 4px; }
.cr-prompt summary { cursor: pointer; font-weight: 500; }
.cr-prompt p { margin-top: 6px; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.fam { display: grid; gap: 10px; }
.dec-b { display: grid; gap: 12px; }
.dec-now { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); }
.dec-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.dec-acts:empty { display: none; }
.dec-acts form, .site-acts form { margin: 0; }
.dec-no { border-top: 1px solid var(--bone-2); padding-top: 12px; gap: 10px; }
.fits { padding-top: 2px; padding-bottom: 2px; }
.fit { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--bone-2); align-items: start; }
.fit:last-child { border-bottom: 0; }
.fit .chip { grid-column: 2; justify-self: start; }
.fit-t b { display: block; font-size: 13.5px; font-weight: 600; }
.fit-t span { display: block; font-size: 12.5px; color: var(--ink-3); }
.mk-more { display: grid; gap: 14px; }
.mk-more form { border-top: 1px solid var(--bone-2); padding-top: 14px; gap: 10px; }
.mk-more .btn { justify-self: start; }
.mk-t { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.mk-more .limit span { display: grid; gap: 1px; }
.limit span small { font-size: 12px; color: var(--ink-4); font-weight: 400; }

.bk-logo { display: grid; gap: 12px; }
.bk-logo-img { display: grid; place-items: center; width: 140px; aspect-ratio: 1 / 1; padding: 12px; border: 1px solid var(--bone-3); }
.bk-logo-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bk-logo-f { display: grid; gap: 12px; min-width: 0; }
.file-in { padding: 9px 10px; font-size: 14px; }
.bk-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.bk-col { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 10px; border: 1px solid var(--bone-3); background: var(--bone-0); }
.bk-col .input { border: 0; min-height: 42px; padding: 8px 8px 8px 0; min-width: 0; }
.bk-col .input:focus { box-shadow: none; }
.bk-col:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(184,135,58,.35); }
.bk-sw { display: inline-block; width: 22px; height: 22px; flex: none; border: 1px solid rgba(16,19,18,.2); }
.bk-glance { display: grid; gap: 14px; }
.bk-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-logo-on { display: grid; place-items: center; height: 110px; padding: 14px; border: 1px solid var(--bone-3); background: var(--bone-0); }
.bk-logo-on.dark { background: var(--pine); border-color: var(--pine); }
.bk-logo-on.dark .mono-s { color: var(--mist); }
.bk-logo-on img { max-width: 100%; max-height: 80px; object-fit: contain; }
.bk-cols-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.bk-cols-list li { display: flex; align-items: center; gap: 8px; }
.bk-voice { margin: 0; padding: 10px 14px; border-left: 3px solid var(--brass); background: var(--bone-1); font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.bk-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bk-tags li { padding: 3px 8px; border: 1px solid var(--bone-3); background: var(--bone-0); font-size: 12.5px; }
.site { display: grid; gap: 14px; }
.site-intro { font-size: 13.5px; color: var(--ink-3); }
.site-sum { display: grid; gap: 8px; }
.site-sum .mk-t { margin-top: 6px; }
.site-sum .btn { justify-self: start; }
.site-points { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.site-tone { font-size: 13.5px; color: var(--ink-2); }
.site-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--bone-2); }
@media (min-width: 720px) {
  .cr-filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .ast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fit { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .fit .chip { grid-column: 3; justify-self: end; }
  .bk-logo { grid-template-columns: 140px minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1100px) {
  .ast-grid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 12px; padding: 16px 18px; }
  .ast-grid.tight { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0; }
  .ast-stage { min-height: 360px; padding: 18px; }
  .pg-creative .body { grid-template-columns: minmax(0, 1fr) 380px; }
  .pg-asset .body, .pg-brand .body { grid-template-columns: minmax(0, 1fr) 420px; }
}
/* end creative studio */

/* platform logos */
/* The logo tile. A platform's own mark on white with a hairline reads like the
   real ad platform; the dark lettered tile stays for anything we have no mark
   for. The box is unchanged at every size, so nothing in a layout moves. */
.pf.lo { background: var(--bone-0); color: var(--ink); border: 1px solid var(--bone-3); box-shadow: none; padding: 3px; }
.pf.lo.lg { padding: 5px; }
.pf.lo.sm { padding: 2px; }
.pf.lo.xs { padding: 1px; }
/* The two dense feeds shrink the tile to 26px without renaming the size, so
   the mark gets the same room there as a .sm one. */
.fi .pf.lo, .it .pf.lo { padding: 2px; }
@media (min-width: 1100px) { .it .pf.lo { padding: 3px; } }
.pf.lo > svg { display: block; width: 100%; height: 100%; }
/* On a dark ground — a pine panel, the launch bar, a chosen filter chip, a
   dark button — the tile stays white so the mark keeps its own colours, and
   the hairline goes white with it, so the tile reads as one clean square
   instead of a light square inside a dark one. */
.panel.dark .pf.lo, .launchbar .pf.lo, .privacy .pf.lo, .kw.dark .pf.lo, .cnt .pf.lo, .morning .pf.lo, .stop .pf.lo,
.flt.on .pf.lo, .btn.dark .pf.lo, .btn.primary .pf.lo, .seg input:checked + span .pf.lo, .pv-tab[aria-selected="true"] .pf.lo { border-color: var(--bone-0); }
/* The single-colour mark, which inherits the tile's text colour: for a dark
   tile, and anywhere a mark should read as a glyph rather than a picture. */
.pf.lo.mono { background: var(--ink); border-color: var(--ink); color: var(--bone-0); }
/* Off campaigns and goals dim the whole row; the mark goes with it. */
.camps tr.off .pf.lo, .cc.off .pf.lo, .gl.off .pf.lo { opacity: .5; }
@media print {
  .pf.lo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (forced-colors: active) {
  .pf.lo { border-color: CanvasText; }
}
/* end platform logos */

/* the switch room: three-state buttons, and a chosen one that reads as chosen */
.sw-set { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-set .btn { white-space: nowrap; }
.pg-switches .tbl th:last-child, .pg-switches .tbl td:last-child { min-width: 320px; }
.btn.xs { min-height: 30px; padding: 0 10px; font-size: 12.5px; letter-spacing: 0; }
.btn.xs.on { background: var(--pine); border-color: var(--pine); color: #fff; }
.pg-switches .tbl td.cn small { display: block; max-width: 44ch; white-space: normal; color: var(--ink-3); }
.pg-switches .tbl td.cn small.sub2 { color: var(--brass); }

/* login: Max on white, with room round him. He is always shown on white, so the
   art is its own white panel beside the card rather than a picture on the pine. */
@media (min-width: 900px) {
  .login-wrap { max-width: 1128px; padding-inline: 24px; box-sizing: border-box; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; }
  .login-art { display: flex; flex-direction: column; align-items: center; background: var(--bone-0); border-radius: 18px; padding: 44px 48px 32px; }
  .login-art img { width: auto; max-width: 100%; height: min(54vh, 500px); object-fit: contain; border: 0; }
  .login-art .cap { color: var(--ink); text-align: center; margin-top: 26px; }
  .login-art .cap2 { color: var(--ink-3); text-align: center; max-width: 38ch; margin-top: 8px; }
}

/* login: Max idles. A slow float, a shadow that breathes with it, and a few
   bubbles rising in the panel behind him. Nothing moves under reduced motion. */
.max-stage { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.max-float { position: relative; z-index: 1; animation: max-float 5.2s ease-in-out infinite; will-change: transform; mix-blend-mode: multiply; }
.max-shadow { width: 46%; height: 16px; margin-top: 6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 62, 50, .22), rgba(0, 62, 50, 0)); animation: max-shadow 5.2s ease-in-out infinite; }
.max-bub { position: absolute; bottom: 8%; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--mint); background: rgba(29, 220, 124, .10); opacity: 0; animation: max-bub 7s ease-in infinite; }
.max-bub.b1 { left: 8%; animation-delay: 0s; }
.max-bub.b2 { left: 20%; width: 8px; height: 8px; animation-delay: 2.1s; animation-duration: 8.5s; }
.max-bub.b3 { right: 18%; width: 16px; height: 16px; animation-delay: 1.2s; animation-duration: 9s; }
.max-bub.b4 { right: 7%; width: 9px; height: 9px; animation-delay: 3.6s; }
.max-bub.b5 { left: 50%; width: 6px; height: 6px; animation-delay: 4.8s; animation-duration: 7.8s; }
@keyframes max-float { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-12px) rotate(.6deg); } }
@keyframes max-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.82); opacity: .6; } }
@keyframes max-bub { 0% { transform: translateY(0) scale(.7); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .55; } 100% { transform: translateY(-340px) scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .max-float, .max-shadow, .max-bub { animation: none; } .max-bub { display: none; } }