/* ============================================================
   Runsense comparison pages — shared shell.

   Used by every "<competitor> alternative" page (/runna-alternative,
   /trainingpeaks-alternative). These pages are hand-authored HTML with
   hand-authored copy; what they share is the SHELL, not the words:
   header, section rhythm, hero, prose blocks, the comparison table,
   chat-bubble moments, proof figures, pricing cards, FAQ, closing CTA,
   footer.

   It lives here rather than inline in each page because a second inline
   copy is a second source for one component: a token fix or a spacing
   fix would land on one page and silently miss the other.

   Composes design-system tokens only (--rs-*). No raw hex, font or pixel
   colour values — tests/unit/designSystemTokenHygiene.spec.ts reads this
   file and every page that links it.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--rs-bg); color: var(--rs-ink-1); font-family: var(--rs-font-sans); -webkit-font-smoothing: antialiased; line-height: 1.55; }
a { color: inherit; text-decoration: none; }

/* ---------- Header (matches the homepage global nav) ---------- */
.rs-site-header { position: sticky; top: 0; z-index: 50; background: var(--rs-bg); border-bottom: 1px solid var(--rs-ink-5); }
.rs-site-header-inner { max-width: var(--rs-content-wide); margin: 0 auto; padding: 24px 24px 16px; display: flex; align-items: center; justify-content: space-between; }
.rs-site-header a.rs-wordmark { font-size: 16px; line-height: 1; }
.rs-nav { display: flex; gap: 18px; align-items: center; }
.rs-nav a.rs-nav-link { font-size: 14px; color: var(--rs-ink-2); transition: color 140ms; }
.rs-nav a.rs-nav-link:hover { color: var(--rs-ink-1); }
.rs-nav .rs-nav-link { display: none; }
@media (min-width: 640px) { .rs-nav { gap: 24px; } .rs-nav .rs-nav-link { display: inline; } }

/* ---------- Shared layout ---------- */
main { display: block; }
.rs-section { border-top: 1px solid var(--rs-ink-5); }
.rs-section.bg-sunken { background: var(--rs-bg-sunken); }
.rs-section-inner { max-width: var(--rs-content-wide); margin: 0 auto; padding: 52px 24px; }
@media (min-width: 900px) { .rs-section-inner { padding: 72px 40px; } }
.rs-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-secondary-ink); margin: 0 0 14px 0; }

/* Store badges. Apple's Marketing Guidelines forbid modifying or animating
   the badge, so neither carries a hover treatment. */
.rs-badges-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rs-badges-row-center { justify-content: center; }
.rs-appstore-badge, .rs-play-badge { display: inline-flex; line-height: 0; }
.rs-appstore-badge:hover, .rs-play-badge:hover { opacity: 1; }
.rs-cta-note { font-size: 13px; color: var(--rs-ink-2); margin: 14px 0 0; }

/* ---------- Hero ---------- */
/* Bottom padding matches the section rhythm below the rule (52/72), so the
   divider sits evenly between the hero and the next section. It used to be
   8/16, which was fine when the hero was text only; with the phone figure
   in it the image ran almost into the rule. */
.rs-hero { max-width: var(--rs-content-wide); margin: 0 auto; padding: 48px 24px 52px; }
@media (min-width: 900px) { .rs-hero { padding: 72px 40px 72px; } }
.rs-hero h1 { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 20px 0; color: var(--rs-ink-1); text-wrap: balance; max-width: 760px; }
@media (min-width: 900px) { .rs-hero h1 { font-size: 52px; } }
.rs-hero-lede { font-size: 18px; line-height: 1.6; margin: 0 0 32px 0; color: var(--rs-ink-2); max-width: 640px; }
@media (min-width: 900px) { .rs-hero-lede { font-size: 20px; } }
.rs-hero-lede em { font-style: normal; font-weight: 500; color: var(--rs-ink-1); }

.rs-hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .rs-hero-grid { grid-template-columns: 7fr 5fr; gap: 56px; } }
.rs-hero-shot { margin: 0; }
.rs-hero-shot img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; border-radius: var(--rs-radius-lg); border: 1px solid var(--rs-ink-5); box-shadow: var(--rs-shadow-lg); }

/* ---------- Prose blocks ---------- */
.rs-prose-block { max-width: 700px; }
.rs-prose-block h2 { font-size: 27px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 18px 0; color: var(--rs-ink-1); text-wrap: balance; }
@media (min-width: 900px) { .rs-prose-block h2 { font-size: 32px; } }
.rs-prose-block p { font-size: 17px; line-height: 1.7; color: var(--rs-ink-2); margin: 0 0 16px 0; }
.rs-prose-block p:last-child { margin-bottom: 0; }
/* Emphasis by weight and a brighter ink, never by colour: brand green is
   what links use on this page, so a coloured <em> read as a dead link.
   Same treatment as .rs-hero-lede em. */
.rs-prose-block p em { font-style: normal; font-weight: 500; color: var(--rs-ink-1); }
/* A link inside prose needs to LOOK like one. The global reset sets
   `a { color: inherit; text-decoration: none }`, and the only link rules were for
   FAQ answers, the related line and the footer, so the first prose link ever
   written on these pages rendered in body-text colour with no underline: present
   in the markup, invisible to a reader. Same treatment as .rs-faq-answer a. */
.rs-prose-block a { color: var(--rs-primary); text-decoration: underline; }

/* ---------- Comparison table ---------- */
.rs-cmp-head { margin-bottom: 28px; max-width: 640px; }
.rs-cmp-head h2 { font-size: 27px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0; color: var(--rs-ink-1); text-wrap: balance; }
@media (min-width: 900px) { .rs-cmp-head h2 { font-size: 34px; } }
.rs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rs-ink-5); border-radius: var(--rs-radius-lg); background: var(--rs-bg-raised); }
table.rs-cmp { width: 100%; border-collapse: collapse; min-width: 580px; font-size: 15px; }
table.rs-cmp th, table.rs-cmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--rs-ink-5); vertical-align: top; line-height: 1.5; }
table.rs-cmp tr:last-child th, table.rs-cmp tr:last-child td { border-bottom: none; }
table.rs-cmp thead th { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rs-ink-2); font-weight: 500; background: var(--rs-bg-sunken); }
table.rs-cmp tbody th { font-weight: 500; color: var(--rs-ink-1); width: 26%; }
table.rs-cmp td { color: var(--rs-ink-3); width: 37%; }
/* The Runsense column is the argument, so it carries the weight: a tinted
   column with a brand edge, brighter ink and heavier type, against a
   deliberately quieter competitor column. */
table.rs-cmp .rs-col-rs {
  background: var(--rs-primary-tint);
  color: var(--rs-ink-1);
  font-weight: 500;
  border-left: 2px solid var(--rs-primary);
  border-right: 2px solid var(--rs-primary);
}
table.rs-cmp tbody tr:last-child .rs-col-rs { border-bottom: 2px solid var(--rs-primary); }
table.rs-cmp .rs-col-rs em { font-style: normal; font-weight: 700; letter-spacing: 0.01em; }
table.rs-cmp thead .rs-col-rs {
  background: var(--rs-primary);
  color: var(--rs-on-primary);
  font-weight: 700;
  border-top: 2px solid var(--rs-primary);
  letter-spacing: 0.06em;
}
.rs-table-note { font-size: 13px; color: var(--rs-ink-2); margin: 14px 0 0; }

/* ---------- Moments: a real exchange per ordinary week ---------- */
.rs-moment { display: grid; gap: 24px; padding: 40px 0; border-top: 1px solid var(--rs-ink-5); }
/* The first moment follows the intro prose, so it needs no divider and its
   own breathing room. Selecting it by adjacency, not :first-of-type, which
   matches by element type and so never matched a .rs-moment at all. */
.rs-prose-block + .rs-moment { border-top: none; padding-top: 36px; }
@media (min-width: 900px) { .rs-moment { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; padding: 52px 0; } }
.rs-moment-when { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--rs-ink-1); margin: 0 0 10px; text-wrap: balance; }
@media (min-width: 900px) { .rs-moment-when { font-size: 24px; } }
.rs-moment-note { font-size: 15px; line-height: 1.6; color: var(--rs-ink-3); margin: 0; }
/* Bubbles match the app: coach left on a raised surface, you right in brand green. */
.rs-chat { display: flex; flex-direction: column; gap: 10px; }
.rs-msg { max-width: 88%; padding: 13px 16px; border-radius: var(--rs-radius-lg); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.rs-msg-coach { background: var(--rs-bg-raised); color: var(--rs-ink-1); border: 1px solid var(--rs-ink-5); align-self: flex-start; border-bottom-left-radius: 6px; }
.rs-msg-you { background: var(--rs-primary); color: var(--rs-on-primary); align-self: flex-end; border-bottom-right-radius: 6px; font-weight: 500; }
.rs-chat-note { font-size: 13px; color: var(--rs-ink-3); margin: 12px 0 0; }

/* ---------- Proof figures (real app screenshots) ---------- */
.rs-proof { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .rs-proof { grid-template-columns: 1fr 1fr; gap: 56px; } .rs-proof.rs-proof-flip .rs-proof-shot { order: 2; } }
.rs-proof-shot { margin: 0; }
.rs-proof-shot img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; border-radius: var(--rs-radius-lg); border: 1px solid var(--rs-ink-5); box-shadow: var(--rs-shadow-lg); }
.rs-proof-shot figcaption { font-size: 13px; color: var(--rs-ink-3); text-align: center; margin-top: 12px; }

/* ---------- Pricing cards ---------- */
.rs-pricing-head { text-align: center; margin-bottom: 40px; }
.rs-pricing-head h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 12px 0; color: var(--rs-ink-1); }
@media (min-width: 760px) { .rs-pricing-head h2 { font-size: 40px; } }
.rs-pricing-head p { font-size: 16px; color: var(--rs-ink-2); margin: 0; }
.rs-pricing-cards { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 640px; margin: 0 auto 28px; }
@media (min-width: 600px) { .rs-pricing-cards { grid-template-columns: 1fr 1fr; } }
.rs-price-card { position: relative; background: var(--rs-bg-raised); border: 1px solid var(--rs-ink-5); border-radius: 10px; padding: 22px 22px 20px; }
.rs-price-card.accent { border: 2px solid var(--rs-primary); }
.rs-price-badge { position: absolute; top: -11px; left: 18px; background: var(--rs-primary); color: var(--rs-on-primary); font-size: 11px; font-weight: 500; padding: 3px 11px; border-radius: 9999px; letter-spacing: 0.02em; }
.rs-price-tier { font-size: 12px; font-weight: 500; color: var(--rs-ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.rs-price-amount { font-size: 32px; font-weight: 600; color: var(--rs-ink-1); letter-spacing: -0.01em; margin-bottom: 2px; }
.rs-price-amount span { font-size: 15px; font-weight: 400; color: var(--rs-ink-3); }
.rs-price-sub { font-size: 13px; color: var(--rs-ink-3); margin-bottom: 18px; }
.rs-pricing-note { max-width: 640px; margin: 0 auto; text-align: center; font-size: 14px; line-height: 1.6; color: var(--rs-ink-3); }

/* ---------- FAQ ---------- */
.rs-faq-head { margin-bottom: 26px; }
.rs-faq-head h2 { font-size: 27px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0; color: var(--rs-ink-1); }
@media (min-width: 900px) { .rs-faq-head h2 { font-size: 34px; } }
.rs-faq-list { max-width: 760px; }
.rs-faq-item { border-top: 1px solid var(--rs-ink-5); }
.rs-faq-item:last-child { border-bottom: 1px solid var(--rs-ink-5); }
.rs-faq-item > summary { list-style: none; cursor: pointer; position: relative; padding: 20px 40px 20px 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--rs-ink-1); }
.rs-faq-item > summary::-webkit-details-marker { display: none; }
.rs-faq-item > summary::after { content: ""; position: absolute; right: 6px; top: 25px; width: 9px; height: 9px; border-right: 2px solid var(--rs-ink-3); border-bottom: 2px solid var(--rs-ink-3); transform: rotate(45deg); transition: transform 200ms var(--rs-ease); }
.rs-faq-item[open] > summary::after { transform: rotate(-135deg); }
.rs-faq-item > summary:hover { color: var(--rs-primary); }
.rs-faq-answer { font-size: 16px; line-height: 1.7; color: var(--rs-ink-2); margin: 0 0 20px; max-width: 700px; }
.rs-faq-answer a { color: var(--rs-primary); text-decoration: underline; }

/* ---------- Final CTA ---------- */
/* Closing CTA: the same component as the homepage's, verbatim. */
.rs-closing { max-width: 640px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) 24px; text-align: center; }
.rs-closing h2 { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.018em; font-weight: 600; color: var(--rs-ink-1); }
.rs-closing p { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--rs-ink-2); }
.rs-badges-center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ---------- Related + footnote ---------- */
.rs-related { font-size: 15px; color: var(--rs-ink-2); }
.rs-related a { color: var(--rs-primary); text-decoration: none; }
.rs-related a:hover { text-decoration: underline; }
.rs-footnote { font-size: 13px; line-height: 1.6; color: var(--rs-ink-2); max-width: 760px; margin: 18px 0 0; }

/* ---------- Footer ---------- */
  .rs-site-footer { border-top: var(--rs-border); }
  .rs-site-footer-inner { max-width: var(--rs-content-wide); margin: 0 auto; padding: var(--rs-space-10) var(--rs-space-6); font-size: var(--rs-size-sm); color: var(--rs-ink-3); }
  .rs-site-footer a { color: var(--rs-primary); text-decoration: none; }
  .rs-site-footer a:hover { text-decoration: underline; }
  /* Typography comes from .rs-wordmark / .rs-meta; these set placement only. */
  .rs-site-footer-wordmark { font-size: var(--rs-size-sm); margin: 0 0 var(--rs-space-4); }
  .rs-site-footer-tagline { margin: 0 0 var(--rs-space-6); max-width: var(--rs-measure-prose); line-height: var(--rs-lh-relaxed); }
  .rs-site-footer-links { display: flex; flex-wrap: wrap; align-items: center; }
  .rs-site-footer-sep { margin: 0 var(--rs-space-3); color: var(--rs-ink-4); }
  .rs-site-footer-copy { margin: var(--rs-space-6) 0 0; }