/*
 * The page frame (owner, 2026-10-21): every page picks one of three widths by its type. One
 * copy for the app (imported by tokens.css) and the public site (kr-site includes this file
 * in its stylesheet).
 *   reading    long text: legal, posts, help articles
 *   data       cards and tables: admin, bots, results, backtests, pricing
 *   full-bleed the whole viewport (the landing hero, the chat canvas)
 */
:root {
  --kr-frame-reading: 700px;
  --kr-frame-data: 1400px;
  --kr-frame-full: 100%;
}
/* The public site's design tokens (dark only, owner 2026-10-23): the landing design's palette
   (docs/landing-source/src/styles.css, same names and values, so every public page reads well
   even without the landing build) and the site's scale for text, spacing and touch targets
   (phase2 10 §6: text >= 14 px, targets >= 44 px with an 8 px gap). The site's stylesheets and
   templates use only these and the landing's own variables. Served in the site stylesheet and
   in the landing build (crates/site/landing/home.css). */
:root {
  --bg: #010307;
  --ink: #f3f7fa;
  --ink-2: #cdd6dd;
  --muted: #8f9ba6;
  --cyan: #22e4f4;
  --cyan-ink: #3adcec;
  --cyan-hover: #7af0fa;
  --line: rgba(214, 232, 242, 0.14);
  --line-strong: rgba(214, 232, 242, 0.26);
  --panel: rgba(4, 10, 15, 0.9);
  --panel-line: rgba(150, 214, 230, 0.17);
  --font-body: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --gutter: clamp(20px, 4.2vw, 64px);
  --radius: 8px;

  --site-heading: #fff;
  --site-warning: #f0a63a;
  --site-shadow: rgba(0, 0, 0, 0.5);
  --site-table-bg: rgba(2, 7, 11, 0.5);
  --site-period-on: rgba(34, 228, 244, 0.14);
  --site-glow-1: #052233;
  --site-glow-2: #020a12;
  --site-wordmark-1: #fff;
  --site-wordmark-2: #d8fbff;
  --site-wordmark-3: #4fe6f5;
  --site-chart-area: #25e5f5;

  --site-text-min: 0.875rem;
  --site-text-md: 0.9375rem;
  --site-text-body: 1.0625rem;
  --site-text-lg: 1.125rem;

  --site-space-1: 0.25rem;
  --site-space-2: 0.5rem;
  --site-space-3: 0.75rem;
  --site-space-4: 1rem;
  --site-space-5: 1.25rem;
  --site-space-6: 1.5rem;
  --site-space-7: 1.75rem;
  --site-space-8: 2rem;
  --site-space-10: 2.5rem;
  --site-space-12: 3rem;
  --site-space-14: 3.5rem;
  --site-space-16: 4rem;
  --site-space-30: 7.5rem;

  --site-touch: 44px;
  --site-touch-gap: 8px;
  --site-radius-table: 12px;
  --site-radius-pill: 999px;
}
/* The colours of the site's inline SVG art (gradient stops), from the site tokens: the strict
   CSP allows no inline style, and a stop's colour attribute cannot read a CSS variable. */
.art-stop--wm1 { stop-color: var(--site-wordmark-1); }
.art-stop--wm2 { stop-color: var(--site-wordmark-2); }
.art-stop--wm3 { stop-color: var(--site-wordmark-3); }
.art-stop--area-top { stop-color: var(--site-chart-area); stop-opacity: 0.22; }
.art-stop--area-end { stop-color: var(--site-chart-area); stop-opacity: 0; }
/* The public site's header: the same markup and look on the home page and every other public
   page, in the landing design's type and colors (docs/landing-source/src/styles.css tokens).
   Every link is a full touch target (site-tokens.css); on a phone only the brand, the Sign in
   button and (while Admin shows it) the app link stay, on one line (R3 N7). */
.site-header {
  position: relative;
  z-index: 2;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3) var(--site-space-7);
  min-height: 76px;
  padding-block: var(--site-space-3);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-touch);
  font-family: 'Montserrat', var(--font-display, var(--font-body));
  font-weight: 500;
  font-size: var(--site-text-md);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--site-heading);
  text-decoration: none;
}
.site-header__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-2) var(--site-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__link a,
.site-header .quiet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--site-touch);
  min-width: var(--site-touch);
  font-size: var(--site-text-md);
  white-space: nowrap;
}
.site-header__link a {
  color: var(--ink-2, var(--ink));
  text-decoration: none;
  transition: color 160ms ease;
}
.site-header__link a:hover {
  color: var(--site-heading);
}
.site-header .btn {
  --h: var(--site-touch);
  padding: 0 var(--site-space-4);
  font-size: var(--site-text-md);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .site-header__link {
    display: none;
  }
  .site-header__nav ul {
    flex-wrap: nowrap;
    gap: var(--site-space-2) var(--site-space-4);
  }
}
@media (max-width: 420px) {
  .site-header__inner {
    gap: var(--site-space-2);
  }
  .site-header__brand {
    font-size: var(--site-text-min);
    letter-spacing: 0.2em;
  }
  .site-header__nav ul {
    gap: var(--site-space-2) var(--site-space-3);
  }
  .site-header .btn {
    padding: 0 var(--site-space-3);
  }
}
/* The plans block (templates/plans.html), the same on the home page and /pricing/: the free
   plan as one full-width bar, the paid plans as one row of cards (1–4 per row) with the
   recommended one raised, and a billing period switch built without script (radio inputs and
   `:has`; without `:has` every period's price shows, each with its own label). The cards keep
   the landing design's plan look (docs/landing-source/src/styles.css `.plan*`). */
.plans-block {
  position: relative;
  display: grid;
  gap: clamp(var(--site-space-7), 4dvh, var(--site-space-10));
}
.plans-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plans-free {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--site-space-5) clamp(var(--site-space-6), 3vw, var(--site-space-12));
  padding: var(--site-space-6) clamp(var(--site-space-5), 2.6vw, var(--site-space-10));
  border: 1px solid var(--line-strong);
  border-radius: var(--site-radius-table);
  background: var(--site-table-bg);
}
.plans-free__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--site-heading);
}
.plans-free__tagline {
  margin: var(--site-space-2) 0 0;
  max-width: none;
  font-size: var(--site-text-md);
  color: var(--ink-2);
}
.plans-free__limits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-2) var(--site-space-7);
}
.plans-free .checklist li {
  font-size: var(--site-text-md);
  gap: var(--site-space-2);
}
.plans-free__cta {
  white-space: nowrap;
}

.plans-period {
  display: flex;
  flex-wrap: wrap;
  justify-self: start;
  gap: var(--site-touch-gap);
  margin: 0;
  padding: var(--site-space-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--site-radius-pill);
}
.plans-period__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.plans-period__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.plans-period__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-touch);
  padding: 0 var(--site-space-4);
  border-radius: var(--site-radius-pill);
  font-size: var(--site-text-md);
  color: var(--ink-2);
  cursor: pointer;
}
.plans-period__input:checked + .plans-period__label {
  background: var(--site-period-on);
  color: var(--site-heading);
}
.plans-period__input:focus-visible + .plans-period__label {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* One rule per switch position (kr-site PERIODS_MAX = 4). */
.plans-block:has(#plans-period-0:checked) .plan__price:not(.plan__price--p0),
.plans-block:has(#plans-period-1:checked) .plan__price:not(.plan__price--p1),
.plans-block:has(#plans-period-2:checked) .plan__price:not(.plan__price--p2),
.plans-block:has(#plans-period-3:checked) .plan__price:not(.plan__price--p3) {
  display: none;
}

.plans__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.plans__cards--n1 { grid-template-columns: minmax(0, 32.5rem); }
.plans__cards--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans__cards--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans__cards .plan__name {
  margin: 0;
}
.plans__cards .plan__tagline {
  max-width: none;
  margin-bottom: 0;
}
.plans__cards .plan__eyebrow {
  margin-top: 0;
  font-size: var(--site-text-min);
}
.plan__per {
  color: var(--muted);
  font-size: 0.86em;
}

@media (max-width: 1100px) {
  .plans-free {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .plans-free__limits {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .plans__cards,
  .plans__cards--n3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--site-space-8);
  }
}
@media (max-width: 860px) {
  .plans-free {
    grid-template-columns: minmax(0, 1fr);
  }
  .plans-free__limits {
    grid-row: auto;
    flex-direction: column;
  }
  .plans-free__cta {
    justify-self: stretch;
  }
  .plans__cards,
  .plans__cards--n1,
  .plans__cards--n2,
  .plans__cards--n3 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--site-space-4);
  }
}
/* The public pages besides the home page, in the owner's landing style (wave 14 §S-L): the
   landing build's stylesheet comes first (fonts, type scale, colors, buttons, footer bar and
   wordmark) and these rules lay out the text pages on it, with the site tokens
   (site-tokens.css). No client JS, no 3D: that stays on the home page only (owner, 2026-10-21). */
:root {
  --maxw: var(--kr-frame-data);
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--site-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 70% at 72% -10%, var(--site-glow-1) 0%, var(--site-glow-2) 42%, transparent 72%) no-repeat,
    var(--bg);
}
.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
a { color: var(--cyan-ink); }
a:hover { color: var(--cyan-hover); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--site-space-2);
  margin: 0;
  padding: var(--site-space-2) 0 0;
  list-style: none;
  font-size: var(--site-text-min);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-touch);
  min-width: var(--site-touch);
  color: var(--ink-2);
  text-decoration: none;
}
.crumbs a:hover { color: var(--site-heading); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--site-space-2); }

.site-main { flex: 1; padding-block: clamp(var(--site-space-8), 6dvh, var(--site-space-16)) clamp(var(--site-space-16), 10dvh, var(--site-space-30)); }
/* The page frame (web/tokens/frame.css): every container is the data width; a reading page
   keeps its text column. Text inside a data page keeps its readable measure (the p rules). */
.site-main[data-frame="reading"] > * { max-width: var(--kr-frame-reading); }
:where(.site-main) h1 {
  margin: 0 0 var(--site-space-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--site-heading);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
:where(.site-main) h2 {
  margin: var(--site-space-12) 0 var(--site-space-3);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--site-heading);
}
:where(.site-main) h3 { margin: var(--site-space-7) 0 var(--site-space-2); font-weight: 600; font-size: 1.15rem; color: var(--site-heading); }
:where(.site-main) h4 { margin: var(--site-space-5) 0 var(--site-space-2); font-weight: 600; font-size: 1rem; color: var(--site-heading); }
:where(.site-main) p { margin: 0 0 1em; color: var(--ink-2); max-width: 46rem; }
:where(.site-main) .body ul,
:where(.site-main) .body ol { margin: 0 0 1em; padding-inline-start: 1.3em; color: var(--ink-2); max-width: 46rem; }
.site-main .body ul { list-style: disc; }
.site-main .body ol { list-style: decimal; }
.site-main .body li { margin: 0.3em 0; }
:where(.site-main) blockquote { margin: 0 0 1em; padding-inline-start: 1em; border-inline-start: 2px solid var(--cyan-ink); }
:where(.site-main) code { font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; }
:where(.site-main) pre { overflow-x: auto; padding: var(--site-space-3); border: 1px solid var(--panel-line); border-radius: var(--radius); background: var(--panel); }
:where(.site-main) img { max-width: 100%; height: auto; }
.meta, .site-main time { color: var(--muted); font-size: var(--site-text-min); }

/* Links in a table cell and a link on its own line are full touch targets (the negative block
   margin keeps the row height and the touch gap between rows). */
.table :is(th, td) > a,
.facts__link > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-touch);
  min-width: var(--site-touch);
}
.table :is(th, td) > a { margin-block: calc(var(--site-space-2) * -1); }

.table { overflow-x: auto; margin: 0 0 1em; border: 1px solid var(--panel-line); border-radius: var(--site-radius-table); background: var(--site-table-bg); }
table { border-collapse: collapse; min-width: 100%; font-size: var(--site-text-md); }
th, td { text-align: start; padding: var(--site-space-3) var(--site-space-4); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { color: var(--site-heading); font-weight: 600; }
tbody th { color: var(--ink); font-weight: 500; }

.items { margin: 0; padding: 0; list-style: none; }
.items li { padding: var(--site-space-4) 0; border-bottom: 1px solid var(--line-strong); }
.items a { font-size: var(--site-text-lg); font-weight: 500; color: var(--site-heading); text-decoration: none; }
.items a:hover { color: var(--cyan-hover); }
.items p { margin: var(--site-space-2) 0 0; color: var(--muted); }
.items time { display: block; margin-top: var(--site-space-1); }

.risk { margin-top: var(--site-space-10); padding: var(--site-space-4) var(--site-space-5); border: 1px solid var(--site-warning); border-radius: var(--radius); background: var(--panel); }
.risk p { margin: 0; }

.site-footer { border-top: 1px solid var(--line-strong); overflow: hidden; }
.site-footer__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.25rem), 1fr));
  gap: var(--site-space-8);
  padding-block: var(--site-space-14) var(--site-space-2);
}
.site-footer h2 {
  margin: 0 0 var(--site-space-2);
  font-size: var(--site-text-min);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer ul { display: grid; gap: var(--site-touch-gap); margin: 0; padding: 0; list-style: none; }
.site-footer__groups a {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-touch);
  font-size: var(--site-text-md);
  color: var(--ink-2);
  text-decoration: none;
}
.site-footer__groups a:hover { color: var(--site-heading); }
.site-footer__sentence { margin: 0; font-size: var(--site-text-min); color: var(--muted); }
/* The cookie banner (phase2 01 §12): a fixed overlay at the bottom, out of the page flow (no
   layout shift), shown by consent.js. */
.consent {
  position: fixed;
  z-index: 60;
  inset-inline: var(--site-space-4);
  bottom: max(var(--site-space-4), env(safe-area-inset-bottom));
  max-width: 45rem;
  margin-inline: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--site-space-3) var(--site-space-5);
  padding: var(--site-space-4) var(--site-space-5);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px var(--site-shadow);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--site-text-min);
  line-height: 1.5;
  animation: consent-in 240ms ease-out;
}
.consent[hidden] { display: none; }
/* While it shows, the page keeps room for it at its end (--consent-space, set by consent.js):
   the last links never stay under the banner. */
body:has(.consent:not([hidden])) { padding-bottom: var(--consent-space, 0px); }
.consent__text { margin: 0; flex: 1 1 auto; }
.consent__actions { display: flex; gap: var(--site-touch-gap); flex: none; }
.consent__button {
  min-height: var(--site-touch);
  padding: 0 var(--site-space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--site-radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.consent__button:hover { border-color: var(--cyan-ink); }
.consent__button--primary { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.consent__button--primary:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); }
.consent__button[aria-pressed="true"] { outline: 1px solid var(--cyan-ink); outline-offset: 2px; }
.consent-open {
  min-height: var(--site-touch);
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--site-text-min);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-open:hover { color: var(--ink); }
@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 599px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent__actions > * { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}