:root{
  /* Classic — the plain, untouched default (for people who just want a
     neutral black-and-white-ish tool). Do not restyle this; new identities
     ship as their own [data-theme] block. */
  --bg:#f5f5f3; --card:#fff; --ink:#1a1a1a; --muted:#6b6b6b;
  --line:#e3e3df; --accent:#1f6feb; --accent-d:#1659c4;
  --green:#1a7f37; --green-bg:#e7f4ea; --amber:#9a6700; --amber-bg:#fdf3d6;
  --red:#b42318; --red-bg:#fde8e6; --radius:12px;
  /* Readable text colour for anything rendered directly on --bg (footer,
     landing). Defaults to --muted/--ink (works on light fields); dark/
     saturated fields override these. Never colour on-bg text with
     --muted/--ink directly — use these two. */
  --on-bg:var(--muted);
  --on-bg-strong:var(--ink);
  /* Outline drawn around the hero highlight word so the real accent colour
     stays readable on saturated fields. Transparent on light themes (no
     outline needed); white on the blue/dark themes. */
  --accent-stroke:transparent;
  /* Native controls (number-spinner arrows, scrollbars) follow this. */
  color-scheme:light;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* --display drives wordmark/headings/hero numbers. Defaults to the body
     sans so Classic/Pop/Sketch/Riso are visually unchanged; only the
     Editorial theme repoints it to the serif. Keeps theming a pure
     token-swap — no theme-specific component selectors. */
  --display:var(--font);
  --bg-pattern:none;
  /* Elevation — used everywhere for depth/hierarchy. rgba black works on
     every theme surface, so these stay in :root and are not re-themed. */
  --shadow:0 1px 2px rgba(15,18,28,.04),0 2px 8px rgba(15,18,28,.05);
  --shadow-lg:0 4px 14px rgba(15,18,28,.08),0 12px 34px rgba(15,18,28,.08);
}

/* Pop — vivid pop-art: cobalt field, black outlines, orange accent */
[data-theme="pop"]{
  --bg:#2f6fe0; --card:#ffffff; --ink:#161616; --muted:#5a5a5a;
  --line:#e0e0e0; --accent:#e64a12; --accent-d:#bf3a00;
  --green:#1c7d3e; --green-bg:#e4f4e8; --amber:#9a6200; --amber-bg:#fdeccb;
  --red:#cf1f33; --red-bg:#fbdde1; --radius:14px;
  --bg-pattern:none;
  --on-bg:rgba(255,255,255,.85); --on-bg-strong:#ffffff;
  --accent-stroke:#ffffff;
}

/* Sketch — ink on paper: cream field, hand-drawn black, red accent */
[data-theme="sketch"]{
  --bg:#f7f4ec; --card:#fffdf7; --ink:#1d1b16; --muted:#6f6a5d;
  --line:#1d1b16; --accent:#d6322f; --accent-d:#b0211f;
  --green:#4f7a3a; --green-bg:#e9f0e0; --amber:#9a6700; --amber-bg:#f3ead2;
  --red:#d6322f; --red-bg:#f7dedb; --radius:10px;
  --bg-pattern:none;
}

/* Riso — risograph print: blue field, cream surfaces, coral accent */
[data-theme="riso"]{
  --bg:#4a86c6; --card:#f6eedd; --ink:#1d3a5c; --muted:#3c5675;
  --line:#d7c3a3; --accent:#cf5236; --accent-d:#a83e28;
  --green:#3f6b3c; --green-bg:#e1e8d2; --amber:#9c6a1f; --amber-bg:#efe1c2;
  --red:#9e2b3b; --red-bg:#f0d8da; --radius:12px;
  --bg-pattern:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);
  --on-bg:rgba(255,255,255,.9); --on-bg-strong:#fbf4e6;
  --accent-stroke:#ffffff;
}

/* Editorial — warm cream paper, deep forest-green ink, oxblood losses,
   serif display type. The premium financial-print identity. */
[data-theme="editorial"]{
  --bg:#f3eee2; --card:#fffdf6; --ink:#22201b; --muted:#7c7363;
  --line:#e2d9c6; --accent:#1f4d3a; --accent-d:#15392a;
  --green:#1f7a4d; --green-bg:#e6efe2; --amber:#946514; --amber-bg:#f3e7ce;
  --red:#7c2230; --red-bg:#f0dcdb; --radius:9px;
  --display:var(--serif);
  --bg-pattern:none;
}

/* Terminal — dark code-editor: deep editor field, syntax-coloured accents,
   monospace display type. The programmer identity. */
[data-theme="terminal"]{
  --bg:#0d1117; --card:#161b22; --ink:#cdd6e1; --muted:#7d8694;
  --line:#262c36; --accent:#58a6ff; --accent-d:#388bfd;
  --green:#3fb950; --green-bg:#13301f; --amber:#d29922; --amber-bg:#3a2e10;
  --red:#f85149; --red-bg:#3a1a1a; --radius:6px;
  --display:var(--mono);
  --bg-pattern:none;
  --on-bg:rgba(230,237,243,.72); --on-bg-strong:#e6edf3;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Themed scrollbars everywhere (page, modal, tooltip, selects, panes) */
*{scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px;
  border:3px solid var(--bg);background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent-d)}
*::-webkit-scrollbar-corner{background:transparent}
/* Themed page colour lives on <html> so the parallax layer can sit above it
   but behind content. data-theme is on <html>, so the vars resolve here. */
html{background-color:var(--bg);background-image:var(--bg-pattern);
  background-size:14px 14px;transition:background-color .3s}
body{font-family:var(--font);background:transparent;color:var(--ink);
  line-height:1.45;font-size:15px;transition:color .2s}

/* Health-reactive parallax field. --fx tracks the live health state and is a
   per-theme colour, so each theme uses its own green/amber/red. Kept very low
   opacity so it reads as ambient depth, never decoration over data. */
:root{--fx:var(--accent)}
[data-health="green"]{--fx:var(--green)}
[data-health="amber"]{--fx:var(--amber)}
[data-health="red"]{--fx:var(--red)}
#bgfx{position:fixed;inset:-25% -10%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(115deg,
      color-mix(in srgb,var(--fx) 22%,transparent) 0 1px,
      transparent 1px 64px),
    repeating-linear-gradient(-65deg,
      color-mix(in srgb,var(--fx) 14%,transparent) 0 1px,
      transparent 1px 96px),
    radial-gradient(60% 50% at 50% 30%,
      color-mix(in srgb,var(--fx) 16%,transparent),transparent 70%);
  opacity:.5;will-change:transform;
  transition:background .9s ease,opacity .9s ease}
main,.foot{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#bgfx{transition:background .9s ease}}

.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-family:var(--display);font-size:24px;font-weight:700;
  letter-spacing:-.01em;color:var(--accent);text-decoration:none;
  cursor:pointer;transition:opacity .12s}
a.logo:hover{opacity:.7}
.tag{font-size:13px;color:var(--muted)}
@media(max-width:600px){.tag{display:none}}
.topbar-right{display:flex;align-items:center;gap:16px}
.cur-select{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.cur-select select{font:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}

.grid{max-width:1240px;margin:22px auto;padding:0 22px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;position:relative;box-shadow:var(--shadow)}
.card-head{padding-bottom:14px;border-bottom:1px solid var(--line)}
#outputCard,#chartCard{box-shadow:var(--shadow-lg)}
#outputCard,#chartCard{grid-column:1/-1}
#scenarioCard,#sliderCard,#scenarioSaveCard,#monitorCard,
#channelCard,#skuCard{grid-column:1/-1}
#alertBar{grid-column:1/-1}
@media(max-width:860px){.grid{grid-template-columns:1fr}}

.card-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;gap:12px;flex-wrap:wrap;cursor:pointer}
.card-head input,.card-head select,.card-head label,.card-head a,
.card-head button:not(.card-toggle){cursor:auto}
.card-head h2{font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);margin-right:auto;text-align:left}
/* Collapsible cards */
.card-toggle{order:-1;display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:24px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:6px;flex:0 0 auto;
  margin-right:-2px}
.card-toggle:hover{color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.card-toggle svg{width:15px;height:15px;transition:transform .15s ease}
.card.collapsed .card-toggle svg{transform:rotate(-90deg)}
.card.collapsed{padding-bottom:0}
.card.collapsed>:not(.card-head){display:none!important}
.card.collapsed .card-head{margin-bottom:0;padding-bottom:14px}
.muted{font-size:12px;color:var(--muted)}

.fields{display:grid;gap:14px}
/* Mode groups (CPM+CTR / Direct CPC) must share the same rhythm as the rest
   of the fields, or the grouped labels crowd the input above them. */
[data-modefield]{display:grid;gap:14px}
/* Input labels: regular font, sentence case, ink. Clean and quiet. */
label{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.ip{display:flex;align-items:center;margin-top:5px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);overflow:hidden;transition:border-color .12s}
.ip:focus-within{border-color:var(--accent)}
.ip i{font-style:normal;color:var(--muted);font-size:14px;padding:0 10px;user-select:none}
.ip input{flex:1;border:0;outline:0;font:inherit;font-size:15px;padding:10px 8px;color:var(--ink);width:100%;background:transparent}
/* Kill the default browser number spinners — the biggest "unstyled" tell.
   Our injected "0" buttons replace the only stepping anyone needs. */
/* Only the main .ip fields drop the spinner (the quick "zero" button
   replaces stepping there). Other number inputs keep their steppers —
   color-scheme (set per theme) makes those arrows light on dark themes. */
.ip input[type=number]{-moz-appearance:textfield;appearance:textfield}
.ip input[type=number]::-webkit-outer-spin-button,
.ip input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ip input::placeholder{color:#b3b3b3;font-size:13px}
/* Whispers, doesn't announce: tiny, lowercase, faint. Hidden by JS until
   the field actually has a non-zero value to clear. */
.ip .zero{flex:0 0 auto;align-self:center;margin:0 6px 0 2px;
  border:0;background:transparent;color:#b3b3b3;font:inherit;
  font-size:10.5px;letter-spacing:.02em;padding:4px 6px;border-radius:5px;
  cursor:pointer;transition:color .12s,background .12s}
.ip .zero:hover{color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}

.product-switch,.campaign-save{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Segmented control */
.mode-toggle{display:inline-flex;padding:3px;gap:0;border:1px solid var(--line);
  border-radius:9px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.toggle{font:inherit;font-size:12px;font-weight:600;padding:6px 14px;
  border:0;background:transparent;border-radius:7px;cursor:pointer;
  color:var(--ink);transition:.12s}
.toggle:hover{color:var(--accent)}
.toggle.on{background:var(--card);color:var(--ink);font-weight:700;
  box-shadow:var(--shadow)}
.campaign-save{margin-top:6px}
/* Saved/recall pickers and their text inputs mirror the .ip input style:
   theme-aware surface, matching border + radius, accent focus ring. */
.campaign-save input,.campaign-save select,.session-bar input,.session-bar select,
.product-switch select,#scenarioName{
  font:inherit;font-size:14px;padding:9px 10px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;background:var(--card);
  transition:border-color .12s}
.campaign-save input:focus,.campaign-save select:focus,.session-bar input:focus,
.session-bar select:focus,.product-switch select:focus,#scenarioName:focus{
  outline:0;border-color:var(--accent)}
.campaign-save input::placeholder,.session-bar input::placeholder,
#scenarioName::placeholder{color:#b3b3b3}
.campaign-save select,.session-bar select,.product-switch select{
  appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}

/* Buttons: clean but with character — accent-tinted glow, a soft sheen on the
   primary, smooth lift, sliding underline on text links. Premium micro-
   interactions, token-driven so it themes. */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;font-family:inherit;font-weight:600;
  font-size:13px;letter-spacing:0;border:1px solid var(--line);
  background:var(--card);color:var(--ink);padding:9px 16px;border-radius:9px;
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,
    transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
/* Signature: a diagonal light sheen sweeps across on hover. */
.btn:not(.btn-tertiary)::before{content:"";position:absolute;top:-10%;
  left:-75%;width:45%;height:120%;pointer-events:none;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,
    rgba(255,255,255,.38),transparent);
  transition:left .55s cubic-bezier(.5,0,.2,1)}
.btn:not(.btn-tertiary):hover::before{left:130%}
.btn:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 14%,transparent)}
.btn:active{transform:translateY(0);box-shadow:none;transition-duration:.05s}
.btn:focus-visible{outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}

/* Primary: gradient sheen + colored glow that intensifies on hover */
.btn-primary{border-color:transparent;color:#fff;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 86%,#fff) 0%,var(--accent) 60%,
    var(--accent-d) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
    0 3px 10px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn-primary:hover{border-color:transparent;color:#fff;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 92%,#fff) 0%,var(--accent) 55%,
    var(--accent-d) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
    0 7px 22px color-mix(in srgb,var(--accent) 48%,transparent)}
.btn-primary:active{box-shadow:0 2px 8px
  color-mix(in srgb,var(--accent) 40%,transparent)}

/* Ghost/secondary: faint accent wash appears on hover */
.btn-ghost{background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* Tertiary: quiet text with a sliding accent underline */
.btn-tertiary{border-color:transparent;background:transparent;
  color:var(--muted);padding-left:8px;padding-right:8px;box-shadow:none}
.btn-tertiary::after{content:"";position:absolute;left:8px;right:8px;
  bottom:5px;height:1.5px;background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.btn-tertiary:hover{color:var(--accent);border-color:transparent;
  transform:none;box-shadow:none}
.btn-tertiary:hover::after{transform:scaleX(1)}
.btn-sm{padding:7px 12px;font-size:12px}
@media(prefers-reduced-motion:reduce){
  .btn,.btn-tertiary::after,.btn:not(.btn-tertiary)::before{transition:none}
  .btn:not(.btn-tertiary)::before{display:none}
  .btn:hover{transform:none}}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
/* Subtle elevated surface that adapts to the theme (was a hardcoded light
   #fafafa — turned into white-on-dark mess on the Terminal theme). */
.metric{background:color-mix(in srgb,var(--ink) 4%,var(--card));
  border:1px solid var(--line);border-radius:10px;padding:14px}
.metric.big{grid-column:span 2}
@media(max-width:860px){.metric.big{grid-column:span 1}}
.m-label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.m-val{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric.big .m-val{font-size:26px}
/* Stronger profitability signal: colored left rail + tint + value colour */
.metric.is-green{background:var(--green-bg);border-left:3px solid var(--green)}
.is-green .m-val{color:var(--green)}
.metric.is-amber{background:var(--amber-bg);border-left:3px solid var(--amber)}
.is-amber .m-val{color:var(--amber)}
.metric.is-red{background:var(--red-bg);border-left:3px solid var(--red)}
.is-red .m-val{color:var(--red)}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tier{border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
.tier.cur{outline:2px solid var(--accent)}
.tier.warn{background:var(--amber-bg);border-color:#e7c97a}
.tier.bad{background:var(--red-bg);border-color:#e7a59f}
.tier-spend{font-size:13px;color:var(--muted)}
.tier-profit{font-size:20px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
.tier-sub{font-size:11px;color:var(--muted);margin-top:4px}

.sliders{display:grid;gap:18px}
.sliders label{display:grid;gap:8px;font-size:13px;color:var(--ink);font-weight:600}
.sliders output{color:var(--accent);font-variant-numeric:tabular-nums}
/* Custom range sliders — branded track + thumb, min/max anchors */
.sliders label{position:relative}
.sliders input[type=range],.probe input[type=range]{width:100%;
  -webkit-appearance:none;appearance:none;height:6px;border-radius:999px;
  background:var(--line);outline:0;cursor:pointer}
.sliders input[type=range]::-webkit-slider-thumb,
.probe input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;background:var(--card);
  border:3px solid var(--accent);box-shadow:var(--shadow);
  transition:transform .1s}
.sliders input[type=range]::-webkit-slider-thumb:active,
.probe input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}
.sliders input[type=range]::-moz-range-thumb,
.probe input[type=range]::-moz-range-thumb{width:20px;height:20px;
  border-radius:50%;background:var(--card);border:3px solid var(--accent);
  box-shadow:var(--shadow)}
.sliders input[type=range]::-moz-range-track,
.probe input[type=range]::-moz-range-track{height:6px;border-radius:999px;
  background:var(--line)}
.sliders input[type=range]:focus-visible,
.probe input[type=range]:focus-visible{box-shadow:0 0 0 3px
  color-mix(in srgb,var(--accent) 30%,transparent)}
.cur-select input{font:inherit;width:74px;padding:5px 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--ink)}
.probe{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.probe-head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--muted);margin-bottom:10px}
.probe-read{font-size:14px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.probe-read.is-green{color:var(--green)}
.probe-read.is-amber{color:var(--amber)}.probe-read.is-red{color:var(--red)}

.session-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.session-bar input{flex:1;min-width:160px}

/* Footer sits on --bg, so it uses --on-bg (legible on every field, incl.
   Pop/Riso's saturated backgrounds). Links read via weight + underline
   rather than a hue that may not contrast with the field. */
/* Consent opt-in banner (theme-aware, above the sticky bar) */
.consent{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:90;width:min(560px,calc(100vw - 24px));
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:14px 18px}
.consent p{font-size:12.5px;line-height:1.5;margin:0;flex:1 1 240px;
  color:var(--muted)}
.consent-btns{display:flex;gap:8px;flex:0 0 auto}
@media print{.consent{display:none!important}}

.foot{text-align:center;padding:26px;font-size:13px;color:var(--on-bg);
  line-height:1.9}
.foot a{color:var(--on-bg);text-decoration:underline;
  text-underline-offset:2px;font-weight:700}
.foot a:hover{opacity:.75}

/* ---------- landing page (home.html) ---------- */
.lp{max-width:1080px;margin:0 auto;padding:0 22px}
.lp-nav-cta{position:relative;overflow:hidden;display:inline-block;
  font:inherit;font-weight:600;font-size:13px;text-decoration:none;
  color:#fff;padding:9px 17px;border-radius:9px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 86%,#fff) 0%,var(--accent) 60%,
    var(--accent-d) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
    0 3px 10px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:box-shadow .15s,transform .12s cubic-bezier(.34,1.56,.64,1)}
.lp-nav-cta:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
    0 7px 22px color-mix(in srgb,var(--accent) 48%,transparent)}
/* Same sheen-sweep signature as the app buttons */
.lp-nav-cta::before,.btn-lg::before{content:"";position:absolute;top:-10%;
  left:-75%;width:45%;height:120%;pointer-events:none;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,
    rgba(255,255,255,.38),transparent);
  transition:left .55s cubic-bezier(.5,0,.2,1)}
.lp-nav-cta:hover::before,.btn-lg:hover::before{left:130%}
@media(prefers-reduced-motion:reduce){
  .lp-nav-cta::before,.btn-lg::before{display:none}}

.hero{text-align:center;padding:84px 0 64px}
.hero .pill{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.03em;
  color:var(--green);background:var(--green-bg);padding:6px 14px;border-radius:999px;
  margin-bottom:22px}
.hero h1{font-family:var(--display);font-size:clamp(34px,5.5vw,56px);
  font-weight:700;letter-spacing:-.015em;line-height:1.1;max-width:780px;
  margin:0 auto;color:var(--on-bg-strong)}
.hero h1 .accent{color:var(--accent);
  text-shadow:
    -1.5px -1.5px 0 var(--accent-stroke), 1.5px -1.5px 0 var(--accent-stroke),
    -1.5px 1.5px 0 var(--accent-stroke), 1.5px 1.5px 0 var(--accent-stroke),
    0 -2px 0 var(--accent-stroke), 0 2px 0 var(--accent-stroke),
    -2px 0 0 var(--accent-stroke), 2px 0 0 var(--accent-stroke)}
.hero p{font-size:clamp(16px,2vw,19px);color:var(--on-bg);max-width:580px;
  margin:22px auto 0}
.hero-cta{display:flex;gap:12px;justify-content:center;align-items:center;
  flex-wrap:wrap;margin-top:34px}
.btn-lg{position:relative;overflow:hidden;font:inherit;font-size:16px;
  font-weight:600;text-decoration:none;
  padding:14px 28px;border-radius:11px;display:inline-block;
  border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,
    transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.btn-lg:hover{transform:translateY(-2px)}
.btn-lg.primary{color:#fff;background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 86%,#fff) 0%,var(--accent) 60%,
    var(--accent-d) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
    0 4px 14px color-mix(in srgb,var(--accent) 38%,transparent)}
.btn-lg.primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
    0 9px 26px color-mix(in srgb,var(--accent) 50%,transparent)}
.btn-lg.ghost{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn-lg.ghost:hover{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.hero-note{font-size:13px;color:var(--on-bg);margin-top:18px}

.section{padding:56px 0;
  border-top:1px solid color-mix(in srgb,var(--on-bg) 28%,transparent)}
.section h2{font-family:var(--display);font-size:clamp(24px,3.5vw,34px);
  font-weight:700;letter-spacing:-.01em;text-align:center;margin-bottom:12px;
  color:var(--on-bg-strong)}
.section .lead{text-align:center;color:var(--on-bg);max-width:560px;
  margin:0 auto 40px;font-size:16px}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.feature-grid{grid-template-columns:1fr}}
.feature{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.feature h3{font-size:16px;font-weight:700;margin-bottom:8px}
.feature p{font-size:14px;color:var(--muted)}

.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.compare{grid-template-columns:1fr}}
.compare-col{border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;background:var(--card)}
.compare-col.us{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.compare-col .name{font-weight:700;font-size:15px}
.compare-col .price{font-size:28px;font-weight:800;margin:10px 0 4px;
  letter-spacing:-.02em}
.compare-col .price small{font-size:14px;font-weight:600;color:var(--muted)}
.compare-col ul{list-style:none;margin-top:16px;display:grid;gap:9px}
.compare-col li{font-size:13px;color:var(--muted);display:flex;gap:8px}
.compare-col li::before{content:"—";color:var(--line)}
.compare-col.us li::before{content:"+";color:var(--green);font-weight:700}

.cta-band{text-align:center;padding:72px 0}
.cta-band h2{font-family:var(--display);font-weight:700;margin-bottom:10px;
  color:var(--on-bg-strong)}
.cta-band p{color:var(--on-bg);margin-bottom:28px}

/* Legal / privacy document — a readable card panel, themed */
.legal{max-width:780px;margin:32px auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(22px,4vw,42px);color:var(--ink)}
.legal h1{font-family:var(--display);font-size:clamp(24px,3.5vw,32px);
  font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.legal .legal-lead{font-size:15px;color:var(--muted);line-height:1.6;
  margin:0 0 6px}
.legal h2{font-family:var(--display);font-size:17px;font-weight:700;
  letter-spacing:-.01em;margin:26px 0 8px;color:var(--ink)}
.legal p{font-size:14.5px;line-height:1.7;margin:0 0 13px;color:var(--ink)}
.legal ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.legal li{font-size:14px;line-height:1.6;color:var(--ink)}
.legal a{color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;font-weight:600}
.legal code{font-family:var(--mono);font-size:12.5px;
  background:color-mix(in srgb,var(--ink) 8%,transparent);
  padding:1px 5px;border-radius:4px}
.legal .muted{color:var(--muted)}
.legal .legal-meta{font-size:12px;margin:24px 0 0;padding-top:14px;
  border-top:1px solid var(--line)}

/* 404 */
.notfound{text-align:center;padding:72px 0 88px;max-width:620px;margin:0 auto}
.notfound .pill{display:inline-block;font-size:12px;font-weight:600;
  letter-spacing:.03em;color:var(--red);background:var(--red-bg);
  padding:6px 14px;border-radius:999px;margin-bottom:26px}
.nf-code{font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(96px,22vw,200px);letter-spacing:-.04em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.notfound h1{font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(24px,4vw,38px);margin:14px auto 0;max-width:18ch}
.notfound p{color:var(--muted);font-size:clamp(15px,2vw,17px);
  max-width:48ch;margin:18px auto 0}
.nf-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ---------- review feedback: hero, gauge, chart, groups, sticky ---------- */

/* Header trust badge */
/* Privacy "certificate" — the product's whole moat, treated like a seal */
/* Quiet certificate: noticed once, then fades to peripheral. Muted, not the
   wordmark's accent — two equal blues next to each other competed. */
.trust{display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:5px;
  padding:4px 8px;white-space:nowrap;text-transform:uppercase;cursor:default}
.trust svg{width:11px;height:11px;flex:0 0 auto;opacity:.8}
@media(max-width:820px){.trust{display:none}}

/* Health gauge */
.gauge{margin-bottom:20px;padding-top:6px}
.gauge-track{position:relative;display:flex;height:12px;border-radius:999px;
  overflow:hidden}
.gz{height:100%;transition:width .35s cubic-bezier(.22,1,.36,1)}
/* Muted, sophisticated zone colours (mixed toward the surface) with thin
   tick separators at the breakeven and target thresholds. */
.gz-red{background:color-mix(in srgb,var(--red) 70%,var(--card))}
.gz-amber{background:color-mix(in srgb,var(--amber) 62%,var(--card))}
.gz-green{background:color-mix(in srgb,var(--green) 62%,var(--card))}
.gz-red,.gz-amber{box-shadow:inset -1px 0 0
  color-mix(in srgb,var(--ink) 30%,transparent)}
.gauge-needle{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;
  background:var(--card);border:3px solid var(--ink);
  transform:translate(-50%,-50%);box-shadow:var(--shadow);
  transition:left .35s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.gauge-needle{transition:none}}
/* "You are here" tag floating above the needle with the live ROAS */
.gauge-tag{position:absolute;left:50%;bottom:calc(100% + 7px);
  transform:translateX(-50%);white-space:nowrap;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:5px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink)}
.gauge-tag::after{content:"";position:absolute;left:50%;top:100%;
  transform:translateX(-50%);border:4px solid transparent;
  border-top-color:var(--line)}
.gauge-tag.is-green{color:var(--green)}
.gauge-tag.is-amber{color:var(--amber)}
.gauge-tag.is-red{color:var(--red)}
.gauge-foot{display:flex;align-items:center;gap:9px;margin-top:14px;
  flex-wrap:wrap}
.gauge-verdict{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.gauge-verdict svg{width:17px;height:17px;flex:0 0 auto}
.gauge-verdict.is-red{color:var(--red)}
.gauge-verdict.is-amber{color:var(--amber)}
.gauge-verdict.is-green{color:var(--green)}

/* Hero metrics — the two numbers that matter most */
.hero-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media(max-width:700px){.hero-metrics{grid-template-columns:1fr}}
/* Hero: near-white surface, the number is the loudest thing on the page,
   a single state-colored accent rail. Sentence-case, muted label. */
.metric.hero{--st:var(--muted);background:var(--card);
  border:1px solid var(--line);border-left:5px solid var(--st);
  padding:22px 26px;box-shadow:var(--shadow)}
.metric.hero .m-label{display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--muted)}
.metric.hero .m-label::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--st);flex:0 0 auto}
.metric.hero .m-val{font-family:var(--display);font-size:clamp(46px,7vw,74px);
  font-weight:700;color:var(--ink);margin-top:8px;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric.hero .msym{font-size:.40em;font-weight:600;color:var(--muted);
  vertical-align:baseline;margin-right:.10em}
@media(max-width:700px){.metric.hero .m-val{font-size:clamp(40px,11vw,56px)}}
.metric.hero.is-green{--st:var(--green)}
.metric.hero.is-amber{--st:var(--amber)}
.metric.hero.is-red{--st:var(--red)}
.metric.hero.is-red .m-val{color:var(--red)}

/* Labeled metric groups */
.msection{margin-top:18px}
.msection:first-of-type{margin-top:0}
.msection-h{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.m-note{display:block;font-size:11px;margin-top:5px;font-weight:600}
.m-note.is-green{color:var(--green)}
.m-note.is-amber{color:var(--amber)}
.m-note.is-red{color:var(--red)}
/* sensitivity reference line + a clearer methodology link + select polish */
.slider-ref{font-size:11.5px;margin-top:2px}
#methodBtn{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
#methodBtn:hover{color:var(--accent);
  text-decoration-color:var(--accent)}
.product-switch select,.campaign-save select,.session-bar select{
  font-weight:600}
.product-switch select:hover,.campaign-save select:hover,
.session-bar select:hover{border-color:var(--ink)}

/* Inline definition tooltips (native title, styled affordance) */
.info{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  font-family:var(--font);font-size:11px;font-weight:700;font-style:normal;
  line-height:1;color:color-mix(in srgb,var(--accent) 70%,var(--muted));
  cursor:help;vertical-align:middle;margin-left:5px;flex:0 0 auto;
  transition:background .12s,color .12s,border-color .12s}
.info:hover,.info:focus{border-color:var(--accent);color:#fff;
  background:var(--accent);outline:0}
/* Bring the indicator forward when the user hovers the label/metric */
label:hover .info,.m-label:hover .info{border-color:var(--accent);
  color:var(--accent)}
label .info{margin-left:6px}

/* Rich themed tooltip */
#tip{position:fixed;z-index:80;max-width:380px;max-height:62vh;overflow:auto;
  background:var(--card);color:var(--ink);
  border:1px solid var(--accent);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:16px 18px;font-size:13px;line-height:1.62;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .13s ease,transform .13s ease}
#tip.show{opacity:1;transform:translateY(0)}
#tip .tip-h{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em;
  margin-bottom:7px;color:var(--accent);text-transform:none}
#tip p{margin:0 0 8px}
#tip p:last-child{margin-bottom:0}
#tip .tip-k{font-size:12px;font-weight:600;
  background:color-mix(in srgb,var(--ink) 7%,transparent);
  padding:1px 5px;border-radius:4px}
#tip .tip-rule{margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line);color:var(--muted);font-style:italic}

/* Profit curve chart */
.chart-wrap{width:100%;height:320px;position:relative;overflow:hidden;
  border-radius:8px}
.chart-hero{height:clamp(300px,40vw,440px)}
.curve-hit{fill:transparent;pointer-events:all;cursor:crosshair}
#curveTip{position:absolute;top:8px;pointer-events:none;
  background:var(--ink);color:var(--card);font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;padding:5px 9px;border-radius:6px;
  white-space:nowrap;box-shadow:var(--shadow-lg);transition:left .05s linear}
#curveTip[hidden]{display:none}
#curveTip.neg{background:var(--red)}
.curve-line.draw{stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:curvedraw .7s ease forwards}
@keyframes curvedraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .curve-line.draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0}}

/* Live-results tabs */
/* Underline tabs (Stripe/Linear pattern) — never a filled pill that competes
   with the primary action. Selected = ink text + accent underline. */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab{font:inherit;font-size:12.5px;font-weight:600;padding:8px 12px;
  border:0;background:transparent;cursor:pointer;color:var(--muted);
  position:relative;transition:color .12s}
.tab::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;
  height:2px;border-radius:2px;background:transparent;transition:background .12s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);font-weight:700}
.tab.on::after{background:var(--accent)}
.msection[hidden]{display:none}
#curve{width:100%;height:100%;display:block}
.curve-area{fill:url(#cg)}
.cg-top{stop-color:var(--accent);stop-opacity:.22}
.cg-bot{stop-color:var(--accent);stop-opacity:0}
.curve-line{fill:none;stroke:var(--accent);stroke-width:3.5;
  stroke-linejoin:round;stroke-linecap:round}
.curve-zero{stroke:var(--red);stroke-width:1.5;opacity:.7}
.curve-target{stroke:var(--green);stroke-width:1.5;stroke-dasharray:6 5}
.curve-now{stroke:var(--accent);stroke-width:2;stroke-dasharray:2 5;
  stroke-linecap:round;opacity:.55}
.curve-now-cap{fill:var(--accent)}
.curve-dot{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.curve-sat{stroke:var(--amber);stroke-width:2;stroke-dasharray:5 4}
.curve-sat-lbl{fill:var(--amber);font-size:13px;font-weight:700;
  font-family:var(--font)}
.curve-axis{fill:var(--muted);font-size:14px;font-weight:600;
  font-family:var(--font)}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;
  font-size:12px;color:var(--muted)}
.chart-legend i{display:inline-block;width:14px;height:0;vertical-align:middle;
  margin-right:6px;border-top-width:3px;border-top-style:solid}
.lg-profit{border-top-color:var(--accent)}
.lg-zero{border-top-color:var(--red)}
.lg-target{border-top-color:var(--green);border-top-style:dashed}
.lg-now{border-top-color:var(--ink);border-top-style:dotted;opacity:.6}

/* Tier delta cue */
.tier-delta{font-size:11px;font-weight:700;margin-top:4px}
.tier-delta.up{color:var(--green)}.tier-delta.down{color:var(--red)}

/* Sticky summary bar — quiet, weightless: thin, muted, fades into the
   background until you need it (no heavy accent slab / drop shadow). */
body:has(.stickybar){padding-bottom:38px}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;
  background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:saturate(1.1) blur(6px);
  border-top:1px solid var(--line);pointer-events:none}
.sb-live{display:flex;align-items:center;gap:6px;padding:7px 16px;
  font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.sb-dot{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent);
  animation:sbpulse 2.2s infinite}
@keyframes sbpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 45%,transparent)}
  70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.sb-dot{animation:none}}
/* Label + value are one unit: tight gap, shared baseline, label muted */
.sb-item{display:flex;align-items:baseline;gap:6px;padding:7px 16px}
.sb-label{font-size:11px;letter-spacing:0;color:var(--muted)}
.sb-label::after{content:":"}
.sb-val{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sb-val.is-green{color:var(--green)}.sb-val.is-amber{color:var(--amber)}
.sb-val.is-red{color:var(--red)}
@media(max-width:560px){.sb-item,.sb-live{padding:7px 11px}.sb-val{font-size:13px}}

/* Goal-seek solver */
.solver{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.solver-head{font-size:12px;color:var(--muted);margin-bottom:10px}
.solver-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.solver-row .ip{margin-top:0;max-width:160px}
.solver-out{font-size:13px;font-weight:600;line-height:1.5;flex:1 1 240px;
  min-width:200px}
.solver-out b{font-weight:800;font-variant-numeric:tabular-nums}
.solver-out.ok{color:var(--green)}
.solver-out.no{color:var(--red)}
.solver-out .fixit{display:block;margin-top:4px;color:var(--muted);
  font-weight:500;font-style:italic}
.scen-note{margin:-4px 0 14px}

/* Share confirmation */
.share-msg{margin-top:10px;font-size:12px;font-weight:600;color:var(--green)}
.share-msg[hidden]{display:none}

/* Sessions: "More" menu + destructive action */
.more{position:relative}
.more>summary{list-style:none;display:inline-flex}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"▾";margin-left:6px;font-size:10px;opacity:.7}
/* Opens UPWARD: this menu lives in the last card near the bottom, and the
   fixed sticky bar would otherwise cover (and steal clicks from) the lower
   items. Dropping up keeps every item clear of the bar. */
.more-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:45;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:6px;display:grid;gap:2px;min-width:190px}
.more-menu .btn{width:100%;justify-content:flex-start;text-align:left}
.more>summary::after{content:"▴"}
.btn.danger{color:var(--red)}
.btn.danger:hover{color:#fff;background:var(--red);border-color:var(--red)}

/* Methodology modal */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:22px;background:rgba(15,18,28,.5)}
.modal[hidden]{display:none}
.modal-box{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:560px;
  width:100%;max-height:86vh;overflow:auto;padding:26px;position:relative}
.modal-box h3{font-family:var(--display);font-size:21px;font-weight:700;margin-bottom:8px}
.modal-box .muted{margin:10px 0}
.modal-x{position:absolute;top:12px;right:14px;width:30px;height:30px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;font-size:18px;line-height:1;cursor:pointer}
.method-pre{font-family:var(--mono);font-size:11.5px;line-height:1.7;
  background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:8px;
  padding:14px;overflow:auto;white-space:pre;color:var(--ink)}

/* Alert banner */
.alertbar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  padding:12px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;
  color:var(--red);background:var(--red-bg);
  border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
  box-shadow:var(--shadow)}
.alertbar[hidden]{display:none}
.alertbar b{font-weight:800}
.alertbar::before{content:"!";display:inline-flex;align-items:center;
  justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:800;font-size:12px;flex:0 0 auto}

/* Monitoring card */
.mon-grid{display:grid;grid-template-columns:1fr 2fr;gap:22px}
@media(max-width:760px){.mon-grid{grid-template-columns:1fr}}
.mon-rules{display:grid;gap:12px;align-content:start}
.mon-hist-head{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:10px}
.trend-wrap{width:100%;height:220px}
#trend{width:100%;height:100%;display:block}
.trend-line{fill:none;stroke:var(--accent);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round}
.trend-area{fill:var(--accent);opacity:.10}
.trend-zero{stroke:var(--red);stroke-width:1.5;opacity:.7}
.trend-dot{fill:var(--accent);stroke:var(--card);stroke-width:2}
.trend-axis{fill:var(--muted);font-size:11px;font-family:var(--font)}

/* Channel mix editor */
/* In-card "how it works / try it" explainer */
.howto{background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:10px;padding:12px 15px;margin-bottom:14px;
  font-size:12.5px;line-height:1.55;color:var(--ink)}
.howto p{margin:0}
.howto p+p{margin-top:7px}
.howto b{font-weight:700}
.chan-rows{display:grid;gap:8px}
.chan-row{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:8px;align-items:center}
.chan-head{margin-bottom:2px}
.chan-head span{font-size:11px;color:var(--muted);font-weight:600}
@media(max-width:680px){.chan-row{grid-template-columns:1fr 1fr;}
  .chan-head{display:none}}
.chan-row input{font:inherit;font-size:14px;padding:9px 10px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;background:var(--card)}
.chan-row input:focus{outline:0;border-color:var(--accent)}
.chan-x{border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:16px}
.chan-x:hover{border-color:var(--red);color:var(--red)}
.chan-foot{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-top:14px}
.chan-blend{font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* Multi-SKU blended */
.sku-rows{display:grid;gap:8px}
.sku-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;
  align-items:center;font-size:14px}
.sku-row .w{width:80px;font:inherit;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink)}
.sku-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px;
  font-size:13px;color:var(--muted)}
.sku-toggle{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}

/* The generated report is screen-hidden; print swaps to it. */
#printDoc{display:none}

/* Print / PDF — an executive deliverable: hero numbers, embedded chart,
   interpreted ratios, branded running header/footer. Fixed palette. */
@media print{
  @page{margin:16mm 14mm 18mm;}
  body>*{display:none!important}
  body{background:#fff;padding:0;color:#14181f;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    font-family:var(--font)}
  #printDoc{display:block!important;font-size:12px;line-height:1.45;
    --acc:#1f6feb;--ink:#14181f;--mut:#5b6470;--pos:#137a43;--neg:#b42318;
    --line:#d7dbe0}
  #printDoc .pos{color:var(--pos)}
  #printDoc .neg{color:var(--neg)}

  /* Privacy/value-prop disclaimer — static, end of the last page */
  .pd-disclaimer{margin-top:26px;padding-top:12px;
    border-top:2px solid var(--ink);font-size:10px;line-height:1.5;
    color:var(--mut);break-inside:avoid}
  .pd-disclaimer b{color:var(--ink)}

  /* Cover / hero */
  .pd-cover{border-bottom:3px solid var(--ink);padding-bottom:18px;
    margin-bottom:22px}
  .pd-brand{font-family:var(--display);font-size:22px;font-weight:800;
    color:var(--acc);letter-spacing:-.02em}
  .pd-cover h1{font-family:var(--display);font-size:32px;font-weight:800;
    letter-spacing:-.02em;margin:2px 0 4px}
  .pd-meta{font-size:11px;color:var(--mut);margin-bottom:16px}
  .pd-hero{display:flex;gap:14px}
  .pd-hero-c{flex:1;border:1px solid var(--line);border-radius:10px;
    padding:14px 16px}
  .pd-hero-c span{display:block;font-size:11px;color:var(--mut);
    margin-bottom:4px}
  .pd-hero-c b{font-size:30px;font-weight:800;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .pd-summary{font-size:13px;color:var(--ink);margin-top:14px;max-width:62ch}

  .pd-sec{margin-top:22px;break-inside:avoid}
  .pd-sec h2{font-family:var(--display);font-size:16px;font-weight:800;
    letter-spacing:-.01em;margin:0 0 10px;padding-left:9px;
    border-left:4px solid var(--acc)}
  .pd-chart{width:100%;height:auto;border:1px solid var(--line);
    border-radius:8px;padding:6px;background:#fff}
  .pd-leg{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:10.5px;
    color:var(--mut)}
  .pd-leg i{display:inline-block;width:18px;height:4px;border-radius:2px;
    vertical-align:middle;margin-right:6px}

  /* Key/value + tables */
  .pd-kv{width:100%;border-collapse:collapse}
  .pd-kv td{padding:6px 4px;border-bottom:1px solid var(--line);
    vertical-align:top}
  .pd-k{color:var(--mut)}
  .pd-v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;
    white-space:nowrap}
  .pd-v.tot{border-top:1.5px solid var(--ink);font-weight:800}
  .pd-2col{display:flex;gap:28px}.pd-2col>div{flex:1}
  .pd-compact .pd-kv td{padding:4px 4px;font-size:11px}

  .pd-scale{width:100%;border-collapse:collapse}
  .pd-scale td{padding:7px 6px;border-bottom:1px solid var(--line);
    font-variant-numeric:tabular-nums}
  /* Current row: neutral highlight + ink bar so it doesn't merge with the
     accent bars on the other rows. */
  .pd-scale tr.cur td{background:#f1f3f5;font-weight:700}
  .pd-scale tr.cur td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
  .pd-scale tr.cur .pd-bar span{background:var(--ink)}
  .pd-scale .pd-bar{width:46%}
  .pd-scale .pd-bar span{display:block;height:9px;border-radius:3px;
    background:var(--acc);min-width:2px}
  .pd-scale .pd-v{width:90px}

  .pd-list{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7}
  .pd-list b{font-variant-numeric:tabular-nums}

  .pd-cards{display:flex;flex-wrap:wrap;gap:10px}
  .pd-card{flex:1 1 30%;min-width:160px;border:1px solid var(--line);
    border-radius:9px;padding:12px 14px}
  .pd-card-l{font-size:11px;color:var(--mut)}
  .pd-card-v{font-size:21px;font-weight:800;letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;margin:2px 0 4px}
  .pd-card-n{font-size:10.5px;display:flex;align-items:flex-start;gap:5px}
  .pd-ic{width:13px;height:13px;flex:0 0 auto;margin-top:1px}
}