/* ============================================================
   Runsense standalone pages, shared shell.

   Used by every hand-authored top-level page: /runna-alternative,
   /trainingpeaks-alternative and /suunto. 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 was called comparison.css while both consumers argued against a
   named competitor. /suunto is the third consumer and the first that
   argues with nobody, so the name moved to what the file actually is.
   The table and the pricing cards stay here rather than splitting into
   a fourth file: the shell/comparison boundary runs through the middle
   of components (the hero, the proof figures), and a fuzzy split costs
   more in miscategorised future rules than 25 carried lines cost now.

   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 others.

   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; }