/* Ryvelo — getryvelo.com
   Dark by default, because the app is. No framework: the whole site is one
   HTML file and this, so it deploys to any static host with a drag. */

:root {
  --ink: #0d0d0d;
  --surface: #16130f;
  --surface-2: #1e1a15;
  --hairline: #2a251f;
  --bone: #ece6da;
  --bone-muted: #9a9186;
  --accent: #d59954;
  --accent-deep: #b07a3c;
  --serif: 'Cinzel', 'Times New Roman', serif;
  --voice: 'Cormorant Garamond', Georgia, serif;
  --ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` is not optional next to `max-width`. Every <img> here carries
   width/height attributes so the browser can reserve space before the bytes
   land; without this the attribute height is treated as the real height while
   the width is capped, and every image renders stretched. It made the hero
   1342px tall with 470px of nothing under the phone. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ── chrome ─────────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.mark { font-family: var(--serif); font-weight: 600; letter-spacing: 0.22em; font-size: 1.05rem; text-decoration: none; color: var(--bone); }
nav { display: flex; align-items: center; gap: 1.75rem; }
nav a { color: var(--bone-muted); text-decoration: none; font-size: 0.95rem; }
nav a:hover { color: var(--bone); }
@media (max-width: 720px) { nav a:not(.btn) { display: none; } }

.btn {
  display: inline-block;
  background: var(--accent-deep);
  color: #1c1a18;
  font-weight: 600;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--accent); }
.btn.ghost { background: transparent; color: var(--bone); border: 1px solid var(--hairline); }
.btn.ghost:hover { border-color: var(--accent-deep); background: transparent; }

/* ── hero ───────────────────────────────────────────────────── */
.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 0; position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; inset: -30% -20% auto -20%; height: 90%;
  background: radial-gradient(ellipse at 50% 0%, rgba(176, 122, 60, 0.18), transparent 62%);
  pointer-events: none;
}
.hero-grid { display: grid; gap: 3rem; align-items: center; position: relative; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  /* Rather than a hard <br>, which was breaking "Keep your word" across two
     lines and stranding "word" on its own. Balance keeps the lines even at
     every width instead of only at the one it was tuned for. */
  text-wrap: balance;
}
h1 .hl { color: var(--accent); }
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--bone-muted); margin: 0 0 2rem; max-width: 34ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.fine { color: var(--bone-muted); font-size: 0.9rem; margin-top: 1rem; }

.phone {
  border: 8px solid #241f1a;
  border-radius: 2.6rem;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75);
  max-width: 340px;
  margin-inline: auto;
}

/* ── sections ───────────────────────────────────────────────── */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.rule { height: 1px; background: var(--hairline); }

.kicker {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.9rem;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
  margin: 0 0 1rem;
}
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; margin: 0 0 0.5rem; }
.sub { color: var(--bone-muted); max-width: 58ch; margin: 0 0 2.5rem; }

/* the problem — a quiet, italic aside in the app's editorial voice */
.aside { text-align: center; }
.aside p {
  font-family: var(--voice);
  font-style: italic;
  font-size: clamp(1.45rem, 3.4vw, 2.1rem);
  line-height: 1.42;
  color: var(--bone);
  max-width: 22ch;
  margin: 0 auto;
}
.aside .after { font-family: var(--ui); font-style: normal; font-size: 1.05rem; color: var(--bone-muted); max-width: 46ch; margin: 1.75rem auto 0; }

.steps { display: grid; gap: 2rem; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.step { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.step::before {
  counter-increment: step;
  content: counter(step, upper-roman);
  font-family: var(--serif);
  color: var(--accent-deep);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.6rem;
}
.step p { color: var(--bone-muted); margin: 0; }

.features { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .features { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  padding: 1.75rem;
}
.card p { color: var(--bone-muted); margin: 0; }
.card.wide { grid-column: 1 / -1; }
.card.wide .inner { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 760px) { .card.wide .inner { grid-template-columns: 1fr 260px; } }
.card.wide img { border-radius: 0.75rem; border: 1px solid var(--hairline); }

/* screenshot strip */
.strip { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.strip figure { margin: 0; flex: 0 0 236px; scroll-snap-align: start; }
.strip img { border-radius: 1.1rem; border: 1px solid var(--hairline); }
.strip figcaption {
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-muted);
  margin-top: 0.85rem;
  text-align: center;
}

/* honesty block */
.not { background: var(--surface); border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.75rem, 4vw, 2.75rem); }
.not ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .not ul { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2.5rem; } }
.not li { padding-left: 1.6rem; position: relative; color: var(--bone-muted); }
.not li::before { content: '\2014'; position: absolute; left: 0; color: var(--accent-deep); }
.not b { color: var(--bone); font-weight: 600; }

/* pricing */
.price { text-align: center; }
.tiers { display: grid; gap: 1.25rem; max-width: 720px; margin: 2.5rem auto 0; }
@media (min-width: 640px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
.tier { background: var(--surface); border: 1px solid var(--hairline); border-radius: 1rem; padding: 1.75rem; }
.tier.best { border-color: var(--accent-deep); }
.tier .amount { font-family: var(--serif); font-size: 2.4rem; color: var(--accent); line-height: 1; }
.tier .per { color: var(--bone-muted); font-size: 0.95rem; }
.tier .tag { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); }

/* faq */
details {
  border-bottom: 1px solid var(--hairline);
  padding: 1.25rem 0;
}
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--accent-deep); font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: '\2013'; }
details p { color: var(--bone-muted); margin: 0.85rem 0 0; max-width: 68ch; }

/* footer */
footer { padding: 3rem 0 4rem; color: var(--bone-muted); font-size: 0.92rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; }
footer a { color: var(--bone-muted); text-decoration: none; }
footer a:hover { color: var(--bone); }

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}