/* ─────────────────────────────────────────────────────────────────────────────
 * WattRun SEO-Landing — Shared Style System
 * Mirror of frontend/src/index.css design tokens, adapted for static HTML.
 *
 * Usage: each site's index.html should
 *   <link rel="stylesheet" href="/landing-style.css">
 * The build/deploy copies this file into every site's web root.
 *
 * Light-mode only. Dark-mode would hurt readability on content-heavy SEO pages.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Tokens ─────────────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --brand-orange:     #F97316;
  --brand-orange-text: #C2410C;
  --brand-green-text:  #166534;
  --brand-orange-2:   #EA580C;
  --brand-indigo:     #4F46E5;
  --brand-purple:     #6D3AE5;
  --brand-green:      #16A34A;
  --brand-gradient:   linear-gradient(135deg, var(--brand-orange), var(--brand-indigo));

  /* Surfaces */
  --bg:               #F5EFE4;          /* warm cream — matches app's landing hero */
  --bg-dim:           #ECE4D2;
  --surface:          #FFFFFF;
  --surface-glass:    rgba(255, 252, 246, 0.82);
  --surface-hover:    #F1F5F9;
  --border:           #E2E8F0;
  --border-strong:    rgba(20, 20, 20, 0.10);
  --border-glass:     rgba(20, 20, 20, 0.08);

  /* Ink */
  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-muted:       #64748B;
  --text-hint:        #94A3B8;

  /* Spacing scale (multiples of 4px) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-sm:   6px;
  --radius:     10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:      0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 12px 36px rgba(15, 23, 42, 0.10);
  --shadow-cta:  0 6px 24px rgba(249, 115, 22, 0.28);

  /* Layout */
  --content-width: 1100px;
  --content-narrow: 760px;

  /* Legacy aliases — old SEO landings used these names in inline styles.
   * Keep them resolving so partial migrations don't break visually. */
  --orange:      var(--brand-orange);
  --blue:        var(--brand-indigo);
  --gray:        var(--text-secondary);
  --dark:        var(--text-primary);
  --light:       var(--surface-hover);
  --max:         var(--content-narrow);
}

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

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

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

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }

/* ── Typography ─────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow-brand {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h1.title-xl, .title-xl {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.title-xl .accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h2.title-lg, .title-lg {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h3.title-md, .title-md {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
}

.muted { color: var(--text-muted); }
.hint  { font-size: 13px; color: var(--text-hint); }

/* ── Layout primitives ──────────────────────────────────────────────────────── */

.container        { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--space-6); }
.container-narrow { max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--space-6); }

.section          { padding-block: var(--space-20); }
.section-tight    { padding-block: var(--space-12); }

.section + .section { border-top: 1px solid var(--border); }

.section-head {
  text-align: center;
  margin-bottom: var(--space-12);
}
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head .lead    { margin-top: var(--space-4); max-width: 640px; margin-inline: auto; }

/* ── Nav ────────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 239, 228, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-glass);
}
body.white-nav .nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 14px var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
}
.nav-logo img {
  height: 32px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .nav-logo, .nav-logo img { height: 28px; }
}
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border: none; border-radius: var(--radius);
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s, background 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); opacity: 0.94; }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active {
  background: var(--brand-gradient);
  color: #ffffff;
  box-shadow: var(--shadow-cta);
}
.btn-primary.btn-lg {
  padding: 16px 32px; font-size: 17px;
}

.btn-ghost,
.btn-ghost:link,
.btn-ghost:visited {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface); }

.btn-nav-cta,
.btn-nav-cta:link,
.btn-nav-cta:visited,
.btn-nav-cta:hover,
.btn-nav-cta:active {
  background: var(--brand-gradient);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) var(--space-6) clamp(48px, 6vw, 72px);
  text-align: center;
  overflow: hidden;
  /* subtle radial accent — used when no .hero-photo is set */
  background:
    radial-gradient(ellipse at 70% 100%, rgba(249, 115, 22, 0.10), transparent 55%),
    radial-gradient(ellipse at 20% 30%, rgba(79, 70, 229, 0.08), transparent 50%),
    var(--bg);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--content-narrow); margin-inline: auto;
}

/* Variant with a background photo — image is a subtle texture, cream wash
 * stays dominant so dark body text remains the readable foreground. */
.hero-photo {
  background: var(--bg);
}
.hero-photo .hero-photo-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Lift colors slightly + soften so photo melts into the cream */
  filter: brightness(1.08) saturate(1.05);
  opacity: 0.55;
}
.hero-photo .hero-photo-overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  /* Heavy cream wash — photo stays visible only as edge / accent texture.
   * Bottom blends seamlessly into the next section.                        */
  background:
    linear-gradient(180deg,
      rgba(245, 239, 228, 0.55) 0%,
      rgba(245, 239, 228, 0.65) 35%,
      rgba(245, 239, 228, 0.80) 70%,
      rgba(245, 239, 228, 1.0)  100%),
    radial-gradient(ellipse at 70% 90%, rgba(249, 115, 22, 0.10), transparent 55%);
}

/* Any direct child of .hero-photo (other than the photo + overlay) needs to
 * sit above the overlay so the headline doesn't read washed-out. This makes
 * an explicit .hero-inner wrapper optional — sites with looser markup
 * (rennrad-training, road-bike-training) inherit correct stacking too. */
.hero-photo > *:not(.hero-photo-img):not(.hero-photo-overlay) {
  position: relative;
  z-index: 2;
}
.hero h1 { margin-bottom: var(--space-5); }
.hero .lead { margin-bottom: var(--space-8); max-width: 580px; margin-inline: auto; }
.hero .cta-row { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.hero .cta-note { margin-top: var(--space-3); font-size: 13px; color: var(--text-muted); }

/* Pills row under hero */
.pills {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center;
  margin-top: var(--space-10);
}
.pill {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  padding: 6px 12px;
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Hero badge (above h1) */
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px 14px;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
  animation: landing-pulse-dot 1.8s infinite;
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card-glass {
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* Feature card variant — icon at top */
.feature-card .icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.feature-card .title-md { margin-bottom: var(--space-2); }
.feature-card p         { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

/* ── Grids ──────────────────────────────────────────────────────────────────── */

.grid           { display: grid; gap: var(--space-4); }
.grid-2         { grid-template-columns: repeat(2, 1fr); }
.grid-3         { grid-template-columns: repeat(3, 1fr); }
.grid-auto      { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 700px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ── Steps (numbered list) ──────────────────────────────────────────────────── */

.steps {
  display: grid; gap: var(--space-6);
  max-width: 720px; margin-inline: auto;
}
.step {
  display: flex; gap: var(--space-5);
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-cta);
}
.step-body .title-md { margin-bottom: var(--space-2); }
.step-body p         { color: var(--text-secondary); font-size: 14.5px; }

/* ── FAQ — pure CSS via <details> ───────────────────────────────────────────── */

.faq         { display: grid; gap: var(--space-3); max-width: 760px; margin-inline: auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] { border-color: rgba(249, 115, 22, 0.4); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 20px;
  font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--brand-orange);
  font-size: 22px; line-height: 1; font-weight: 400;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body {
  padding: 0 20px 18px;
  color: var(--text-secondary); font-size: 14px; line-height: 1.65;
}

/* ── Article cards (blog index) ─────────────────────────────────────────────── */

.article-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
}

.article-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.article-card:hover {
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.article-card .eyebrow { margin-bottom: var(--space-3); }
.article-card h3, .article-card .title-md {
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.35;
}
.article-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: var(--space-5);
  flex: 1;
}
.article-card .article-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
}
.article-card .article-meta .read-time {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}

/* Category color modifiers — applies to eyebrow + read-more link */
.cat-orange { color: var(--brand-orange-text); }
.cat-indigo { color: var(--brand-indigo); }
.cat-purple { color: var(--brand-purple); }
.cat-green  { color: var(--brand-green-text); }

.article-card.cat-orange:hover { border-color: rgba(249, 115, 22, 0.4); }
.article-card.cat-indigo:hover { border-color: rgba(79, 70, 229, 0.35); }
.article-card.cat-purple:hover { border-color: rgba(109, 58, 229, 0.35); }
.article-card.cat-green:hover  { border-color: rgba(22, 163, 74, 0.35); }

/* Section eyebrow with underline (used for blog category sections) */
.section-cat-head {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

/* ── Article body (blog detail pages) ───────────────────────────────────────── */

.article-page {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-20);
}

.article-page > h1,
.article-page .article-h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.article-page .article-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.article-page h2 {
  font-size: 24px;
  font-weight: 700;
  margin: var(--space-10) 0 var(--space-4);
  letter-spacing: -0.01em;
}
.article-page h3 {
  font-size: 18px;
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
}
.article-page p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.article-page ul,
.article-page ol {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 var(--space-4) var(--space-6);
}
.article-page li { margin-bottom: var(--space-2); }
.article-page strong { font-weight: 700; color: var(--text-primary); }
.article-page a {
  color: var(--brand-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-page a:hover { color: var(--brand-orange-2); }

.article-page .highlight {
  background: rgba(249, 115, 22, 0.06);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  font-size: 15px;
}
.article-page .highlight p:last-child { margin-bottom: 0; }

.article-page .formula {
  background: #14171E;
  color: #E2E8F0;
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 14px;
  margin: var(--space-6) 0;
  overflow-x: auto;
}

.article-page table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 14px;
}
.article-page th {
  background: var(--text-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
}
.article-page td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.article-page tr:nth-child(even) td {
  background: var(--bg-dim);
}

.article-page .cta-box {
  margin-block: var(--space-12) var(--space-10);
}
.article-page .cta-box h2,
.article-page .cta-box h3 {
  font-size: 22px; margin: 0 0 var(--space-2);
}

.article-page .faq {
  margin: var(--space-12) 0;
  display: grid; gap: var(--space-2);
}
.article-page .faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
}
.article-page .faq-item:first-child { border-top: 1px solid var(--border); }
.article-page .faq-q {
  font-weight: 700; font-size: 16px;
  margin-bottom: var(--space-2);
}
.article-page .faq-a {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.article-page .related {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-12) 0 0;
}
.article-page .related h3 {
  margin: 0 0 var(--space-4);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.related-links {
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.related-links a {
  color: var(--brand-orange-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.related-links a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .article-page { padding: var(--space-8) var(--space-4) var(--space-12); }
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */

.breadcrumb {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.breadcrumb a {
  color: var(--brand-orange-text);
}
.breadcrumb a:hover { text-decoration: underline; }

/* ── CTA box ────────────────────────────────────────────────────────────────── */

.cta-box {
  text-align: center;
  padding: clamp(48px, 7vw, 80px) var(--space-6);
  background:
    radial-gradient(ellipse at 30% 100%, rgba(249, 115, 22, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 0%, rgba(79, 70, 229, 0.15), transparent 55%),
    var(--bg-dim);
  border-radius: var(--radius-xl);
  margin-block: var(--space-12);
}
.cta-box .title-lg { margin-bottom: var(--space-3); }
.cta-box .lead     { margin-bottom: var(--space-6); }

/* ── Calculator components (FTP / Pace / TSS / W-kg / CTL-Simulator) ───────── */

.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  max-width: 720px;
  margin: 0 auto var(--space-12);
  box-shadow: var(--shadow);
}
.calc-card .calc-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: rgba(249, 115, 22, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto var(--space-4);
}
.calc-card .calc-title {
  text-align: center;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.calc-card .calc-sub {
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: var(--space-8);
}

/* Mode toggle (e.g. switch between 20-min vs Ramp test) */
.mode-toggle {
  display: inline-flex;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin: 0 auto var(--space-6);
  gap: 2px;
}
.mode-toggle-wrap { display: flex; justify-content: center; }
.mode-btn {
  background: transparent; border: none;
  padding: 8px 16px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-btn.active,
.mode-btn[aria-selected="true"] {
  background: var(--brand-gradient);
  color: #fff;
}

/* Inputs */
.input-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-6);
}
@media (max-width: 600px) { .input-grid { grid-template-columns: 1fr; } }

.input-row,
.input-group {
  margin-bottom: var(--space-4);
}
.input-group label,
.input-row label {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.input-group input,
.input-row input,
.input-group select,
.input-row select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-hover);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.input-group input:focus,
.input-row input:focus,
.input-group select:focus,
.input-row select:focus {
  border-color: var(--brand-orange);
  background: var(--surface);
}
.hint,
.input-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Highlight-box (interpretation / tip blocks inside tool pages) */
.highlight-box {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: rgba(249, 115, 22, 0.06);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.highlight-box:empty { display: none; }
.highlight-box strong { color: var(--text-primary); }

.calc-btn,
.calc-btn:link,
.calc-btn:visited,
.calc-btn:hover,
.calc-btn:active {
  display: block;
  width: 100%;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius);
  background: var(--brand-gradient);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: opacity 0.15s, transform 0.1s;
  text-decoration: none; text-align: center;
}
.calc-btn:hover { opacity: 0.94; transform: translateY(-1px); }

/* Time-input helper (used in marathon-pace) */
.time-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 6px; align-items: end;
}
.time-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 6px;
  margin-top: 4px;
}
.time-label {
  font-size: 11px; color: var(--text-muted); text-align: center;
}
.time-sep {
  font-size: 18px; font-weight: 700; color: var(--text-muted);
  align-self: center; padding: 0 4px;
}

/* Result cards */
.result-card {
  display: none;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,
    rgba(249, 115, 22, 0.06),
    rgba(79, 70, 229, 0.06));
  border: 1px solid rgba(249, 115, 22, 0.18);
  text-align: center;
}
.result-card.show,
.result-card.visible {
  display: block;
}
.result-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.result-main {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.result-value {
  font-size: 24px; font-weight: 700;
  color: var(--text-primary);
}
.result-wkg {
  font-size: 14px; color: var(--text-secondary);
  margin-top: var(--space-2);
}
.result-item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  color: var(--text-primary);
  -webkit-text-fill-color: currentColor;
}
.result-item .result-label { margin-bottom: 2px; color: var(--text-muted); -webkit-text-fill-color: currentColor; }
.result-item .result-value { font-size: 18px; color: var(--text-primary); -webkit-text-fill-color: currentColor; }

.interpretation {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-hover);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: left;
}
.interpretation strong { color: var(--text-primary); }

/* Tables (FTP zones, splits, pace) */
.zones-table,
.pace-table,
.splits-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.zones-table th,
.pace-table th,
.splits-table th {
  background: var(--text-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.zones-table td,
.pace-table td,
.splits-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.zones-table tr:nth-child(even) td,
.pace-table tr:nth-child(even) td,
.splits-table tr:nth-child(even) td {
  background: var(--bg-dim);
}
.pace-table-section,
.splits-title {
  margin-top: var(--space-8);
}
.splits-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.zone-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 8px;
  margin-right: 10px;
  border-radius: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  vertical-align: middle;
}

/* "Other tools" sister-link section + tool cards */
.other-tools {
  margin: var(--space-12) 0 var(--space-8);
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
/* Container for tool-detail pages — sits between nav and tool-card */
.tool-container {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-12);
}
.tool-container > h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.tool-container > p:first-of-type,
.tool-container .tool-sub {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}
@media (max-width: 600px) {
  .tool-container { padding: var(--space-6) var(--space-4) var(--space-10); }
}

/* Tool-CARD — block container, used both as clickable nav card (tool-index)
 * AND as static form wrapper (tool-detail). Hover only applies to anchors. */
.tool-card {
  display: block;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
a.tool-card:hover {
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.tool-card .tool-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--brand-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: var(--space-4);
}
.tool-card h2,
.tool-card .tool-name {
  font-size: 18px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}
.tool-card p,
.tool-card .tool-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

/* Tool-LINK = horizontal layout (sidebar inside a calculator page) */
.tool-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.tool-link:hover {
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateY(-1px);
}
.tool-link .tool-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--brand-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.tool-link .tool-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
}
.tool-link .tool-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.related {
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.related h3 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.related h3 + h3 { margin-top: var(--space-6); }

/* Direct-child anchor variant (used on tool detail pages) — block items
 * with arrow prefix and hover treatment. The trailing arrow text in the
 * anchor content is preserved for SEO/AT — we just space + style it. */
.related > a {
  display: block;
  padding: 10px var(--space-3);
  margin: 0 calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.related > a:hover {
  background: var(--bg-dim);
  color: var(--brand-orange);
  transform: translateX(2px);
}

/* Calculator-specific FAQ (separate from .faq used elsewhere) */
.faq-section {
  max-width: 720px;
  margin: var(--space-12) auto;
}
.faq-body {
  color: var(--text-secondary);
  font-size: 14px; line-height: 1.65;
  padding: 0 20px 18px;
}
.faq-plus {
  color: var(--brand-orange);
  font-size: 22px; line-height: 1;
}

/* Generic .badge used as small inline tag */
.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(249, 115, 22, 0.10);
  color: var(--brand-orange);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Tool page typography helpers ──────────────────────────────────────────── */

.subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-8);
  line-height: 1.6;
}

/* ── W/kg Rechner ───────────────────────────────────────────────────────────── */

.result-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.categories-table,
.climb-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.categories-table th,
.climb-table th {
  background: var(--text-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.categories-table td,
.climb-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.categories-table tr:nth-child(even) td,
.climb-table tr:nth-child(even) td {
  background: var(--bg-dim);
}

.category-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}
.category-badge[data-tier="elite"]   { background: rgba(124, 58, 237, 0.12); color: #6D3AE5; }
.category-badge[data-tier="cat1"]    { background: rgba(220, 38, 38, 0.12);  color: #DC2626; }
.category-badge[data-tier="cat2"]    { background: rgba(217, 119, 6, 0.12);  color: #D97706; }
.category-badge[data-tier="cat3"]    { background: rgba(37, 99, 235, 0.12);  color: #2563EB; }
.category-badge[data-tier="cat4"]    { background: rgba(22, 163, 74, 0.12);  color: #16A34A; }
.category-badge[data-tier="rookie"]  { background: rgba(100, 116, 139, 0.12); color: #64748B; }

/* Progress bar (W/kg + CTL build progress) */
.progress-section { margin: var(--space-6) 0; }
.progress-label {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.progress-label strong { color: var(--text-primary); }
.progress-bar {
  height: 12px;
  background: var(--bg-dim);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--brand-gradient);
  border-radius: var(--radius-pill);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* What-if section ("Was wäre wenn …") */
.what-if-section {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--bg-dim);
  border-radius: var(--radius);
}
.what-if-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.what-if-row:last-child { border-bottom: none; }
.what-if-gain {
  font-weight: 700;
  color: var(--brand-green);
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* ── TSS Rechner ────────────────────────────────────────────────────────────── */

.method-tabs {
  display: flex;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: var(--space-6);
  gap: 4px;
}
.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab-btn.active,
.tab-btn[aria-selected="true"] {
  background: var(--brand-gradient);
  color: #fff;
}

.panel { display: none; }
.panel.active { display: block; }

.slider-group {
  margin-bottom: var(--space-5);
}
.slider-group label {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.slider-group input[type="range"] {
  width: 100%;
  accent-color: var(--brand-orange);
}

.interpretation-box {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(249, 115, 22, 0.06);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.interpretation-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.interpretation-text {
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
}

.recovery-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  font-size: 13px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.recovery-table th,
.recovery-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.recovery-table th {
  background: var(--text-primary);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recovery-table tr:nth-child(even) td { background: var(--bg-dim); }

/* TSS scale bar — segmented colored bar where each .tss-scale-item is a
 * colored segment (color set inline). .tss-marker is the absolute-positioned
 * indicator that JS moves + labels with the current TSS. */
.tss-bar-section {
  position: relative;
  margin: var(--space-6) 0 var(--space-12);
  padding-top: var(--space-6); /* room for marker label above */
}
.tss-scale {
  position: relative;
  display: flex;
  height: 28px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border);
}
.tss-scale-item {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.tss-marker {
  position: absolute;
  top: -8px;
  left: 0;
  padding: 4px 10px;
  background: var(--text-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.tss-marker::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--text-primary);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ── CTL Simulator ──────────────────────────────────────────────────────────── */

.chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.chart-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'Geist Mono', ui-monospace, monospace;
}

.sim-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 13px;
}
.sim-table th {
  background: var(--text-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sim-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.sim-table tr:nth-child(even) td { background: var(--bg-dim); }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.summary-item {
  text-align: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.summary-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.summary-value {
  font-size: 22px; font-weight: 800;
  color: var(--text-primary);
}

.week-rows {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: var(--space-4) 0;
}
.week-rows > div,
.week-rows .week-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
}
.week-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
}
.week-tss {
  font-weight: 700;
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--text-primary);
  text-align: right;
  font-size: 13px;
}

/* ── Trademark notice (TrainingPeaks marks) ────────────────────────────────── */
.trademark-notice {
  font-size: 11px;
  color: var(--text-secondary);
  margin: var(--space-3) auto 0;
  line-height: 1.6;
  max-width: 720px;
  text-align: center;
  padding: 0 var(--space-4);
}

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

.footer {
  padding: var(--space-10) var(--space-6);
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
  text-align: center;
}
.footer a { color: var(--text-secondary); }
.footer a:hover { color: var(--text-primary); }
.footer-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.footer-links span { color: var(--text-secondary); }

/* ── Animations (with prefers-reduced-motion guard) ─────────────────────────── */

@keyframes landing-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

@keyframes landing-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up-1 { animation: landing-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
.fade-up-2 { animation: landing-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both; }
.fade-up-3 { animation: landing-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; }
.fade-up-4 { animation: landing-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up-1, .fade-up-2, .fade-up-3, .fade-up-4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Compatibility layer — legacy class names from old SEO landings ─────────── */
/* Lets the existing markup of rennrad-training, road-bike-training, ai-run-coach,
 * laufplan-pro, halbmarathon-trainingsplan etc. inherit the new design without
 * having to rename every class in every body. Keep this section additive and
 * conservative — these aliases must not redefine any new-system classes. */

.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-8);
}

.hero-cta,
.hero-cta:link,
.hero-cta:visited,
.hero-cta:hover,
.hero-cta:active,
.cta-btn,
.cta-btn:link,
.cta-btn:visited,
.cta-btn:hover,
.cta-btn:active {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 16px 32px;
  border: none; border-radius: var(--radius);
  font-family: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  background: var(--brand-gradient);
  color: #ffffff;
  box-shadow: var(--shadow-cta);
  transition: transform 0.1s, opacity 0.15s;
  white-space: nowrap;
}
.hero-cta:hover, .cta-btn:hover { transform: translateY(-1px); opacity: 0.94; }

.hero-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-3);
  text-align: center;
}

.section-title {
  text-align: center;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-10);
  color: var(--text-primary);
}

/* Generic section padding for legacy markup */
.features,
.keywords {
  padding: var(--space-20) var(--space-6);
  max-width: var(--content-width);
  margin: 0 auto;
}

.features-grid,
.keywords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Legacy keyword-item: card with left orange accent */
.keyword-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.keyword-item h3 {
  font-size: 14px; font-weight: 700;
  margin: 0 0 var(--space-1);
  color: var(--text-primary);
}
.keyword-item p {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.55; margin: 0;
}

/* Legacy CTA-section (full-width gradient block) */
.cta-section {
  padding: clamp(48px, 7vw, 80px) var(--space-6);
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(249, 115, 22, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 0%, rgba(79, 70, 229, 0.15), transparent 55%),
    var(--bg-dim);
}
.cta-section h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
.cta-section p {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* Legacy metrics row */
.metrics {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.metric-pill {
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

/* Legacy "how it works" dark section */
.how {
  padding: var(--space-20) var(--space-6);
  background: linear-gradient(180deg, #0B0D12 0%, #14171E 100%);
  color: #F5EFE4;
  text-align: center;
}
.how .section-title { color: #F5EFE4; }
.how .step,
.how .step-body { color: #F5EFE4; }
.how .step-body p,
.how .step p { color: rgba(245, 239, 228, 0.7); }
.how .step-number,
.how .step-num {
  width: 48px; height: 48px;
  background: var(--brand-gradient);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px;
  margin: 0 auto var(--space-4);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.how .step h3 { font-size: 16px; font-weight: 700; margin-bottom: var(--space-2); }

/* Legacy step-number alias */
.step-number {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-cta);
}

/* Legacy hero-logo (large logo above h1 — no longer needed, hide it) */
.hero-logo { display: none; }

/* Generic <main> reset — old pages didn't constrain main */
main > section { /* no implicit constraint */ }

/* ── Small-screen tweaks ────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .nav-links a:not(.btn-nav-cta) { display: none; }
  .hero { padding-top: 56px; padding-bottom: 48px; }
  .section { padding-block: var(--space-12); }
}