/* ───────────────────────────────────────────────────────────────
   Near-black ink on white, one pale blue band, and no accent hue:
   colour is spent only where it means something — the gap column.
   Nothing is boxed. Every panel is transparent, separated by space
   and type weight instead of chrome.
   ─────────────────────────────────────────────────────────────── */

:root {
  --paper: #ffffff;
  --ink: #222326;
  --ink-2: rgba(31, 32, 37, 0.6);
  --ink-3: rgba(31, 32, 37, 0.4);
  --rule: rgba(31, 32, 37, 0.1);
  --dark: #1f2025;
  --band: #e9ebe9;
  --band-2: #f2f3f2;
  /* Semantic only, for the gap column — not an accent. */
  --up: #1aa636;
  --down: #dc2626;

  --gutter: clamp(20px, 4.5vw, 64px);
  --measure: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, system-ui, 'Inter', 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ─────────────────────────── Pills ─────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0) scale(0.985); }

.pill-dark { background: var(--dark); color: #fff; }
.pill-dark:hover { background: #2c2d33; }
.pill-light { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill-light:hover { background: var(--ink); color: #fff; }


/* ─────────────────────────── Nav ─────────────────────────── */

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.3s ease;
}
.nav.stuck { background: rgba(255, 255, 255, 0.92); }

.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.brand-mark { width: 22px; height: 22px; flex: none; display: block; }

.nav-links { display: flex; gap: 4px; margin-left: 18px; }
.nav-links a { padding: 10px 14px; border-radius: 999px; font-size: 17px; color: var(--ink-2); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }

/* The mark sits between the links and the CTA, and keeps its own left auto on
   phones so it — not the button — is what takes up the slack when the links go. */
.nav-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-x:hover { color: var(--ink); background: rgba(31, 32, 37, 0.06); }
.nav-x svg { display: block; }


@media (max-width: 720px) {
  .nav { left: var(--gutter); right: var(--gutter); transform: none; padding-left: 18px; }
  .nav-links { display: none; }
  .nav-x { margin-left: auto; }
}

/* ─────────────────────────── Hero ─────────────────────────── */

.hero {
  position: relative;
  padding: 168px var(--gutter) 0;
  text-align: center;
  overflow: hidden;
  background: var(--paper);
}



.hero-copy { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.hero h1 { font-size: clamp(46px, 7.4vw, 96px); letter-spacing: -0.03em; line-height: 1; }
/* The second line carries the weight; no accent colour on the page. */
.hero h1 em { font-style: normal; color: var(--ink); }

.hero-sub {
  max-width: 620px;
  margin: 26px auto 0;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.35;
  color: var(--ink-2);
}
.hero-btn { margin-top: 34px; }

/*
  The contract address. People copy it far more often than they read it, so the
  whole row is the button and the label sits in the same pill rather than above
  it. Mono digits keep the string scannable against a forgery.
*/
.ca {
  position: relative;
  z-index: 2;
  /* Block-level so it takes its own line under the button rather than sitting
     beside it on the hero's centred line. */
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 8px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 32, 37, 0.05);
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ca:hover { background: rgba(31, 32, 37, 0.09); color: var(--ink); }
.ca-label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.ca-addr {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.5vw, 13.5px);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-action {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.ca.copied { background: rgba(31, 32, 37, 0.09); color: var(--ink); }

.ca-foot {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.ca-foot:hover { color: var(--ink); }

.rating { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }

.hero-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 20px auto -2px;
  max-width: 760px;
  /*
    Taller than the handsets need, because they are rotated: the corners of a
    rotated box reach past its own height, and a mask is sized to the element's
    box — anything outside it is masked away. Too short a stage and the tops get
    sliced flat. The slack sits above them; `flex-end` keeps them on the floor.
  */
  height: clamp(380px, 56vw, 580px);
  /*
    Masking the stage — shadows included — lets the handsets dissolve into the
    page instead of meeting the section edge on a hard horizontal line.
    `no-repeat` matters: the default would tile the gradient and band them.
  */
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}
.phone {
  position: relative;
  border-radius: 42px;
  background: #0f1013;
  padding: 7px;
  box-shadow: 0 30px 70px rgba(31, 32, 37, 0.2);
  overflow: hidden;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 36px; }
.phone-back { width: clamp(190px, 25vw, 270px); height: clamp(300px, 44vw, 460px); transform: rotate(-7deg) translate(34px, -14px); }
.phone-front { width: clamp(210px, 27vw, 296px); height: clamp(300px, 46vw, 470px); transform: rotate(4deg) translate(-24px, 6px); z-index: 2; }

/* ────────────────────────── Ticker strip ──────────────────── */

.strip { padding: 56px 0 8px; background: var(--paper); }
.strip-label { text-align: center; font-size: 15px; color: var(--ink-3); margin-bottom: 24px; }
.strip-rail {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: marquee 42s linear infinite; }
.strip-track img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.strip-track span { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 500; color: var(--ink-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────────────────────── Sections ──────────────────────── */

.section { max-width: var(--measure); margin: 0 auto; padding: clamp(76px, 9vw, 132px) var(--gutter); }
.center-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.center-head h2, .split h2, .get h2 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.03em; }
.section-sub { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: var(--ink-2); }

.fine { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.fine.center { max-width: 620px; margin: 30px auto 0; text-align: center; }

.band-soft { max-width: none; background: var(--band-2); }
.band-soft > * { max-width: var(--measure); margin-inline: auto; }

.status {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(31, 32, 37, 0.06);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* ────────────────────────── Table ────────────────────────── */

.table { border-top: 1px solid var(--ink); }
.thead, .row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 0.9fr 0.9fr;
  gap: 16px;
  align-items: center;
}
.thead { padding: 14px 0; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.tick { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tick img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.tick .sym { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tick .co { font-size: 15px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.num { text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.num.muted { color: var(--ink-3); }
.gap-pos { color: var(--up); font-weight: 500; }
.gap-neg { color: var(--down); font-weight: 500; }

.skeleton {
  height: 12px; border-radius: 4px; margin-left: auto; width: 68%;
  background: linear-gradient(90deg, rgba(31,32,37,0.06) 25%, rgba(31,32,37,0.03) 50%, rgba(31,32,37,0.06) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ───────────── Product trio — no plate, just the phone ────── */

.cards { display: grid; gap: 40px 28px; grid-template-columns: repeat(3, 1fr); }

.card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.card h3 { font-size: clamp(24px, 2.2vw, 30px); }
.card p { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }

.card-shot { margin-top: 26px; display: flex; justify-content: center; }
.card-shot img {
  width: 74%;
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(31, 32, 37, 0.14);
  display: block;
}

/* ─────── Feature grid — transparent, three across, ruled ──── */

.grid { display: grid; gap: 44px 40px; grid-template-columns: repeat(3, 1fr); }
.cell { background: transparent; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.cell h4 { font-size: 20px; letter-spacing: -0.02em; }
.cell p { margin-top: 10px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }

/* ───────────────────────── Split section ─────────────────── */

.split { display: grid; gap: clamp(36px, 6vw, 80px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.ticks { margin-top: 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; color: var(--ink-2); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

/* Also transparent: a ruled list, not four filled tiles. */
.facts { display: grid; gap: 0; margin: 0; background: transparent; border-radius: 0; }
.facts > div { background: transparent; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts > div:first-child { border-top: 1px solid var(--rule); }
.facts dt { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 7px 0 0; font-size: 17px; }

/* ─────────────────────────── Get ─────────────────────────── */

.get { text-align: center; padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--band); }
.get .section-sub { max-width: 560px; margin-inline: auto; }
.get-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }

/* ────────────────────────── Footer ───────────────────────── */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
  border-top: 1px solid var(--rule);
}
.footer .fine { max-width: 62ch; }

.x-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.x-link:hover { color: var(--ink); }

/* ───────────────────────── Reveals ───────────────────────── */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .row { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ───────────────────────── Responsive ────────────────────── */

@media (max-width: 900px) {
  .thead, .row { grid-template-columns: minmax(0, 2fr) 1fr 1fr; }
  .tablet-hide { display: none; }
  .cards, .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .thead, .row { grid-template-columns: minmax(0, 1.7fr) 1fr 0.9fr; }
  .phone-hide { display: none; }
  .tick .co { display: none; }
  .cards, .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 132px; }
}

/* ═══════════════════ Swaply additions ═══════════════════════ */

/* ─── Coin marks ───
   Five assets ship as real SVG marks; the rest resolve to a lettered disc,
   so both have to line up on the same 34px baseline in every context. */
.coin { width: 34px; height: 34px; flex: none; border-radius: 50%; display: block; }
.mono {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
}
.tick .coin { width: 38px; height: 38px; }
.tick .mono { font-size: 16px; }

/* ─── Hero route pill ───
   Sits in the slot the contract pill used to hold, on its own line under the
   button rather than beside it on the hero's centred line. */
.route {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  width: fit-content; max-width: 100%;
  margin: 22px auto 0;
  padding: 9px 18px 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.route-leg { display: flex; align-items: center; gap: 8px; }
.route-leg .coin { width: 26px; height: 26px; }
.route-arrow { color: var(--up); font-weight: 700; }
.route-note {
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--rule);
  font-weight: 400; color: var(--ink-3);
}

/* ─── The four steps Swaply removes ─── */
.steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  max-width: 900px; margin: 0 auto;
  border-top: 2px solid var(--ink);
}
.steps li {
  padding: 24px 28px 26px 0;
  font-size: clamp(18px, 2vw, 25px); font-weight: 600; letter-spacing: -0.02em;
  /* The steps read as a sequence that is about to be crossed out. */
  color: var(--ink-3);
}
.steps-n {
  display: inline-block; width: 100%; margin-bottom: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--ink-3); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.steps-strike {
  max-width: 900px; margin: 34px auto 0;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.35; letter-spacing: -0.02em;
  font-weight: 600; text-align: center;
}

/* ─── Rates table ───
   The receive column carries the longest strings ("1,546.00 USDC"), so it
   takes the width the pool-fee column used to hold. */
.thead, .row { grid-template-columns: minmax(0, 2.1fr) 1.1fr 0.9fr 0.7fr 1.4fr; }
.chain { font-size: 16px; color: var(--ink-2); align-self: center; }
.recv { font-weight: 600; }
.recv-sym { font-weight: 400; color: var(--ink-3); font-size: 15px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 620px) {
  /* 1fr cannot shrink below its content, so the route pill needs minmax. */
  .thead, .row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .route { gap: 9px; padding: 8px 14px 8px 10px; font-size: 15px; }
  .route-note { padding-left: 9px; }
}

/* ───────────────── App Store button + review state ──────────────── */

.appstore { display: inline-flex; align-items: center; gap: 11px; height: 54px; padding: 0 24px; }
.appstore .apple { width: 22px; height: 22px; flex: none; }
.appstore-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.05; text-align: left;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.appstore-copy small { font-size: 11px; font-weight: 400; opacity: 0.72; letter-spacing: 0.02em; }

/* The panel is revealed by `hidden`; nothing here may set display, or the
   attribute stops winning. */
.review {
  width: fit-content; max-width: 460px;
  margin: 20px auto 0;
  padding: 18px 22px 20px;
  border-radius: 22px;
  text-align: left;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.review.in { opacity: 1; transform: none; }
.review[hidden] { display: none; }

.review-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.review-body { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }

.review-steps {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-3);
}
.review-steps li { display: flex; align-items: center; gap: 8px; }
.review-steps li + li::before {
  content: ''; width: 14px; height: 1px; background: var(--rule);
}
.review-steps .done { color: var(--ink-2); }
.review-steps .now { color: var(--up); font-weight: 600; }

@media (max-width: 620px) {
  .appstore { height: 50px; padding: 0 20px; }
  .review { margin-left: 0; margin-right: 0; }
}

/* ═════════════════════ Scroll motion ═════════════════════ */

/* ─── Headings, a word at a time ─── */
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-copy.in .w, h2.in .w { opacity: 1; transform: none; }

/* The hero's supporting elements follow the headline rather than racing it. */
.hero-copy .hero-sub,
.hero-copy .appstore,
.hero-copy .route {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-copy.in .hero-sub { transition-delay: 0.34s; }
.hero-copy.in .appstore { transition-delay: 0.44s; }
.hero-copy.in .route    { transition-delay: 0.54s; }
.hero-copy.in .hero-sub,
.hero-copy.in .appstore,
.hero-copy.in .route { opacity: 1; transform: none; }

/* ─── The strike draws itself across each step ─── */
.steps-label { position: relative; display: inline-block; }
.steps-label::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 52%;
  height: 2px; background: rgba(31, 32, 37, 0.3);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.steps.in .steps-label::after { transform: scaleX(1); }
.steps.in li:nth-child(1) .steps-label::after { transition-delay: 0.15s; }
.steps.in li:nth-child(2) .steps-label::after { transition-delay: 0.35s; }
.steps.in li:nth-child(3) .steps-label::after { transition-delay: 0.55s; }
.steps.in li:nth-child(4) .steps-label::after { transition-delay: 0.75s; }

/* ─── Table rows arrive with the table, not on page load ─── */
.row {
  animation: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.table.in .row { opacity: 1; transform: none; transition-delay: var(--d, 0s); }

/* ─── Hero phones drift as the page moves ───
   --py is written by the scroll handler; the rotation stays here so JS never
   has to restate it. */
.phone-back  { transform: rotate(-7deg) translate(34px, -14px) translateY(var(--py, 0)); }
.phone-front { transform: rotate(4deg) translate(-24px, 6px) translateY(var(--py, 0)); }

@media (prefers-reduced-motion: reduce) {
  .w, .hero-copy .hero-sub, .hero-copy .appstore, .hero-copy .route,
  .row { opacity: 1; transform: none; transition: none; }
  .steps-label::after { transform: scaleX(1); transition: none; }
  .phone-back  { transform: rotate(-7deg) translate(34px, -14px); }
  .phone-front { transform: rotate(4deg) translate(-24px, 6px); }
}

/* ════════════════════ Prose pages ════════════════════ */

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 172px var(--gutter) clamp(80px, 9vw, 130px);
}
.prose h1 { font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -0.03em; line-height: 1.05; }
.prose-meta { margin-top: 16px; font-size: 16px; color: var(--ink-3); }
.prose-lead {
  margin-top: 32px;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.45;
  letter-spacing: -0.01em; color: var(--ink);
}
.prose h2 {
  margin-top: 52px; padding-top: 26px;
  border-top: 2px solid var(--ink);
  font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em;
}
.prose p { margin-top: 16px; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }
.prose ul { margin-top: 16px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.prose li {
  position: relative; padding-left: 24px;
  font-size: 17.5px; line-height: 1.5; color: var(--ink-2);
}
.prose li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--up);
}
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--up); }

.foot-link { font-size: 16px; color: var(--ink-2); transition: color 0.2s; }
.foot-link:hover { color: var(--ink); }