/* The site's pages (/models, /models/<slug>, /pricing, /about, /support; backend/scripts/build-site.js)
   and the home page's film and models sections. Requires base.css and landing.css (top bar, footer,
   sections, feature cards, plans, FAQ). Everything here works in both themes through base.css's
   variables and down to 320 px wide. */

/* ---- Pages: a hero under the top bar, then sections as on the home page ---- */
.site-page main { position: relative; z-index: 1; }
.site-page .backdrop .aurora { opacity: 0.7; }
.page-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 24px 16px;
  text-align: center;
}
.page-title {
  margin: 0 0 16px;
  font-size: clamp(2.3rem, 5.6vw, 3.8rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.page-lead {
  margin: 0 auto;
  max-width: 640px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.section-tight { padding-top: 40px; padding-bottom: 40px; }
.section-cta { text-align: center; padding-top: 48px; }
.section-cta .section-lead { max-width: 520px; margin-inline: auto; }
.btn-wide { display: inline-flex; width: auto; min-width: 220px; text-decoration: none; }
.eyebrow-link { color: inherit; text-decoration: none; }
.eyebrow-link::before { content: "← "; }
.eyebrow-link:hover { text-decoration: underline; }

/* ---- Film: the video that grows to the screen as the page scrolls (js/film.js) ---- */
.film { position: relative; width: 100%; margin: 0; padding: 0; }
/* Without the grow (phones, "reduced motion", no GSAP, or before it loads): the heading and under it
   a card that fits the screen, the two centred together. */
.film-sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100svh;
  padding: 72px 0 32px;
  overflow: hidden;
}
.film-head { padding: 0 16px; margin-bottom: 24px; text-align: center; }
.film-head .section-title { margin-bottom: 8px; }
.film-head .section-lead { margin-bottom: 0; }
.film-frame {
  position: relative;
  box-sizing: border-box;
  width: min(100vw - 32px, 1120px, (100svh - 260px) * 16 / 9);
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0f0d14;
  box-shadow: 0 30px 80px -24px rgba(20, 16, 28, 0.55);
}
/* Phones held upright: the vertical cut, as tall as the screen allows. */
.film-frame[data-cut="portrait"] {
  width: auto;
  height: min(calc(100svh - 150px), 172vw);
  max-width: calc(100vw - 32px);
  aspect-ratio: 9 / 16;
}
/* The grow (film.js adds .is-armed): the section is one screen, pinned; the heading sits under the
   top bar (--film-top, its height) and the film is placed by film.js, which sets its end size (the
   screen under the top bar, whole) and scales it down to a card under the heading at the start. */
.film.is-armed .film-sticky { display: block; height: 100svh; min-height: 0; padding: calc(var(--film-top, 64px) + 20px) 0 0; }
.film.is-armed .film-head { margin-bottom: 0; }
.film.is-armed .film-frame { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 50% 50%; will-change: transform; }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0f0d14; }
.film-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 8px;
  opacity: 0.92;
  transition: opacity 0.2s;
}
.film-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(10, 8, 16, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.15s, transform 0.15s;
}
.film-btn:hover { background: rgba(10, 8, 16, 0.75); }
.film-btn:active { transform: scale(0.94); }
.film-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.film-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.film-btn .when-on, .film-btn[aria-pressed="true"] .when-off { display: none; }
.film-btn[aria-pressed="true"] .when-on { display: block; }
@media (max-width: 600px) {
  .film-sticky { padding-top: 56px; }
  .film-controls { right: 10px; bottom: 10px; }
  .film-btn { width: 40px; height: 40px; }
}

/* ---- Models: the grid on the home page, /models and under a model's page ---- */
.models-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.models-grid-small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.model-card {
  --m-a: var(--grad-a);
  --m-b: var(--grad-b);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 22px 18px 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s, box-shadow 0.25s;
}
.model-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--m-a) 28%, transparent), transparent 70%);
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.3s;
}
.model-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--m-a) 45%, var(--border)); box-shadow: var(--shadow); }
.model-card:hover::before { opacity: 1; }
.model-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sigil { display: block; width: 72px; height: 72px; }
.model-card .sigil { position: relative; margin-bottom: 6px; }
.model-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.model-tag { color: var(--muted); font-size: 0.9rem; line-height: 1.4; text-wrap: pretty; }
.model-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-soon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.model-more { color: var(--accent); font-size: 0.86rem; font-weight: 500; }
/* Each model's two colours, from its sigil (assets/models/*.svg). */
.m-mihr { --m-a: #fdba74; --m-b: #db2777; }
.m-anahit { --m-a: #a78bfa; --m-b: #5eead4; }
.m-siran { --m-a: #f9a8d4; --m-b: #7c3aed; }
.m-nareia { --m-a: #a78bfa; --m-b: #2f5bff; }
.m-monte { --m-a: #7c3aed; --m-b: #ea580c; }
.models-section .section-head { margin-bottom: 36px; }
.models-foot { margin-top: 28px; text-align: center; }
.models-foot a { color: var(--accent); font-weight: 500; text-decoration: none; }
.models-foot a:hover { text-decoration: underline; }
@media (max-width: 1080px) {
  .models-grid, .models-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .models-grid, .models-grid-small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .model-card { padding: 16px 14px 14px; border-radius: 18px; }
  .model-card .sigil { width: 56px; height: 56px; }
  .model-name { font-size: 0.98rem; }
  .model-tag { font-size: 0.84rem; }
}
@media (max-width: 360px) {
  .models-grid, .models-grid-small { grid-template-columns: minmax(0, 1fr); }
}

/* ---- A model's page ---- */
.model-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 24px;
}
.model-hero .page-title { text-align: left; margin-bottom: 8px; }
.model-hero .page-lead { margin: 0 0 24px; text-align: left; }
.model-meaning { margin: 0 0 16px; color: var(--muted); font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; }
.model-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 22px; }
.model-cta .btn { width: auto; min-width: 200px; text-decoration: none; }
.model-cta .btn-link { min-width: 0; width: auto; }
.btn.is-soon { cursor: default; opacity: 0.7; }
.model-chips { justify-content: flex-start; margin: 0; }
.model-chips .is-soon { color: var(--accent); }
.model-hero-art { position: relative; display: grid; place-items: center; min-height: 320px; }
.model-orb {
  position: absolute;
  width: min(420px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m-a) 55%, transparent), color-mix(in srgb, var(--m-b) 22%, transparent) 55%, transparent 72%);
  filter: blur(18px);
  animation: orb-drift 14s ease-in-out infinite alternate;
}
.sigil-xl { position: relative; width: min(260px, 60vw); height: auto; filter: drop-shadow(0 24px 40px rgba(20, 16, 28, 0.25)); animation: sigil-float 7s ease-in-out infinite; }
@keyframes orb-drift { from { transform: translate(-6%, 4%) scale(0.95); } to { transform: translate(6%, -4%) scale(1.05); } }
@keyframes sigil-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Five capabilities: three and two, the last row centred. */
.cap-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.cap-grid .feature { flex: 1 1 280px; max-width: 360px; box-sizing: border-box; }
.model-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 1000px; margin: 0 auto; }
.model-two .section-title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 18px; }
.model-note { margin: 0 0 16px; color: var(--text); line-height: 1.6; }
.model-two .fine-print { margin-top: 0; }
/* Benchmarks: one thin bar per published score, the value as text at the tip; the bar wears the
   model's two colours and grows when the section scrolls into view. */
.bench { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.bench-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 58px; align-items: center; gap: 16px; }
.bench-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.bench-name small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.bench-track { display: block; height: 12px; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--text) 7%, transparent); }
.bench-fill { display: block; width: var(--v); height: 100%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--m-a), var(--m-b)); transform-origin: left center; }
.bench-val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.bench-note { max-width: 760px; margin: 24px auto 0; text-align: left; }
.js-reveal .bench-section .bench-fill { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js-reveal .bench-section.is-visible .bench-fill { transform: none; }
.js-reveal .bench-section.is-visible .bench-row:nth-child(2) .bench-fill { transition-delay: 0.07s; }
.js-reveal .bench-section.is-visible .bench-row:nth-child(3) .bench-fill { transition-delay: 0.14s; }
.js-reveal .bench-section.is-visible .bench-row:nth-child(4) .bench-fill { transition-delay: 0.21s; }
.js-reveal .bench-section.is-visible .bench-row:nth-child(5) .bench-fill { transition-delay: 0.28s; }
.js-reveal .bench-section.is-visible .bench-row:nth-child(6) .bench-fill { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) { .js-reveal .bench-section .bench-fill { transform: none; transition: none; } }
@media (max-width: 640px) {
  .bench { gap: 14px; }
  .bench-row { grid-template-columns: minmax(0, 1fr) 52px; gap: 6px 12px; }
  .bench-name { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .model-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 40px; text-align: center; }
  .model-hero .page-title, .model-hero .page-lead { text-align: center; }
  .model-hero .page-lead { margin-inline: auto; }
  .model-hero-art { order: -1; min-height: 220px; }
  .sigil-xl { width: min(180px, 45vw); }
  .model-cta { justify-content: center; }
  .model-chips { justify-content: center; }
  .cap-grid .feature { max-width: none; }
  .model-two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 40px 16px 8px; }
  .cap-grid .feature { flex-basis: 100%; }
  .model-cta .btn { width: 100%; }
}

/* ---- /models: how to choose ---- */
.choose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .choose-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- /pricing: the comparison table; stacks into cards on phones ---- */
.table-wrap { max-width: 980px; margin: 0 auto; overflow-x: auto; }
.plan-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}
.plan-table th, .plan-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.plan-table thead th { color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.plan-table tbody th { color: var(--text); font-weight: 500; text-align: left; }
.plan-table .is-featured { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.plan-table thead .is-featured { color: var(--accent); border-radius: 12px 12px 0 0; }
.plan-table .cell-no { color: var(--muted); }
@media (max-width: 760px) {
  .plan-table thead { display: none; }
  .plan-table, .plan-table tbody, .plan-table tr { display: block; width: 100%; }
  .plan-table tr { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
  .plan-table tbody th { display: block; padding: 12px 14px 6px; border-bottom: 0; font-weight: 600; }
  .plan-table td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); text-align: right; }
  .plan-table td:last-child { border-bottom: 0; }
  .plan-table td::before { content: attr(data-plan); color: var(--muted); font-weight: 500; }
  .plan-table .is-featured { background: color-mix(in srgb, var(--accent) 9%, transparent); }
}

/* ---- /about ---- */
.about-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; max-width: 1000px; margin: 0 auto; }
.about-two .section-title { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.about-two p { color: var(--text); line-height: 1.65; }
.about-art { display: grid; place-items: center; margin: 0; }
.about-mark { display: block; width: min(220px, 50vw); height: auto; aspect-ratio: 1; }
.about-team .section-lead { max-width: 640px; }
.about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.about-links .btn { width: auto; min-width: 160px; text-decoration: none; }
@media (max-width: 860px) {
  .about-two { grid-template-columns: minmax(0, 1fr); gap: 24px; text-align: center; }
  .about-art { order: -1; }
  .about-links .btn { flex: 1 1 160px; }
}

/* ---- /support: the form and the quick answers beside it ---- */
.support-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; max-width: 1040px; margin: 0 auto; align-items: start; }
.support-form { padding: 28px; text-align: left; }
.support-form h2, .support-aside h2 { margin: 0 0 18px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.support-aside h2 + .support-emails, .support-aside h2:not(:first-child) { margin-top: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { color: var(--text); font-size: 0.9rem; font-weight: 500; }
.field input, .field select, .field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field-count { align-self: flex-end; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.support-consent { margin: 4px 0 16px; }
.support-consent a { color: inherit; }
.support-form .btn { width: 100%; }
.support-form .status { margin: 14px 0 0; text-align: left; }
.support-aside { padding: 8px 0; }
.support-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.support-links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.support-links a:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.support-link-title { font-weight: 600; }
.support-link-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.support-emails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 0.92rem; }
.support-emails a { color: var(--accent); font-weight: 500; text-decoration: none; }
.support-emails a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .support-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .support-form { padding: 20px 16px; }
}

/* ---- Home page extras ---- */
.plans-compare { margin: 20px 0 0; text-align: center; }
.plans-compare a { color: var(--accent); font-weight: 500; text-decoration: none; }
.plans-compare a:hover { text-decoration: underline; }
/* Three footer columns; they wrap on phones. */
.footer-links { flex-wrap: wrap; gap: 48px 64px; }
@media (max-width: 600px) { .footer-links { gap: 28px 40px; } }

/* ---- Home page, rebuilt 20.10.2026: a hero without the sign-in card, three pillars, chips, the plans in brief ---- */
.hero-simple { padding-bottom: 32px; }
.hero-simple h1 { margin-bottom: 20px; }
.hero-accent {
  display: inline-block;
  padding: 0 0.08em 0.12em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.015em;
  background: linear-gradient(100deg, var(--grad-a), var(--grad-b) 60%, var(--grad-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-simple .lead { margin-bottom: 28px; max-width: 38rem; font-size: 1.12rem; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-bottom: 30px; }
.hero-actions .btn { width: auto; min-width: 210px; padding-inline: 22px; text-decoration: none; }
.hero-actions .btn[hidden] { display: none; }
.hero-more { flex-basis: 100%; margin-top: 4px; color: var(--muted); font-size: 0.92rem; text-decoration: none; }
.hero-more:hover { color: var(--text); }
.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar h3 { font-size: 1.15rem; }
.pillar p { font-size: 0.98rem; }
.extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.extras li > * {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}
.extras a { color: var(--accent); }
.extras a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.data-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.more-link { color: var(--accent); font-weight: 500; text-decoration: none; }
.more-link:hover { text-decoration: underline; }
.faq-more { margin: 18px 0 0; text-align: center; }
.model-facts { color: var(--muted); font-size: 0.78rem; }
/* The plans in brief: name, price, one sentence, a button. */
.plans-brief { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plan-brief {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  backdrop-filter: blur(12px);
}
.plan-brief .plan-name { margin: 0 0 6px; }
.plan-brief .plan-price { margin: 0 0 10px; }
.plan-brief .plan-desc { flex: 1; min-height: 0; margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.plan-brief .plan-cta { margin: 0; }
.plan-brief.plan-featured { border-color: transparent; box-shadow: var(--shadow); position: relative; }
.plan-brief.plan-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b), var(--grad-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (max-width: 1080px) { .plans-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pillars, .data-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .plans-brief { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { width: 100%; }
  .hero-simple .lead { font-size: 1.02rem; }
}

/* ---- Phones: shorter home page (20.10.2026, after measuring 10+ screens at 390 px) ---- */
@media (max-width: 640px) {
  /* The five models and the four plans: one row to swipe, not a column to scroll past. */
  .models-swipe, .plans-brief {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .models-swipe::-webkit-scrollbar, .plans-brief::-webkit-scrollbar { display: none; }
  .models-swipe .model-card { flex: 0 0 76%; scroll-snap-align: start; }
  .plan-brief { flex: 0 0 82%; scroll-snap-align: start; }
  /* "Your data": three short rows with the icon beside the text. */
  .data-grid .feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px; }
  .data-grid .feature-icon { width: 40px; height: 40px; margin: 0; }
  .data-grid .feature h3 { margin: 6px 0 2px; font-size: 0.98rem; }
  .data-grid .feature p { grid-column: 2; margin: 0; font-size: 0.88rem; }
  /* Research: the first three points carry the story; the rest is on the page anyway. */
  .research .check-list li:nth-child(n + 4) { display: none; }
}
@media (max-width: 899px) {
  /* The film as a card on phones (film.js adds .is-free): no full-screen pin. */
  .film-sticky { min-height: 0; padding: 56px 0 8px; }
  .film-frame.is-free { width: min(100vw - 32px, 720px); }
  .film-frame.is-free[data-cut="portrait"] { width: auto; height: min(calc(100svh - 170px), 172vw); max-width: calc(100vw - 32px); }
}
@media (max-width: 640px) {
  /* The three pillars as rows, like "Your data". */
  .pillars .feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px; }
  .pillars .feature-icon { width: 40px; height: 40px; margin: 0; }
  .pillars .feature h3 { margin: 6px 0 2px; font-size: 1rem; }
  .pillars .feature p { grid-column: 2; margin: 0; font-size: 0.9rem; }
  /* Research: the chart and the small print are for the wide screen. */
  .research .tw-plot, .research .fine-print { display: none; }
}
@media (max-width: 600px) {
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section-head { margin-bottom: 32px; }
}

/* ---- FAQ answers: one measure, justified with hyphenation, a calmer rhythm (20.10.2026) ---- */
.faq-answer p {
  max-width: 60ch;
  padding: 0 4px 24px;
  line-height: 1.65;
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}
.faq-item summary { padding: 18px 4px; }
.faq-item[open] summary { color: var(--text); }
@media (max-width: 600px) { .faq-answer p { text-align: left; line-height: 1.6; } }

/* ---- /about: the film beside "Why we build it" (above it on narrow screens) in place of the mark,
   which comes back when there is no film (data saver, media.kayts.ai down) ---- */
.about-two:has(.about-film:not([hidden])) .about-art { display: none; }
@media (min-width: 1000px) {
  .about-film { height: 520px; }
}
@media (max-width: 860px) {
  .about-film { order: -1; }
}

/* ---- /research: the hero beside its film, the latest article, then every article in rows ---- */
.rs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 8px;
}
.rs-hero-copy { max-width: 560px; }
.rs-hero .page-lead { margin: 0; }
@media (min-width: 1000px) {
  .rs-hero-film { height: 440px; }
  .rs-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; }
  .rs-hero:has(.rs-hero-film[hidden]) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .rs-hero { text-align: center; }
  .rs-hero-copy { margin: 0 auto; }
}

.rs-featured-wrap, .rs-list-head, .rs-list, .article-more { max-width: 1112px; margin-inline: auto; }
.rs-featured {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.rs-featured:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.rs-featured:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rs-featured-art { min-height: 240px; }
/* An article's picture: three soft blobs; their hues (--h1..3) and centres come from the article's
   slug (backend/scripts/build-site.js, artStyle), the lightness from the theme. */
.rs-art {
  --art-l: 58%;
  background:
    radial-gradient(70% 80% at var(--ax, 25%) var(--ay, 30%), hsl(var(--h1, 262) 85% var(--art-l) / 0.7), transparent 70%),
    radial-gradient(60% 70% at var(--cx, 80%) var(--cy, 75%), hsl(var(--h3, 22) 88% var(--art-l) / 0.6), transparent 70%),
    radial-gradient(50% 60% at var(--bx, 70%) var(--by, 20%), hsl(var(--h2, 330) 80% var(--art-l) / 0.5), transparent 70%),
    color-mix(in srgb, var(--text) 6%, var(--bg));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rs-art { --art-l: 74%; } }
:root[data-theme="dark"] .rs-art { --art-l: 74%; }
/* An article's cover photo (build-site.js, coverImg) fills the box; the blobs show until it loads. */
.rs-art { position: relative; overflow: hidden; }
.rs-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-featured-text { display: flex; flex-direction: column; gap: 12px; padding: 32px; }
.rs-featured-meta { color: var(--muted); font-size: 0.85rem; }
.rs-featured-title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.rs-featured-summary { color: var(--muted); line-height: 1.6; }
.rs-more { color: var(--accent); font-weight: 500; text-decoration: none; }
a.rs-more:hover, .rs-featured:hover .rs-more { text-decoration: underline; }
@media (max-width: 760px) {
  .rs-featured { grid-template-columns: minmax(0, 1fr); }
  .rs-featured-art { min-height: 120px; }
  .rs-featured-text { padding: 22px; }
}

.rs-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 8px; }
.rs-list-title { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.rs-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-filter {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.rs-filter:hover { color: var(--text); border-color: var(--border-strong); }
.rs-filter[aria-pressed="true"] { border-color: transparent; background: var(--text); color: var(--bg); }
/* /research: the topics (each leading to its articles on /articles), a heading over the latest
   article, the button to all articles under the principles. */
.rs-section-lead { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; }
.rs-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; max-width: 1112px; margin: 18px auto 0; }
.rs-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
a.rs-topic:hover { border-color: var(--border-strong); transform: translateY(-2px); }
a.rs-topic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-topic.is-empty { opacity: 0.62; }
.rs-topic-name { font-weight: 600; }
.rs-topic-desc { flex: 1; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.rs-topic-count { color: var(--muted); font-size: 0.78rem; font-weight: 500; }
a.rs-topic .rs-topic-count { color: var(--accent); }
.rs-topic-go { position: absolute; top: 16px; right: 18px; color: var(--muted); transition: transform 0.2s, color 0.2s; }
a.rs-topic:hover .rs-topic-go { color: var(--text); transform: translateX(3px); }
/* Phones: the topics in one row that scrolls sideways, snapping card by card; the next card peeks
   in, so it reads as a row. It runs to the screen's edges, the first card in line with the text. */
@media (max-width: 760px) {
  .rs-topics {
    display: flex;
    gap: 10px;
    margin: 16px -16px 0;
    padding: 2px 16px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .rs-topics::-webkit-scrollbar { display: none; }
  .rs-topic { flex: 0 0 min(74%, 270px); min-height: 0; scroll-snap-align: start; }
  a.rs-topic:hover { transform: none; }
}
.rs-featured-head { margin-bottom: 14px; }
.rs-all-cta { margin: 28px 0 0; text-align: center; }
.rs-all-cta .btn { display: inline-flex; width: auto; min-width: 200px; text-decoration: none; }

/* How many articles a topic has, quieter than its name. */
.rs-count { margin-left: 2px; opacity: 0.6; font-variant-numeric: tabular-nums; }
a.rs-more { white-space: nowrap; }
.rs-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.rs-row:first-child { border-top: 1px solid var(--border); }
.rs-row[hidden] { display: none; }
.rs-thumb { aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: 16px; transition: border-color 0.2s; }
.rs-row:hover .rs-thumb { border-color: var(--border-strong); }
.rs-meta { color: var(--muted); font-size: 0.85rem; }
.rs-main { display: flex; flex-direction: column; gap: 6px; }
.rs-title { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.rs-summary { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.rs-row:hover .rs-title { text-decoration: underline; text-underline-offset: 3px; }
.rs-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 760px) {
  .rs-row { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; }
  .rs-thumb { aspect-ratio: 1; border-radius: 12px; }
  /* Three lines of the lead are enough to choose; the article has the rest. */
  .rs-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
}

/* ---- /changelog: one entry per day, the date on the left (above on phones), the changes as a
   list, each with its kind as a small coloured label ---- */
/* Behind the whole page, the galloping horse in characters (js/ascii-art.js): fixed to the
   window, so it keeps running while the log scrolls over it; quiet, and fading at the edges. */
/* The characters' colours across the width (js/ascii-art.js reads them): the logo's violet, pink
   and orange, deeper on the light page so they hold against white, pastel on the dark one. */
.ascii-art { --ascii-ink: 91 33 182, 190 24 93, 194 65 12; pointer-events: none; }
.ascii-art canvas { display: block; }
.ascii-page {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.72;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 55%, transparent 100%);
}
.page-changelog .site-main { position: relative; z-index: 1; }
/* The text keeps a soft shadow of the page's background, so it reads over the characters. */
.cl-hero .page-title,
.cl-hero .page-lead,
.cl-hero .section-eyebrow,
.cl-title,
.cl-text { text-shadow: 0 0 14px var(--bg), 0 0 4px var(--bg), 0 0 1px var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ascii-art { --ascii-ink: 167 139 250, 249 168 212, 253 186 116; }
  :root:not([data-theme="light"]) .ascii-page { opacity: 0.34; }
}
:root[data-theme="dark"] .ascii-art { --ascii-ink: 167 139 250, 249 168 212, 253 186 116; }
:root[data-theme="dark"] .ascii-page { opacity: 0.34; }
@media (max-width: 760px) {
  .ascii-page { opacity: 0.6; }
  :root[data-theme="dark"] .ascii-page { opacity: 0.3; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ascii-page { opacity: 0.3; }
}

/* The entries in a console font (Geist Mono, loaded by this page alone), like a log. */
.cl-list { max-width: 900px; font-family: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.92rem; }
.cl-entry {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 88px;
}
.cl-date { position: sticky; top: 96px; align-self: start; color: var(--muted); font-size: 0.88rem; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; }
.cl-date::before { content: "$ "; color: var(--accent); }
.cl-date:hover { color: var(--text); }
.cl-title { margin: 0 0 18px; font-size: 1.15rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.cl-items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cl-item { display: flex; align-items: baseline; gap: 12px; line-height: 1.55; }
.cl-kind {
  /* One width for every kind, so the changes start on one line. */
  flex: 0 0 92px;
  box-sizing: border-box;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.cl-new { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cl-improved { background: color-mix(in srgb, #38bdf8 16%, transparent); color: color-mix(in srgb, #38bdf8 80%, var(--text)); }
.cl-changed { background: color-mix(in srgb, #f59e0b 16%, transparent); color: color-mix(in srgb, #f59e0b 80%, var(--text)); }
.cl-fixed { background: color-mix(in srgb, #34d399 16%, transparent); color: color-mix(in srgb, #34d399 75%, var(--text)); }
@media (max-width: 760px) {
  .cl-entry { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; }
  .cl-date { position: static; }
  .cl-list { font-size: 0.88rem; }
  .cl-title { font-size: 1.05rem; }
  /* The label at the start of the line, the text flowing after it. */
  .cl-item { display: block; }
  .cl-kind { display: inline-block; margin-right: 8px; vertical-align: 1px; }
}

/* ---- An article (/research/<slug>): a reading column; a wide chart may leave it ---- */
.article { max-width: 720px; margin: 0 auto; padding: 56px 24px 24px; }
.article-meta { margin: 0 0 18px; color: var(--muted); font-size: 0.88rem; }
.article-meta .eyebrow-link::before { content: none; }
.article-meta .eyebrow-link { color: var(--accent); font-weight: 500; }
/* The article's topic leads to all articles on it (/articles?topic=…). */
.article-topic { color: var(--accent); font-weight: 500; text-decoration: none; }
.article-topic:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-title { margin: 0 0 16px; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.article-lead { margin: 0 0 40px; color: var(--muted); font-size: 1.18rem; line-height: 1.55; text-wrap: pretty; }
.article-cover { margin: 0 0 40px; }
.article-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.article-cover figcaption { margin-top: 10px; color: var(--muted); font-size: 0.8rem; }
.article-cover figcaption a { color: inherit; text-underline-offset: 2px; }
.article-body { font-size: 1.04rem; line-height: 1.75; }
.article-body p, .article-body li { color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.article-body h2 { margin: 48px 0 12px; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.article-body ul { padding-left: 1.2em; }
.article-body li { margin: 8px 0; }
.article-body a { color: var(--accent); text-underline-offset: 2px; }
.article-more { padding-top: 24px; }
.article-more .rs-list { margin: 16px 0 20px; }

/* ---- Charts (backend/scripts/build-site.js, js/research.js): HTML bars on one shared scale ---- */
.chart {
  --chart-bar: var(--accent);
  --chart-grid: color-mix(in srgb, var(--text) 9%, transparent);
  margin: 36px 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
/* A wide chart leaves the reading column for up to 1160 px, centred on the page. */
.chart-wide { margin-inline: calc(50% - min(580px, 50vw - 16px)); }
.chart-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.chart-title { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.chart-sub { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.chart-rows {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) 64px;
  column-gap: 14px;
  align-items: center;
}
.chart-row { display: contents; }
.chart-label { grid-column: 1; font-size: 0.88rem; line-height: 1.3; }
.chart-label small { display: block; color: var(--muted); font-size: 0.76rem; }
.chart-label, .chart-val { padding: 5px 0; }
/* Gridlines at every quarter, drawn by each track (they meet across rows, nothing to misalign). */
.chart-track {
  position: relative;
  grid-column: 2;
  align-self: stretch;
  min-height: 34px;
  border-right: 1px solid var(--chart-grid);
  background: repeating-linear-gradient(to right, var(--chart-grid) 0 1px, transparent 1px 25%);
}
.chart-bar {
  position: absolute;
  top: calc(50% - 11px);
  height: 22px;
  left: 0;
  width: var(--v);
  border-radius: 0 4px 4px 0; /* square at the baseline, rounded at the value */
  background: var(--chart-bar);
  cursor: default;
  transition: filter 0.15s;
}
.chart-bar:hover, .chart-bar:focus-visible { filter: brightness(1.15); outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--chart-bar); }
.chart-range {
  position: absolute;
  top: calc(50% - 11px);
  height: 22px;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--chart-bar) 30%, transparent);
}
.chart-val { grid-column: 3; color: var(--text); font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-axis { position: relative; grid-column: 2; height: 18px; margin-top: 6px; color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.chart-axis span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.chart-axis span:first-child { transform: none; }
.chart-axis span:last-child { transform: translateX(-100%); }
.chart-source { margin: 18px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.chart-table { margin-top: 12px; font-size: 0.86rem; }
.chart-table summary { color: var(--accent); cursor: pointer; }
.chart-table table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.chart-table th, .chart-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; }
.chart-table thead th { color: var(--muted); font-weight: 500; }
.chart-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.chart-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr)); gap: 32px 48px; }
.chart-panel-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
.chart-panel-title a { color: var(--text); text-decoration: none; }
.chart-panel-title a:hover { text-decoration: underline; }
.chart-panel .chart-rows { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr) 56px; }
/* The tooltip (js/research.js): the value first, the label under it. */
.chart-tip {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  font-size: 0.84rem;
}
.chart-tip strong { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.chart-tip span { color: var(--muted); }
.chart-tip[hidden] { display: none; }
@media (max-width: 600px) {
  .chart { padding: 16px; }
  .chart-rows, .chart-panel .chart-rows { grid-template-columns: minmax(84px, 38%) minmax(0, 1fr) 48px; column-gap: 10px; }
}

/* ---- /features: the tiles, then a section per feature with its steps and a small picture ---- */
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; max-width: 1112px; margin: 0 auto; }
.ft-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.ft-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.ft-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ft-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ft-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-name { font-weight: 600; }
.ft-line { flex: 1; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.ft-plan { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); font-size: 0.76rem; font-weight: 500; }
.ft-plan-link { color: var(--accent); text-decoration: none; }

.ft-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1112px; margin: 0 auto; scroll-margin-top: 80px; }
.ft-flip .ft-copy { order: 2; }
.ft-copy .section-title, .ft-copy .section-lead { text-align: left; }
.ft-copy .section-lead { margin-bottom: 0; }
.ft-how { margin: 28px 0 10px; color: var(--muted); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ft-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.ft-steps li { position: relative; padding-left: 38px; line-height: 1.55; counter-increment: step; }
.ft-steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
}
.ft-visual { display: grid; place-items: center; }
.ft-window {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
}
.ft-bubble { align-self: flex-end; max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.ft-answer { display: flex; gap: 10px; align-items: flex-start; }
.ft-answer p { margin: 0; line-height: 1.55; }
.ft-dot { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: linear-gradient(135deg, var(--grad-a), var(--grad-b) 60%, var(--grad-c)); }
.ft-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-chips span { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.8rem; }
.ft-files { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-file { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: 0.82rem; }
.ft-file b { align-self: flex-start; padding: 1px 6px; border-radius: 5px; background: #dc2626; color: #fff; font-size: 0.66rem; }
.ft-file-x b { background: #15803d; }
.ft-file-img b { background: #2563eb; }
.ft-file small { color: var(--muted); }
.ft-source { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.ft-source b { display: block; font-weight: 500; line-height: 1.35; }
.ft-source small { color: var(--muted); font-size: 0.78rem; }
.ft-num, .ft-window .cite { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 0.72rem; font-weight: 600; }
.ft-atlas svg { width: 100%; height: auto; }
.ft-links path { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.5; }
.ft-node rect { fill: var(--bg); stroke: var(--border-strong); }
.ft-root rect { fill: color-mix(in srgb, var(--accent) 16%, var(--bg)); stroke: var(--accent); }
.ft-node text { fill: var(--text); font-family: inherit; font-size: 11px; text-anchor: middle; }
.ft-root text { font-size: 12.5px; font-weight: 600; }
.ft-track { display: flex; justify-content: space-between; }
.ft-track small { color: var(--muted); font-variant-numeric: tabular-nums; }
.ft-wave { display: flex; align-items: center; gap: 4px; height: 72px; }
.ft-wave i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, var(--grad-b), var(--grad-a)); opacity: 0.8; }
.ft-voice { align-items: center; padding: 40px 22px; }
.ft-voice p { margin: 0; color: var(--muted); }
.ft-orb {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b) 60%, var(--grad-c));
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--grad-a) 14%, transparent), 0 0 0 30px color-mix(in srgb, var(--grad-b) 8%, transparent);
}
.ft-orb svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.ft-more .feature { display: flex; flex-direction: column; }
.ft-more .feature p { flex: 1; }
@media (max-width: 860px) {
  .ft-detail { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ft-flip .ft-copy { order: 0; }
}

/* ---- Plans: monthly or yearly (site.js), the launch trial on Plus ---- */
.period-toggle {
  display: flex;
  width: max-content;
  margin: 0 auto 28px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.period-toggle button {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.period-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.period-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On the card's top edge, so the prices of all cards stay level. */
.plan-brief { position: relative; }
.plan-trial {
  position: absolute;
  top: -12px;
  left: 20px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.plan-trial[hidden] { display: none; }

/* ---- /pricing: the title, the switch and all four plans fit one screen from 900 px tall (Monte,
   21.10.2026: "on one screen, without zooming out"); the comparison and questions follow below ---- */
@media (min-width: 900px) {
  .page-pricing .page-hero { padding: 28px 24px 0; }
  .page-pricing .page-title { margin-bottom: 10px; font-size: clamp(2.2rem, 3.4vw, 3rem); }
  .page-pricing .page-lead { font-size: 1rem; }
  .page-pricing .section-tight:first-of-type { padding-top: 22px; }
  .page-pricing .period-toggle { margin-bottom: 26px; }
  .page-pricing .plans { max-width: 1280px; gap: 14px; }
  .page-pricing .plan { padding: 22px 20px 20px; }
  .page-pricing .plan-desc { min-height: 2.9em; margin-bottom: 14px; font-size: 0.88rem; line-height: 1.45; }
  .page-pricing .plan-billing { margin: 6px 0 14px; }
  .page-pricing .plan-cta { min-height: 42px; margin-bottom: 16px; }
  .page-pricing .plan-features { gap: 7px; padding-top: 14px; font-size: 0.86rem; line-height: 1.4; }
  .page-pricing .plans-note { margin-top: 16px; }
}
/* Low laptop windows (1366 x 768): the eyebrow and the lead give way so the plans still fit. */
@media (min-width: 900px) and (max-height: 760px) {
  .page-pricing .page-hero { padding-top: 14px; }
  .page-pricing .page-hero .section-eyebrow, .page-pricing .page-lead { display: none; }
  .page-pricing .page-title { margin-bottom: 0; font-size: 2rem; }
  .page-pricing .section-tight:first-of-type { padding-top: 14px; }
  .page-pricing .period-toggle { margin-bottom: 18px; }
  .page-pricing .plan { padding: 16px 18px 14px; }
  .page-pricing .plan-desc { min-height: 0; margin-bottom: 8px; }
  .page-pricing .plan-billing { margin: 4px 0 10px; }
  .page-pricing .plan-cta { min-height: 38px; margin-bottom: 12px; }
  .page-pricing .plan-features { gap: 4px; padding-top: 10px; font-size: 0.82rem; }
}

/* Plans in ink, not violet (Monte, 21.10.2026): the main button and the trial label are black on
   light and white on dark, like "Try Kayts" in the top bar. */
.plan .btn-primary, .plan-brief .btn-primary { background: var(--text); color: var(--bg); box-shadow: none; }
.plan .btn-primary:hover:not(:disabled), .plan-brief .btn-primary:hover:not(:disabled) { background: var(--text); opacity: 0.86; }
.plan-trial { background: var(--text); color: var(--bg); }

/* The hero's main button in ink, like "Try Kayts" and the plans (Monte, 21.10.2026). */
.hero-actions .btn-primary { background: var(--text); color: var(--bg); }
.hero-actions .btn-primary:hover:not(:disabled) { background: var(--text); opacity: 0.86; }

/* ---- Ways back and onward: the article's back pill and pager, /features' section bar ---- */
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s;
}
.back-pill:hover { border-color: var(--border-strong); }
.back-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.article-back { margin-bottom: 28px; }
.article-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 8px auto 0;
  padding: 0 24px;
}
.pager-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
a.pager-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.pager-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pager-card.is-next { text-align: right; }
.pager-card.is-empty { visibility: hidden; }
.pager-dir { color: var(--muted); font-size: 0.82rem; }
.pager-title { font-weight: 600; line-height: 1.35; }
@media (max-width: 600px) {
  .article-pager { grid-template-columns: minmax(0, 1fr); }
  .pager-card.is-empty { display: none; }
  .pager-card.is-next { text-align: left; }
}

.page-subnav {
  position: sticky;
  top: 68px;
  z-index: 20;
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 8px auto 0;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.page-subnav::-webkit-scrollbar { display: none; }
.page-subnav a {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.page-subnav a:hover { color: var(--text); }
.page-subnav a[aria-current] { background: var(--text); color: var(--bg); }
.page-subnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-features .section[id] { scroll-margin-top: 130px; }