/* ═══════════════════════════════════════════════════════════════════
   What every page shares: colours, the header bar and the footer, plus
   the purple button and the page title. The look comes from Claude
   Design's "RoMacro Home v2" (option 1b): a cool white page, Roboto for
   text, Super Corn for the wordmark, titles and buttons. Each page adds
   only its own section styles inline.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --page: #f8f8fb;
  --ink: #17151f;
  --nav-ink: #3d3a4c;
  --muted: #55526a;
  --line: #e6e5ee;
  --purple: #7a35b0;
  --purple-down: #5e2a8c;
  --blue: #1a6fb0;
  --blue-down: #155a90;
  --red: #c94b4b;
  --red-down: #a83b3b;
  --display: 'Super Corn', 'Roboto', system-ui, sans-serif;
  --body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* A column, so a short page still puts its footer at the bottom of the window. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--purple); }
img { display: block; }

/* ── Header ─────────────────────────────────────────────────────────────
   In the design's 1280 px frame the bar has 180 px of side padding, so its
   content is 920 px wide; wider screens keep that width, centred. */
.top {
  height: 84px;
  padding: 0 max(24px, calc((100% - 920px) / 2));
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-family: var(--display); font-size: 26px; }
.brand:hover { color: var(--ink); }
.brand img { width: 40px; height: 40px; object-fit: contain; }
/* margin-bottom: -1px lets the red Download block run over the bar's 1px bottom border, so no sliver of white shows under it. */
.top nav { margin-bottom: -1px; display: flex; align-items: stretch; gap: 40px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.top nav a { display: flex; align-items: center; color: var(--nav-ink); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--purple); }
.top nav .nav-dl {
  justify-content: center;
  padding: 0 56px;
  margin-left: 16px;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.06em;
}
.top nav .nav-dl:hover { background: var(--red-down); color: #fff; }

/* ── Purple button (the band's "See Creator plan") ─────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--purple);
  color: #fff;
  font-family: var(--display);
  font-size: 20px;
  padding: 16px 36px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
}
.btn:hover { background: var(--purple-down); color: #fff; }

/* ── Inner pages: a title, then one centred column ─────────────────── */
.page { width: min(780px, 100% - 48px); margin: 0 auto; padding: 72px 0 0; }
.page-title { font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1; color: var(--ink); }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer { margin-top: 120px; padding: 32px 64px; border-top: 1px solid var(--line); display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 72px; font-size: 14px; }
footer a { color: var(--muted); }

/* ── Phones and small tablets ───────────────────────────────────────── */
@media (max-width: 760px) {
  .top { height: 64px; padding: 0 0 0 16px; }
  .brand { font-size: 22px; gap: 10px; }
  .brand img { width: 34px; height: 34px; }
  .top nav { gap: 20px; font-size: 13px; letter-spacing: 0.06em; }
  .top nav .nav-dl { padding: 0 20px; margin-left: 0; font-size: 19px; }
  .page { width: calc(100% - 32px); padding-top: 44px; }
  .page-title { font-size: 40px; }
  footer { margin-top: 96px; padding: 24px 16px; gap: 12px 32px; }
}
/* The narrowest phones drop the header wordmark; the logo still says it. */
@media (max-width: 430px) {
  .brand span { display: none; }
}

/* ── Reveal on scroll (reveal.js) ───────────────────────────────────────
   Marked elements slide in a little from their side and sharpen from a soft
   blur the first time they come into view; --d staggers neighbours. Only
   active once the page's head script has added "rv" to <html>. */
.rv .reveal {
  opacity: 0;
  filter: blur(2px);
  transform: translate(var(--rx, 0), var(--ry, 0));
  transition:
    opacity .45s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
    transform .45s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
    filter .3s ease-out var(--d, 0s);
}
.rv .reveal[data-from="left"] { --rx: -48px; }
.rv .reveal[data-from="right"] { --rx: 48px; }
.rv .reveal[data-from="up"] { --ry: 36px; }
.rv .reveal.in { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}