/* Zecca — banknote colour chapters. Tokens first, everything below uses them. */
:root {
  --paper: #eceeea;
  --paper-2: #dde1db;
  --ink: #14181a;
  --ink-2: #1d2225;

  /* one flat colour per currency, taken from its banknotes; --on is the ink that sits on it */
  --eur: #5d8fe8;  --eur-on: #14181a;
  --inr: #f5b93a;  --inr-on: #14181a;
  --gbp: #f08a3c;  --gbp-on: #14181a;
  --cny: #c8392d;  --cny-on: #f5f6f4;
  --chf: #3ba574;  --chf-on: #14181a;
  --jpy: #a97c5b;  --jpy-on: #14181a;
  --pln: #e7829f;  --pln-on: #14181a;
  --cad: #4fb3b8;  --cad-on: #14181a;
  --aud: #9ad1f0;  --aud-on: #14181a;

  --field: var(--paper);
  --field-on: var(--ink);

  --m: clamp(16px, 2.2vw, 32px);
  --gap: 8px;
  --cut: 28px;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-poster: clamp(3.5rem, 10vw, 9.4rem);

  --display: "Stack Sans Headline", "Helvetica Neue", Arial, sans-serif;
  --text: "Stack Sans Text", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 var(--step-body)/1.5 var(--text);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.display {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.05;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- buttons: one shape, square, flat ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 22px;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 0;
  font-weight: 500; font-size: var(--step-body); text-decoration: none;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--paper { background: var(--paper); color: var(--ink); }

/* ---------- chapters ---------- */
.chapter {
  position: relative;
  min-height: 90svh;
  padding: 96px var(--m);
  background: var(--field);
  color: var(--field-on);
  overflow: hidden;
}
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }

/* ---------- reveal on enter (only hidden when script is running) ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ======================= HERO ======================= */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; --hs: clamp(4.5rem, 12.4vw, 12.5rem); }
.hero__up, .hero__down { position: absolute; left: 0; right: 0; }
.hero__up { top: 0; height: 50%; background: var(--paper); }
.hero__down { top: 50%; height: 50%; background: var(--eur); }
.hero__title {
  position: absolute; left: 0; right: 0; top: calc(50% - 1.29em); z-index: 2; margin: 0; text-align: center; color: var(--ink);
  font-family: var(--display); font-weight: 300; text-transform: uppercase; font-size: var(--hs);
  letter-spacing: -0.03em; line-height: .86;
}
.hero__title .ln { display: block; overflow: hidden; padding: .06em .1em; margin: -.06em -.1em; }
.hero__title .ln > span { display: block; }
.js .hero__title .ln > span { transform: translateY(115%); transition: transform 1s var(--ease); }
.js .hero__title .ln:nth-child(2) > span { transition-delay: .11s; }
.js .is-loaded .hero__title .ln > span { transform: none; }
.hero__sub {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--m))); text-align: center;
  font-size: var(--step-lead); line-height: 1.35; z-index: 2;
}
.js .hero__sub { opacity: 0; transition: opacity .8s var(--ease) 1.2s; }
.js .is-loaded .hero__sub { opacity: 1; }

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 32px; padding: 20px var(--m); color: var(--ink); }
.wordmark { display: inline-flex; align-items: baseline; gap: .35em; font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; text-decoration: none; }
.wordmark img { display: block; height: 34px; width: auto; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { text-decoration: none; font-weight: 500; padding: 8px 0; transition: opacity .2s; }
.nav__links a:hover { opacity: .55; }
.js .nav { opacity: 0; transition: opacity .8s var(--ease) 1.3s; }
.js .is-loaded .nav { opacity: 1; }

/* ======================= BOARD (list) ======================= */
.board { --field: var(--ink); --field-on: var(--paper); padding-block: 80px; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; }
.board__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  color: var(--paper); text-decoration: none;
  transition: color .25s var(--ease), padding-left .45s var(--ease);
}
.board__row:hover, .board__row:focus-visible { color: var(--c); padding-left: .25em; }
.board__name { font-size: var(--step-poster); text-transform: lowercase; line-height: .92; }
.board__facts { display: flex; gap: 28px; font-size: 1.125rem; font-weight: 500; white-space: nowrap; }
.board__facts .up { color: var(--chf); }
.board__facts .dn { color: #ff8c7e; }
.board__note { margin-top: 56px; max-width: 46ch; font-size: var(--step-body); }

/* ======================= STATS (stepped tiles) ======================= */
.stats { --field: var(--inr); --field-on: var(--ink); padding: 0; min-height: 100svh; }
.stats .grid12 { height: 100%; min-height: 100svh; padding: var(--m); align-content: start; }
.tile { position: relative; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.tile__fig { transform: translateY(var(--dy, 0px)); font-family: var(--display); font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-size: clamp(3.5rem, 5.4vw, 5.75rem); }
.tile__cap { font-size: 1.0625rem; max-width: 24ch; line-height: 1.35; }
.tile--a { grid-column: 1 / 7; height: 70vh; background: var(--eur); color: var(--ink); }
.tile--b { grid-column: 7 / 10; margin-top: 14vh; height: 44vh; background: var(--ink); color: var(--paper); align-self: start; }
.tile--c { grid-column: 10 / 13; margin-top: 26vh; height: 34vh; background: var(--paper); color: var(--ink); align-self: start; }
.stats__head { grid-column: 7 / 13; grid-row: 1; align-self: start; font-size: clamp(1.75rem, 2.4vw, 2.25rem); padding-top: 4px; max-width: 12ch; }
.tile--b, .tile--c { grid-row: 1; }
.tile--b { margin-top: calc(14vh + 5rem); }
.tile--c { margin-top: calc(26vh + 5rem); }
.tile--a { grid-row: 1 / span 2; }
.tile--b .tile__fig, .tile--c .tile__fig { font-size: clamp(3rem, 4.4vw, 4.75rem); }

/* ======================= PAINTING chapter ======================= */
.first { --field: var(--paper-2); padding: 0; min-height: 100svh; }
.first__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); min-height: 100svh; }
.first__text { grid-column: 1 / 6; padding: 96px 0 var(--m) var(--m); display: flex; flex-direction: column; justify-content: space-between; }
.first__title { font-size: clamp(2.5rem, 5vw, 5.25rem); max-width: 10ch; }
.first__body { max-width: 34ch; font-size: var(--step-body); }
.first__body p + p { margin-top: .9em; }
.first__pic { grid-column: 6 / 13; position: relative; overflow: hidden; min-height: 70vh; }
.first__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; transform: translateY(var(--dy, 0px)) scale(1.14); transition: transform .9s var(--ease); }
.first__pic:hover img { transform: translateY(var(--dy, 0px)) scale(1.18); }
.first__cap { position: absolute; left: 0; bottom: 0; background: var(--paper-2); padding: 10px 16px 0 0; font-size: var(--step-small); max-width: 46ch; }

.coins { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: var(--gap) var(--m) var(--m); background: var(--paper-2); }
.coin { position: relative; overflow: hidden; background: #8a8d90; aspect-ratio: 4 / 5; }
.coin video { width: 100%; height: 100%; object-fit: cover; display: block; }
.coin img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; transform: translateY(var(--dy, 0px)) scale(1.14); transition: transform .9s var(--ease); }
.coin:hover img { transform: translateY(var(--dy, 0px)) scale(1.22); }
.coin figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 14px 16px; background: var(--ink); color: var(--paper); font-size: var(--step-small); }
.coins__line { grid-column: 1 / -1; font-size: var(--step-lead); max-width: 40ch; padding: 24px 0 8px; font-weight: 500; line-height: 1.3; }

/* ======================= HOW (stages as one bar) ======================= */
.how { --field: var(--paper); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 96px; }
.how__title { font-size: clamp(3rem, 6.4vw, 6.5rem); margin-bottom: 64px; max-width: 12ch; }
.bar { display: flex; gap: 6px; height: 22vh; min-height: 150px; }
.seg { transform: translateY(var(--dy, 0px)); flex: var(--g) 1 0; min-width: 12%; padding: 20px; display: flex; font-family: var(--display); font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.25rem, 2vw, 1.875rem); line-height: 1.1; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); transition: filter .3s; }
.seg:nth-child(1) { background: var(--eur); }
.seg:nth-child(2) { background: var(--inr); }
.seg:nth-child(3) { background: var(--gbp); }
.seg:nth-child(4) { background: var(--chf); }
.clauses { display: flex; gap: 6px; margin-top: 16px; }
.clause { flex: var(--g) 1 0; min-width: 12%; font-size: 1.0625rem; line-height: 1.4; padding-right: 8px; }
.clause p { max-width: 22ch; }
.clause b { font-weight: 600; }

/* ======================= SHOWCASE (one control, blown up) ======================= */
.show { --field: var(--eur); --field-on: var(--ink); min-height: 92svh; height: 92svh; transition: background-color .6s var(--ease), color .6s var(--ease); background: var(--field); color: var(--field-on); }
.show__head { position: relative; z-index: 2; max-width: 520px; }
.show__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); margin-bottom: 14px; }
.show__title span { display: inline-block; }
.show__p { font-size: 1.0625rem; max-width: 36ch; }
.swap { position: absolute; right: -1vw; bottom: -3vh; font-size: calc(46vh / 13.6); width: 12em; padding: .3em; z-index: 1; display: flex; flex-direction: column; gap: .12em; background: var(--ink); color: var(--paper); clip-path: polygon(0 0, calc(100% - .8em) 0, 100% .8em, 100% 100%, 0 100%); }
.swap button { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; height: 2.1em; padding: 0 .6em; background: transparent; border: 0; text-align: left; color: var(--paper); transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.swap button:hover { transform: translateX(-.15em); }
.swap button[aria-checked="true"] { background: var(--c); color: var(--on); }
.swap__code { font-family: var(--display); font-size: 1.1em; font-weight: 400; letter-spacing: -.01em; align-self: center; }
.swap__name { font-size: .56em; font-weight: 500; opacity: .85; margin-right: auto; margin-left: .8em; align-self: center; }
.swap__rate { font-size: .56em; font-weight: 500; align-self: center; font-variant-numeric: tabular-nums; }

/* ======================= FAQ ======================= */
.faq { --field: var(--gbp); --field-on: var(--ink); min-height: 100svh; }
.faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.faq__title { grid-column: 1 / 5; position: sticky; top: 96px; align-self: start; font-size: clamp(2.25rem, 4vw, 4rem); }
.faq__list { grid-column: 5 / 13; display: flex; flex-direction: column; gap: var(--gap); }
.q { background: #f4a265; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 72px; padding: 16px 24px; font-size: 1.25rem; font-weight: 500; cursor: pointer; }
.q summary::-webkit-details-marker { display: none; }
.q summary { position: relative; padding-right: 64px; }
.q summary::before, .q summary::after { content: ""; position: absolute; right: 22px; top: 50%; background: currentColor; transition: transform .35s var(--ease); }
.q summary::before { width: 16px; height: 3px; margin-top: -1.5px; }
.q summary::after { width: 3px; height: 16px; margin-top: -8px; margin-right: 6.5px; }
.q[open] { background: var(--ink); color: var(--paper); }
.q[open] summary::after { transform: rotate(90deg); }
.q__a { padding: 0 24px 26px; font-size: 1.0625rem; max-width: 58ch; }
.q__a p + p { margin-top: .8em; }
.q:hover:not([open]) { background: #f7b180; }

/* ======================= RISK (the billion-mark note) ======================= */
.risk { --field: var(--paper-2); padding: 0; min-height: 100svh; }
.risk__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); min-height: 100svh; }
.risk__pic { grid-column: 1 / 7; position: relative; overflow: hidden; background: var(--paper); }
.risk__pic img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(var(--dy, 0px)); transition: transform .6s var(--ease); }
.risk__text { grid-column: 7 / 13; padding: 96px var(--m) var(--m) 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.risk__title { font-size: clamp(2.5rem, 5.2vw, 5.25rem); max-width: 11ch; }
.risk__body { max-width: 40ch; }
.risk__body p + p { margin-top: .9em; }
.risk__cap { font-size: var(--step-small); margin-top: 24px; max-width: 40ch; }

/* ======================= CTA (the launch counter) ======================= */
.cta { --field: var(--chf); --field-on: var(--ink); min-height: 100svh; padding: 0; }
.cta__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); min-height: 100svh; padding: var(--m); align-items: center; }
.cta__left { grid-column: 1 / 6; align-self: end; padding-bottom: 24px; }
.cta__title { font-size: clamp(3.5rem, 7vw, 7rem); line-height: .92; margin-bottom: 20px; }
.cta__left p { max-width: 36ch; font-size: 1.0625rem; }
.dlg { grid-column: 7 / 12; width: 100%; max-width: 460px; justify-self: end; background: var(--paper); color: var(--ink); padding: 28px 28px 44px; position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 96% 100%, 92% calc(100% - 14px), 88% 100%, 84% calc(100% - 14px), 80% 100%, 76% calc(100% - 14px), 72% 100%, 68% calc(100% - 14px), 64% 100%, 60% calc(100% - 14px), 56% 100%, 52% calc(100% - 14px), 48% 100%, 44% calc(100% - 14px), 40% 100%, 36% calc(100% - 14px), 32% 100%, 28% calc(100% - 14px), 24% 100%, 20% calc(100% - 14px), 16% 100%, 12% calc(100% - 14px), 8% 100%, 4% calc(100% - 14px), 0 100%); }
.dlg { filter: none; }
.dlg h3 { font-size: 1.75rem; margin-bottom: 18px; }
.fld { display: block; margin-bottom: 14px; }
.fld span { display: block; font-size: var(--step-small); font-weight: 500; margin-bottom: 4px; }
.fld input { width: 100%; height: 48px; padding: 0 14px; background: var(--paper-2); border: 0; border-radius: 0; font-size: 1.0625rem; }
.fld input:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 18px; border: 0; padding: 0; }
.chips legend { font-size: var(--step-small); font-weight: 500; margin-bottom: 4px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; justify-content: center; height: 44px; background: var(--paper-2); font-weight: 500; transition: background-color .25s var(--ease), transform .25s var(--ease); }
.chip:hover span { transform: translateY(-2px); }
.chip input:checked + span { background: var(--c); color: var(--on); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.receipt { background: var(--paper-2); padding: 14px 16px; margin: 0 0 18px; font-size: .9375rem; display: grid; gap: 6px; }
.receipt div { display: flex; justify-content: space-between; gap: 16px; }
.receipt dt { font-weight: 400; white-space: nowrap; }
.receipt dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.receipt .total dd { font-size: 1.0625rem; }
.dlg .btn { width: 100%; min-height: 52px; }
.dlg__msg { min-height: 1.5em; margin-top: 10px; font-size: var(--step-small); }

/* ======================= FOOTER (tiles) ======================= */
.foot { background: var(--paper); padding: 10px; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.ft { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.ft--say { grid-column: 1 / 5; min-height: 220px; background: var(--paper-2); font-size: 1.5rem; line-height: 1.2; }
.ft--say small { font-size: var(--step-small); line-height: 1.4; display: block; }
.ft--nav { grid-column: 5 / 8; min-height: 220px; background: var(--inr); font-size: 1rem; }
.ft--nav a { text-decoration: none; display: block; padding: 3px 0; font-weight: 500; }
.ft--nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft--time { grid-column: 8 / 10; min-height: 220px; background: var(--eur); font-size: 1rem; }
.ft--time b { display: block; font-weight: 600; }
.ft--mail { grid-column: 10 / 13; min-height: 220px; background: var(--gbp); justify-content: flex-end; font-size: 1.25rem; font-weight: 500; }
.ft--word img { width: min(76%, 640px); height: auto; }
.ft--word { grid-column: 1 / 9; min-height: 320px; background: var(--ink); color: var(--paper); align-items: center; justify-content: center; font-family: var(--display); font-weight: 300; font-size: clamp(4rem, 12vw, 12rem); letter-spacing: -.04em; line-height: .9; }
.ft--go { grid-column: 9 / 13; min-height: 320px; background: var(--chf); color: var(--ink); text-decoration: none; font-size: 1.75rem; font-weight: 500; line-height: 1.1; transition: background-color .3s var(--ease); }
.ft--go:hover { background: var(--inr); }
.ft--go svg { align-self: flex-end; width: 56px; height: 56px; transition: transform .35s var(--ease); }
.ft--go:hover svg { transform: translate(6px, -6px); }
.credits { grid-column: 1 / -1; padding: 12px 10px 20px; font-size: var(--step-small); max-width: 72ch; line-height: 1.5; }
.credits a { text-underline-offset: 3px; }

/* ======================= PHONE ======================= */
@media (max-width: 860px) {
  :root { --step-poster: 15vw; --cut: 20px; }
  .chapter { padding: 72px var(--m); }
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 1rem; }
  .hero { --hs: 17vw; min-height: 560px; }
  .hero__up { height: 46%; }
  .hero__down { top: 46%; height: 54%; }
  .hero__title { top: calc(46% - 1.29em); }
  .hero__sub { left: var(--m); transform: none; text-align: left; bottom: 28px; width: auto; font-size: 1.0625rem; right: var(--m); }

  .board { padding-block: 64px; }
  .board__row { flex-direction: column; gap: 6px; padding-bottom: 22px; }
  .board__facts { font-size: .9375rem; gap: 18px; }

  .stats .grid12 { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; align-content: flex-start; min-height: 0; }
  .stats__head { order: -1; width: 100%; font-size: 1.625rem; padding: 40px 0 16px; max-width: none; }
  .tile--a { width: 100%; height: 56vw; min-height: 240px; margin: 0; }
  .tile--b, .tile--c { width: calc(50% - 3px); height: 56vw; min-height: 240px; margin-top: 0; padding: 18px; }
  .tile--c { margin-top: 32px; }
  .tile--a .tile__fig { font-size: 15vw; }
  .tile--b .tile__fig, .tile--c .tile__fig { font-size: 11vw; }
  .tile__cap { font-size: 1rem; }
  .stats { min-height: 0; padding-bottom: 56px; }

  .first__grid { display: block; min-height: 0; }
  .first__text { padding: 64px var(--m) 32px; gap: 28px; }
  .first__title { font-size: 12vw; max-width: none; }
  .first__pic { min-height: 0; aspect-ratio: 6 / 5; }
  .first__cap { position: static; padding: 10px var(--m); max-width: none; }
  .first__pic { overflow: visible; }
  .first__pic img { position: static; width: 100%; height: auto; aspect-ratio: 6 / 5; transform: none !important; }
  .coin img, .risk__pic img, .tile__fig, .seg { transform: none !important; }
  .coins { grid-template-columns: 1fr 1fr; }

  .how__title { font-size: 11vw; margin-bottom: 36px; }
  .bar { flex-direction: column; height: auto; min-height: 0; }
  .seg { flex: none; min-width: 0; min-height: 72px; height: calc(var(--g) * .55vh + 60px); font-size: 1.375rem; padding: 14px 16px; }
  .clauses { flex-direction: column; gap: 14px; margin-top: 20px; }
  .clause { flex: none; }
  .clause p { max-width: 36ch; font-size: 1rem; }

  .show { height: auto; min-height: 86svh; padding-bottom: 0; }
  .show__title { font-size: 1.625rem; }
  .show__p { font-size: 1rem; }
  .show .chapter__in { position: relative; }
  .swap { position: relative; right: auto; bottom: auto; margin: 36px calc(var(--m) * -1) 0; width: calc(100% + 2 * var(--m)); font-size: 4.4vw; display: grid; grid-template-columns: repeat(2, 1fr); padding: .3em; clip-path: none; }
  .swap button { height: 2.6em; }

  .faq__grid { display: block; }
  .faq__title { position: static; font-size: 9vw; margin-bottom: 28px; }
  .faq__list { gap: 6px; }
  .q summary { font-size: 1.125rem; min-height: 64px; padding: 14px 56px 14px 18px; }
  .q__a { padding: 0 18px 20px; font-size: 1rem; }

  .risk__grid { display: block; min-height: 0; }
  .risk__pic { position: static; }
  .risk__pic img { position: static; }
  .risk__text { padding: 40px var(--m) 64px; }
  .risk__title { font-size: 12vw; }

  .cta__grid { display: block; padding: 72px var(--m); }
  .cta__title { font-size: 13vw; }
  .cta__left { padding-bottom: 32px; }
  .dlg { max-width: none; padding: 22px 18px 40px; }
  .dlg .btn { min-height: 52px; }

  .foot { grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
  .ft--word { grid-column: 1 / -1; min-height: 160px; font-size: 24vw; order: 1; }
  .ft--go { grid-column: 1 / -1; min-height: 160px; order: 2; }
  .ft--nav { grid-column: 1; order: 3; min-height: 200px; }
  .ft--mail { grid-column: 2; order: 3; min-height: 200px; font-size: .9375rem; }
  .ft--time { grid-column: 1; order: 4; min-height: 200px; }
  .ft--say { grid-column: 2; order: 4; min-height: 200px; font-size: 1.125rem; }
  .credits { order: 5; }
}

/* ======================= REDUCED MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { transform: none; transition: opacity .3s; }
  .js .hero__title .ln > span { transform: none; transition: none; }
  .btn:hover, .chip:hover span, .swap button:hover { transform: none; }
  .first__pic:hover img, .coin:hover img { transform: scale(1.14); }
}