/*
  Rytme — rytme.run

  The app's design system, ported: teal → purple gradient, soft rounded cards,
  rounded bold type. Light palette on :root, dark values swapped under
  prefers-color-scheme so the site follows the phone that opens it.
*/

:root {
  --teal: #16B8A3;
  --teal-light: #52D6C2;
  --purple: #7C4DEE;

  --ink: #163A3A;
  --ink-soft: #4d6b6b;
  --bg: #F4F3FB;
  --card: #FFFFFF;
  --card-edge: rgba(22, 58, 58, 0.08);
  --shadow: 0 10px 30px rgba(22, 58, 58, 0.10);

  --radius-card: 26px;
  --radius-pill: 999px;
  --gap: 20px;
  --measure: 68ch;

  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --purple: #9E7BF5;
    --ink: #EAF2F0;
    --ink-soft: #9db3ae;
    --bg: #0B0F0E;
    --card: #1B211F;
    --card-edge: rgba(255, 255, 255, 0.08);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--purple); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--teal); }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.4em; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  padding: 12px 18px;
  border-radius: 0 0 14px 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

.muted { color: var(--ink-soft); }

.grad {
  background: linear-gradient(100deg, var(--teal), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 32px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.wordmark img { border-radius: 10px; }

.site-header nav {
  display: flex;
  gap: clamp(14px, 3vw, 26px);
  font-weight: 600;
}
.site-header nav a { color: var(--ink-soft); text-decoration: none; }
.site-header nav a:hover { color: var(--teal); }

/* ------------------------------------------------------------------ hero */

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 7vw, 72px) clamp(16px, 4vw, 32px) clamp(20px, 5vw, 48px);
  text-align: center;
}

.kicker {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}

.hero h1 {
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  font-weight: 800;
}

.lede {
  max-width: 60ch;
  margin: 0 auto;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--ink-soft);
}
.lede em { color: var(--ink); font-style: normal; font-weight: 700; }

.cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 30px 0 0;
}

.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(100deg, var(--teal), var(--purple));
  box-shadow: var(--shadow);
}
.btn-primary:hover { color: #fff; filter: brightness(1.06); }
.btn-secondary {
  color: var(--ink);
  /* An inset ring rather than a border, so this sits in exactly the same box as
     .btn-primary when the two stack — a real border would add 4px of height and
     leave the pair looking mismatched. */
  box-shadow: inset 0 0 0 2px var(--card-edge);
}
.btn-secondary:hover { color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.btn-note { font-size: 0.9rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ tour */

.tour { padding: clamp(24px, 5vw, 56px) 0 clamp(8px, 2vw, 16px); }

.tour-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  text-align: center;
}
.tour-head h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 800; }
.tour-head p { margin: 0; color: var(--ink-soft); }

.rail-wrap { position: relative; }

/*
  The carousel itself. Native horizontal scroll + mandatory snap points: a swipe
  glides and settles on a card the way the OS does it, with no slide animation of
  ours to fight the gesture. The scrollbar is hidden, not disabled — keyboard and
  trackpad scrolling still work.
*/
.rail {
  display: flex;
  gap: var(--gap);
  margin: 26px 0 0;
  padding-block: 4px 24px;
  list-style: none;

  /* Side padding equal to half the viewport minus half a card, so the FIRST and
     LAST card can sit dead centre like every card between them. Both terms of the
     max() are that same "half the leftover", one for each branch of the card's own
     min(340px, 82vw) width. */
  --rail-inset: max(50vw - 170px, 9vw);
  padding-inline: var(--rail-inset);
  scroll-padding-inline: var(--rail-inset);

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex: 0 0 min(340px, 82vw);
  padding: 26px 24px 30px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.card img {
  display: block;
  width: 148px;
  height: 148px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: #fff;
}

.card .eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}
.card h3 { font-size: 1.3rem; font-weight: 800; }
.card p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* Arrows and dots share one row under the rail, so nothing ever sits on top of a
   card's text. */
.rail-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 16px 8px;
}

.rail-btn {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover { color: var(--teal); }

/* Pointer-driven and wide enough to have room: offer the arrows. On a phone the
   swipe is the control, so they stay out of the way. */
@media (min-width: 800px) and (hover: hover) {
  .rail-btn { display: grid; }
}

.dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.dots button[aria-current="true"] {
  background: linear-gradient(100deg, var(--teal), var(--purple));
  opacity: 1;
  transform: scale(1.5);
}

/* ----------------------------------------------------------------- steps */

.steps {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 32px);
  text-align: center;
}
.steps h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 800; }
.steps ol {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.steps li {
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.steps .num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--teal), var(--purple));
  border-radius: 50%;
}
.steps h3 { font-size: 1.15rem; font-weight: 800; }
.steps p { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------ beta */

/* The section borrows .steps for its grid, cards and numbered discs. These two
   rules are only here to beat `.steps p`, which zeroes the margin on every
   paragraph inside — right for a card, wrong for the intro and the button row. */
.beta .beta-lede {
  max-width: var(--measure);
  margin: 14px auto 0;
}
.beta .cta-row { margin-top: 30px; }

/* --------------------------------------------------------------- support */

.support {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 32px);
  text-align: center;
}
.support h2 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: clamp(24px, 6vw, 56px);
  padding: 34px clamp(16px, 4vw, 32px) 44px;
  text-align: center;
  border-top: 1px solid var(--card-edge);
}
.site-footer .tagline { margin: 0 0 12px; font-weight: 700; }
.site-footer nav {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 12px;
  font-weight: 600;
}
.site-footer p { margin: 0; font-size: 0.9rem; }

/* ------------------------------------------------------------ legal page */

.legal {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 44px) clamp(16px, 4vw, 32px) 20px;
}
.legal h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; }
.legal h2 {
  margin-top: 2em;
  font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  font-weight: 800;
  color: var(--teal);
}
.legal h3 { margin-top: 1.6em; font-size: 1.05rem; font-weight: 800; }
.legal .updated { margin-top: -0.4em; color: var(--ink-soft); font-weight: 600; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 0.5em; }
.legal .callout {
  padding: 20px 24px;
  margin: 26px 0;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-left: 5px solid var(--teal);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 0.95rem;
}
.legal th, .legal td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--card-edge);
}
.legal th { font-weight: 800; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------- a11y prefs */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail { scroll-behavior: auto; }
  .dots button { transition: none; }
}