/* ─────────────────────────────────────────────────────────────────────────
   TracksideRacing.AI — marketing site stylesheet.
   Single file, no preprocessor, no Tailwind. Token spec lives in
   ../../docs/design-system.md and is mirrored in tsr-fe/src/styles/globals.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Light base tokens; the pre-paint script applies .dark by default unless the
   visitor has explicitly stored a light preference. */
:root {
  --bg-primary:       #fbfbfa;
  --bg-surface:       #ffffff;
  --bg-elevated:      #f4f4f2;

  --border:           #e6e5e0;
  --border-strong:    #d6d5cf;

  --accent-primary:   #0f6b3c;
  --accent-hover:     #0a4f2a;
  --accent-secondary: #1d4ed8;
  --accent-on-accent: #ffffff;

  --text-primary:     #1a1a1a;
  --text-secondary:   #5b5b5b;
  --text-muted:       #8a8a8a;
  --text-tag:         #2a2a2a;

  --button-bg:        #0f0f0f;
  --button-text:      #ffffff;

  --success:          #10b981;
  --warning:          #f59e0b;
  --danger:           #ef4444;

  color-scheme: light;
}

/* Dark theme */
:root.dark, :root[data-theme="dark"] {
  --bg-primary:       #0d1117;
  --bg-surface:       #161b22;
  --bg-elevated:      #1c232c;

  --border:           #272f3a;
  --border-strong:    #343e4c;

  --accent-primary:   #3fb950;
  --accent-hover:     #2da944;
  --accent-secondary: #38bdf8;
  --accent-on-accent: #04140b;

  --text-primary:     #f0f3f6;
  --text-secondary:   #9aa4b2;
  --text-muted:       #6a7484;
  --text-tag:         #cdd5e0;

  --button-bg:        #f0f3f6;
  --button-text:      #0d1117;

  color-scheme: dark;
}

/* ─────────────────────────────── Reset / base ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: Manrope, Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

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

a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.030em; }
h3 { letter-spacing: -0.015em; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Visually hidden — accessible */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─────────────────────────────── Layout helpers ─────────────────────────────── */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

.section { padding: 3rem 0; }
@media (min-width: 640px) { .section { padding: 4rem 0; } }
.section--tight-top { padding-top: 0; }

.prose-narrow { max-width: 48rem; }

/* ─────────────────────────────── Header ─────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) { .site-header__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .site-header__inner { padding: 0 2rem; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-primary);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
:root.dark .brand__logo,
:root[data-theme="dark"] .brand__logo {
  filter: invert(1) brightness(0.92) hue-rotate(80deg) saturate(0.4);
}
.brand__text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__accent { color: var(--accent-primary); }

.nav-primary {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .nav-primary { display: inline-flex; }
}
.nav-primary a {
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 150ms ease;
}
.nav-primary a:hover { color: var(--text-primary); }
.nav-primary a.is-active { color: var(--accent-primary); }

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Header auth links (AUTH-105) */
.nav-auth-link {
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 150ms ease;
}
.nav-auth-link:hover { color: var(--text-primary); }
.btn--nav { padding: 0.45rem 0.9rem; font-size: 0.8125rem; }
@media (max-width: 720px) {
  /* The mobile nav carries its own Log in / Sign up entries. */
  .nav-actions .nav-auth-link, .nav-actions .btn--nav { display: none; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
}
.menu-toggle:hover { color: var(--text-primary); }
@media (min-width: 768px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 20px; height: 20px; }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 0.5rem 1rem;
}
@media (min-width: 768px) { .nav-mobile { display: none !important; } }
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display: block;
  padding: 0.5rem 0.75rem;
  margin: 0.125rem 0;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
}
.nav-mobile a:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nav-mobile a.is-active {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
}

/* ─────────────────────────────── Theme toggle ─────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 3px;
}
.theme-toggle__btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 4px 12px;
  border-radius: 9999px;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.theme-toggle__btn:hover { color: var(--text-primary); }
.theme-toggle__btn[aria-pressed="true"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}

/* ─────────────────────────────── Buttons ─────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent-primary);
  color: var(--accent-on-accent);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn--secondary:hover { border-color: var(--border-strong); }

.btn--block { width: 100%; }

/* ─────────────────────────────── Forms ─────────────────────────────── */

.field {
  display: block;
  width: 100%;
}
.field + .field { margin-top: 0.75rem; }

.field__label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.875rem;
  border-radius: 6px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  margin-top: 0.75rem;
}
.checkbox-row input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--accent-primary);
  flex-shrink: 0;
}
.checkbox-row__label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─────────────────────────────── Eyebrow / hero ─────────────────────────────── */

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1rem 3rem;
}
@media (min-width: 640px) {
  .hero { padding: 6rem 1.5rem 4rem; }
}
@media (min-width: 1024px) {
  .hero { padding-left: 2rem; padding-right: 2rem; }
}
.hero__inner { max-width: 48rem; }
.hero__title {
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.hero__subtitle {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ─────────────────────────────── Cards / grid ─────────────────────────────── */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}
.card--feature { transition: border-color 150ms ease; }
.card--feature:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border));
}
.card__h { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.card__body { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.feature-icon svg { width: 20px; height: 20px; }

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─────────────────────────────── Pricing ─────────────────────────────── */

.tier {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  transition: border-color 150ms ease;
}
.tier--highlighted {
  border-color: var(--accent-primary);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}
.tier__badge {
  position: absolute;
  top: -12px;
  left: 1.5rem;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--accent-primary);
  color: var(--accent-on-accent);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
}
/* Badge variant for tiers that are announced but not sellable. Deliberately
   token-neutral rather than accent-coloured so it never reads as a promotion. */
.tier__badge--pending {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.tier__name { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); }
.tier__tagline { margin-top: 0.25rem; font-size: 0.875rem; color: var(--text-muted); }
.tier__price {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.tier__price-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}
.tier__price-cadence { font-size: 0.875rem; color: var(--text-muted); }
.tier__features {
  margin-top: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tier__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.tier__features svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--success);
  flex-shrink: 0;
}
/* Roadmap rows. The green tick is this list's "included today" signal, so a
   pending row must not carry it — a tick beside "Coming soon" contradicts
   itself. Colours are existing tokens; no token values are defined here.

   The text deliberately keeps the list's normal colour. Muting it reads as
   the obvious way to de-emphasise the row, but --text-muted measures 3.45:1
   against the card, under the 4.5:1 floor for text — and the row is already
   distinguished without colour by the clock icon and the "Coming soon" badge,
   which is the more robust signal anyway. Only the icon is muted: at 3.45:1
   it still clears the 3:1 bar that applies to a graphic rather than text. */
.tier__features li.is-pending svg { color: var(--text-muted); }
.tier__cta { margin-top: 1.5rem; }

/* Tiers that exist in the plan matrix but cannot be bought yet. Basic billing
   is separate. Kept here so visitors can see where the product is heading,
   muted so the card never reads as a live purchase route.
   Uses --bg-primary, not --bg-elevated: elevated sits *above* surface in dark
   theme, so it would make the card louder than the sellable ones. */
.tier--unavailable {
  background: var(--bg-primary);
  border-style: dashed;
}
.tier--unavailable .tier__name,
.tier--unavailable .tier__price-value {
  color: var(--text-secondary);
}
.tier--unavailable .tier__features li,
.tier--unavailable .tier__features svg {
  color: var(--text-muted);
}
/* --text-secondary, not --text-muted: this note is the availability disclosure,
   so it has to stay legible even though the card around it is de-emphasised. */
.tier__note {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tier__note + .tier__cta { margin-top: 0.75rem; }

/* Muted explicitly instead of inheriting .btn:disabled's opacity, which fades
   too far to read against the recessed card background in dark mode. */
.tier__cta:disabled {
  opacity: 1;
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

/* ─────────────────────────────── FAQ accordion (native <details>) ─────────────────────────────── */

.faq {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.faq details + details { border-top: 1px solid var(--border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: color 150ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-primary); }
.faq summary::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.faq__answer {
  padding: 0 1.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ─────────────────────────────── Legal pages (long-form prose) ─────────────────────────────── */

.legal h1 {
  font-size: clamp(1.875rem, 2.5vw + 1rem, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.legal__updated {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.legal__body {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.legal__body h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.legal__body p + p { margin-top: 0.75rem; }
.legal__body ul {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.legal__body section { display: block; }
.legal__footer-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─────────────────────────────── Footer ─────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 2.5rem 0;
  margin-top: 4rem;
}
.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.site-footer__brand-col { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .site-footer__brand-col { grid-column: auto; }
}
.site-footer__tagline {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.site-footer h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}
.site-footer ul { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer ul a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.site-footer ul a:hover { color: var(--text-primary); }

.site-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
@media (min-width: 640px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ─────────────────────────────── Launch home page ─────────────────────────────── */

.home-section-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.home-section-copy {
  max-width: 42rem;
  margin-top: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.home-preview-list { display: grid; gap: 2.5rem; }
.home-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(17rem, 2fr);
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.home-preview-card:nth-child(even) { grid-template-columns: minmax(17rem, 2fr) minmax(0, 3fr); }
.home-preview-card:nth-child(even) .home-preview-card__media { order: 2; }
.home-preview-card:nth-child(even) .home-preview-card__body { order: 1; }
.home-preview-card__media {
  display: block;
  align-self: stretch;
  padding: 0.75rem;
  background: var(--bg-elevated);
}
.home-preview-card__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0d1117;
}
.home-preview-card__body {
  padding: 2rem;
}
.home-preview-card__body .text-link { display: inline-block; margin-top: 1.25rem; }
@media (max-width: 767px) {
  .home-preview-list { gap: 1.5rem; }
  .home-preview-card,
  .home-preview-card:nth-child(even) { grid-template-columns: 1fr; }
  .home-preview-card:nth-child(even) .home-preview-card__media,
  .home-preview-card:nth-child(even) .home-preview-card__body { order: initial; }
  .home-preview-card__body { padding: 1.5rem; }
}
.home-journal-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.text-link { color: var(--accent-primary); font-size: 0.875rem; font-weight: 600; }

.carousel-controls { display: none; gap: 0.5rem; }
.carousel-controls.is-enhanced { display: flex; }
.carousel-control {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.carousel-control:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.article-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 23rem);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding: 0.25rem 0 1rem;
}
.article-carousel:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; border-radius: 8px; }
.article-card { scroll-snap-align: start; min-width: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-primary); }
.article-card__link { display: block; height: 100%; color: inherit; }
.article-card__link:hover { text-decoration: none; }
.article-card__art { height: 11rem; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.article-card__art--purpose { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 24%, var(--bg-elevated)), var(--bg-elevated)); }
.article-card__art--purpose span { font-size: 4rem; font-weight: 700; letter-spacing: -0.08em; color: var(--accent-primary); }
.article-card__art--pedigree { background: var(--bg-elevated); }
.article-card__art--pedigree::before,
.article-card__art--pedigree::after { content: ""; position: absolute; height: 1px; background: var(--accent-primary); opacity: 0.55; transform-origin: left; }
.article-card__art--pedigree::before { width: 55%; left: 25%; top: 52%; transform: rotate(-24deg); }
.article-card__art--pedigree::after { width: 55%; left: 25%; top: 52%; transform: rotate(24deg); }
.article-card__art--pedigree i { position: absolute; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-surface); border: 3px solid var(--accent-primary); }
.article-card__art--pedigree i:nth-child(1) { left: 21%; top: 46%; }
.article-card__art--pedigree i:nth-child(2) { left: 50%; top: 20%; }
.article-card__art--pedigree i:nth-child(3) { left: 50%; top: 70%; }
.article-card__art--pedigree i:nth-child(4) { right: 14%; top: 8%; }
.article-card__art--pedigree i:nth-child(5) { right: 14%; bottom: 7%; }
.article-card__art--review { display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(145deg, #121a15, #183222); color: #f0f3f6; }
.article-card__art--review span { color: #3fb950; font-size: 3.25rem; font-weight: 700; line-height: 1; }
.article-card__art--review small { margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; color: #9aa4b2; }
.article-card__body { padding: 1.5rem; }
.article-card__meta { color: var(--text-muted); font-size: 0.75rem; }
.article-card h3 { margin-top: 0.5rem; font-size: 1.125rem; }
.article-card__body > p:not(.article-card__meta) { margin-top: 0.75rem; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; }
.article-card .text-link { display: inline-block; margin-top: 1.25rem; }
@media (min-width: 1024px) { .article-carousel { grid-auto-columns: calc((100% - 2.5rem) / 3); } }
@media (prefers-reduced-motion: reduce) { .article-carousel { scroll-behavior: auto; } }

.landing-card {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}
.landing-form-card {
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  text-align: left;
}
.landing-form-card h2 {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}
.landing-form-card__intro {
  margin-top: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}
.landing-form { margin-top: 1.25rem; }
.form-status { margin-top: 0.75rem; font-size: 0.875rem; }
.form-status--success { color: var(--success); font-weight: 500; }
.form-status--error { color: var(--danger); font-size: 0.75rem; }

/* ─────────────────────────────── Contact page ─────────────────────────────── */

.contact-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.contact-prose {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.contact-prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}
.contact-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 640px) { .contact-card { padding: 2rem; } }
.contact-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.contact-card__email {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-primary);
  word-break: break-all;
}
.contact-card__email:hover { text-decoration: underline; }
.contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.contact-card__note {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─────────────────────────────── Blog / journal ─────────────────────────────── */

.blog-grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-grid .article-card__art { height: 12rem; }

.article-hero { max-width: 880px; margin: 0 auto; padding: 4rem 1rem 2.5rem; text-align: center; }
.article-hero__meta { color: var(--text-muted); font-size: 0.8125rem; }
.article-hero h1 { margin-top: 1rem; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; }
.article-hero__dek { max-width: 44rem; margin: 1.25rem auto 0; color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.7; }
.article-hero__note { display: inline-block; margin-top: 1.25rem; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-size: 0.75rem; background: var(--bg-surface); }
.article-body { max-width: 760px; margin: 0 auto; padding: 1rem 1rem 4rem; color: var(--text-secondary); font-size: 1rem; line-height: 1.8; }
.article-body > * + * { margin-top: 1.4rem; }
.article-body h2 { margin-top: 3rem; font-size: 1.65rem; line-height: 1.25; }
.article-body h3 { margin-top: 2rem; font-size: 1.15rem; }
.article-body ul,
.article-body ol { padding-left: 1.5rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.5rem; }
.article-body strong { color: var(--text-primary); }
.article-body blockquote { margin-left: 0; margin-right: 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--accent-primary); background: var(--bg-surface); color: var(--text-primary); font-size: 1.05rem; }
.article-callout { padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); }
.article-callout h3 { margin-top: 0; }
.article-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.article-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.8125rem; }
.article-table th,
.article-table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-table th { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }
.article-table tr:last-child td { border-bottom: 0; }
.article-table .is-hit { color: var(--success); font-weight: 600; }
.article-table .is-miss { color: var(--text-muted); }
.article-disclosure { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.75rem; line-height: 1.65; }
.article-footer-cta { max-width: 760px; margin: 0 auto 4rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); }
.article-footer-cta p { color: var(--text-secondary); font-size: 0.875rem; }
@media (min-width: 640px) { .article-hero { padding-top: 6rem; } .article-body { padding-left: 1.5rem; padding-right: 1.5rem; } .article-footer-cta { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ─────────────────────────────── Utilities ─────────────────────────────── */

/* Marks a capability we intend to ship but have not shipped. Shared by the
   pricing tier rows and the feature cards so "not yet" reads identically
   wherever it appears. Inline (not absolutely positioned like .tier__badge)
   so it can sit inside a wrapping line of body text. */
.badge-soon {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  /* --text-muted would be 3.45:1 on the card, under the floor for text this
     small; the border already carries the visual separation. */
  color: var(--text-secondary);
  vertical-align: baseline;
}

.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }