/* ============================================================================
   Konkurentsianalüüs — design system
   Matches the "Competitive Analysis Report Tool" Claude Design:
   Space Grotesk (display) + Instrument Sans (body) + Space Mono (labels) — /naidis overrides --font-mono with Inter,
   warm off-white surfaces, near-black ink, indigo primary, lime accent,
   neo-brutalist hard-offset shadows, dark feature sections.
   ============================================================================ */

:root {
  /* Surfaces */
  --page: #EDEDEA;
  --surface: #FAFAF8;
  --surface-2: #F6F6F2;       /* warm inset */
  --white: #ffffff;
  --indigo-tint: #EEF0FF;
  --indigo-tint-2: #F6F6FF;

  /* Ink / dark surfaces */
  --ink: #101014;
  --ink-2: #18181D;
  --ink-3: #2A2A30;
  --line-dark: #3A3A40;
  --on-dark: #FAFAF8;
  --on-dark-muted: #A0A0A8;

  /* Brand */
  --indigo: #4F46E5;
  --indigo-hover: #3730A3;
  --lime: #D8FF3E;

  /* Text */
  --muted: #6B6B70;
  --muted-2: #4A4A50;
  --muted-3: #9A9AA0;

  /* Semantic */
  --positive: #1A9E5C;
  --negative: #C0392B;
  --negative-tint: #FDECEA;
  --warning: #D98324;             /* cancelled checkout: not an error, not a success */
  --bar-gray: #C9C9D6;
  --bar-neg: #E7B5AC;             /* loss bars: the grey bar's red counterpart */

  /* Lines */
  --border: #E2E2DE;
  --border-2: #ECECE8;
  --border-3: #D8D8D4;
  --border-4: #F0F0EC;

  /* Radii */
  --r-sm: 8px;
  --r: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-lime: 4px 4px 0 var(--lime);
  --shadow-soft: 0 8px 40px rgba(16, 16, 20, 0.10);
  --shadow-pop: 0 16px 40px rgba(16, 16, 20, 0.14);

  /* Fonts */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-toast: 500;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-hover); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

/* ---- Primitives ---------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap--wide { max-width: 1320px; }
.label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.mono { font-family: var(--font-mono); }
.pos { color: var(--positive); }
.neg { color: var(--negative); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--indigo-tint); color: var(--indigo);
}

/* ---- Top navigation ------------------------------------------------------ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--border-2);
  background: var(--surface);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 28px; height: 28px; background: var(--indigo); border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--lime);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; flex: none;
}
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em; color: var(--ink);
}
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--ink); }
.nav-links a:hover { color: var(--indigo); }
.nav-right { display: flex; align-items: center; gap: 20px; }

.lang {
  display: inline-flex; border: 1px solid var(--border-3); border-radius: var(--r-sm);
  overflow: hidden; font-family: var(--font-mono); font-size: 13px;
}
.lang > * { padding: 5px 10px; color: var(--muted); }
.lang [aria-current="true"] { background: var(--ink); color: var(--on-dark); }

/* mobile disclosure menu (shown ≤960px, no JS needed) */
.nav-menu { display: none; position: relative; }
.nav-menu__toggle {
  list-style: none; display: grid; gap: 5px; align-content: center;
  width: 44px; height: 44px; padding: 0; justify-items: center;
  margin: -8px 0; cursor: pointer; border-radius: var(--r-sm);
}
.nav-menu__toggle::-webkit-details-marker { display: none; }
.nav-menu__bar {
  width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .18s var(--ease-out), opacity .18s var(--ease-out);
}
.nav-menu[open] .nav-menu__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-menu[open] .nav-menu__bar:nth-child(2) { opacity: 0; }
.nav-menu[open] .nav-menu__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-menu__panel {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: var(--z-dropdown);
  min-width: 210px; display: flex; flex-direction: column; padding: 6px;
  background: var(--white); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow-hard);
}
.nav-menu__panel a {
  padding: 13px 14px; font-family: var(--font-display); font-size: 15px;
  font-weight: 600; color: var(--ink); border-radius: var(--r-sm);
}
.nav-menu__panel a:hover { background: var(--indigo-tint); color: var(--indigo); }
.nav-menu__panel .nav-menu__cta {
  margin-top: 6px; text-align: center; background: var(--lime);
  border: 2px solid var(--ink); color: var(--ink);
}
.nav-menu__panel .nav-menu__cta:hover { background: var(--lime); color: var(--ink); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border: 2px solid transparent; border-radius: 10px; padding: 11px 20px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease-out), transform .12s var(--ease-out),
              box-shadow .12s var(--ease-out), color .18s var(--ease-out);
}
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: #26262c; color: var(--on-dark); }

.btn--indigo { background: var(--indigo); color: #fff; }
.btn--indigo:hover { background: var(--indigo-hover); color: #fff; }

/* neo-brutalist: hard offset shadow that presses on hover */
.btn--lime {
  background: var(--lime); color: var(--ink); border-color: var(--ink);
  font-weight: 700; box-shadow: var(--shadow-hard);
}
.btn--lime:hover:not(:disabled) { color: var(--ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--lime:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-3); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn--ghost-dark { background: transparent; color: var(--on-dark); border-color: var(--line-dark); }
.btn--ghost-dark:hover { color: var(--on-dark); border-color: var(--on-dark-muted); }

/* Pre-launch stand-in for a CTA: reads as a label, not something to click. */
/* `.btn.btn--soon` (not `.btn--soon`) so it also out-ranks
   `.btn--lime:hover:not(:disabled)`, which would otherwise re-press on hover. */
.btn.btn--soon, .btn.btn--soon:hover, .btn.btn--soon:active {
  background: var(--white); color: var(--muted-2); border-color: var(--border-3);
  box-shadow: none; transform: none; cursor: default; font-weight: 600;
}
/* The menu CTA is normally an <a>; pre-launch it is a <span>, so it needs the
   panel-link geometry spelled out rather than inherited from `.nav-menu__panel a`. */
.nav-menu__panel .nav-menu__cta--soon {
  margin-top: 6px; padding: 13px 14px; text-align: center; cursor: default;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  background: transparent; color: var(--muted-2);
  border: 2px solid var(--border-3); border-radius: var(--r-sm);
}

.btn--lg { font-size: 16px; padding: 15px 26px; }
.btn--sm { font-size: 13px; padding: 7px 14px; border-radius: var(--r-sm); }

/* ---- Inputs -------------------------------------------------------------- */
.field {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 2px solid var(--ink); border-radius: var(--r);
  padding: 15px 18px; box-shadow: var(--shadow-hard);
  transition: box-shadow .12s var(--ease-out);
}
.field:focus-within { box-shadow: 2px 2px 0 var(--indigo); border-color: var(--indigo); }
.field__dot { width: 10px; height: 10px; border: 2px solid var(--muted); border-radius: 50%; flex: none; }
.field input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 16px; color: var(--ink); min-width: 0;
}
.field input::placeholder { color: var(--muted-3); }

/* softer inline input (selection search) */
.field--soft { border: 2px solid var(--indigo); box-shadow: none; padding: 13px 16px; }
.field--soft:focus-within { box-shadow: 0 0 0 3px var(--indigo-tint); }

.input {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  padding: 13px 16px; border: 2px solid var(--border-3); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-tint); }
.input::placeholder { color: var(--muted-3); }

/* ---- Cards / panels ------------------------------------------------------ */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.panel--dark { background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg); }
.panel--dark .label { color: var(--on-dark-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--border-3); background: var(--surface); color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge--own { background: var(--lime); border-color: var(--ink); color: var(--ink); }

/* ============================================================================
   LANDING
   ============================================================================ */
.landing { padding-bottom: 0; }

/* thin personalised strip above the hero — shown only when the mk cookie
   resolves to a recipient with a usable, cookie-derived prefill */
.landing-strip {
  background: var(--ink); color: var(--on-dark);
  /* sticks just under the sticky .topbar, which is 85.5px tall whenever the
     nav CTA button renders (measured in Chrome; 85px gives a safe sub-pixel
     overlap) — not 61px, that figure only fits the app-chrome topbar */
  position: sticky; top: 85px; z-index: calc(var(--z-sticky) - 10);
  /* one-shot attention pulse on load: peaks decay (100% → 12%) while the
     interval between them grows, settling back to --ink by 30s */
  animation: landing-strip-pulse 30s ease-in-out 1;
}
/* ≤600px the nav CTA hides (media query below), so the topbar drops to 65px */
@media (max-width: 600px) {
  .landing-strip { top: 64px; }
}
/* base #101014 ↔ peak #3B3B66 (an indigo lift strong enough to register),
   interpolated per amplitude */
@keyframes landing-strip-pulse {
  0%   { background-color: #101014; }
  4%   { background-color: #3B3B66; }  /* 1.2s — full amplitude */
  8%   { background-color: #101014; }
  14%  { background-color: #2E2E49; }  /* 4.2s — 70% */
  20%  { background-color: #101014; }
  29%  { background-color: #232335; }  /* 8.7s — 45% */
  38%  { background-color: #101014; }
  51%  { background-color: #1B1B25; }  /* 15.3s — 25% */
  64%  { background-color: #101014; }
  77%  { background-color: #15151A; }  /* 23.1s — 12% */
  90%  { background-color: #101014; }
  100% { background-color: #101014; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-strip { animation: none; }
}
.landing-strip__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 24px;
}
.landing-strip__text { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--on-dark-muted); }
.landing-strip__text strong { color: var(--on-dark); }

/* ============================================================================
   NAIDIS — marketing sample-report landing (/naidis)
   ============================================================================ */
/* Page-scoped font swap: Inter everywhere the rest of the site uses Space Mono.
   tnum keeps numeric tables aligned since Inter is not monospace. */
.naidis {
  --font-mono: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum";
}

/* the only sticky chrome on /naidis: rotating message + static message + CTA
   (no topbar here) */
.naidis-bar {
  background: var(--ink); color: var(--on-dark);
  position: sticky; top: 0; z-index: calc(var(--z-sticky) - 10);
}
.naidis-bar__inner {
  display: flex; align-items: center; gap: 24px; padding: 16px 24px;
}
.naidis-bar__msg {
  flex: 1; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--on-dark-muted);
  transition: opacity .2s var(--ease-out);
}
.naidis-bar__msg strong { color: var(--on-dark); }
/* the permanent pitch is the bar's main statement — biggest type in the bar,
   muted gray so the visitor's own company name pops against it */
.naidis-bar__static {
  margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--on-dark-muted);
}
.naidis-bar__static strong {
  color: var(--on-dark);
  text-shadow: 0 0 12px rgba(250, 250, 248, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .naidis-bar__msg { transition: none; }
}
/* narrow screens: both messages drop to their own rows so the CTA never
   crowds them out */
@media (max-width: 600px) {
  .naidis-bar__inner { flex-wrap: wrap; gap: 8px 12px; }
  .naidis-bar__msg { flex-basis: 100%; order: 3; font-size: 12.5px; }
  .naidis-bar__static { font-size: 16px; }
}

/* the report as a stack of A4-like sheets on a grey viewer backdrop.
   All rules live under .naidis-doc so /raport and the PDF print variant
   are untouched. */
.naidis-doc {
  background: #e9e9ee;
  padding: clamp(16px, 3vw, 40px) clamp(8px, 2vw, 24px) clamp(40px, 5vw, 64px);
}
/* flatten the shared report DOM (header / toc / sections) into one column of
   sheets: display: contents makes toc + sections direct flow children */
.naidis-doc .report { max-width: 800px; margin: 0 auto; background: transparent; }
.naidis-doc .report-body, .naidis-doc .report-content { display: contents; }

/* sheet base: white page, pop shadow, page gap; min-height mimics A4 portrait
   (297/210 at 800px ≈ 1131px) but grows for long sections instead of clipping */
.naidis-doc .report-header,
.naidis-doc .toc,
.naidis-doc .report-section {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.naidis-doc .report-section {
  background: var(--white);
  margin-top: 24px;
  min-height: 1131px;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 56px);
  scroll-margin-top: 100px; /* clear the taller message bar */
}
/* cover sheet = dark header + the contents list fused below it (no gap) */
.naidis-doc .report-header {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  scroll-margin-top: 100px;
}
.naidis-doc .toc {
  /* no sidebar rail on /naidis: the rail comes from the base .toc rule's
     position: sticky + top offset. The sheet base keeps this relative so the
     watermark can anchor to it, so top: 0 cancels the offset relative honours */
  top: 0;
  margin-top: 0;
  border-right: 0;
  background: var(--white);
  padding: 24px clamp(24px, 4vw, 56px) clamp(28px, 4vw, 40px);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  columns: 2; column-gap: 40px;
}
.naidis-doc .toc a {
  display: block; break-inside: avoid;
  padding: 8px 0; font-size: 14px; color: var(--muted-2);
  border-right: 0; border-bottom: 1px solid var(--border-4);
}
.naidis-doc .toc a:hover { color: var(--ink); }
.naidis-doc .toc a.is-active { background: none; font-weight: 600; color: var(--indigo); }
/* §4 and §5 are both short — fused into one sheet like the cover: no gap,
   no forced A4 height on either half (their combined content fits a page) */
.naidis-doc #s4 { min-height: 0; }
.naidis-doc #s5 { margin-top: 0; min-height: 0; }

/* the report meta line closes the last sheet rather than floating on the grey;
   border-top: 0 drops the base rule's hairline — it reads as a sheet edge here */
.naidis-doc .report-foot {
  background: var(--white); margin-top: 24px; box-shadow: var(--shadow-pop);
  padding: 18px clamp(24px, 4vw, 56px);
  border-top: 0;
}

/* the disclosure watermark — faint diagonal across every sheet, so any
   screenshot of the sample carries it. Copy arrives via --naidis-wm (ET).
   Top layer by design (faint alpha keeps it readable over text);
   pointer-events: none keeps the ToC links clickable through it. */
.naidis-doc .report-header::after,
.naidis-doc .toc::after,
.naidis-doc .report-section::after {
  content: var(--naidis-wm);
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  font-size: clamp(28px, 5vw, 44px); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  transform: rotate(-28deg);
  pointer-events: none; user-select: none;
}
/* tall sheets repeat the marker three times down the page, so a screenshot of
   any part of a long sheet carries it too (the short cover header keeps one) */
.naidis-doc .toc::after,
.naidis-doc .report-section::after {
  content: var(--naidis-wm) "\A" var(--naidis-wm) "\A" var(--naidis-wm);
  white-space: pre;
  line-height: 5;
}
.naidis-doc .report-header::after { color: rgba(255, 105, 105, 0.14); } /* dark cover */
.naidis-doc .toc::after,
.naidis-doc .report-section::after { color: rgba(200, 30, 30, 0.10); }    /* white sheets */

@media (max-width: 600px) {
  .naidis-doc .report-section { min-height: 0; }
  .naidis-doc .toc { columns: 1; }
}

.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px);
  align-items: center; padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
}
.hero__copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance; max-width: 15ch;
}
.hero__lede { font-size: 19px; line-height: 1.55; color: var(--muted-2); max-width: 52ch; text-wrap: pretty; }
.hero__entry { display: flex; gap: 10px; width: 100%; max-width: 560px; }
.hero__entry .field { flex: 1; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
/* Sample-report link: an entry point of its own, so it sits below the CTA rather
   than among the trust badges — quiet, but not a footnote. */
.hero__sample { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; }
.hero__sample-link { font-weight: 500; }
.hero__sample-link:hover { text-decoration: underline; }
.sample__meta { color: var(--muted); }

/* report preview card */
.preview { position: relative; }
.preview__glow {
  position: absolute; inset: -24px -12px auto auto; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(216, 255, 62, 0.45), transparent 70%);
  pointer-events: none;
}
.preview__card {
  position: relative; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px; box-shadow: 0 24px 48px rgba(16, 16, 20, 0.12);
  transform: rotate(1.5deg); display: flex; flex-direction: column; gap: 18px;
}
.preview__head { display: flex; justify-content: space-between; align-items: center; }
.preview__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.preview__bars { display: flex; align-items: flex-end; gap: 14px; height: 150px; }
.preview__bar { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; height: 100%; }
.preview__bar > i { display: block; border-radius: 6px 6px 0 0; background: var(--bar-gray); }
.preview__bar--own > i { background: var(--indigo); }
.preview__bar span { font-size: 11px; color: var(--muted); text-align: center; }
.preview__ai {
  background: var(--surface-2); border-radius: var(--r); padding: 14px 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--muted-2);
}
.preview__ai strong { color: var(--ink); }

/* full-bleed dark band inside landing */
.band-dark { background: var(--ink); color: var(--on-dark); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: clamp(40px, 5vw, 56px) 0; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step__n { font-family: var(--font-mono); color: var(--lime); font-size: 14px; }
.step__t { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.step__d { color: var(--on-dark-muted); font-size: 15px; line-height: 1.55; }

.pricing {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding: 40px 0; border-top: 1px solid var(--border-2);
}
.pricing__info { display: flex; flex-direction: column; gap: 12px; }
.pricing__amount { display: flex; align-items: baseline; gap: 16px; }
.pricing__amount b { font-family: var(--font-display); font-size: 40px; font-weight: 700; }
.pricing__amount span { color: var(--muted); font-size: 16px; }
.pricing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pricing__note { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 60ch; }
.pricing__note a { color: var(--indigo); font-weight: 500; }

/* FAQ (KKK) */
.faq { padding: clamp(40px, 5vw, 64px) 24px; scroll-margin-top: 80px; }
.faq__heading { font-size: clamp(26px, 3vw, 34px); margin-bottom: 28px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq__item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.faq__item[open] { border-color: var(--ink); box-shadow: var(--shadow-hard); }
.faq__q {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  padding: 16px 20px; user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; font-family: var(--font-mono); font-size: 18px;
  color: var(--indigo); flex: none; transition: transform 0.2s var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 20px 18px; color: var(--muted-2); font-size: 15px; line-height: 1.6; max-width: 72ch; }

/* ============================================================================
   STEPPER (selection / order chrome)
   ============================================================================ */
.stepper { display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.stepper__item { display: flex; align-items: center; gap: 8px; }
.stepper__dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; border: 2px solid var(--border-3);
  color: var(--muted-3); flex: none;
}
.stepper__item--done .stepper__dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper__item--done .stepper__label { font-weight: 600; }
.stepper__item--now .stepper__dot { background: var(--lime); border-color: var(--ink); color: var(--ink); }
.stepper__item--now .stepper__label { font-weight: 600; }
.stepper__item--todo .stepper__label { color: var(--muted-3); }
.stepper__bar { width: 32px; height: 2px; background: var(--border-3); }
.stepper__bar--done { background: var(--ink); }

/* ============================================================================
   SELECTION
   ============================================================================ */
.select-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--border-2); background: var(--surface);
}
.select {
  display: grid; grid-template-columns: 400px 1fr; align-items: start;
  min-height: 640px;
}
.select__aside {
  padding: 32px; border-right: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 24px; background: var(--surface);
}
.select__main { padding: 32px clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; }

.field-group { display: flex; flex-direction: column; gap: 8px; position: relative; }

/* your-company card */
.own-card {
  border: 2px solid var(--ink); border-radius: var(--r-md); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-hard-lime);
  background: var(--white);
}
.own-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.own-card__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.own-card__edit { font-size: 13px; color: var(--indigo); font-weight: 500; background: none; border: 0; cursor: pointer; padding: 0; }
.own-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 13.5px; color: var(--muted-2); }
.own-card__meta strong { color: var(--ink); }
.own-empty {
  border: 2px dashed var(--border-3); border-radius: var(--r-md); padding: 20px;
  color: var(--muted); font-size: 14.5px;
}

/* type-ahead dropdown */
.results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-dropdown);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--white);
  box-shadow: var(--shadow-pop); overflow: hidden;
}
.results:empty { display: none; }
.result {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 13px 16px; border: 0; background: transparent;
  cursor: pointer; font-family: var(--font-body); border-top: 1px solid var(--border-4);
}
.result:first-child { border-top: 0; }
.result:hover, .result:focus-visible { background: var(--indigo-tint-2); }
.result__name { font-weight: 600; font-size: 15px; color: var(--ink); }
.result__meta { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); }
.result__add {
  font-family: var(--font-display); font-size: 13px; font-weight: 600; flex: none;
  padding: 6px 14px; border-radius: var(--r-sm); background: var(--indigo); color: #fff;
}
/* already selected / own company / list full — the row states its reason instead
   of looking clickable and doing nothing */
.results__notice { margin: 0; padding: 13px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.results__notice--err { color: var(--negative); }
.result--off { cursor: default; }
.result--off:hover, .result--off:focus-visible { background: transparent; }
.result--off .result__name { color: var(--muted-2); }
.result__add--off {
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-3);
  font-weight: 500;
}

/* suggestions list */
.suggest { display: flex; flex-direction: column; gap: 6px; }
.suggest__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--surface-2); border-radius: var(--r-sm);
  border: 0; width: 100%; text-align: left; cursor: pointer; font-family: var(--font-body);
}
.suggest__row:hover { background: #eeeee8; }
.suggest__name { font-weight: 500; font-size: 14px; color: var(--ink); }
.suggest__sub { font-size: 12px; color: var(--muted); }
.suggest__add { color: var(--indigo); font-weight: 600; font-size: 13px; }

/* selected competitors */
.select__count { font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.comp-card {
  border: 1px solid var(--border); background: var(--white); border-radius: var(--r);
  padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.comp-card__name { font-weight: 600; font-size: 15px; }
.comp-card__code { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); }
.comp-card__x {
  color: var(--muted-3); font-size: 18px; line-height: 1; background: none; border: 0;
  cursor: pointer; padding: 2px; flex: none;
}
.comp-card__x:hover { color: var(--negative); }
.comp-add {
  border: 2px dashed var(--border-3); border-radius: var(--r); padding: 15px 18px;
  display: grid; place-items: center; color: var(--muted-3); font-size: 14px; text-align: center;
  width: 100%; background: transparent; font-family: var(--font-body); cursor: pointer;
  transition: border-color .12s var(--ease-out), color .12s var(--ease-out);
}
.comp-add:hover, .comp-add:focus-visible { border-color: var(--indigo); color: var(--indigo); }

/* dark CTA summary bar */
.cta-bar {
  margin-top: 8px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-md); padding: 20px 24px;
}
.cta-bar__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.cta-bar__sub { font-size: 13.5px; color: var(--on-dark-muted); }
.cta-bar__right { display: flex; align-items: center; gap: 16px; }
.cta-bar__price { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--lime); }

.form-error { color: var(--negative); font-size: 14px; }

/* ---- Required-field errors (marked on "Koosta raport", not upfront) ------- */
.field-error {
  margin: 0; color: var(--negative); font-size: 13px; font-weight: 500; line-height: 1.4;
}
.field-error[hidden] { display: none; }

.is-invalid .label { color: var(--negative); }
.is-invalid .input { border-color: var(--negative); background: var(--negative-tint); }
.is-invalid .input:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16); }
.is-invalid .own-empty {
  border-style: solid; border-color: var(--negative);
  background: var(--negative-tint); color: var(--negative);
}
.is-invalid .consent__box { accent-color: var(--negative); outline: 2px solid var(--negative); outline-offset: 3px; }
.is-invalid .consent__label { color: var(--negative); }

/* ============================================================================
   LOADING
   ============================================================================ */
.loading-screen {
  background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg);
  min-height: 640px; display: grid; place-items: center; padding: 48px 24px;
}
.loading-inner { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 30px; }
.loading-head { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.loading-kicker { font-family: var(--font-mono); font-size: 13px; color: var(--lime); letter-spacing: 0.1em; }
.loading-title { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 700; }
.loading-lede { font-size: 15px; color: var(--on-dark-muted); }

.progress { height: 8px; background: var(--ink-3); border-radius: var(--r-pill); overflow: hidden; }
.progress__bar {
  height: 100%; width: 10%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--indigo), var(--lime));
  transition: width .5s var(--ease-out);
}
.progress-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 8px; }

.check-list {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-md); padding: 24px;
}
.check { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--on-dark-muted); }
.check__dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-3);
  display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700;
}
.check--now { color: var(--on-dark); font-weight: 600; }
.check--now .check__dot { border-color: var(--indigo); }
.check--now .check__dot::after { content: ""; width: 8px; height: 8px; background: var(--indigo); border-radius: 50%; }
.check--done { color: var(--on-dark); }
.check--done .check__dot { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.check--done .check__dot::after { content: "✓"; }
.loading-foot { text-align: center; font-size: 13.5px; color: var(--muted); transition: opacity .4s ease; }

/* ============================================================================
   REPORT — PDF TITLE PAGE
   Emitted only for the print variant (report.ts), so it never reaches the web
   report. Sized in millimetres because its one job is to fill sheet one: the
   dark field bleeds to three paper edges and stops 16mm short of the bottom,
   where @page :first leaves white for the running footer Chrome stamps in.
   ============================================================================ */
.cover {
  height: 281mm; box-sizing: border-box; background: var(--ink); color: var(--on-dark);
  padding: 26mm 20mm 18mm; display: flex; flex-direction: column; break-after: page;
}
.cover__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cover__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--on-dark);
}
.cover__brand-mark {
  width: 22px; height: 22px; border-radius: 6px; background: var(--indigo); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.cover__kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--lime);
}
/* Upper third, not centred: the field below the title is what makes the base
   block read as a base rather than as the second half of a two-part stack. */
.cover__title { margin-top: 26mm; }
.cover__for {
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-3); margin-bottom: 12px;
}
.cover h1 {
  font-size: 46px; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance;
  color: var(--on-dark); overflow-wrap: break-word;
}
.cover__vs {
  margin-top: 10px; font-family: var(--font-display); font-size: 21px; font-weight: 400;
  color: var(--on-dark-muted);
}
/* The title sits in the upper third and the metadata base is pushed to the foot
   of the sheet, so the dark field reads as one composition rather than a stack
   that ran out of content two thirds down. */
.cover__facts {
  margin: auto 0 0; padding-top: 15px; border-top: 2px solid var(--lime);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px;
}
.cover__fact dt {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-3); margin-bottom: 3px;
}
.cover__fact--wide { grid-column: 1 / -1; }
.cover__fact dd { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--on-dark); }
.cover__index { margin-top: 14mm; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.cover__index-title {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-3); margin-bottom: 10px;
}
.cover__index-list {
  margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px;
  font-size: 12.5px; color: var(--on-dark-muted);
}
.cover__index-list li { break-inside: avoid; padding: 2.5px 0; }
.cover__index-n {
  display: inline-block; min-width: 20px; font-family: var(--font-mono);
  font-size: 11px; color: var(--lime);
}
.cover__foot {
  margin-top: 12mm; display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; color: var(--muted-3);
}
.cover__foot-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-3); flex: none;
}

/* ============================================================================
   REPORT
   ============================================================================ */
.report { background: var(--surface); }
.report-header {
  background: var(--ink); color: var(--on-dark); padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;
}
.report-header__kicker { font-family: var(--font-mono); font-size: 12px; color: var(--lime); letter-spacing: 0.1em; text-transform: uppercase; }
.report-header h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 10px 0; }
.report-header h1 .vs { color: var(--muted); font-weight: 400; }
.report-header__sub { font-size: 14.5px; color: var(--on-dark-muted); }
.report-header__actions { display: flex; gap: 10px; }

.report-body { display: grid; grid-template-columns: 260px 1fr; align-items: start; }

/* table of contents */
.toc {
  border-right: 1px solid var(--border-2); padding: 28px 0; background: var(--surface);
  position: sticky; top: 61px; align-self: start;
}
.toc a {
  display: block; padding: 10px 28px; font-size: 14px; color: var(--muted-2);
  border-right: 3px solid transparent;
}
.toc a:hover { color: var(--ink); }
.toc a.is-active { background: var(--indigo-tint); border-right-color: var(--indigo); font-weight: 600; color: var(--indigo); }

/* min-width: 0 lets the 1fr grid track shrink below the intrinsic width of wide
   tables — .table-scroll then pans them instead of stretching the page */
.report-content { padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.report-section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px; }
.report-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.report-section h2 { font-size: clamp(1.35rem, 2.5vw, 1.625rem); }
.report-section h2 .n { color: var(--indigo); }
.report-section__unit { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; }
.kpi .label { font-size: 11.5px; }
.kpi .big { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin: 6px 0 2px; }
.kpi .sub { font-size: 12.5px; color: var(--muted); }
.kpi .sub.pos, .kpi .sub.neg { font-weight: 500; }

/* AI callout — full border + kicker pill + hard-offset shadow */
.ai {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 22px 26px; font-size: 15px; line-height: 1.65; color: #333338; text-wrap: pretty;
}
.ai__kicker {
  display: block; width: fit-content; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--lime); padding: 4px 10px; border-radius: 6px;
}
.ai--section { box-shadow: 4px 4px 0 var(--border); }
.ai--exec { background: var(--indigo-tint); border-color: #DADEFF; color: #2B2B4A; }
.ai--exec .ai__kicker { background: var(--indigo); color: #fff; }

/* horizontal-bar chart */
.chart { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--bar-gray); }
.chart .bar--own { fill: var(--indigo); }
.chart .bar-label { font-family: var(--font-body); font-size: 13px; fill: var(--muted-2); }
.chart .bar-label--own { fill: var(--ink); font-weight: 600; }
.chart .bar-value { font-family: var(--font-mono); font-size: 12px; fill: var(--ink); }
.chart .empty { font-family: var(--font-body); font-size: 13px; fill: var(--muted); }

.panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 28px; }

/* intro: how-to-read + glossary */
.intro { display: flex; flex-direction: column; gap: 20px; }
.intro__lede { font-size: 15px; line-height: 1.6; color: var(--muted-2); text-wrap: pretty; }
.intro__cols { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; }
.intro__subtitle { display: block; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 12px; }
.intro__points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.intro__points li { font-size: 14px; color: var(--muted-2); line-height: 1.5; }
.intro__note { font-size: 12.5px; color: var(--muted-3); border-top: 1px solid var(--border-4); padding-top: 14px; }
.glossary { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.glossary__row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: baseline; }
.glossary dt { font-weight: 700; font-size: 14px; color: var(--ink); }
.glossary dd { margin: 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.5; text-wrap: pretty; }

/* sub-block heading (e.g. revenue-per-employee table under §3) */
.report-subblock { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.report-subhead { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.report-subhead__u { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--muted-3); margin-left: 8px; }
table.data.data--dense { font-size: 12px; }
table.data.data--dense th, table.data.data--dense td { padding: 8px 10px; }

/* data tables — .table-scroll lets wide tables pan horizontally on small
   screens instead of blowing the page width */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.table-scroll table.data { min-width: 560px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
table.data th, table.data td { text-align: right; padding: 13px 20px; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); background: var(--surface-2);
}
table.data tbody td.mono { font-family: var(--font-mono); white-space: nowrap; }
table.data tbody tr { border-top: 1px solid var(--border-4); }
table.data tbody tr.own { background: var(--indigo-tint); font-weight: 600; }
table.data tbody tr.own td:first-child { color: var(--ink); }

/* admin funnel/recipient tables — same idiom as table.data, but denser: the
   funnel table runs to 19 columns and needs every one on screen at once. */
.admin-funnel, .admin-events { width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r); }
.admin-funnel th, .admin-funnel td, .admin-events th, .admin-events td {
  text-align: right; padding: 8px 10px; white-space: nowrap; }
.admin-funnel th:first-child, .admin-funnel td:first-child,
.admin-events th:first-child, .admin-events td:first-child { text-align: left; white-space: normal; }
.admin-funnel thead th, .admin-events thead th {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); background: var(--surface-2);
}
.admin-funnel tbody tr, .admin-events tbody tr { border-top: 1px solid var(--border-4); }

.owners-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.owners-list li { font-size: 14.5px; }
.note { font-size: 13px; color: var(--muted); }
.note--block { border-top: 1px solid var(--border-4); padding-top: 12px; }
.warn { font-size: 12.5px; color: var(--muted-3); border-top: 1px solid var(--border-4); padding-top: 12px; }

/* stacked panel (bars + divider + donut) */
.panel.stack { display: flex; flex-direction: column; gap: 22px; }
.panel__divider { border-top: 1px solid var(--border-4); }

/* §1 position strips */
.strips { display: flex; flex-direction: column; gap: 18px; }
.strips__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.strips__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.strips__legend { font-size: 12.5px; color: var(--muted-3); }
.strip { display: grid; grid-template-columns: 210px 68px 1fr 68px; gap: 12px; align-items: center; font-size: 14px; }
.strip__label { color: var(--muted-2); }
.strip__min { text-align: right; color: var(--muted-3); font-size: 12.5px; }
.strip__max { color: var(--muted-3); font-size: 12.5px; }
.strip__track { position: relative; height: 8px; background: linear-gradient(90deg, #F0F0EC, #D8D8D4); border-radius: var(--r-pill); }
.strip__dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; background: var(--indigo); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(16, 16, 20, 0.3);
}

/* §2 quarterly line chart */
.qchart { display: flex; flex-direction: column; gap: 18px; }
/* metric tabs (segmented control) */
.qtabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--border-4); padding: 4px; border-radius: var(--r-pill); width: fit-content; }
.qtab {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--muted-2); cursor: pointer;
  padding: 7px 16px; border: 0; border-radius: var(--r-pill); background: transparent; transition: background 0.12s, color 0.12s;
}
.qtab:hover:not(.is-active):not(:disabled) { color: var(--ink); }
.qtab.is-active { background: var(--ink); color: #FAFAF8; }
.qtab:disabled { opacity: 0.4; cursor: default; }
.qlegend { display: flex; gap: 10px; flex-wrap: wrap; }
.qlegend__item {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-3); background: #fff; font-size: 13.5px; font-weight: 500; color: var(--muted-2);
  font-family: inherit; cursor: pointer;
}
button.qlegend__item { line-height: 1; }
.qlegend__item.is-own { font-weight: 700; color: var(--ink); }
.qlegend__item.is-off { opacity: 0.45; }
.qlegend__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.qchart__foot { font-size: 12.5px; color: var(--muted-3); }
.qchart__plot { width: 100%; }
.line-chart { width: 100%; height: auto; display: block; }
.line-chart .grid { stroke: var(--border-4); stroke-width: 1; }
.line-chart .axis { font-family: var(--font-mono); font-size: 18px; fill: var(--muted-3); }
.line-chart .axis.is-hover { fill: var(--ink); font-weight: 700; }
.line-chart .ln { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .ln--own { stroke-width: 3.5; }
.line-chart .dot { fill: #fff; stroke-width: 2; }
.line-chart .dot--own { fill: var(--indigo); }
.line-chart .empty { font-family: var(--font-body); font-size: 14px; fill: var(--muted-3); }
/* hover interactions */
.line-chart .qhover-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }
.line-chart .qtip rect { fill: var(--ink); opacity: 0.94; }
.line-chart .qtip-q { font-family: var(--font-mono); font-size: 14px; fill: var(--lime); letter-spacing: 1px; }
.line-chart .qtip-name { font-family: var(--font-body); font-size: 15px; fill: #FAFAF8; }
.line-chart .qtip-val { font-family: var(--font-mono); font-size: 15px; fill: #FAFAF8; }
/* print: one static chart per metric */
.qchart--static { gap: 26px; }
.qchart-static { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.qchart-static figcaption { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qchart-static__t { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.qchart-static__u { font-size: 12px; color: var(--muted-3); }

/* §3/§4 horizontal bars */
.hbars { display: flex; flex-direction: column; gap: 14px; }
.hbar { display: grid; grid-template-columns: 180px 1fr 96px; gap: 12px; align-items: center; font-size: 14px; }
.hbar--dated { grid-template-columns: 180px 1fr 96px 52px; }
.hbar__label { color: var(--muted-2); }
.hbar--own .hbar__label { color: var(--ink); font-weight: 700; }
.hbar__track { height: 22px; position: relative; }
.hbar__track--empty { border: 1.5px dashed var(--border-3); border-radius: 4px; }
/* signed domain (§4 net profit): a zero line the losses hang off to the left */
.hbar__track--signed::before {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: var(--hbar-zero);
  width: 1px; background: var(--border-3);
}
.hbar__fill { position: absolute; top: 0; height: 100%; background: var(--bar-gray); border-radius: 4px; }
.hbar__fill--own { background: var(--indigo); }
.hbar__fill--neg { background: var(--bar-neg); }
.hbar__fill--neg.hbar__fill--own { background: var(--negative); }
.hbar__val { text-align: right; }
.hbar--own .hbar__val { font-weight: 600; }
.hbar__year { text-align: right; font-size: 12.5px; color: var(--muted); }
.hbar__year--stale { color: var(--negative); }

/* §3 donut (share pie) */
.donut { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.donut__ring-wrap { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.donut__ring { width: 184px; height: 184px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, 0.06); }
.donut__caption { font-family: var(--font-mono); font-size: 12px; color: var(--muted-3); text-transform: uppercase; letter-spacing: 0.06em; }
.dlegend { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }
.dlegend__row { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; font-size: 14.5px; }
.dlegend__row.is-own { font-weight: 700; }
.dlegend__chip { width: 14px; height: 14px; border-radius: 4px; }
.dlegend__val { color: var(--muted); }

/* §5 market-share stacked bar. Segments under ~12% carry no inline label (see
   report.ts); the key beneath names every company, so nothing is lost. */
.mshare { display: flex; height: 44px; border-radius: 8px; overflow: hidden; }
.mshare__seg {
  display: grid; place-items: center; min-width: 0; font-size: 13px; font-weight: 600; color: #fff;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.5);
}
.mshare__seg:last-child { box-shadow: none; }
.mshare__seg span { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mshare__seg--own { font-weight: 700; }
.mkey { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 24px; }
.mkey__item { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted-2); }
.mkey__item.is-own { color: var(--ink); font-weight: 700; }
.mkey__chip { width: 12px; height: 12px; border-radius: 3px; }
.mkey__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkey__val { color: var(--muted); }
.mkey__item.is-own .mkey__val { color: var(--ink); }

/* §9 discipline banner */
.banner { display: flex; align-items: center; gap: 12px; border-radius: var(--r); padding: 16px 22px; font-size: 15px; font-weight: 600; }
.banner__mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.banner--ok { background: #EDFBF3; border: 1px solid #BDEBD2; color: #116B3E; }
.banner--ok .banner__mark { background: var(--positive); }
.banner--warn { background: #FCEFEA; border: 1px solid #F3C6B4; color: #9A3412; }
.banner--warn .banner__mark { background: var(--negative); }

/* §10 owners cards */
.ocards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ocard { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ocard--own { background: var(--indigo-tint); border: 1.5px solid var(--indigo); }
.ocard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ocard__co { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.ocard__count { font-size: 12.5px; color: var(--muted); }
.ocard--own .ocard__count { color: var(--indigo); }
.ocard__list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
/* Name over basis rather than side by side: the registry's control descriptions
   run to a full sentence ("Muul viisil kontroll või mõju (lepingulised,
   perekondlikud vm suhted)"), which in a two-up card squeezed the owner's name
   into a 60px column and wrapped both halves into each other. */
.ocard__row { display: flex; flex-direction: column; gap: 1px; }
.ocard__name { font-weight: 600; }
.ocard__basis { color: var(--muted); font-size: 12px; line-height: 1.35; }
.ocard__more { color: var(--muted-3); font-size: 13px; }

/* report footer strip */
.report-foot {
  border-top: 1px solid var(--border-2); padding-top: 24px; margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted-3);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }

  .hero { grid-template-columns: 1fr; gap: 32px; }
  .preview { max-width: 480px; width: 100%; margin: 0 auto; }
  .steps { grid-template-columns: 1fr; gap: 24px; }

  .select { grid-template-columns: 1fr; min-height: 0; }
  .select__aside { border-right: 0; border-bottom: 1px solid var(--border-2); }
  .select-header { flex-wrap: wrap; }

  .report-body { grid-template-columns: 1fr; }
  .toc { position: static; border-right: 0; border-bottom: 1px solid var(--border-2);
    display: flex; flex-wrap: wrap; gap: 4px; padding: 16px clamp(24px, 4vw, 56px); }
  .toc a { border-right: 0; border-radius: var(--r-pill); padding: 8px 13px; }
  .toc a.is-active { border-right: 0; }
  .ocards { grid-template-columns: 1fr; }
  .donut { gap: 24px; justify-content: center; }
}
@media (max-width: 720px) {
  .intro__cols { grid-template-columns: 1fr; gap: 20px; }
  .glossary__row { grid-template-columns: 1fr; gap: 2px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .comp-grid { grid-template-columns: 1fr; }
  .hero__entry { flex-direction: column; }
  .hero__entry .btn { width: 100%; }
  .stepper__label { display: none; }
  .stepper__item--now .stepper__label { display: inline; }
  .select__aside { padding: 24px 20px; }
  .select__main { padding: 24px 20px; }
  .strip { grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 6px 12px; }
  .strip__label { grid-column: 1 / -1; }
  .strip__track { grid-column: 1 / -1; order: 3; }
  .strip__min { order: 1; text-align: left; }
  .strip__max { order: 2; text-align: right; }
  .hbar, .hbar--dated { grid-template-columns: 120px 1fr auto; }
  .hbar__year { display: none; }
  /* on a phone even a 15% segment is ~50px, too narrow for "Verde 14,3%" —
     the key below the bar is the label at this width */
  .mshare__seg span { display: none; }
  .report-content { gap: 32px; }
  .panel { padding: 20px 18px; }
  /* keep the 1240-unit line chart readable: floor its width and pan instead of
     scaling axis text down to ~5px */
  .qchart__plot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .qchart__plot .line-chart { min-width: 680px; }
}
@media (max-width: 600px) {
  /* brand + full CTA + burger can't share ~360px: the CTA moves into the menu */
  .nav-right > .btn { display: none; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .topbar { gap: 14px; }
  .brand__name { font-size: 16px; }
  .hero h1 { overflow-wrap: break-word; }
  .pricing__amount b { font-size: 34px; }

  .own-card__meta { grid-template-columns: 1fr; }
  .cta-bar { padding: 18px; }
  .cta-bar__right { width: 100%; justify-content: space-between; }

  /* bar rows: label on its own line, bar + value beneath */
  .hbar, .hbar--dated { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .hbar__label { grid-column: 1 / -1; }
  .kpi { padding: 14px; }
  .kpi .big { font-size: 25px; }
  .donut { flex-direction: column; align-items: center; }
  .dlegend { width: 100%; min-width: 0; }
  .report-header h1 { overflow-wrap: break-word; }
  .report-header__actions { width: 100%; }
  .report-header__actions .btn { flex: 1; }

  .thanks__resend { flex-direction: column; }
  .thanks__resend .btn { width: 100%; }
  .thanks { padding: 32px 0 48px; }
  .confirm { padding: 14px; }
}

/* touch devices: grow the small tap targets (WCAG ~44px) */
@media (pointer: coarse) {
  .comp-card__x { padding: 12px; margin: -10px; }
  .own-card__edit { padding: 10px; margin: -10px; }
  .faq__q { padding: 18px 20px; }
  .qtab { padding: 10px 16px; }
  .result { padding: 15px 16px; }
  .suggest__row { padding: 13px 14px; }
}

/* notched phones: keep edge-to-edge chrome out of the safe areas */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right));
  }
  .site-footer__inner {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}

/* ============================================================================
   MOTION
   ============================================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .6s var(--ease-out) both; }
.rise-2 { animation-delay: .08s; }
.rise-3 { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   SITE FOOTER
   ============================================================================ */
.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--border-2);
  background: var(--surface);
}
.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 40px;
  padding: 32px 24px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 4px; }
.site-footer__co {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink);
}
.site-footer__meta { font-size: 13px; color: var(--muted); }
.site-footer__meta a { color: var(--muted-2); }
.site-footer__meta a:hover { color: var(--indigo); }
.site-footer__links { display: flex; flex-direction: column; gap: 6px; margin-left: auto; }
.site-footer__links a { font-size: 14px; font-weight: 500; color: var(--ink); }
.site-footer__links a:hover { color: var(--indigo); }
.site-footer__copy { flex-basis: 100%; font-size: 12px; color: var(--muted-3); }

/* ============================================================================
   LEGAL PAGES (privaatsus- / müügitingimused)
   ============================================================================ */
.legal { max-width: 760px; padding-top: 40px; padding-bottom: 56px; }
.legal__back { display: inline-block; font-size: 14px; font-weight: 500; margin-bottom: 24px; }
.legal h1 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px;
}
.legal__updated { font-size: 13px; color: var(--muted-3); margin: 0 0 24px; }
.legal__intro { font-size: 16px; color: var(--muted-2); margin: 0 0 8px; }
.legal__section { margin-top: 28px; }
.legal__section h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--ink); margin: 0 0 8px;
}
.legal__section p { font-size: 15px; line-height: 1.65; color: var(--muted-2); margin: 0 0 10px; }
.legal__list { margin: 0 0 10px; padding-left: 22px; }
.legal__list li { font-size: 15px; line-height: 1.6; color: var(--muted-2); margin-bottom: 6px; }

/* ============================================================================
   THANK-YOU / CONFIRMATION (post-payment terminal state)
   ============================================================================ */
.thanks { max-width: 640px; padding: 56px 0 72px; }
.thanks__card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--border);
  padding: 40px clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.thanks__badge {
  width: 56px; height: 56px; border-radius: 50%; background: var(--positive); color: #fff;
  display: grid; place-items: center; font-size: 28px; font-weight: 700; margin: 0 auto 4px;
}
.thanks__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.thanks__title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); margin: 0; }
.thanks__sent { font-size: 15.5px; color: var(--muted-2); }
.thanks__sent strong { color: var(--ink); word-break: break-all; }
.thanks__spam { font-size: 14px; color: var(--muted); background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 16px; line-height: 1.55; }
.thanks__block { border-top: 1px solid var(--border-4); padding-top: 20px; margin-top: 6px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.thanks__block-title { font-size: 13.5px; font-weight: 600; color: var(--muted-2); }
.thanks__resend { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.thanks__resend .input { flex: 1; min-width: 0; }
.thanks__note { font-size: 13px; color: var(--muted); margin: 0; }
.thanks__msg { font-size: 13.5px; margin: 0; }
.thanks__msg--ok { color: var(--positive); }
.thanks__msg--err { color: var(--negative); }

/* cancelled checkout: same card as the thank-you page, warning badge instead of
   the tick, plus the preserved company selection */
.thanks__badge--warn { background: var(--warning); }
.cancelled__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cancelled__company { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* consent checkbox on the selection page */
.consent { display: flex; align-items: flex-start; gap: 10px; max-width: 460px; }
.consent__box { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--indigo); cursor: pointer; }
.consent__label { font-size: 13.5px; line-height: 1.5; color: var(--muted-2); cursor: pointer; }
.consent__label a { color: var(--indigo); font-weight: 500; text-decoration: underline; }
.consent__label a:hover { color: var(--indigo-hover); }

/* email confirm dialog on the selection page (shown before checkout) */
.confirm { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(16, 16, 20, 0.55); }
.confirm[hidden] { display: none; }
.confirm__box {
  background: var(--white); border-radius: var(--r); padding: 28px clamp(22px, 4vw, 34px);
  max-width: 460px; width: 100%; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 60px rgba(16, 16, 20, 0.3);
}
.confirm__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.confirm__lede { font-size: 14.5px; color: var(--muted-2); line-height: 1.55; }
.confirm__group { display: flex; flex-direction: column; gap: 7px; }
.confirm__companies {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
  max-height: 42vh; overflow-y: auto;
}
.confirm__company {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border-4);
}
.confirm__company:first-child { border-top: 0; background: var(--surface); }
.confirm__company-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.confirm__company-name { font-weight: 600; font-size: 14.5px; }
.confirm__company-code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.confirm__note { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--muted); }
.confirm__email {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--ink);
  background: var(--indigo-tint); border: 1px solid #DADEFF; border-radius: var(--r-sm);
  padding: 14px 16px; word-break: break-all; text-align: center;
}
.confirm__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.confirm__actions .btn { flex: 1; }

/* ============================================================================
   PRINT (PDF via puppeteer print media)

   The PDF is the product: the paid deliverable arrives as an e-mail attachment
   and is the only form most buyers ever read. Chrome's print viewport for A4 is
   ~700px, which is inside the phone breakpoints, so without this block the paper
   inherits the mobile layout — 2x2 KPIs, stacked strips, a 120px name column and
   a hidden report-year column. Everything here re-establishes a paper layout of
   its own rather than letting the small-screen fallbacks decide the deliverable.

   The page box is owned by CSS, not by puppeteer's `margin` option, so that
   @page :first can drop the margins for the full-bleed title page.
   ============================================================================ */
@page { size: A4; margin: 14mm 12mm 16mm; }
@page :first { margin: 0 0 16mm; }

@media print {
  /* Paint the report the same pure white as the PDF page margins, so the sheet
     reads as one uniform colour instead of a warm --surface panel framed by a
     white paper margin (the "white frame" on every exported page). */
  html, body, .report, .report-body, .report-content { background: #fff; }
  /* The dark report header repeats the cover verbatim — company, competitor
     count, activity, data date — so on paper the cover is the header. */
  .topbar, .site-footer, .report-header, .toc { display: none !important; }
  .report-body { grid-template-columns: 1fr; }
  /* The @page margin is the gutter; a second one inside it would cost ~16mm of
     measure that the wide quarterly table and the charts need. */
  .report-content { padding: 0; gap: 22px; }
  .report-section { gap: 9px; }
  p, li, dd { orphans: 3; widows: 3; }

  /* ---- Paper type scale -------------------------------------------------- */
  .report-section h2 { font-size: 17px; }
  .report-section__unit { font-size: 10.5px; }
  .panel { padding: 14px 16px; }
  .panel.stack { gap: 14px; }
  .note, .warn { font-size: 10.5px; }
  .note--block { padding-top: 9px; }
  .report-subhead { font-size: 12.5px; }
  .report-subblock { margin-top: 12px; gap: 7px; }
  .banner { padding: 10px 14px; font-size: 12.5px; }
  .banner__mark { width: 22px; height: 22px; font-size: 12px; }
  .ai { padding: 12px 16px; font-size: 12px; line-height: 1.5; box-shadow: none; }
  .ai__kicker { margin-bottom: 6px; font-size: 9.5px; }
  .report-foot { padding-top: 12px; margin-top: 0; font-size: 10.5px; }

  /* ---- Full-width blocks, restored from the phone fallbacks -------------- */
  .kpis { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .kpi { padding: 12px 13px; }
  /* two label lines are reserved so the four big numbers share one baseline even
     when only "Maksedistsipliin valimis" wraps */
  .kpi .label { font-size: 9.5px; letter-spacing: 0.06em; min-height: 2.3em; }
  .kpi .big { font-size: 23px; margin: 5px 0 2px; }
  .kpi .sub { font-size: 10px; line-height: 1.35; }

  .strips { gap: 11px; }
  .strips__title { font-size: 14px; }
  .strips__legend { font-size: 10.5px; }
  .strip {
    grid-template-columns: 168px 62px 1fr 62px; grid-auto-flow: column;
    gap: 10px; font-size: 12px;
  }
  .strip__label, .strip__track { grid-column: auto; }
  .strip__min, .strip__max, .strip__track { order: 0; }
  .strip__min { text-align: right; font-size: 10.5px; }
  .strip__max { font-size: 10.5px; }
  .strip__track { height: 7px; }
  .strip__dot { width: 13px; height: 13px; border-width: 2.5px; box-shadow: none; }

  .hbars { gap: 9px; }
  .hbar { grid-template-columns: 168px 1fr 76px; gap: 10px; font-size: 12px; }
  .hbar--dated { grid-template-columns: 168px 1fr 76px 40px; }
  .hbar__label { overflow-wrap: break-word; }
  .hbar__track { height: 16px; }
  /* the report year is the whole point of §4's staleness warning: never drop it */
  .hbar__year { display: block; font-size: 10.5px; }

  .donut { gap: 24px; }
  .donut__ring { width: 132px; height: 132px; }
  .donut__caption { font-size: 10px; }
  .dlegend { gap: 8px; min-width: 200px; font-size: 12px; }
  .dlegend__chip { width: 11px; height: 11px; }

  .mshare { height: 32px; }
  .mshare__seg { font-size: 10.5px; }
  /* paper is 703px wide — inside the phone breakpoint that hides these, but the
     segments here are wide enough for the labels report.ts kept */
  .mshare__seg span { display: block; }
  .mkey { gap: 6px 20px; font-size: 11px; }
  .mkey__item { font-size: 11px; }

  .ocards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ocard { padding: 12px 14px; gap: 8px; }
  .ocard__co { font-size: 14px; }
  .ocard__count { font-size: 10.5px; }
  .ocard__list { gap: 7px; font-size: 12px; }
  .ocard__basis { font-size: 10.5px; }
  .ocard__more { font-size: 11px; }

  /* ---- Tables ------------------------------------------------------------ */
  /* the on-screen horizontal scroller must never clip rows on paper */
  .table-scroll { overflow: visible; }
  .table-scroll table.data { min-width: 0; }
  table.data { font-size: 12px; }
  table.data th, table.data td { padding: 7px 10px; }
  table.data thead th { font-size: 9.5px; letter-spacing: 0.03em; line-height: 1.3; }
  /* §3's revenue-per-employee table carries up to eight quarter columns plus the
     company name. At body size it ran off the right edge of the sheet and lost
     its last quarter; fixed layout with a capped name column keeps all of it on
     the page. */
  table.data.data--dense { font-size: 9.5px; table-layout: fixed; }
  table.data.data--dense th, table.data.data--dense td { padding: 5px 6px; }
  table.data.data--dense th:first-child, table.data.data--dense td:first-child { width: 23%; }
  table.data.data--dense thead th { font-size: 8.5px; }

  /* ---- Quarterly charts -------------------------------------------------- */
  /* Five stacked charts never fit one sheet, so this block flows across the page
     break — and a bordered panel that flows draws its side rules down the empty
     tail of the page it leaves. Unframed, it breaks cleanly and gives the charts
     the panel's padding back as measure. */
  .qchart--static { gap: 18px; padding: 0; border: 0; background: none; }
  .qchart__plot { overflow: visible; }
  .qchart__plot .line-chart, .line-chart { min-width: 0; }
  .qlegend { gap: 6px; }
  .qlegend__item { padding: 4px 9px; font-size: 10.5px; }
  .qlegend__dot { width: 8px; height: 8px; }
  .qchart-static figcaption { gap: 8px; }
  .qchart-static__t { font-size: 12.5px; }
  .qchart-static__u { font-size: 10px; }
  /* viewBox units, not pixels: the 1240-unit chart is drawn at ~700px on paper,
     so axis text set for the screen would land near 5px. */
  .line-chart .axis { font-size: 25px; }
  .line-chart .ln { stroke-width: 3; }
  .line-chart .ln--own { stroke-width: 4.5; }
  .line-chart .empty { font-size: 22px; }

  /* ---- Intro + glossary --------------------------------------------------- */
  /* keep the intro compact (override the <720px single-column fallback that the
     narrow print viewport would otherwise trigger) */
  .intro__cols { grid-template-columns: 0.9fr 1.5fr; gap: 20px; }
  .glossary__row { grid-template-columns: 180px 1fr; gap: 14px; }

  /* Keep the whole "Kuidas seda raportit lugeda" intro + glossary together on
     one page instead of letting the two-column grid split mid-glossary at an
     arbitrary point.

     The real height driver on screen is the glossary's fixed 180px term column,
     which leaves each definition only ~150px in print and wraps it to 5-6 lines.
     For print we drop that grid and run the term in-line ("Käive — …") so every
     definition uses the full column width, roughly halving the block's height. */
  .report-intro { break-inside: avoid; }
  .report-intro .intro { gap: 12px; }
  .report-intro .intro__lede { font-size: 12.5px; line-height: 1.5; }
  .report-intro .intro__subtitle { margin-bottom: 8px; }
  .report-intro .intro__points { gap: 6px; }
  .report-intro .intro__points li { font-size: 12.5px; line-height: 1.4; }
  .report-intro .glossary { gap: 6px; }
  .report-intro .glossary__row { display: block; grid-template-columns: none; }
  .report-intro .glossary dt { display: inline; font-size: 12.5px; }
  .report-intro .glossary dt::after { content: " \2014 "; font-weight: 400; color: var(--muted-3); }
  .report-intro .glossary dd { display: inline; font-size: 12px; line-height: 1.4; }
  .report-intro .intro__note { padding-top: 10px; font-size: 11px; }

  /* ---- Pagination --------------------------------------------------------- */
  /* Sections may split at a page break; only self-contained blocks stay intact,
     and a heading is never orphaned from the body that follows it. Long tables
     are the exception that used to cost the most paper: keeping a whole seven-row
     table together bumped it to the next sheet and left a third of the previous
     one blank, so they flow and repeat their header instead. */
  .kpis, .kpi, .strip, .hbar, .ocard, .banner, .ai, .donut,
  .glossary__row, .mshare, .mkey__item, .qchart-static { break-inside: avoid; }
  table.data { break-inside: auto; }
  table.data thead { display: table-header-group; }
  table.data tr { break-inside: avoid; }
  .report-section__head, .report-subhead, .qchart--static .qlegend { break-after: avoid; }
  .report-subblock { break-inside: auto; }
  /* the static quarterly block holds several stacked charts — let it flow across
     pages, but keep each individual chart figure intact */
  .qchart--static, .panel { break-inside: auto; }
}
body[data-print="1"] .topbar, body[data-print="1"] .site-footer { display: none; }
body[data-print="1"] { background: #fff; }