/* ==========================================================================
   Comment Intel — app.css
   Hand-written, no framework, no build step, no CDN. One file, served by
   whitenoise/nginx out of STATIC_ROOT.

   Why no framework: the product's whole visual identity is the PDF that
   report_pipeline/render.py produces. That renderer is ~200 lines of plain CSS
   with a fixed palette; a utility framework would ship 40 KB to reproduce
   something we can express in tokens and then still not match it. So the tokens
   below are lifted from render.py's PAGE_TMPL and extended for screen use:
   the app should read as the same publication as the report it generates.

   Structure:
     1. tokens (light + dark)      6. buttons
     2. reset + base               7. badges, alerts, empty states
     3. layout + header/footer     8. reports (list, detail, job progress)
     4. typography                 9. analytics (stat grid, charts, tables)
     5. cards + forms             10. responsive, print, a11y prefs

   Dark mode is expressed three times on purpose:
     :root                                  -> light default
     @media (prefers-color-scheme: dark)    -> system preference
     :root[data-theme="dark"|"light"]       -> explicit user override, wins both
   The override has to beat the media query in BOTH directions, which is why the
   light block is repeated at the bottom rather than relying on the cascade.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  color-scheme: light;

  /* -- the ramp. Cool neutral, not warm paper: not one app in this audience's
     rotation (Instagram, WhatsApp, Birbank, m10) uses a cream page, and warm
     paper reads as "printed document", not as software. Every value below was
     measured, not estimated. -- */
  --bg:        #eef1f5;   /* page ground */
  --card:      #ffffff;   /* every card. ink 17.51:1, ink-2 9.44, ink-3 5.67 */
  --card-2:    #f5f7fa;   /* inset panels, comment blocks. ink-3 5.28:1 */
  --line:      #dfe3ea;   /* hairlines and card borders */
  --line-2:    #ccd3de;   /* bar TRACKS and input borders — 1.51:1 on card, visible */
  --ink:       #141a21;   /* primary text, 17.51:1 */
  --ink-2:     #3d4753;   /* secondary text and body prose, 9.44:1 */
  --ink-3:     #5d6875;   /* meta and labels — 5.67 / 5.28 / 5.01, AA on ALL THREE grounds */

  --brand:     #146b62;   /* the ONE brand accent. 6.35:1 on card */
  --brand-hover:#0f544e;
  --brand-bg:  #e3f0ee;   /* LOUD PANEL 1 — the answer card. ink on it 14.98:1 */
  --brand-ink: #155f58;   /* text on --brand-bg */

  /* Valence is a SEPARATE system from brand. A sentiment product cannot spend
     its brand colour on "bad news" — every branded element would then read as
     a warning. */
  --pos:       #17693c;  --pos-bg: #e2f2e8;
  --neg:       #b3241c;  --neg-bg: #fbe6e4;
  --neu:       #5d6875;  --neu-bg: #eceff3;   /* neu == ink-3: neutral is the absence of valence */
  --warn:      #8a5a00;  --warn-bg: #fdf0d9;  /* LOUD PANEL 2 — priority action only */
  --danger:    #b3241c;  --danger-bg: #fbe6e4;

  --focus:     #0b57d0;   /* never the brand colour — a focus ring must not read as decoration */
  --btn-fg:    #ffffff;

  /* Data series, addressed by INTEGER INDEX. Never derived from the brand
     palette and never supplied by the model. All ≥3:1 against --line-2. */
  --s1: #146b62;  --s2: #8a5a00;  --s3: #5b4a9e;  --s4: #a03668;
  --s5: #2a6f8f;  --s6: #6b6257;

  /* -- compatibility aliases. ~300 existing declarations reference these names;
     they are declared ONCE and resolve through var() against whatever ramp is
     active, which is what removes the four duplicated palette blocks this file
     used to carry (and had to keep hand-synchronised). New code should use the
     ramp names above. -- */
  --paper: var(--bg);
  --surface: var(--card);
  --surface-2: var(--card-2);
  --muted: var(--ink-3);
  --soft: var(--line-2);
  --teal: var(--brand);
  --teal-hover: var(--brand-hover);
  --teal-tint: var(--brand-bg);
  /* --terra is GONE as a system: it was triple-booked as brand secondary, the
     priority-action frame and a de-facto alarm, so it encoded nothing. It
     survives only as an alias onto the alarm token so no rule breaks while the
     remaining call sites are removed. */
  --terra: var(--warn);
  --terra-tint: var(--warn-bg);
  --ok: var(--pos);
  --ok-tint: var(--pos-bg);
  --warn-tint: var(--warn-bg);
  --danger-tint: var(--danger-bg);

  /* Depth is a 1px border plus the card/bg luminance step (#fff on #eef1f5),
     which is the WhatsApp/Birbank idiom. Blurred shadows are real paint cost on
     2020-era Samsung/Xiaomi silicon and no app in this audience's rotation uses
     them. Kept as tokens so existing rules resolve; both are now hairlines. */
  --shadow-1: 0 1px 0 var(--line);
  --shadow-2: 0 1px 0 var(--line);

  /* -- spacing: 4px base, seven steps. Replaces 43 distinct padding literals. -- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* -- type scale. rem on a 16px root. HARD FLOOR 13px: below that the marks on
     ə ı ğ ş ç ö ü are the first thing to go, and this file used to ship 9.5px
     chips and 11px kickers. -- */
  --t-1: 0.8125rem;  /* 13px — meta, footnotes, badges, bar labels */
  --t-2: 0.875rem;   /* 14px — dense secondary */
  --t-3: 0.9375rem;  /* 15px — body prose */
  --t-4: 1rem;       /* 16px — row labels, form inputs (16 stops iOS zoom-on-focus) */
  --t-5: 1.0625rem;  /* 17px — card titles */
  --t-6: 1.25rem;    /* 20px — the priority sentence */
  --t-7: clamp(1.25rem, 5.2vw, 1.5rem);  /* 20→24px — THE VERDICT */
  --t-8: 1.5rem;     /* 24px — KPI numbers */

  /* -- radii. Birbank runs 16-20px; 14 reads as an app without looking toylike
     at 360px. -- */
  --r-card: 14px; --r-inner: 10px; --r-sm: 6px; --r-bar: 4px;
  color-scheme: light;
  --radius:     10px;
  --radius-sm:  7px;
  --radius-pill: 999px;
  /* system-ui first: on a market that is 84% Android / 80% Chrome, Roboto covers
     the full Azerbaijani set, costs 0 KB and renders instantly. "Noto Sans"
     moves AHEAD of "Helvetica Neue", which has no schwa (ə) — it is only
     reached when -apple-system, Segoe UI and Roboto all fail, but when it is
     reached the glyph falls back mid-word. */
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --shell:   1080px;
  --shell-narrow: 460px;
  --gap:     clamp(16px, 3.2vw, 28px);
}

/* Dark. The RAMP ONLY — the aliases above resolve through var() and never need
   restating, which is what collapsed four hand-synchronised palette blocks into
   one declaration plus three overrides. */
/* NOTE (2026-07-29): the product is WHITE by default. The selector below used to
   be `:root:not([data-theme="light"])`, so this block fired for ANY visitor whose
   OS is in dark mode and turned the whole marketing surface black — not the
   designed look. Dark is now OPT-IN only: it needs data-theme="dark", which only
   the theme toggle sets (and which the identical ramp below already covers, so
   the toggle keeps working on every OS). Do not widen this selector again. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg:        #101418;
    --card:      #181d23;
    --card-2:    #20262e;
    --line:      #2c333c;
    --line-2:    #3a434e;   /* 1.69:1 on card — a track you can actually see */
    --ink:       #eef1f5;
    --ink-2:     #c2cad4;
    --ink-3:     #98a3b0;
    --brand:     #5fc4b6;  --brand-hover: #7fd6c9;
    --brand-bg:  #12302d;  --brand-ink: #7fd6c9;
    --pos:       #5cc286;  --pos-bg: #122a1c;
    --neg:       #ff8b7e;  --neg-bg: #331a17;
    --neu:       #98a3b0;  --neu-bg: #232a32;
    --warn:      #e0aa4e;  --warn-bg: #2e2413;
    --danger:    #ff8b7e;  --danger-bg: #331a17;
    --focus:     #8ab4f8;
    /* Dark ink on the light teal button: white on #5fc4b6 is 2.09:1. */
    --btn-fg:    #101418;
    --s1: #5fc4b6;  --s2: #e0aa4e;  --s3: #a99cf0;  --s4: #f08bb4;
    --s5: #7fb8de;  --s6: #a49a8c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #101418;
  --card:      #181d23;
  --card-2:    #20262e;
  --line:      #2c333c;
  --line-2:    #3a434e;   /* 1.69:1 on card — a track you can actually see */
  --ink:       #eef1f5;
  --ink-2:     #c2cad4;
  --ink-3:     #98a3b0;
  --brand:     #5fc4b6;  --brand-hover: #7fd6c9;
  --brand-bg:  #12302d;  --brand-ink: #7fd6c9;
  --pos:       #5cc286;  --pos-bg: #122a1c;
  --neg:       #ff8b7e;  --neg-bg: #331a17;
  --neu:       #98a3b0;  --neu-bg: #232a32;
  --warn:      #e0aa4e;  --warn-bg: #2e2413;
  --danger:    #ff8b7e;  --danger-bg: #331a17;
  --focus:     #8ab4f8;
  /* Dark ink on the light teal button: white on #5fc4b6 is 2.09:1. */
  --btn-fg:    #101418;
  --s1: #5fc4b6;  --s2: #e0aa4e;  --s3: #a99cf0;  --s4: #f08bb4;
  --s5: #7fb8de;  --s6: #a49a8c;
}

/* Explicit light wins over the system preference. */
:root[data-theme="light"] {
  color-scheme: light;
  /* -- the ramp. Cool neutral, not warm paper: not one app in this audience's
     rotation (Instagram, WhatsApp, Birbank, m10) uses a cream page, and warm
     paper reads as "printed document", not as software. Every value below was
     measured, not estimated. -- */
  --bg:        #eef1f5;   /* page ground */
  --card:      #ffffff;   /* every card. ink 17.51:1, ink-2 9.44, ink-3 5.67 */
  --card-2:    #f5f7fa;   /* inset panels, comment blocks. ink-3 5.28:1 */
  --line:      #dfe3ea;   /* hairlines and card borders */
  --line-2:    #ccd3de;   /* bar TRACKS and input borders — 1.51:1 on card, visible */
  --ink:       #141a21;   /* primary text, 17.51:1 */
  --ink-2:     #3d4753;   /* secondary text and body prose, 9.44:1 */
  --ink-3:     #5d6875;   /* meta and labels — 5.67 / 5.28 / 5.01, AA on ALL THREE grounds */

  --brand:     #146b62;   /* the ONE brand accent. 6.35:1 on card */
  --brand-hover:#0f544e;
  --brand-bg:  #e3f0ee;   /* LOUD PANEL 1 — the answer card. ink on it 14.98:1 */
  --brand-ink: #155f58;   /* text on --brand-bg */

  /* Valence is a SEPARATE system from brand. A sentiment product cannot spend
     its brand colour on "bad news" — every branded element would then read as
     a warning. */
  --pos:       #17693c;  --pos-bg: #e2f2e8;
  --neg:       #b3241c;  --neg-bg: #fbe6e4;
  --neu:       #5d6875;  --neu-bg: #eceff3;   /* neu == ink-3: neutral is the absence of valence */
  --warn:      #8a5a00;  --warn-bg: #fdf0d9;  /* LOUD PANEL 2 — priority action only */
  --danger:    #b3241c;  --danger-bg: #fbe6e4;

  --focus:     #0b57d0;   /* never the brand colour — a focus ring must not read as decoration */
  --btn-fg:    #ffffff;

  /* Data series, addressed by INTEGER INDEX. Never derived from the brand
     palette and never supplied by the model. All ≥3:1 against --line-2. */
  --s1: #146b62;  --s2: #8a5a00;  --s3: #5b4a9e;  --s4: #a03668;
  --s5: #2a6f8f;  --s6: #6b6257;
}


/* ------------------------------------------------------- 2. reset + base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  /* Long Instagram URLs and Azerbaijani compounds must never widen the page. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--gap) 0;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--teal-tint); color: var(--ink); }


/* ------------------------------------------- 3. layout, header and footer */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.shell--narrow { max-width: var(--shell-narrow); }

main.main {
  flex: 1 0 auto;
  padding-block: clamp(24px, 5vw, 48px) clamp(40px, 7vw, 72px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal);
  color: var(--btn-fg);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--btn-fg); }

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* color-mix is recent; a solid background is the fallback everywhere else. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-head { background: var(--paper); }
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 24px);
  min-height: 62px;
  flex-wrap: wrap;
  padding-block: 8px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand__mark { color: var(--terra); font-size: 13px; line-height: 1; }
.brand__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.brand__tag {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.nav a {
  display: inline-block;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] {
  background: var(--teal-tint);
  color: var(--teal);
  font-weight: 650;
}

.head-end {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Native <details> menu: no JS, no focus trap to get wrong, closes on Esc. */
.usermenu { position: relative; }
.usermenu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-2);
  max-width: 42vw;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { border-color: var(--line-2); color: var(--ink); }
.usermenu__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usermenu__caret { color: var(--muted); font-size: 13px; }
.usermenu[open] > summary { border-color: var(--line-2); }

.usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 8px;
  z-index: 50;
}
.usermenu__meta {
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.usermenu__meta strong { display: block; font-size: 14px; }
.usermenu__meta span { display: block; font-size: 13px; color: var(--muted); }
.usermenu__panel a,
.usermenu__panel button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
}
.usermenu__panel a:hover,
.usermenu__panel button:hover { background: var(--surface-2); color: var(--ink); }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--line-2); color: var(--ink); }

.site-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding-block: 20px 28px;
  font-size: 13px;
  color: var(--muted);
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  justify-content: space-between;
}
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--ink-2); }


/* ------------------------------------------------------- 4. typography */
h1, h2, h3, h4 {
  margin: 0 0 .4em;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
}
h1 { font-size: clamp(26px, 4.4vw, 38px); }
h2 { font-size: clamp(19px, 2.6vw, 23px); }
h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.005em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--terra);
  margin: 0 0 10px;
}

.lede {
  font-size: 16.5px;
  color: var(--ink-2);
  max-width: 62ch;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono  { font-family: var(--mono); font-size: .92em; }
.nowrap { white-space: nowrap; }
.url { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.tabular { font-variant-numeric: tabular-nums; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px var(--gap);
  margin-bottom: var(--gap);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.page-head h1 { margin: 0; }
.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.section { margin-top: clamp(28px, 5vw, 44px); }
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.section__head h2 { margin: 0; }
.section__note { font-size: 13px; color: var(--muted); }


/* -------------------------------------------------- 5. cards and forms */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 26px);
  box-shadow: var(--shadow-1);
}
.card + .card { margin-top: 16px; }
.card--flush { padding: 0; overflow: hidden; }
.card--inset { background: var(--surface-2); box-shadow: none; }
.card--accent { border-left: 3px solid var(--teal); }

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.card__title { margin: 0; font-size: 16px; font-weight: 700; }
.card__note { font-size: 13px; color: var(--muted); }

.auth {
  max-width: var(--shell-narrow);
  margin-inline: auto;
}
.auth__head { text-align: center; margin-bottom: 22px; }
.auth__head h1 { font-size: clamp(24px, 5vw, 30px); }
.auth__head p { color: var(--muted); font-size: 14.5px; margin: 0; }
.auth__alt {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

form { margin: 0; }

.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }

.field > label,
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Styled by element, not by class: the forms are written by another module and
   may or may not put a class on the widget. Element selectors always land. */
input:is([type="text"], [type="email"], [type="password"], [type="url"],
         [type="number"], [type="search"], [type="tel"], [type="date"]),
select,
textarea {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  /* 16px is a hard floor, not a taste decision: iOS Safari zooms the viewport
     on focus for any field below it, and the zoom does not reverse on blur. At
     15.5px every form in the product lurched sideways the moment it was tapped
     — including the URL paste, which is the single most important interaction
     in the app and is performed almost entirely on phones. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 110px; resize: vertical; }

input:is([type="text"], [type="email"], [type="password"], [type="url"],
         [type="number"], [type="search"], [type="tel"], [type="date"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--teal-tint); }
}

input::placeholder, textarea::placeholder { color: var(--soft); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--teal);
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  vertical-align: -2px;
}

.field--error input, .field--error select, .field--error textarea {
  border-color: var(--danger);
}
.field--check > label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.req {
  color: var(--terra);
  margin-left: 3px;
  font-weight: 700;
}

.hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
/* Django renders help_text as a <ul> in some form styles; flatten it. */
.hint ul, .errorlist { margin: 0; padding: 0; list-style: none; }

.err, .errorlist li {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--danger);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.form-actions--split { justify-content: space-between; }


/* ------------------------------------------------------------ 6. buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--teal-hover); color: var(--btn-fg); }
.btn:disabled, .btn[aria-disabled="true"] {
  /* The busy label after the money interaction ("Növbəyə alınır…") lived here
     and was unreadable: the old pair measured 1.88:1. A disabled control still
     has to be legible — it is telling the user what is happening. */
  background: var(--line-2);
  color: var(--ink-2);
  border-color: var(--line-2);
  cursor: not-allowed;
}

.btn--accent { background: var(--terra); }
.btn--accent:hover { background: color-mix(in srgb, var(--terra) 84%, #000); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink-2);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--soft); color: var(--ink); }

.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }

.btn--sm { padding: 7px 13px; font-size: 13.5px; }
.btn--block { width: 100%; }

.btn-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link--danger { color: var(--danger); }

.inline-form { display: inline; }


/* -------------------------------- 6b. mode tabs + role rows (create page)
   The report-create page offers its four analysis modes as tabs. Progressive
   enhancement keyed on the `.js` class the page sets before first paint:
     no JS  -> `.tabs` hidden, every `.tabpanel` visible with its own legend,
               so a plain single-post paste still submits (mode defaults post).
     JS on  -> the strip shows, and only the `.is-active` panel renders.
   Reuses the ramp tokens; no new colours. */
.tabs {
  display: none;               /* revealed only once JS is confirmed */
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-5);
  border-bottom: 1px solid var(--line);
}
.js .tabs { display: flex; }

.tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;         /* the active underline sits on the strip line */
  background: transparent;
  padding: var(--s-3) var(--s-4);
  font-family: inherit;
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.tabpanel { display: block; }
.js .tabpanel { display: none; }
.js .tabpanel.is-active { display: block; }

/* The label a tab would otherwise carry — shown only when the strip is not
   (i.e. JS off), so the panels stay self-describing either way. */
.mode-panel__legend {
  margin: 0 0 var(--s-3);
  font-size: var(--t-5);
  font-weight: 600;
  color: var(--ink);
}
.js .mode-panel__legend { display: none; }

.mode-panel__hint {
  margin: 0 0 var(--s-4);
  font-size: var(--t-2);
  line-height: 1.55;
  color: var(--ink-3);
}

/* A repeatable handle/url + role pairing in the two comparison modes. */
.role-rows { display: flex; flex-direction: column; gap: var(--s-3); }
.role-row { display: flex; gap: var(--s-2); align-items: flex-start; }
.role-row > input { flex: 1 1 auto; min-width: 0; }
.role-row > select { flex: 0 0 auto; width: auto; min-width: 8.5rem; }
.role-add { margin-top: var(--s-3); }
.role-add[hidden] { display: none; }


/* ------------------------------------ 7. badges, alerts, empty states */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.badge--pending, .badge--queued { background: var(--surface-2); color: var(--muted); }
.badge--running { background: var(--warn-tint); color: var(--warn); }
.badge--running::before { animation: pulse 1.6s ease-in-out infinite; }
.badge--done   { background: var(--ok-tint);     color: var(--ok); }
.badge--failed { background: var(--danger-tint); color: var(--danger); }
.badge--shared { background: var(--teal-tint);   color: var(--teal); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.alert {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink-2);
}
.alert + .alert { margin-top: 10px; }
.alert p:last-child { margin-bottom: 0; }
.alert__icon { flex: 0 0 auto; font-size: 15px; line-height: 1.5; }
.alert--success { background: var(--ok-tint);     border-color: var(--ok);     color: var(--ink); }
.alert--error   { background: var(--danger-tint); border-color: var(--danger); color: var(--ink); }
.alert--warning { background: var(--warn-tint);   border-color: var(--warn);   color: var(--ink); }
.alert--info    { background: var(--teal-tint);   border-color: var(--teal);   color: var(--ink); }
.alert--debug   { background: var(--surface-2);   border-color: var(--soft); }

.messages { margin-bottom: var(--gap); }

.empty {
  text-align: center;
  padding: clamp(32px, 7vw, 64px) 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty__mark { font-size: 28px; color: var(--soft); line-height: 1; margin-bottom: 12px; }
.empty h2 { font-size: 19px; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.empty .btn { margin-top: 18px; }

.notice-page {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(30px, 8vw, 70px);
}
.notice-page__code {
  font-size: clamp(56px, 14vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--terra);
  margin: 0 0 6px;
}
.notice-page h1 { font-size: clamp(21px, 4vw, 27px); }
.notice-page p { color: var(--ink-2); }
.notice-page .form-actions { justify-content: center; }


/* ------------------------------------------------------------ 8. reports */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters a {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--surface);
}
.filters a:hover { border-color: var(--line-2); color: var(--ink); }
.filters a[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.report-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.report-item:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.report-item__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.report-item__title a {
  color: var(--ink);
  text-decoration: none;
}
/* Stretched link: the whole card is the hit target, but the DOM keeps a single
   real <a> so keyboard and screen-reader navigation stay sane. */
.report-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.report-item__title a:hover { color: var(--teal); }
/* The report's headline sentence. Spans both grid columns so it runs the full
   width of the card rather than being squeezed beside the status badges, and
   clamps to two lines so one long verdict cannot make a list row three times
   the height of its neighbours. */
.report-item__verdict {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.report-item__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.report-item__meta b { color: var(--ink-2); font-weight: 600; }
.report-item__side {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
}
.stat--inset { background: var(--surface-2); border-color: transparent; }
.stat__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 7px;
}
.stat__value {
  display: block;
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat__note { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }
.stat--accent .stat__value { color: var(--terra); }
.stat--teal   .stat__value { color: var(--teal); }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.preview {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  overflow: hidden;
}
.preview img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  background: #fff;
}
.preview__cap {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14.5px; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* -- job progress ------------------------------------------------------- */
.job { border-left: 3px solid var(--warn); }
.job__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.job__spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--line-2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bar {
  height: 9px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal), var(--terra));
  transition: width .5s ease;
}
.bar--indeterminate .bar__fill {
  width: 34% !important;
  animation: slide 1.9s ease-in-out infinite;
}
@keyframes slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}

.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.steps li::before {
  content: "○";
  font-size: 13px;
  color: var(--soft);
}
.steps li[data-state="active"] { color: var(--ink); font-weight: 600; }
.steps li[data-state="active"]::before { content: "◆"; color: var(--terra); }
.steps li[data-state="done"] { color: var(--ink-2); }
.steps li[data-state="done"]::before { content: "●"; color: var(--ok); }

.share-box {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.share-box input[type="text"] {
  flex: 1 1 220px;
  font-family: var(--mono);
  /* 16px for the same iOS reason as the base input rule above. The share link
     is monospace and long, so this reads tighter than the number suggests. */
  font-size: 16px;
  background: var(--surface-2);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--gap);
  font-size: 14px;
  color: var(--muted);
}
.pagination a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink-2);
}
.pagination a:hover { border-color: var(--line-2); color: var(--ink); }


/* ---------------------------------------------------------- 9. analytics */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
/* Categorical series colours for the inline SVG charts.
   analytics/charts.py emits every fill as `var(--chart-N, #hex)` precisely so
   the palette lives here and not in Python — the hex in the SVG is only the
   fallback.

   These are now ALIASES onto the product's data-series tokens rather than a
   second palette. They used to be an independent set, which is why the
   analytics dashboard rendered "the brand teal" as #1f7a71 while the rest of
   the product used #17605a — two visibly different teals in one viewport — and
   why --chart-2 was a byte-identical copy of the retired terracotta. One
   definition, inherited by both surfaces, correct in dark mode for free. */
:root {
  --chart-1: var(--s1);
  --chart-2: var(--s2);
  --chart-3: var(--s3);
  --chart-4: var(--s4);
  --chart-5: var(--s5);
  --chart-6: var(--s6);
  --chart-fail: var(--neg);
}

/* Nothing here styles the chart *ink*. charts.py draws axes, gridlines and tick
   labels with `fill:currentColor` in a style attribute, which no stylesheet rule
   can outrank anyway, and which already follows the page's `color` in both
   schemes. The series colours above are the only thing the CSS owns. */

.chart-card { min-width: 0; }
/* A panel carrying a data table gets the full row: two ~500px columns is fine
   for a bar chart and cramped for a six-column table. */
.chart-card--wide { grid-column: 1 / -1; }
/* Wide charts scroll inside their own box; the page body never scrolls sideways. */
.chart-card__body { overflow-x: auto; }
.chart-card svg { display: block; width: 100%; height: auto; min-width: 280px; }
.chart-card__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.chart-card__legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  background: var(--teal);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.table th, .table td {
  padding: 11px 15px;
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

.meter {
  display: block;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  min-width: 60px;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--teal);
}


/* --------------------------------------------- 9b. the on-screen report

   The analysis, rendered from Report.data by reports/_report.html.

   Ported from render.py's PAGE_TMPL so the page and the PDF read as the same
   publication — but expressed in tokens rather than the renderer's fixed
   palette, because this surface has to work in dark mode and on a 360px phone,
   and the PDF only ever has to work on white A4. Where the two disagree, that
   is the reason.

   Every colour that varies per report (bar fills, category dots, column rules)
   arrives as an inline style from the presenter, which is the only thing
   allowed to produce one. Nothing here may reintroduce a colour from the
   template — see the header of reports/_report.html.
   -------------------------------------------------------------------------- */
.rep {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(18px, 4vw, 34px);
  /* The report is the page. Long Azerbaijani compounds and verbatim comments
     both overflow narrow columns, and a report that scrolls sideways on a phone
     is unreadable in a way a PDF at least is not. */
  overflow-wrap: anywhere;
}

/* -- masthead -- */
.rep__masthead { border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.rep__title {
  /* 44px on A4 in the PDF; fluid here so it never wraps to five lines on a
     phone or look lost on a 1080px shell. */
  font-size: clamp(26px, 5.2vw, 42px);
  line-height: 1.05; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px;
}
.rep__subtitle {
  font-size: clamp(14px, 1.6vw, 16px); line-height: 1.45;
  color: var(--ink-2); margin: 0 0 12px; max-width: 62ch;
}
.rep__source { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.rep__source b { color: var(--ink-2); font-weight: 700; }
.rep__metrics {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 13px; color: var(--muted); margin: 0;
}
.rep__metric b { color: var(--ink); font-weight: 700; }
.rep__footnote {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  font-style: italic; margin: 14px 0 0;
}
.rep__heart { display: block; color: var(--terra); font-size: 13px; line-height: 1; }

/* -- conclusions -- */
.rep__conc { display: flex; flex-direction: column; }
.rep__conc-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.rep__conc-row:first-child { border-top: 0; padding-top: 0; }
.rep__conc-n {
  font-size: 15px; font-weight: 700; color: var(--soft); letter-spacing: -.02em;
}
.rep__conc-head { font-size: 14.5px; font-weight: 700; margin: 0 0 5px; line-height: 1.3; }
.rep__conc-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }

.rep__method {
  font-size: 13px; line-height: 1.5; color: var(--muted);
  margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}

/* ---------------------------------- 10. responsive, print, a11y prefs */
/* Screen-reader-only text. Used for the like counts in the report, where the
   number sits next to a decorative ♥ that conveys nothing to a screen reader. */
.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;
}

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .brand__tag { display: none; }
  .site-head__inner { min-height: 56px; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .nav a { padding: 6px 10px; font-size: 14px; }
  .report-item { grid-template-columns: minmax(0, 1fr); }
  .report-item__side { justify-self: start; }
  .page-head { align-items: flex-start; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }
  .form-actions .btn { flex: 1 1 auto; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }

  /* Touch targets. Both platforms ask for ~44px and every one of these was
     around 31px, sitting in rows with 6px gaps — the status filters are the
     primary navigation on the reports list, so the smallest targets in the
     product were also the most used. Scoped to the mobile block so desktop
     density is untouched. */
  .filters a,
  .nav a,
  .btn--sm { min-height: 44px; display: inline-flex; align-items: center; }
  .theme-toggle { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .report-item:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --line: var(--ink-2); --line-2: var(--ink-2); --muted: var(--ink-2); }
}

/* ===========================================================================
   Tracked accounts and the trend page
   =========================================================================== */
.tracker-list { display: flex; flex-direction: column; gap: 12px; }
.tracker-row {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-1);
}
@media (min-width: 720px) { .tracker-row { grid-template-columns: minmax(0, 1fr) auto auto; } }
.tracker-row--off { opacity: .72; }
.tracker-row__name { font-size: 15.5px; font-weight: 700; margin: 0 0 3px; }
.tracker-row__name a { color: inherit; text-decoration: none; }
.tracker-row__name a:hover { text-decoration: underline; }
.tracker-row__meta { margin: 0; font-size: 13px; color: var(--muted); }
.tracker-row__meta code { font-family: var(--mono); font-size: 13px; }
.tracker-row__runs { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-2);
}
.pill--on   { background: var(--ok-tint);    color: var(--ok); }
.pill--off  { background: var(--surface-2);  color: var(--muted); }
.pill--warn { background: var(--warn-tint);  color: var(--warn); }
.pill--kind { background: var(--teal-tint);  color: var(--teal); }

/* -- sparkline cards -- */
.trend-grid {
  display: grid; gap: 12px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.trend-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px;
}
.trend-card__label {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;  color: var(--muted); margin: 0 0 6px;
}
.trend-card__value {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.trend-card__delta { font-size: 13px; font-weight: 700; margin: 3px 0 0; font-variant-numeric: tabular-nums; }
.trend-card__delta--up   { color: var(--ok); }
.trend-card__delta--down { color: var(--danger); }
.trend-card__delta--flat { color: var(--muted); }
.trend-card svg { display: block; width: 100%; height: 26px; margin-top: 8px; overflow: visible; }
.trend-card polyline { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* -- theme velocity table -- */
.trend-themes { width: 100%; border-collapse: collapse; font-size: 14px; }
.trend-themes th, .trend-themes td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.trend-themes th { font-size: 13px; letter-spacing: .1em;color: var(--muted); font-weight: 700; }
.trend-themes td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dir { font-weight: 700; font-size: 13px; }
.dir--rising { color: var(--terra); }
.dir--fading { color: var(--ok); }
.dir--stable { color: var(--muted); }

/* -- the "vs last run" strip on a tracked report -- */
.delta-strip {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  margin: 0 0 14px; padding: 9px 14px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-2);
}
.delta-strip__cap { font-size: 13px; font-weight: 700; letter-spacing: .06em;color: var(--muted); }
.delta-strip__item b { font-variant-numeric: tabular-nums; }
.delta-strip__up   { color: var(--ok); font-weight: 700; }
.delta-strip__down { color: var(--danger); font-weight: 700; }
.delta-strip__flat { color: var(--muted); font-weight: 700; }


/* ===========================================================================
   Public landing page. The only page an anonymous visitor sees, and the only
   one that is not noindex — it quotes nobody.
   =========================================================================== */
.btn--lg { padding: 12px 22px; font-size: 15.5px; }

.landing .main { padding-top: 8px; }

.lp-hero { padding: clamp(28px, 6vw, 60px) 0 clamp(24px, 4vw, 40px); max-width: 62ch; }
.lp-title {
  font-size: clamp(30px, 5.6vw, 50px); line-height: 1.08; font-weight: 700;
  letter-spacing: -.025em; margin: 12px 0 0; text-wrap: balance;
}
.lp-lead {
  font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; color: var(--ink-2);
  margin: 18px 0 0;
}
.lp-lead b { color: var(--ink); font-weight: 700; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.lp-note { font-size: 13px; color: var(--muted); margin: 16px 0 0; max-width: 60ch; }

/* The one architectural claim, given its own band so it is not just another
   bullet: the official API cannot return a competitor's comments to anyone. */
.lp-band {
  background: var(--teal-tint); border-top: 1px solid var(--teal);
  border-bottom: 1px solid var(--teal);
  margin: clamp(16px, 3vw, 28px) 0; padding: 18px clamp(16px, 3vw, 24px);
  border-radius: var(--radius);
}
.lp-band-text {
  margin: 0; font-size: clamp(15px, 2vw, 17.5px); line-height: 1.5;
  color: var(--ink); max-width: 70ch; font-weight: 600;
}
.lp-band-text b { color: var(--teal); }

.lp-section { padding: clamp(28px, 5vw, 48px) 0 0; }
.lp-h2 {
  font-size: clamp(21px, 3.2vw, 28px); font-weight: 700; letter-spacing: -.015em;
  margin: 0; text-wrap: balance;
}
.lp-sub { font-size: 14.5px; color: var(--ink-2); margin: 8px 0 0; max-width: 68ch; }

.lp-grid {
  display: grid; gap: 14px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lp-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-1);
}
.lp-card-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--teal); margin: 0 0 6px;
}
.lp-card-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.lp-card-body { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.lp-card-eg { font-size: 13px; color: var(--muted); margin: 12px 0 0; overflow-wrap: anywhere; }

/* Saying what the product will NOT do is the cheapest trust signal available,
   and the one every competitor in this category declines to make. */
.lp-honest .lp-list {
  margin: 18px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px; max-width: 74ch;
}
.lp-honest .lp-list li {
  position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2);
}
.lp-honest .lp-list li::before {
  content: "—"; position: absolute; left: 0; color: var(--soft); font-weight: 700;
}
.lp-honest .lp-list b { color: var(--ink); }

.lp-final {
  margin-top: clamp(32px, 6vw, 56px); padding: clamp(24px, 4vw, 36px);
  background: var(--surface-2); border-radius: var(--radius); text-align: center;
}
.lp-final .lp-cta { justify-content: center; }
.lp-final .lp-note { margin-left: auto; margin-right: auto; }


/* ===========================================================================
   The public share page (/r/<token>/). No nav, no user menu, no theme toggle —
   it is read by someone who has no account. Everything here is frame around
   reports/_report.html, which does the actual work.
   =========================================================================== */
.pub-head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.pub-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
/* The brand is a <span> here, not a link: there is nowhere for an anonymous
   reader to go from it, and a dead-looking link is worse than plain text. The
   one route into the product is the honest line in the footer. */
.public .brand { cursor: default; }
.public .main { padding-top: 20px; }


/* ===========================================================================
   P1 — the answer card. Exactly TWO loud surfaces exist in a report: .answer
   and the .fix nested inside it. Everything else is a quiet card on the page
   ground. Emphasis works only when it is rare.
   =========================================================================== */

/* Scope strip. Was a tinted box that opened the report with an apology; now one
   13px line stating the denominator every percentage below is against. */
.rep__scope {
  margin: var(--s-4) 0 0;
  font-size: var(--t-1); line-height: 1.5; color: var(--ink-3);
}
.rep__scope b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* A degraded scrape gets a rule, not a panel: it is a caveat, not the headline. */
.rep__scope--low {
  padding-left: var(--s-3); border-left: 2px solid var(--warn); color: var(--warn);
}

/* LOUD PANEL 1 — the verdict. */
.answer {
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-4);
  background: var(--brand-bg);
  border-radius: var(--r-card);
}
.answer__cap {
  margin: 0 0 var(--s-2);
  font-size: var(--t-1); font-weight: 600; color: var(--brand-ink); letter-spacing: 0;
}
.answer__v {
  margin: 0;
  font-size: var(--t-7); line-height: 1.25; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
  /* LEFT, not centred. A centred Azerbaijani verdict at four lines on a 271px
     column is the slowest ragged form there is, and centring is the instant
     tell of a generated document. */
  text-align: left; text-wrap: balance; overflow-wrap: anywhere;
}

/* LOUD PANEL 2 — nested, so the document has two emphases and not six. */
.fix {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--warn-bg);
  border-radius: var(--r-inner);
}
.fix__cap { margin: 0 0 var(--s-2); font-size: var(--t-1); font-weight: 600; color: var(--warn); }
.fix__p {
  margin: 0; font-size: var(--t-6); line-height: 1.3; font-weight: 700;
  color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere;
}
.fix__why { margin: var(--s-2) 0 0; font-size: var(--t-1); color: var(--ink-2); }
.fix__why b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fix__ev { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.fix__quote {
  margin: 0; padding: var(--s-2) var(--s-3);
  background: var(--card); border-radius: var(--r-sm);
  font-size: var(--t-1); line-height: 1.5; color: var(--ink-2); font-style: italic;
  display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline;
  overflow-wrap: anywhere;
}
.fix__likes {
  flex: none; font-style: normal; color: var(--ink-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fix__do {
  margin: var(--s-3) 0 0; padding-top: var(--s-3);
  border-top: 1px solid var(--line-2);
  font-size: var(--t-3); line-height: 1.5; font-weight: 600; color: var(--ink);
}
.fix__do span {
  display: block; margin-top: 2px;
  font-size: var(--t-1); font-weight: 400; color: var(--ink-3);
}

/* The counts strip, BELOW the answer. Every tile carries its denominator. */
.tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  margin-top: var(--s-3);
}
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-inner); padding: var(--s-3); min-width: 0;
}
/* Reserved two lines so all four numbers share a baseline whatever the label
   length — Azerbaijani labels wrap at different points and the measured
   misalignment was 17px. */
.tile__l { margin: 0; font-size: var(--t-1); line-height: 1.3; color: var(--ink-3); min-height: 2.6em; }
.tile__n { margin: var(--s-1) 0 0; font-size: var(--t-8); line-height: 1.2; font-weight: 600; }
.tile__s { margin: 2px 0 0; font-size: var(--t-1); color: var(--ink-3); }
.tile--pos .tile__n { color: var(--pos); }
.tile--neg .tile__n { color: var(--neg); }


/* ===========================================================================
   P2 — one card, one row, one comparison. Replaces five bespoke section
   designs and roughly thirty classes. The row (label · count · share · bar) is
   simultaneously the most familiar object available — a bank-statement line,
   an Instagram Insights drill-in — and the biggest deletion in this file.
   =========================================================================== */

/* Series colour by INDEX. The template emits data-c="2" or data-c="neg"; no
   model-supplied hex reaches a style attribute anywhere on the page. */
[data-c="1"] { --c: var(--s1); }
[data-c="2"] { --c: var(--s2); }
[data-c="3"] { --c: var(--s3); }
[data-c="4"] { --c: var(--s4); }
[data-c="5"] { --c: var(--s5); }
[data-c="6"] { --c: var(--s6); }
[data-c="pos"] { --c: var(--pos); }
[data-c="neg"] { --c: var(--neg); }
[data-c="neu"] { --c: var(--neu); }

.card {
  margin-top: var(--s-3);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-4);
}
@media (min-width: 560px) { .card { padding: var(--s-5); } }
/* The ONE accented card in the document: the section the customer is paying
   for. Everything else is quiet, which is the only reason this reads as loud. */
.card--accent { background: var(--brand-bg); border-color: transparent; }
.card__h { margin: 0; font-size: var(--t-5); line-height: 1.35; font-weight: 600; }
.card__base { margin: var(--s-1) 0 0; font-size: var(--t-1); color: var(--ink-3); }
.card__sub {
  margin: var(--s-6) 0 var(--s-2); font-size: var(--t-4);
  font-weight: 600; line-height: 1.35;
}
.card__p { margin: var(--s-3) 0 0; font-size: var(--t-3); line-height: 1.6; color: var(--ink-2); }
.card__p--quiet { color: var(--ink-3); font-size: var(--t-1); }

/* -- the row. label · count · share · bar, at every width. -- */
.rows { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-1) var(--s-3); align-items: baseline;
  padding: var(--s-3) 0; border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row__l { font-size: var(--t-4); min-width: 0; }
.row__n { font-size: var(--t-4); font-weight: 600; }
.row__p { font-size: var(--t-1); color: var(--ink-3); min-width: 3ch; text-align: right; }
.row__t {
  grid-column: 1 / -1; height: 6px; background: var(--line-2);
  border-radius: var(--r-bar); overflow: hidden;
}
/* Square at the baseline, rounded at the tip: a fill rounded on BOTH ends turns
   any value under ~12% into a circle that reads as roughly double its length. */
.row__f {
  display: block; height: 100%; min-width: 3px;
  border-radius: 0 var(--r-bar) var(--r-bar) 0;
  background: var(--c, var(--brand));
}

/* -- the ratio. The one place a max-normalised bar is correct. -- */
.vs { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.vs__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: baseline; }
.vs__n { font-size: var(--t-4); font-weight: 600; min-width: 0; }
.vs__v { font-size: var(--t-4); font-weight: 600; }
.vs__t {
  grid-column: 1 / -1; height: 10px; background: var(--line-2);
  border-radius: var(--r-bar); overflow: hidden;
}
.vs__f {
  display: block; height: 100%; min-width: 3px;
  border-radius: 0 var(--r-bar) var(--r-bar) 0;
  background: var(--c, var(--s1));
}
.vs__sub { grid-column: 1 / -1; margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.vs__def {
  margin: var(--s-4) 0 0; padding: var(--s-3);
  background: var(--card-2); border-radius: var(--r-inner);
  font-size: var(--t-1); line-height: 1.5; color: var(--ink-2);
}
.card--accent .vs__def { background: var(--card); }

/* -- the 100% strip (sentiment). Fixed order, direct labels, no legend key. -- */
.strip {
  display: flex; height: 12px; margin-top: var(--s-3);
  border-radius: var(--r-bar); overflow: hidden; background: var(--line-2);
}
.strip__seg { height: 100%; min-width: 2px; background: var(--c, var(--neu)); }
.strip__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; }
.strip__item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-2); }
.strip__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, var(--neu)); }
.strip__item b { color: var(--ink); font-weight: 600; }

/* -- questions and quoted comments: ONE component, two uses. -- */
.qs { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.q { background: var(--card-2); border-radius: var(--r-inner); padding: var(--s-3); }
.card--accent .q { background: var(--card); }
.q__t { margin: 0; font-size: var(--t-4); line-height: 1.4; font-weight: 600; }
.q__t--quote { font-weight: 400; font-size: var(--t-3); line-height: 1.55; }
.q__m { margin: var(--s-2) 0 0; font-size: var(--t-1); color: var(--ink-3); }
.q__r {
  margin: var(--s-2) 0 0; padding-left: var(--s-3);
  border-left: 2px solid var(--brand);
  font-size: var(--t-2); line-height: 1.5; color: var(--ink-2);
}

/* -- drivers / weaknesses -- */
.cols { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 640px) { .cols { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
/* min-width:0 is load-bearing in a grid child: without it a long Azerbaijani
   compound or a pasted URL inside the list widens the column past its track. */
.col { min-width: 0; }
.col__h {
  margin: 0 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--c, var(--line-2));
  font-size: var(--t-4); font-weight: 600;
}
.col__l { list-style: none; margin: 0; padding: 0; }
.col__l li {
  position: relative; padding: var(--s-1) 0 var(--s-1) var(--s-4);
  font-size: var(--t-2); line-height: 1.5; color: var(--ink-2);
}
.col__l li::before { content: "—"; position: absolute; left: 0; color: var(--c, var(--ink-3)); }

/* -- brand chips -- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.chip {
  font-size: var(--t-1); padding: 3px var(--s-2);
  background: var(--card-2); border-radius: var(--r-sm); color: var(--ink-2);
}
.card--accent .chip { background: var(--card); }

/* -- a recommendation inside the accented card -- */
.act {
  margin-top: var(--s-3); padding: var(--s-3);
  background: var(--card); border-radius: var(--r-inner);
}
.act__p { margin: 0; font-size: var(--t-3); font-weight: 600; line-height: 1.45; }
.act__b { margin: var(--s-1) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--ink-2); }

/* The report is the page now: no card of its own around the whole thing. */
.rep { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }


/* ===========================================================================
   P2b — the comparative strategy report (compare_profiles / compare_accounts).
   Rendered by reports/_report_compare.html from presenter.build_comparison().
   A SECOND report surface: instead of one post's sentiment it lays out a
   competitive-marketing strategy across 2+ accounts, framed for the OWN brand.
   It reuses .rep / .card / .answer above and adds only what a comparison needs.

   Colours here ARE per-account hexes (each a safe_color() value), unlike the
   data-c series scheme of the single report: a swatch, a share bar and a card
   edge must decode to the same account at a glance. Hexes are confined to small
   marks — swatches, bar fills, a 3px edge — never to text, so dark-mode legibility
   is unaffected. The OWN account is teal so it stands out among the competitors.
   =========================================================================== */

/* -- masthead: the accounts legend with brand swatches -- */
.rep__accts {
  list-style: none; margin: var(--s-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
}
.rep__acct { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-2); min-width: 0; }
.rep__acct-sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rep__acct-name { font-weight: 600; color: var(--ink); }
.rep__acct--own .rep__acct-name { color: var(--brand); }
.rep__acct-h { color: var(--ink-3); font-size: var(--t-1); }
.rep__acct-you {
  font-size: var(--t-1); font-weight: 600; line-height: 1.4;
  color: var(--brand-ink); background: var(--brand-bg);
  border-radius: var(--r-sm); padding: 1px var(--s-2);
}

/* -- role badges (öz / rəqib / influencer / xəbər saytı) — the user's own tag,
   shown on the account legend rows and per-account card headers. Fixed four-value
   enum, so the modifier class is never model-supplied. -- */
.role-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  padding: 1px 7px; margin-left: var(--s-2); vertical-align: middle;
  border-radius: var(--radius-pill); border: 1px solid transparent;
}
.role-badge--own { color: #12564f; background: rgba(23, 96, 90, .13); border-color: rgba(23, 96, 90, .32); }
.role-badge--competitor { color: #9e3020; background: rgba(179, 57, 42, .10); border-color: rgba(179, 57, 42, .28); }
.role-badge--influencer { color: #8a5600; background: rgba(176, 122, 24, .14); border-color: rgba(176, 122, 24, .34); }
.role-badge--news { color: #34517a; background: rgba(61, 90, 128, .12); border-color: rgba(61, 90, 128, .32); }
/* Opt-in dark only — see the note on the palette block above. */
:root[data-theme="dark"] .role-badge--own { color: #7fd6c9; background: rgba(23, 96, 90, .26); }
:root[data-theme="dark"] .role-badge--competitor { color: #f0a498; background: rgba(179, 57, 42, .24); }
:root[data-theme="dark"] .role-badge--influencer { color: #e8c07a; background: rgba(176, 122, 24, .24); }
:root[data-theme="dark"] .role-badge--news { color: #a9c2e6; background: rgba(61, 90, 128, .26); }

/* -- share of voice: per-account bars tiled to 100 by comment share -- */
.rep__sov { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.rep__sov-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-3); align-items: baseline;
}
.rep__sov-name { font-size: var(--t-4); font-weight: 600; min-width: 0; }
.rep__sov-pct { font-size: var(--t-4); font-weight: 600; }
.rep__sov-track {
  grid-column: 1 / -1; height: 10px; background: var(--line-2);
  border-radius: var(--r-bar); overflow: hidden;
}
/* Square at the baseline, rounded at the tip — same rule as .row__f. */
.rep__sov-fill {
  display: block; height: 100%; min-width: 3px;
  border-radius: 0 var(--r-bar) var(--r-bar) 0;
}
.rep__sov-nums { grid-column: 1 / -1; margin: 0; font-size: var(--t-1); color: var(--ink-3); }

/* -- per-account cards. Own gets the teal edge + a tinted ground. -- */
.rep__comps { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.rep__comp {
  min-width: 0; padding: var(--s-4);
  background: var(--card-2); border-radius: var(--r-inner);
  border: 1px solid var(--line); border-left: 3px solid var(--line-2);
}
.rep__comp--own { background: var(--brand-bg); }
.rep__comp-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.rep__comp-sw { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.rep__comp-name { margin: 0; font-size: var(--t-5); font-weight: 700; line-height: 1.3; }
.rep__comp-pos { margin: var(--s-2) 0 0; font-size: var(--t-3); line-height: 1.55; color: var(--ink-2); }
.rep__comp-cols { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
@media (min-width: 640px) { .rep__comp-cols { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.rep__comp-col { min-width: 0; }
.rep__comp-col-h {
  margin: 0 0 var(--s-2); padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--t-1); font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .02em;
}
.rep__comp-list { list-style: none; margin: 0; padding: 0; }
.rep__comp-list li {
  position: relative; padding: var(--s-1) 0 var(--s-1) var(--s-4);
  font-size: var(--t-2); line-height: 1.5; color: var(--ink-2);
}
.rep__comp-list li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }

/* -- whitespace: the openings no account fills -- */
.rep__ws { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.rep__ws-item { padding: var(--s-3); background: var(--card-2); border-radius: var(--r-inner); }
.rep__ws-h { margin: 0; font-size: var(--t-4); font-weight: 700; line-height: 1.35; }
.rep__ws-b { margin: var(--s-2) 0 0; font-size: var(--t-3); line-height: 1.55; color: var(--ink-2); }
.rep__ws-ev { margin: var(--s-2) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--ink-3); font-style: italic; }
.rep__ws-miss {
  margin: var(--s-2) 0 0; font-size: var(--t-1); color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: baseline;
}
.rep__ws-tag {
  font-size: var(--t-1); padding: 1px var(--s-2);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink-2);
}

/* -- positioning: one card per competitor, you vs them -- */
.rep__pos { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.rep__pos-card { padding: var(--s-3); background: var(--card-2); border-radius: var(--r-inner); }
.rep__pos-vs {
  margin: 0 0 var(--s-2); font-size: var(--t-4); font-weight: 700;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
}
.rep__pos-sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rep__pos-x { color: var(--ink-3); font-weight: 400; }
.rep__pos-edge { margin: var(--s-2) 0 0; font-size: var(--t-2); line-height: 1.5; color: var(--ink-2); }
.rep__pos-lbl {
  display: inline-block; margin-right: var(--s-1);
  font-size: var(--t-1); font-weight: 600; color: var(--ink-3);
}
.rep__pos-lbl--you { color: var(--brand-ink); }
.rep__pos-lbl--gap { color: var(--warn); }

/* -- action plan: numbered priority list with effort chips -- */
.rep__plan {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: grid; gap: var(--s-3);
}
.rep__plan-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3); align-items: start;
}
.rep__plan-n {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  background: var(--brand); color: var(--btn-fg);
  border-radius: 50%; font-size: var(--t-2); font-weight: 700;
}
.rep__plan-body { min-width: 0; }
.rep__plan-h {
  margin: 0; font-size: var(--t-4); font-weight: 700; line-height: 1.35;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
}
.rep__plan-b { margin: var(--s-1) 0 0; font-size: var(--t-3); line-height: 1.55; color: var(--ink-2); }
.rep__plan-ev { margin: var(--s-2) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--ink-3); font-style: italic; }
/* Low effort is the good news (cheap to do) so it reads green; high effort the
   expensive one reads red — the chip encodes cost, not quality. */
.rep__plan-eff {
  font-size: var(--t-1); font-weight: 600; line-height: 1.4;
  padding: 1px var(--s-2); border-radius: var(--r-sm);
  background: var(--neu-bg); color: var(--ink-3);
}
.rep__plan-eff--low { background: var(--pos-bg); color: var(--pos); }
.rep__plan-eff--mid { background: var(--warn-bg); color: var(--warn); }
.rep__plan-eff--high { background: var(--neg-bg); color: var(--neg); }


/* ===========================================================================
   P3 — navigation. A bottom tab bar on phones, the header nav above 900px.
   No hamburger anywhere: hidden navigation costs >20% of content
   discoverability (NN/g) and is used in only 27% of desktop cases, and this
   audience has no dashboard habit to fall back on.
   =========================================================================== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar a {
  display: grid; place-items: center; min-height: 56px;
  font-size: var(--t-2); color: var(--ink-3); text-decoration: none;
  border-top: 2px solid transparent;
}
.tabbar a[aria-current] { color: var(--brand); font-weight: 600; border-top-color: var(--brand); }
.tabbar a:active { background: var(--card-2); }
/* The bar covers the last 56px of the page, so the page has to end above it. */
body:has(.tabbar) .main { padding-bottom: 72px; }
@media (min-width: 900px) {
  .tabbar { display: none; }
  body:has(.tabbar) .main { padding-bottom: 0; }
}
/* Below 900px the header's own nav is redundant with the bar. */
@media (max-width: 899px) { .site-head .nav { display: none; } }

/* The theme control is a SETTING now, not chrome. Birbank ships light/dark/
   system the same way, and on a 360px header it was 44px of nothing. */
.usermenu__theme {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink-2);
  padding: var(--s-2) var(--s-3);
}
.usermenu__theme:hover { background: var(--card-2); color: var(--ink); }


/* A closed disclosure inside a form card. Used where an explanation is worth
   having but not worth reading past — it needs no JS and prints open. */
.note { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.note > summary {
  cursor: pointer; font-size: var(--t-2); color: var(--brand);
  font-weight: 600; list-style: none; min-height: 44px;
  display: flex; align-items: center; gap: var(--s-2);
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::before { content: "＋"; font-weight: 400; }
.note[open] > summary::before { content: "−"; }
.note ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); }
.note li { font-size: var(--t-2); line-height: 1.55; color: var(--ink-2); margin-bottom: var(--s-2); }
.note p { margin: var(--s-2) 0 0; font-size: var(--t-1); color: var(--ink-3); }
@media print { .note { display: block; } .note > summary { display: none; } }

@media print {
  .site-head, .pub-head, .site-foot, .page-head__actions, .job, .form-actions, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .report-item { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 13px; color: #555; }

  /* Comparative report: keep each account card, whitespace item, positioning
     card and action step whole across a page break. */
  .rep__comp, .rep__ws-item, .rep__pos-card, .rep__plan-item { break-inside: avoid; }

  /* Ctrl-P on the report page is now a real path to paper, so it should not
     produce something worse than the PDF we already generate. Same
     break-inside rules render.py uses; the download button stays the better
     artifact and this is the fallback. */
  .rep { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   REDESIGN 2026 — postana-style front door (landing, gate, try-flow, plans)
   Layered on top of the existing token system. Buttons become adaptive pills
   (dark in light mode, light in dark mode) via --ink/--bg, so both themes work.
   Landing components are self-contained (.lp-*, .gate, .tryflow, .plans).
   ========================================================================== */
:root { --pill: 999px; --r-xl: 22px; --r-lg: 18px; }

/* --- adaptive pill buttons ------------------------------------------------ */
.btn {
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--bg);
  padding: 11px 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--ink-2); color: var(--bg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: none;
}
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-hover); color: #fff; }
.btn--lg { padding: 15px 30px; font-size: var(--t-5); }
.btn--block { width: 100%; justify-content: center; }

/* --- header / brand / nav (cleaner, postana) ------------------------------ */
.site-head { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.brand__mark { color: var(--brand); font-size: 15px; }
.brand__name { letter-spacing: -0.01em; font-weight: 750; text-transform: none; font-size: 16px; }
.brand__tag { display: none; }
.nav a { border-radius: var(--pill); }
.head-end { display: flex; align-items: center; gap: 10px; }
.nav-signin { font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: var(--pill); font-size: var(--t-3); }
.nav-signin:hover { color: var(--ink); background: var(--surface-2); }

/* language switcher */
.langsw { position: relative; }
.langsw > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--t-2);
  font-weight: 600; color: var(--ink-2); background: var(--card); }
.langsw > summary::-webkit-details-marker { display: none; }
.langsw > summary:hover { border-color: var(--ink-3); color: var(--ink); }
.langsw__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 172px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px; }
.langsw__panel form { margin: 0; }
.langsw__panel button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center;
  padding: 9px 12px; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--t-3); color: var(--ink-2); font-weight: 550; }
.langsw__panel button:hover { background: var(--surface-2); color: var(--ink); }
.langsw__panel button[aria-current="true"] { color: var(--brand); font-weight: 700; }

/* --- landing page --------------------------------------------------------- */
/* The landing is FULL-BLEED. base.html wraps every page in `main.main > .shell`,
   which is sized for reading (1080px) and, more importantly, caps a bare
   <section> at a prose measure (~62ch) — that squeezed the hero to 625px inside
   a 1440px window. Scoped to body.lp so no other page's layout moves. */
body.lp main.main { padding: 0; }
body.lp main.main > .shell { max-width: none; padding: 0; }
body.lp main.main > .shell > section,
body.lp .lp-hero, body.lp .lp-how { max-width: none; width: auto; }

.lp { background: var(--card); }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.lp-hero { position: relative; text-align: center; padding: clamp(48px, 8vw, 104px) 0 clamp(28px, 5vw, 56px); overflow: clip; }
.lp-hero__blob { position: absolute; z-index: 0; filter: blur(72px); opacity: .55; border-radius: 50%; pointer-events: none; }
.lp-hero__blob--a { width: 420px; height: 420px; left: -120px; bottom: -160px; background: radial-gradient(circle, #7cc7ff, transparent 70%); }
.lp-hero__blob--b { width: 460px; height: 460px; right: -140px; bottom: -180px; background: radial-gradient(circle, #7ef0c0, transparent 70%); }
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero h1 {
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1.02; font-weight: 820; letter-spacing: -0.035em; color: var(--ink);
  margin: 0 auto; max-width: 16ch;
}
.lp-hero h1 .muted { color: var(--ink-3); }
.lp-hero__sub { margin: clamp(18px, 3vw, 26px) auto 0; max-width: 60ch; font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5; color: var(--ink-2); }

/* platform tabs + input */
.lp-tool { max-width: 760px; margin: clamp(26px, 4vw, 40px) auto 0; }
.lp-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface-2);
  border-radius: var(--pill); margin-bottom: 14px; }
.lp-tab { border: 0; background: transparent; padding: 9px 18px; border-radius: var(--pill);
  font-weight: 600; font-size: var(--t-3); color: var(--ink-3); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.lp-tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lp-inputrow { display: flex; gap: 10px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--pill); padding: 8px 8px 8px 20px; box-shadow: 0 8px 30px rgba(0,0,0,.08);
  align-items: center; }
.lp-inputrow:focus-within { border-color: var(--ink-3); box-shadow: 0 10px 36px rgba(0,0,0,.12); }
.lp-inputrow input { flex: 1; border: 0; background: transparent; font-size: var(--t-4); color: var(--ink);
  min-width: 0; outline: none; padding: 8px 0; }
.lp-inputrow .btn { white-space: nowrap; }
.lp-note { margin-top: 12px; font-size: var(--t-2); color: var(--ink-3); }
.lp-err { margin-top: 12px; color: var(--danger); font-size: var(--t-2); font-weight: 600; }
.lp-hero__cta { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* "what you get" strip under the hero sub */
.lp-gets { list-style: none; margin: 20px auto 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 8px 20px; justify-content: center; max-width: 780px; }
.lp-gets li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-3);
  font-weight: 600; color: var(--ink-2); }
.lp-get { font-style: normal; font-size: 11px; line-height: 1; }
.lp-get--coral { color: var(--v-coral); } .lp-get--pink { color: var(--v-pink); }
.lp-get--green { color: var(--v-green); } .lp-get--violet { color: var(--v-violet); }

/* Colour on the how-it-works numbers — they were all the same muted teal. */
.lp-step:nth-child(1) .lp-step__n { background: var(--v-blue-bg); color: var(--v-blue); }
.lp-step:nth-child(2) .lp-step__n { background: var(--v-violet-bg); color: var(--v-violet); }
.lp-step:nth-child(3) .lp-step__n { background: var(--v-green-bg); color: var(--v-green); }
.lp-step { transition: transform .15s, box-shadow .15s; }
.lp-step:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
/* Same idea on the value-prop tiles. */
.mk-props .mk-prop:nth-child(1) .mk-prop__ico { background: var(--v-blue-bg); }
.mk-props .mk-prop:nth-child(2) .mk-prop__ico { background: var(--v-amber-bg); }
.mk-props .mk-prop:nth-child(3) .mk-prop__ico { background: var(--v-green-bg); }
.mk-who__c:nth-child(1) .mk-who__ico { background: var(--v-coral-bg); }
.mk-who__c:nth-child(2) .mk-who__ico { background: var(--v-violet-bg); }
.mk-who__c:nth-child(3) .mk-who__ico { background: var(--v-amber-bg); }
.mk-who__c:nth-child(4) .mk-who__ico { background: var(--v-teal-bg); }
/* Active accordion counter picks up the brand violet instead of grey. */
.mk-item[aria-expanded="true"] .mk-item__n { background: var(--v-violet-bg); color: var(--v-violet); }

/* how-it-works panel */
.lp-how { background: var(--surface-2); border-radius: clamp(20px, 4vw, 40px); margin: clamp(30px, 6vw, 72px) auto;
  padding: clamp(34px, 6vw, 72px) clamp(20px, 4vw, 48px); }
.lp-how h2 { text-align: center; font-size: clamp(26px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 clamp(24px,4vw,44px); }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.lp-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px 24px; }
.lp-step__n { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-bg); color: var(--brand-ink);
  display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; }
.lp-step h3 { font-size: var(--t-6); font-weight: 750; letter-spacing: -0.01em; margin: 0 0 8px; }
.lp-step p { margin: 0; color: var(--ink-2); font-size: var(--t-3); line-height: 1.5; }
@media (max-width: 720px) { .lp-steps { grid-template-columns: 1fr; } }

/* --- language gate -------------------------------------------------------- */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--card); }
.gate__card { width: 100%; max-width: 440px; text-align: center; }
.gate__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; font-size: 17px; margin-bottom: 26px; }
.gate__logo span { color: var(--brand); }
.gate h1 { font-size: clamp(26px, 5vw, 34px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; }
.gate p { color: var(--ink-2); margin: 0 0 26px; }
.gate__opts { display: grid; gap: 12px; }
.gate__opt button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card); cursor: pointer;
  font-size: var(--t-5); font-weight: 650; color: var(--ink); transition: border-color .15s, transform .1s; }
.gate__opt button:hover { border-color: var(--brand); transform: translateY(-1px); }
.gate__opt .flag { font-size: 24px; }
.gate__opt .arrow { margin-left: auto; color: var(--ink-3); }

/* --- try-flow progress ---------------------------------------------------- */
.tryflow { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--card); }
.tryflow__card { width: 100%; max-width: 520px; text-align: center; }
.tryflow h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.tryflow__sub { color: var(--ink-3); margin: 0 0 28px; }
.tryflow__steps { display: grid; gap: 12px; text-align: left; margin: 0 auto 26px; max-width: 400px; }
.tstep { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--card); opacity: .5; transition: opacity .3s, border-color .3s; }
.tstep.is-active { opacity: 1; border-color: var(--brand); }
.tstep.is-done { opacity: 1; }
.tstep__ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-3); font-weight: 700; font-size: 13px; }
.tstep.is-active .tstep__ico { background: var(--brand-bg); color: var(--brand-ink); }
.tstep.is-done .tstep__ico { background: var(--pos-bg); color: var(--pos); }
.tstep__label { font-weight: 600; color: var(--ink); }
.tstep .spin { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--brand);
  border-radius: 50%; margin-left: auto; animation: ci-spin .7s linear infinite; }
@keyframes ci-spin { to { transform: rotate(360deg); } }
.tryflow__done { display: none; }
.tryflow.is-done .tryflow__live { display: none; }
.tryflow.is-done .tryflow__done { display: block; }
.tryflow__done .checkwrap { width: 64px; height: 64px; border-radius: 50%; background: var(--pos-bg); color: var(--pos);
  display: grid; place-items: center; margin: 0 auto 18px; font-size: 30px; }

/* --- plans / packages ----------------------------------------------------- */
.plans-wrap { max-width: 1040px; margin: 0 auto; padding: clamp(40px,7vw,80px) clamp(18px,4vw,40px); }
.plans-head { text-align: center; margin-bottom: clamp(28px,5vw,48px); }
.plans-head h1 { font-size: clamp(30px,5vw,46px); font-weight: 820; letter-spacing: -0.03em; margin: 0 0 10px; }
.plans-head p { color: var(--ink-2); margin: 0; font-size: var(--t-5); }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plans-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1080px) { .plans-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .plans-grid, .plans-grid--4 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.plans-grid--4 .plan { padding: 26px 20px; }
.plans-grid--4 .plan__price { font-size: clamp(28px, 3.4vw, 38px); }
.plan { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 30px 26px; }
.plan--featured { border: 2px solid var(--ink); box-shadow: 0 16px 40px rgba(0,0,0,.10); }
.plan__name { font-weight: 750; font-size: var(--t-6); letter-spacing: -0.01em; }
.plan__price { font-size: clamp(34px,5vw,44px); font-weight: 820; letter-spacing: -0.03em; margin: 12px 0 2px; }
.plan__price small { font-size: var(--t-3); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.plan__feats { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 12px; }
.plan__feats li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: var(--t-3); }
.plan__feats li::before { content: "✓"; color: var(--brand); font-weight: 800; }
.plan .btn { margin-top: auto; }
.plan__badge { align-self: flex-start; font-size: var(--t-1); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand-ink); background: var(--brand-bg); padding: 4px 10px; border-radius: var(--pill); margin-bottom: 12px; }

/* ==========================================================================
   INTERACTIVE PRODUCT DEMO (templates/_demo.html)
   Click-driven, four steps. Pure CSS/SVG — no libraries, no images. Animations
   are keyed off `.is-active` on the pane, so re-entering a step replays it.
   ========================================================================== */
.demo { padding: clamp(30px, 6vw, 76px) 0; }
.demo__head { text-align: center; margin-bottom: clamp(24px, 4vw, 44px); }
.demo__head h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; }
.demo__head p { color: var(--ink-2); margin: 0; font-size: var(--t-5); }

.demo__grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(18px, 3vw, 36px); align-items: start; }
@media (max-width: 940px) { .demo__grid { grid-template-columns: 1fr; } }

/* step rail */
.demo__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dstep { width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .12s; }
.dstep:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.dstep.is-active { border-color: var(--ink); box-shadow: 0 8px 26px rgba(0,0,0,.10); }
.dstep__n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-3); font-weight: 800; font-size: 13px; transition: background .18s, color .18s; }
.dstep.is-active .dstep__n { background: var(--ink); color: var(--bg); }
.dstep.is-done .dstep__n { background: var(--pos-bg); color: var(--pos); }
.dstep__txt { display: grid; gap: 3px; }
.dstep__txt strong { font-size: var(--t-4); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dstep__txt small { font-size: var(--t-2); color: var(--ink-3); }

/* the mock window */
.dwin { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background: var(--card); box-shadow: 0 20px 50px rgba(0,0,0,.12); }
.dwin__bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--line); }
.dwin__dot { width: 10px; height: 10px; border-radius: 50%; background: #e0e2e6; }
.dwin__dot:nth-child(1) { background: #ff6159; }
.dwin__dot:nth-child(2) { background: #ffbd2e; }
.dwin__dot:nth-child(3) { background: #29ce42; }
.dwin__url { margin: 0 auto; font-size: var(--t-1); color: var(--ink-3); font-weight: 600; }
/* Tall enough for the REPORT pane, which is the longest of the four (measured
   460px at 1280px wide). Sizing to the shortest pane clipped the last "do this
   next" action, which is the single most persuasive line in the whole demo. */
.dwin__body { position: relative; min-height: 480px; }
@media (max-width: 640px) { .dwin__body { min-height: 620px; } }

.dpane { position: absolute; inset: 0; padding: clamp(18px, 3vw, 30px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease; overflow: auto; }
.dpane.is-active { opacity: 1; visibility: visible; }

/* -- 1. paste the link -- */
.dpane__mid { height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; }
.dfield { display: flex; align-items: center; gap: 10px; width: min(100%, 460px);
  border: 1px solid var(--line-2); border-radius: var(--pill); padding: 14px 20px;
  background: var(--card); font-size: var(--t-3); color: var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.dfield__text { white-space: nowrap; overflow: hidden; }
.dfield__caret { width: 2px; height: 17px; background: var(--ink); animation: dcaret 1s steps(1) infinite; }
@keyframes dcaret { 50% { opacity: 0; } }
.dbtn { background: var(--ink); color: var(--bg); border-radius: var(--pill);
  padding: 12px 30px; font-weight: 700; font-size: var(--t-4); }
.dbtn.is-pressed { animation: dpress .4s ease; }
@keyframes dpress { 40% { transform: scale(.93); } 100% { transform: scale(1); } }
.dnote { color: var(--ink-3); font-size: var(--t-2); margin: 4px 0 0; }

/* -- 2. collect comments -- */
.dcount { text-align: center; font-size: var(--t-3); color: var(--ink-2); margin-bottom: 14px; }
.dcount strong { font-size: 30px; font-weight: 820; color: var(--ink); letter-spacing: -0.02em;
  display: block; line-height: 1.1; }
.dbubbles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: flex-start; }
.dbub { font-size: var(--t-2); padding: 9px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--pos-bg); color: var(--pos); border: 1px solid rgba(0,0,0,.05);
  opacity: 0; transform: translateY(10px) scale(.96); }
.dbub--neg { background: var(--neg-bg); color: var(--neg); }
.dbub--neu { background: var(--surface-2); color: var(--ink-2); }
.dpane.is-active .dbub { animation: dpop .42s cubic-bezier(.2,.9,.3,1.3) forwards; }
.dpane.is-active .dbub:nth-child(1) { animation-delay: .05s } .dpane.is-active .dbub:nth-child(2) { animation-delay: .16s }
.dpane.is-active .dbub:nth-child(3) { animation-delay: .27s } .dpane.is-active .dbub:nth-child(4) { animation-delay: .38s }
.dpane.is-active .dbub:nth-child(5) { animation-delay: .49s } .dpane.is-active .dbub:nth-child(6) { animation-delay: .60s }
.dpane.is-active .dbub:nth-child(7) { animation-delay: .71s } .dpane.is-active .dbub:nth-child(8) { animation-delay: .82s }
.dpane.is-active .dbub:nth-child(9) { animation-delay: .93s } .dpane.is-active .dbub:nth-child(10) { animation-delay: 1.04s }
@keyframes dpop { to { opacity: 1; transform: translateY(0) scale(1); } }
.dscan { position: absolute; left: 0; right: 0; height: 130px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(124,199,255,.20), transparent); }
.dpane.is-active .dscan { animation: dscan 2.1s ease-in-out infinite; }
@keyframes dscan { 0% { top: -130px } 100% { top: 100% } }

/* -- 3. AI analysis -- */
.dai { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.dai__head { text-align: center; font-weight: 700; font-size: var(--t-5); color: var(--ink); }
.dai__spark { color: var(--brand); animation: dspin 2.4s linear infinite; display: inline-block; }
@keyframes dspin { to { transform: rotate(360deg); } }
.dai__rows { display: grid; gap: 11px; max-width: 460px; width: 100%; margin: 0 auto; }
.dai__row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center;
  font-size: var(--t-2); color: var(--ink-2); }
.dai__row i { height: 8px; border-radius: var(--pill); background: var(--surface-2); display: block; position: relative; overflow: hidden; }
.dai__row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--brand), #7cc7ff); border-radius: var(--pill); }
.dpane.is-active .dai__row i::after { animation: dfill 1.1s cubic-bezier(.3,.9,.4,1) forwards; }
.dai__row:nth-child(2) i::after { animation-delay: .18s } .dai__row:nth-child(3) i::after { animation-delay: .36s }
.dai__row:nth-child(4) i::after { animation-delay: .54s } .dai__row:nth-child(5) i::after { animation-delay: .72s }
@keyframes dfill { to { width: var(--w); } }
.dchips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dchip { font-size: var(--t-1); font-weight: 700; padding: 6px 12px; border-radius: var(--pill);
  background: var(--surface-2); color: var(--ink-2); opacity: 0; }
.dchip--pos { background: var(--pos-bg); color: var(--pos); }
.dchip--neg { background: var(--neg-bg); color: var(--neg); }
.dpane.is-active .dchip { animation: dpop .4s ease forwards; }
.dpane.is-active .dchip:nth-child(1) { animation-delay: .9s } .dpane.is-active .dchip:nth-child(2) { animation-delay: 1.02s }
.dpane.is-active .dchip:nth-child(3) { animation-delay: 1.14s } .dpane.is-active .dchip:nth-child(4) { animation-delay: 1.26s }
.dpane.is-active .dchip:nth-child(5) { animation-delay: 1.38s }

/* -- 4. the report -- */
.drep { display: grid; gap: 14px; }
.dpane.is-active .drep > * { opacity: 0; animation: drise .5s cubic-bezier(.2,.8,.3,1) forwards; }
.dpane.is-active .drep > *:nth-child(1) { animation-delay: .05s } .dpane.is-active .drep > *:nth-child(2) { animation-delay: .14s }
.dpane.is-active .drep > *:nth-child(3) { animation-delay: .23s } .dpane.is-active .drep > *:nth-child(4) { animation-delay: .32s }
.dpane.is-active .drep > *:nth-child(5) { animation-delay: .41s }
@keyframes drise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.drep__title { font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.drep__verdict { background: var(--brand-bg); color: var(--brand-ink); border-radius: var(--r-lg);
  padding: 14px 16px; font-size: var(--t-3); line-height: 1.5; }
.dsenti { display: flex; height: 30px; border-radius: var(--pill); overflow: hidden; }
.dsenti__seg { width: var(--w); display: grid; place-items: center; font-size: var(--t-1); font-weight: 800; color: #fff; }
/* Tokens, not the PDF renderer's chart hexes: white 13px/800 on #3f9668 measures
   ~3.4:1 and fails AA for normal-size text. --pos/--neu/--neg are the
   contrast-measured values, and the landing is force-light so they are stable. */
.dsenti__seg--pos { background: var(--pos); } .dsenti__seg--neu { background: var(--neu); } .dsenti__seg--neg { background: var(--neg); }
.dsenti__key { display: flex; gap: 16px; font-size: var(--t-1); color: var(--ink-3); }
.dsenti__key .k { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.k--pos { background: var(--pos) } .k--neu { background: var(--neu) } .k--neg { background: var(--neg) }
.drep__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .drep__cols { grid-template-columns: 1fr; } }
.drep__col h4 { margin: 0 0 10px; font-size: var(--t-2); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.dbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dbars li { display: grid; gap: 4px; font-size: var(--t-2); color: var(--ink-2); }
.dbars i { height: 7px; border-radius: var(--pill); background: var(--pos); width: var(--w); display: block; }
.dbars i.neg { background: var(--neg); }
.dactions { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: var(--t-2); color: var(--ink-2); line-height: 1.45; }

.demo__controls { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 16px; }
.demo__hint { margin-right: auto; font-size: var(--t-2); color: var(--ink-3); }
.demo__disclaimer { text-align: right; font-size: var(--t-1); color: var(--ink-3); margin: 8px 0 0; }
/* The whole stage advances on click, so it must say so with the cursor too. */
.demo__stage { cursor: pointer; }
.demo__stage .btn, .demo__stage a { cursor: pointer; }

/* -- priority action: the lead of the report -- */
.dprio { border: 1px solid var(--v-coral); border-left: 4px solid var(--v-coral);
  background: var(--v-coral-bg); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 7px; }
.dprio__tag { font-size: var(--t-1); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--v-coral); }
.dprio__problem { font-size: var(--t-3); color: var(--ink); line-height: 1.45; }
.dprio__fix { display: flex; gap: 8px; font-size: var(--t-4); font-weight: 700; color: var(--ink);
  line-height: 1.4; letter-spacing: -0.01em; }
.dprio__do { color: var(--v-coral); font-weight: 900; }
.dprio__artefact { font-size: var(--t-1); color: var(--ink-2); }
.dprio__artefact strong { color: var(--ink); }

/* -- unanswered questions -- */
.dqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dqs li { display: flex; gap: 9px; align-items: baseline; font-size: var(--t-2); color: var(--ink-2); line-height: 1.4; }
.dq__likes { flex: none; min-width: 30px; text-align: center; font-size: var(--t-1); font-weight: 800;
  color: var(--v-pink); background: var(--v-pink-bg); border-radius: var(--pill); padding: 2px 7px; }
.dqs__foot { margin: 9px 0 0; font-size: var(--t-1); color: var(--ink-3); }
.dactions li::marker { color: var(--v-violet); font-weight: 800; }

/* Respect a user who asked the OS for less motion: show the end state, no motion. */
@media (prefers-reduced-motion: reduce) {
  .dpane.is-active .dbub, .dpane.is-active .dchip, .dpane.is-active .drep > * { animation: none; opacity: 1; transform: none; }
  .dpane.is-active .dai__row i::after { animation: none; width: var(--w); }
  .dpane.is-active .dscan { animation: none; display: none; }
  .dfield__caret, .dai__spark { animation: none; }
}

/* ==========================================================================
   APP SKIN — bring the signed-in product onto the same design language as the
   marketing pages: same rounding, same soft shadows, same pill controls, same
   vivid accents. Restyles the SHARED components, so reports, trackers, detail
   and the account pages all move together instead of one page at a time.
   ========================================================================== */
.card { border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.page-head { align-items: flex-end; margin-bottom: 22px; }
.page-head .kicker { color: var(--v-violet); font-weight: 700; letter-spacing: .06em; }

/* filter pills */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filters { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface-2); border-radius: var(--pill); }
.filters a { padding: 8px 16px; border-radius: var(--pill); font-size: var(--t-2); font-weight: 600;
  color: var(--ink-3); text-decoration: none; border: 0; }
.filters a:hover { color: var(--ink); }
.filters a[aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* report rows as cards */
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.report-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 20px 22px; transition: transform .14s, box-shadow .14s, border-color .14s; }
.report-item:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.09); border-color: var(--line-2); }
.report-item__title a { text-decoration: none; color: var(--ink); letter-spacing: -0.01em; }
.report-item__title a:hover { color: var(--v-violet); }
.report-item__verdict { color: var(--ink-2); line-height: 1.55; }

/* status badges pick up the vivid ramp */
.badge { border-radius: var(--pill); font-weight: 700; font-size: var(--t-1); padding: 4px 11px; border: 0; }
.badge--done { background: var(--v-green-bg); color: var(--v-green); }
.badge--failed { background: var(--v-coral-bg); color: var(--v-coral); }
.badge--running, .badge--pending { background: var(--v-blue-bg); color: var(--v-blue); }
.badge--shared { background: var(--v-violet-bg); color: var(--v-violet); }

/* empty states match the marketing cards */
.empty { background: var(--surface-2); border: 0; border-radius: clamp(20px, 4vw, 32px);
  padding: clamp(34px, 6vw, 64px) 24px; text-align: center; }
.empty__mark { font-size: 30px; color: var(--v-violet); margin-bottom: 10px; }
.empty h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 750; letter-spacing: -0.02em; }
.empty p { color: var(--ink-2); max-width: 52ch; margin: 10px auto 20px; }

/* the quota meter */
.meter { background: var(--surface-2); border-radius: var(--pill); overflow: hidden; }
.meter > i { background: linear-gradient(90deg, var(--v-violet), var(--v-blue)); }

/* --- report: the engagement trade-off on a recommendation ------------------
   Amber, not red: this is a cost to weigh, not a failure. It sits under the
   recommended change and always carries BOTH the risk and the way to keep the
   interaction — the presenter drops the block unless both are present. */
.tradeoff { margin-top: 12px; padding: 11px 14px; border-left: 3px solid var(--warn);
  background: var(--warn-bg); border-radius: var(--r-sm); display: grid; gap: 6px; }
.tradeoff p { margin: 0; font-size: var(--t-2); line-height: 1.5; color: var(--ink-2); }
.tradeoff b { color: var(--ink); font-weight: 700; }
.tradeoff__keep { color: var(--ink); }
.tradeoff--sm { margin-top: 8px; padding: 9px 12px; }

/* --- dashboard platform tabs ---------------------------------------------- */
.plat-tabs { display: inline-flex; flex-wrap: wrap; margin: 0 0 20px; }
.plat-tabs .lp-tab { text-decoration: none; }
.plat-tabs__n { font-size: var(--t-1); font-weight: 700; color: var(--ink-3);
  background: var(--card); border-radius: var(--pill); padding: 1px 7px; margin-left: 2px; }
.lp-tab[aria-selected="true"] .plat-tabs__n { background: var(--surface-2); color: var(--ink); }
.page-head h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; }

/* --- landing footer ------------------------------------------------------- */
.lp-foot { border-top: 1px solid var(--line); padding: 40px 0; text-align: center; color: var(--ink-3); font-size: var(--t-2); }

/* ==========================================================================
   FORCED LIGHT — the marketing surface is white in every case
   Belt-and-braces behind base.html's pre-paint script (which stamps
   data-theme="light" on <html> for these pages). This covers JS-off. Specificity
   0-1-2 beats :root[data-theme="dark"] (0-1-1) regardless of source order, and
   custom properties inherit, so one declaration re-lights every descendant.
   Never add this class to an authed view — the in-app dark toggle depends on it.
   ========================================================================== */
html body.theme-light {
  color-scheme: light;
  --bg: #eef1f5; --card: #fff; --card-2: #f5f7fa;
  --line: #dfe3ea; --line-2: #ccd3de;
  --ink: #141a21; --ink-2: #3d4753; --ink-3: #5d6875;
  --brand: #146b62; --brand-hover: #0f544e; --brand-bg: #e3f0ee; --brand-ink: #155f58;
  --pos: #17693c; --pos-bg: #e2f2e8;
  --neg: #b3241c; --neg-bg: #fbe6e4;
  --neu: #5d6875; --neu-bg: #eceff3;
  --warn: #8a5a00; --warn-bg: #fdf0d9;
  --danger: #b3241c; --danger-bg: #fbe6e4;
  --focus: #0b57d0; --btn-fg: #fff;
  --s1: #146b62; --s2: #8a5a00; --s3: #5b4a9e; --s4: #a03668; --s5: #2a6f8f; --s6: #6b6257;

  /* VIVID accents — marketing only. The product palette above is deliberately
     muted (it sits under model-generated content all day); a sales page needs
     colour that carries. Each of these is >=4.5:1 on white, so they are safe on
     text, not just on fills. */
  --v-violet: #5b3ce8; --v-violet-bg: #ece8ff;
  --v-blue:   #1d5ff5; --v-blue-bg:   #e3edff;
  --v-teal:   #0d8f80; --v-teal-bg:   #d7f5f0;
  --v-green:  #12924c; --v-green-bg:  #ddf6e6;
  --v-amber:  #a86400; --v-amber-bg:  #fff0d0;
  --v-coral:  #d93d24; --v-coral-bg:  #ffe6e0;
  --v-pink:   #c22a7a; --v-pink-bg:   #ffe4f1;
}

/* ==========================================================================
   MARKETING BLOCKS (templates/_marketing.html)
   Every section is a DIRECT child of the content block — see the body.lp
   full-bleed rule above; nesting one inside another wrapper re-caps it at a
   ~62ch prose measure.
   ========================================================================== */
.mk { padding: clamp(48px, 8vw, 104px) 0; }
.mk-head { max-width: 62ch; margin: 0 auto clamp(26px, 5vw, 52px); text-align: center; }
.mk-head h2 { font-size: clamp(26px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 12px; }
.mk-head p { color: var(--ink-2); font-size: var(--t-5); line-height: 1.55; margin: 0; }
/* Pastel eyebrow, one colour per section, near-black text (white fails on pastel). */
.mk-badge { display: inline-block; font-size: 13px; font-weight: 700; color: #141a21;
  padding: 5px 13px; border-radius: var(--pill); }
.mk-badge--y { background: #ffe99a; } .mk-badge--m { background: #c9f2de; }
.mk-badge--o { background: #ffce9a; } .mk-badge--l { background: #dcd6fa; }

/* Coloured emphasis inside headlines — the page was all near-black text, which
   is exactly the "no colour, nothing catches the eye" complaint. */
.hl { color: var(--v-violet); }
.hl--blue { color: var(--v-blue); } .hl--teal { color: var(--v-teal); }
.hl--coral { color: var(--v-coral); } .hl--green { color: var(--v-green); }
.hl--pink { color: var(--v-pink); }
/* Gradient wash for the single most important phrase on the page. */
.hl--grad { background: linear-gradient(96deg, var(--v-violet), var(--v-blue) 45%, var(--v-teal));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Marker-pen highlight; sits behind the text so the ink stays near-black AA. */
.hl--mark { background: linear-gradient(180deg, transparent 58%, var(--v-amber-bg) 58%); padding: 0 .08em; }

/* ---- site menu (postana-style dropdowns) --------------------------------- */
.menu { display: flex; align-items: center; gap: 2px; }
@media (max-width: 900px) { .menu { display: none; } }
.menu__item { position: relative; }
.menu__btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 9px 13px; border-radius: var(--pill); font-size: var(--t-3);
  font-weight: 600; color: var(--ink-2); font-family: inherit; text-decoration: none; }
.menu__btn:hover, .menu__item:hover .menu__btn, .menu__item:focus-within .menu__btn {
  background: var(--surface-2); color: var(--ink); }
.menu__btn i { font-style: normal; font-size: 9px; color: var(--ink-3); transition: transform .18s; }
.menu__item:hover .menu__btn i { transform: rotate(180deg); }
.menu__panel { position: absolute; left: 50%; translate: -50% 0; top: calc(100% + 6px); z-index: 70;
  min-width: 268px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 16px 44px rgba(0,0,0,.14); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .16s, visibility .16s; }
.menu__item:hover .menu__panel, .menu__item:focus-within .menu__panel {
  opacity: 1; visibility: visible; transform: translateY(0); }
.menu__link { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink); }
.menu__link:hover { background: var(--surface-2); }
.menu__link em { font-style: normal; font-size: 17px; line-height: 1; margin-top: 1px; }
.menu__link span { display: grid; gap: 2px; }
.menu__link strong { font-size: var(--t-3); font-weight: 650; }
.menu__link small { font-size: var(--t-1); color: var(--ink-3); line-height: 1.35; }

/* mobile: a details/summary sheet instead of the hover menus */
.menu-m { display: none; }
@media (max-width: 900px) { .menu-m { display: block; } }
.menu-m > summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: var(--pill);
  border: 1px solid var(--line-2); font-size: var(--t-2); font-weight: 650; color: var(--ink-2); }
.menu-m > summary::-webkit-details-marker { display: none; }
.menu-m__panel { position: absolute; left: 12px; right: 12px; top: 64px; z-index: 80;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 16px 44px rgba(0,0,0,.16); padding: 10px; display: grid; gap: 2px; }

/* value props — flat grey tiles, no titles */
.mk-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 720px) { .mk-props { grid-template-columns: 1fr; } }
.mk-prop { background: var(--surface-2); border-radius: var(--r-xl); padding: 24px; }
.mk-prop__ico { width: 34px; height: 34px; border-radius: 10px; background: var(--card);
  display: grid; place-items: center; font-size: 18px; margin-bottom: 14px; }
.mk-prop p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* the accordion-style feature block */
.mk-split { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.mk-split--flip { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 940px) { .mk-split, .mk-split--flip { grid-template-columns: 1fr; } }
.mk-list { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.mk-split--flip .mk-list { margin-left: auto; }
.mk-list li { border-top: 1px solid var(--line); }
.mk-list li:first-child { border-top: 0; }
.mk-item { width: 100%; text-align: left; background: none; border: 0; padding: 20px 0; cursor: pointer;
  display: flex; gap: 14px; align-items: baseline; }
.mk-item__n { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--surface-2);
  color: var(--ink-3); font-size: 13px; font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; transition: opacity .3s; opacity: .2; }
.mk-item__t { font-size: var(--t-5); font-weight: 700; color: var(--ink-3); letter-spacing: -0.01em; transition: color .3s; }
.mk-item:hover .mk-item__t { color: var(--ink); }
.mk-item[aria-expanded="true"] .mk-item__n { opacity: 1; }
.mk-item[aria-expanded="true"] .mk-item__t { color: var(--ink); }
.mk-item__body { display: none; padding: 0 0 20px 42px; font-size: var(--t-3); line-height: 1.6; color: var(--ink-2); }
.mk-item[aria-expanded="true"] + .mk-item__body { display: block; }

/* the sticky mock panel beside it */
.mk-mock { position: relative; background: var(--surface-2); border-radius: clamp(20px, 4vw, 32px);
  min-height: 420px; display: grid; place-items: center; padding: 26px; overflow: hidden; }
@media (min-width: 1024px) { .mk-mock { position: sticky; top: 96px; } }
.mk-mock::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 70% 20%, rgba(124,199,255,.35), transparent 70%); }
.mk-card { position: relative; background: var(--card); border-radius: 16px; padding: 20px;
  box-shadow: 0 4px 32px rgba(0,0,0,.08); width: 100%; max-width: 420px; display: grid; gap: 12px; }
.mk-card h5 { margin: 0; font-size: var(--t-2); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

/* who it's for */
.mk-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .mk-who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mk-who { grid-template-columns: 1fr; } }
.mk-who__c { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; }
.mk-who__ico { width: 30px; height: 30px; border-radius: 10px; background: var(--surface-2);
  display: grid; place-items: center; font-size: 16px; margin-bottom: 12px; }
.mk-who__c h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.mk-who__c p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.mk-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.mk-pills span { background: var(--surface-2); border-radius: var(--pill); padding: 8px 16px;
  font-size: 14px; color: var(--ink-2); }

/* sample-report panel */
.mk-sample { background: var(--surface-2); border-radius: clamp(24px, 4vw, 40px); padding: clamp(32px, 5vw, 64px); }
.mk-sample__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 900px) { .mk-sample__grid { grid-template-columns: 1fr; } }
.mk-sample h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 12px; }
.mk-sample p { color: var(--ink-2); margin: 0 0 22px; line-height: 1.55; }
.mk-sample__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.mk-sample__cap { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; }
.mk-peek { position: relative; background: var(--card); border-radius: 16px; padding: 22px;
  box-shadow: 0 4px 32px rgba(0,0,0,.08); display: grid; gap: 12px; }
.mk-peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  border-radius: 0 0 16px 16px; background: linear-gradient(transparent, var(--surface-2)); }

/* FAQ — native <details>, no JS */
.mk-faq { max-width: 780px; margin: 0 auto; }
.faq { border-top: 1px solid var(--line); }
.faq:first-child { border-top: 0; }
.faq summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 18px 0; font-size: 16px; font-weight: 650; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--ink-3); font-size: 20px;
  font-weight: 400; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* final CTA — the page's ONE dark object, hardcoded so it stays dark anywhere */
.mk-cta { padding: clamp(40px, 7vw, 80px) 0; }
.mk-cta__panel { position: relative; overflow: hidden; background: #171717;
  border-radius: clamp(24px, 4vw, 32px); padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px);
  text-align: center; }
.mk-cta__panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 120%, rgba(124,199,255,.35), transparent 70%); }
.mk-cta__in { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: center; }
.mk-cta h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: #fff; margin: 0; }
.mk-cta h2 span { display: block; }
.mk-cta p { color: rgba(255,255,255,.8); font-size: 16px; margin: 0; }
.mk-cta .btn { background: #fff; color: #000; }
.mk-cta .btn:hover { background: #fff; color: #000; opacity: .9; }