/*
 * The material layer, 24 October 2026.
 *
 * One type scale, one surface recipe, one corner geometry and one motion system, laid over the
 * approved design. It loads last (src/app/layout.tsx), so it wins on equal specificity, and it comes
 * off again by removing that one link. Nothing here changes a word, a layout or the privacy flow.
 *
 * The numbers are measured, not felt. The type sizes, line heights and tracking follow the tables
 * apple.com serves for SF Pro (17px/1.47/-0.022em body, 14px/1.43/-0.016em reduced, 12px/1.33/-0.01em
 * caption, 19-21px/1.2-1.38 intro, 32-56px/1.07-1.125 headlines at weight 600), adapted to Space
 * Grotesk, which is wider than SF and wants a little less tracking at display sizes. The two easing
 * curves are the two apple.com uses (78 and 13 times in its own CSS), the durations its 240-480ms
 * band, the pill its 980px radius, the nav material its saturate(180%) blur(20px). The 44px targets,
 * the signal colours, the gold edge and the reduced-motion rules are the owner's, from DESIGN.md.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────────────────────────── */

:root {
  /* Type: the full scale for the page's words, the reduced scale stays on the product UI. */
  --type-editorial: 1.0625rem; /* 17px: body on the page */
  --type-lead: clamp(1.1875rem, 0.95rem + 0.6vw, 1.3125rem); /* 19-21px: a section's lead */
  --type-callout: 1.1875rem; /* 19px: a card's title, a question */
  --type-caption: 0.8125rem; /* 13px: labels on the card */
  --lh-display: 1.05;
  --lh-title: 1.08;
  --lh-lead: 1.38;
  --lh-body: 1.47;
  --lh-small: 1.43;
  --track-display: -0.028em;
  --track-title: -0.02em;
  --track-callout: -0.012em;
  --track-body: -0.022em;
  --track-small: -0.016em;
  --track-caption: -0.01em;
  /* Three weights: one for text, one for labels and values, one for headings and strong emphasis. */
  --weight-text: 400;
  --weight-label: 520;
  --weight-emphasis: 600;
  /* One pill, the mark of a state: 24px tall, 4px and 8px in, the label size and weight. */
  --pill-height: 1.5rem;
  --pill-padding: var(--space-1) var(--space-2);
  --pill-line-height: 0.875rem;

  /* Shape: one geometry. Cards 24, tiles 20, fields 16, controls 14, buttons a pill. */
  --radius-control: 14px;
  --radius-panel: 16px;
  --radius-card: 24px;
  --radius-tile: 20px;
  --radius-pill: 980px;

  /* Motion: apple.com's two curves, its durations, and one soft spring. */
  --motion-fast: 240ms;
  --motion-standard: 320ms;
  --motion-slow: 480ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out: cubic-bezier(0.25, 0.1, 0.3, 1);
  --ease-spring: linear(
    0,
    0.006,
    0.025 2.8%,
    0.101 6.1%,
    0.539 18.9%,
    0.721 25.3%,
    0.849 31.5%,
    0.937 38.1%,
    0.968 41.8%,
    0.991 45.7%,
    1.006 50.1%,
    1.015 55%,
    1.017 63.9%,
    1.001
  );

  /* Material: one glass, one hairline, one light from above. */
  --glass: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015) 42%, rgb(255 255 255 / 0)),
    rgb(17 17 18 / 0.78);
  --glass-blur: blur(28px) saturate(1.5);
  --glass-line: rgb(255 255 255 / 0.1);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.1);
  --control-fill: rgb(255 255 255 / 0.08);
  --control-fill-hover: rgb(255 255 255 / 0.13);
  --control-line: rgb(255 255 255 / 0.07);
  --well-fill: rgb(0 0 0 / 0.28);
  --well-fill-focus: rgb(0 0 0 / 0.36);
  --shadow-float: 0 1px 1px rgb(0 0 0 / 0.3), 0 24px 64px -16px rgb(0 0 0 / 0.7);
}

/* ── Rendering ───────────────────────────────────────────────────────────────────────────────── */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: var(--track-small);
}

/* A hairline is half a pixel on a dense screen, as it is on an Apple display. */
@media (min-resolution: 2dppx) {
  .faq-item,
  .site-footer,
  .compare-list li + li,
  .editorial-sections .faq-list,
  .trust-row li + li {
    border-width: 0.5px;
  }
}

/* The press: a short settle, not a one-pixel drop. */
:where(button, a, summary):not(:disabled):active {
  transform: none;
}

/* Superellipse corners on cards and fields where the browser draws them (Chrome 139+), as iOS draws
   its continuous corners; plain arcs elsewhere. Never on a pill: a squircle flattens a capsule. */
@supports (corner-shape: squircle) {
  .swap-hero #swapForm,
  .swap-hero .amount-field,
  .how-panel,
  .compare-side,
  .use-case-art,
  .send-receive-art,
  .ui-panel,
  .cost-frame,
  .cost-card,
  .buyback-card,
  .record-visual,
  .record-step[data-open],
  .showcase-box,
  .logo-tile,
  .closing-panel,
  .token-dialog,
  .privacy-dialog,
  .token-option,
  .asset-search-input,
  .mobile-menu,
  .partners-offer-tile,
  .partners-card,
  .partners-tool,
  .partners-input,
  .partners-kind,
  #safe .agents-rules,
  .agents-code,
  .integrate-preview,
  .integrate-frame,
  .embed-card .amount-field,
  .admin-card,
  .admin-period,
  .admin-input,
  .admin-value {
    corner-shape: squircle;
  }
}

/* ── The header: a floating bar that turns to glass as the page moves ───────────────────────── */

header.site-header,
header.swap-page-header {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 20;
  box-sizing: border-box;
  min-height: 60px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    background var(--motion-standard) var(--motion-ease),
    border-color var(--motion-standard) var(--motion-ease),
    box-shadow var(--motion-standard) var(--motion-ease);
}

header[data-scrolled] {
  border-color: rgb(255 255 255 / 0.08);
  background: rgb(5 5 5 / 0.66);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 12px 40px -16px rgb(0 0 0 / 0.7);
}

header .brand-name {
  max-width: none;
  font-size: 1.1875rem;
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-callout);
  animation: brand-fade 600ms var(--ease-out) both;
}

@keyframes brand-fade {
  from {
    opacity: 0;
  }
}

header.site-header > .how-button,
header.swap-page-header > .home-link {
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: var(--weight-label);
  letter-spacing: var(--track-small);
  transition:
    color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
}

header.site-header > .how-button:active,
header.swap-page-header > .home-link:active {
  background: var(--control-fill);
}

@media (hover: hover) and (pointer: fine) {
  header.site-header > .how-button:hover,
  header.swap-page-header > .home-link:hover {
    background: var(--control-fill);
  }
}

/* The secondary button: a glass pill, its arrow in step with the words. */
.header-cta,
a.header-cta {
  gap: 8px;
  padding: 0 var(--space-4) 0 var(--space-4);
  border-color: var(--control-line);
  border-radius: var(--radius-pill);
  background: var(--control-fill);
  font-size: 0.9375rem;
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-small);
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .header-cta:hover {
    border-color: rgb(255 255 255 / 0.12);
    background: var(--control-fill-hover);
  }
}

.header-cta:active {
  transform: scale(0.97);
  transition-duration: 120ms;
}

.cta-arrow {
  width: auto;
  /* -2px: an optical nudge, the arrow's own white space inside the button. */
  margin-left: -2px;
  border-left: 0;
}

@media (hover: hover) and (pointer: fine) {
  .header-cta:hover .cta-arrow svg {
    transform: translateX(3px);
  }
}

/* The phone menu: the same glass, in a sheet. */
@media (max-width: 620px) {
  header.site-header,
  header.swap-page-header {
    top: max(8px, env(safe-area-inset-top));
    min-height: 56px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
  }

  .mobile-menu-toggle {
    border-color: var(--control-line);
    border-radius: var(--radius-pill);
    background: var(--control-fill);
  }

  .mobile-menu-toggle:active {
    transform: scale(0.94);
  }

  [data-mobile-menu-root][data-menu-open] .mobile-menu:not([hidden]) {
    top: calc(100% + 6px);
    padding: 8px;
    border-color: var(--glass-line);
    border-radius: var(--radius-tile);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
      var(--glass-highlight),
      var(--shadow-float);
    animation: sheet-enter var(--motion-standard) var(--ease-out) both;
  }

  .mobile-menu :is(a, button) {
    border-radius: var(--radius-control);
    font-size: var(--type-editorial);
    font-weight: var(--weight-label);
    letter-spacing: var(--track-body);
  }
}

@keyframes sheet-enter {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

/* ── The hero ────────────────────────────────────────────────────────────────────────────────── */

.swap-hero .swap-intro {
  max-width: 54rem;
  margin-bottom: var(--space-8);
}

@media (min-width: 621px) {
  .swap-hero .swap-intro {
    padding-top: var(--space-12);
  }
}

.swap-hero .swap-intro #pageTitle {
  margin-bottom: 0;
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4rem);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

/* The card: glass over the flow, lit from above, with the owner's gold edge. */
.swap-hero #swapForm {
  padding: var(--space-4);
  border: 1px solid rgb(var(--flow-zcash-yellow, 244 183 40) / 0.2);
  border-radius: var(--radius-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 rgb(var(--flow-zcash-yellow, 244 183 40) / 0.18),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.04),
    var(--shadow-float),
    0 28px 96px -36px rgb(var(--flow-zcash-yellow, 244 183 40) / 0.32);
}

.swap-hero .amount-field {
  min-height: 118px;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-color: transparent;
  border-radius: var(--radius-panel);
  background: var(--well-fill);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.04),
    inset 0 1px 0 rgb(255 255 255 / 0.02);
  transition:
    background var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.swap-hero .amount-field:focus-within {
  background: var(--well-fill-focus);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

.swap-hero .amount-field:has(input[aria-invalid="true"]) {
  box-shadow:
    inset 0 0 0 1px rgb(231 162 154 / 0.6),
    0 0 0 3px rgb(231 162 154 / 0.14);
}

.swap-hero .field-topline label {
  color: var(--color-text-secondary);
  font-size: var(--type-caption);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-caption);
}

.swap-hero .amount-line {
  margin-top: var(--space-2);
}

.swap-hero .amount-input {
  font-size: clamp(2rem, 1rem + 5vw, 2.75rem);
  font-weight: var(--weight-label);
  letter-spacing: -0.03em;
}

.swap-hero .chain-row {
  margin-top: 4px;
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
}

.swap-hero .sample-usd {
  font-size: var(--type-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-caption);
}

.swap-hero .chain-logo {
  width: 14px;
  height: 14px;
}

.swap-hero .field-error {
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
}

/* The token picker: a capsule, as a selector is on iOS. */
.token-button {
  min-width: 0;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  gap: 8px;
  border-color: var(--control-line);
  border-radius: var(--radius-pill);
  background: var(--control-fill);
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .token-button:hover {
    border-color: rgb(255 255 255 / 0.12);
    background: var(--control-fill-hover);
  }
}

.token-button[aria-expanded="true"] {
  border-color: rgb(255 255 255 / 0.18);
  background: var(--control-fill-hover);
}

.token-button:active {
  transform: scale(0.96);
  transition-duration: 120ms;
}

.token-logo {
  width: 30px;
  height: 30px;
}

.token-ticker {
  font-size: 0.9375rem;
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-small);
}

.token-chevron {
  width: 14px;
  height: 14px;
  /* -2px: an optical nudge, the chevron's own white space inside the button. */
  margin-left: -2px;
  stroke-width: 2;
}

/* The reverse control: a round key between the two fields. */
.direction-button {
  border-radius: 50%;
  transition:
    color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.direction-button::before {
  width: 36px;
  height: 36px;
  border-color: var(--glass-line);
  border-radius: 50%;
  background: rgb(28 28 31 / 0.96);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 4px 14px rgb(0 0 0 / 0.45);
  transform: none;
}

.direction-button .direction-icon {
  transition: transform var(--motion-slow) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
  .direction-button:hover .direction-icon {
    transform: rotate(180deg);
  }
}

.direction-button:active {
  transform: scale(0.92);
  transition-duration: 120ms;
}

/* The main action: a pill in the design's cream, with the owner's gold arrow. */
.swap-button {
  min-height: 54px;
  margin-top: var(--space-2);
  gap: var(--space-2);
  border-color: transparent;
  border-radius: var(--radius-pill);
  color: var(--color-on-primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 10px 28px -10px rgb(241 239 233 / 0.4);
  font-size: var(--type-editorial);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-body);
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .swap-button:hover {
    background: var(--color-primary-hover);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.6),
      0 14px 36px -10px rgb(241 239 233 / 0.5);
    transform: none;
  }
}

.swap-button:active {
  transform: scale(0.985);
  transition-duration: 120ms;
}

.swap-button:focus-visible {
  box-shadow:
    0 0 0 3px rgb(89 200 232 / 0.3),
    0 10px 28px -10px rgb(241 239 233 / 0.4);
}

.swap-button-icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

/* The facts under the card: large figures, quiet labels, hairlines between. */
.trust-row {
  margin-top: var(--space-6);
}

.trust-row li {
  gap: var(--space-2);
  padding: 0 var(--space-2);
}

.trust-value {
  min-height: 2rem;
  font-size: 1.75rem;
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-title);
  line-height: 1.1;
}

.trust-value svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.trust-label {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  letter-spacing: var(--track-caption);
  line-height: var(--lh-small);
}

.route-lockup {
  margin-top: var(--space-6);
}

.route-lockup-label {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
}

/* The "How it works" panel: the glass, with the design's own signal line. */
.how-panel {
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-color: var(--glass-line);
  border-radius: var(--radius-tile);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight);
}

.how-panel h2 {
  font-size: var(--type-callout);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-callout);
}

.how-detail p,
.how-detail > .route-note + p,
.how-privacy-note {
  font-size: 0.9375rem;
  letter-spacing: var(--track-small);
  line-height: var(--lh-small);
}

/* ── The sections: the full scale ────────────────────────────────────────────────────────────── */

.editorial-sections .section-title {
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
}

.editorial-sections .section-lead {
  max-width: 34rem;
  margin-top: var(--space-6);
  font-size: var(--type-lead);
  letter-spacing: 0;
  line-height: var(--lh-lead);
}

.editorial-sections
  :is(.compare-pair, .showcase-pair, .cost-frame, .send-receive-pair, .use-case-list.use-case-cards, .record-stage),
.editorial-sections .buyback-card {
  margin-top: var(--space-12);
}

.editorial-sections p,
.editorial-sections li {
  text-wrap: pretty;
}

/* Cards and tiles: one geometry, one hairline, one light. */
.compare-side,
.buyback-card,
.record-visual,
.cost-frame {
  border-radius: var(--radius-card);
}

.showcase-box,
.use-case-art,
.send-receive-art,
.send-receive-link::after,
.cost-card {
  border-radius: var(--radius-tile);
}

.compare-side,
.showcase-box,
.use-case-art,
.send-receive-art,
.cost-frame,
.record-visual,
.closing-panel {
  border-color: var(--glass-line);
  box-shadow: var(--glass-highlight);
}

.closing-panel {
  border-radius: 32px;
  border-color: rgb(244 183 40 / 0.22);
}

.compare-name {
  font-size: var(--type-callout);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-callout);
}

.compare-list li {
  font-size: var(--type-editorial);
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
}

.showcase-caption,
.cost-table,
.cost-fee {
  letter-spacing: var(--track-small);
}

.showcase-caption {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  line-height: var(--lh-small);
}

.buyback-value {
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-title);
}

.buyback-label {
  font-size: var(--type-editorial);
  letter-spacing: var(--track-body);
}

.use-case-title,
.send-receive-title {
  margin-top: var(--space-4);
  font-size: var(--type-callout);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-callout);
  line-height: 1.25;
}

.use-case-copy,
.send-receive-copy {
  margin-top: 8px;
  font-size: var(--type-editorial);
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
}

.use-case-art,
.send-receive-art {
  transition:
    transform var(--motion-slow) var(--ease-out),
    border-color var(--motion-slow) var(--ease-out);
}

.send-receive-tile:active .send-receive-art {
  border-color: rgb(255 255 255 / 0.16);
  transform: translateY(-3px);
}

@media (hover: hover) and (pointer: fine) {
  .use-case:hover .use-case-art,
  .send-receive-tile:hover .send-receive-art {
    border-color: rgb(255 255 255 / 0.16);
    transform: translateY(-3px);
  }
}

/* Send and Receive: the arrow steps as far as the header button's does. */
.send-receive-arrow {
  transition: transform var(--motion-fast) var(--motion-ease);
}

.send-receive-tile:active .send-receive-arrow {
  transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
  .send-receive-tile:hover .send-receive-arrow {
    transform: translateX(3px);
  }
}

.record-step-button {
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-callout);
}

.record-step-body p,
.record-note {
  font-size: var(--type-editorial);
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
}

.record-step[data-open] {
  border-radius: var(--radius-tile);
}

/* The sample interfaces inside the pictures take the fields' 16px, so no corner on the page is tighter. */
.record-quote,
.record-table {
  border-radius: var(--radius-panel);
}

.ui-panel {
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

/* The questions: Apple's 19px question over a 17px answer, a hairline between rows. */
.editorial-sections .faq-question-text {
  font-size: var(--type-callout);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-callout);
  line-height: 1.3;
}

.editorial-sections .faq-question {
  min-height: 76px;
  transition: color var(--motion-fast) var(--motion-ease);
}

.faq-indicator {
  border-radius: 50%;
  transition:
    transform var(--motion-standard) var(--ease-out),
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.faq-item[open] .faq-indicator {
  transform: rotate(45deg);
}

.faq-answer p,
.faq-sources {
  font-size: var(--type-editorial);
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
}

.closing-title {
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
}

.closing-copy {
  max-width: 36rem;
  margin-top: var(--space-6);
  font-size: var(--type-lead);
  letter-spacing: 0;
  line-height: var(--lh-lead);
  text-wrap: balance;
}

.header-cta.closing-cta {
  min-height: 52px;
  margin-top: var(--space-8);
  padding: 0 var(--space-6) 0 var(--space-6);
  font-size: var(--type-editorial);
}

/* Three weights on the page (the tokens above): text, labels and values, emphasis. */
.cost-table td,
.cost-table thead th,
.ui-amount,
.record-amount {
  font-weight: var(--weight-label);
}

.cost-times,
.ui-token,
.cost-table tr[data-ours] :is(th, td),
.compare-name,
.buyback-value,
.record-step-button,
.showcase-caption strong {
  font-weight: var(--weight-emphasis);
}

/*
 * One pill (31 October 2026, the owner's word). A pill marks a state: a privacy level, a route's
 * kind, a status. Every pill has this one shape; its colours stay in its own rule, and only where
 * the tone means something. A pill that only named a thing (a chain, a fee, the cost box's
 * question) is plain muted text now, with the same words. /track's stop pill takes the same tokens
 * in its module.
 */
.route-state,
.agents-pill,
.ui-pill,
.record-example,
.record-route-label {
  display: inline-flex;
  min-height: var(--pill-height);
  padding: var(--pill-padding);
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  line-height: var(--pill-line-height);
}

.cost-table th,
.buyback-label {
  font-weight: var(--weight-label);
}

.record-step-button {
  font-size: 1.3125rem;
}

/* The footer: Apple's 12px, a hairline above, nothing else. */
.site-footer-link,
.site-footer-meta {
  letter-spacing: var(--track-caption);
}

/* ── The dialogs: one glass sheet ────────────────────────────────────────────────────────────── */

.token-dialog,
.privacy-dialog {
  border-color: var(--glass-line);
  border-radius: var(--radius-card);
  background: rgb(18 18 19 / 0.88);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  backdrop-filter: blur(32px) saturate(1.5);
  box-shadow:
    var(--glass-highlight),
    0 40px 120px -20px rgb(0 0 0 / 0.8);
}

.token-dialog::backdrop,
.privacy-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dialog-panel {
  padding: var(--space-5);
}

.dialog-header h2 {
  font-size: var(--type-callout);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-callout);
}

.dialog-close {
  border-radius: 50%;
}

.dialog-close:active {
  border-color: transparent;
  background: var(--control-fill);
}

@media (hover: hover) and (pointer: fine) {
  .dialog-close:hover {
    border-color: transparent;
    background: var(--control-fill);
  }
}

.dialog-copy {
  font-size: 0.9375rem;
  letter-spacing: var(--track-small);
  line-height: var(--lh-small);
}

/* The privacy dialog keeps the product's 14px text. A section's head is never smaller than its text,
   and the date takes the muted colour, as on /privacy: dim is for decoration only. */
.privacy-policy-section h3 {
  font-size: var(--text-body);
}

.privacy-policy-updated {
  color: var(--color-text-muted);
}

.token-option {
  min-height: 66px;
  padding: var(--space-2) var(--space-4);
  border-color: transparent;
  border-radius: var(--radius-control);
  background: rgb(255 255 255 / 0.04);
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .token-option:hover:not(:disabled) {
    border-color: transparent;
    background: var(--control-fill-hover);
  }
}

.token-option[aria-pressed="true"] {
  border-color: rgb(255 255 255 / 0.14);
  background: var(--control-fill);
}

.token-option:not(:disabled):active {
  transform: scale(0.985);
  transition-duration: 120ms;
}

.option-main {
  font-size: 0.9375rem;
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-small);
}

.option-chain,
.option-state,
.option-main small {
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
}

/* ── Motion: the entrance, and the sections rising into view ────────────────────────────────── */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* The headline starts faintly visible, so it is still the page's first large paint. */
@keyframes rise-headline {
  from {
    opacity: 0.2;
    transform: translateY(14px);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* The card keeps its own transform (the flow's tremor), so it only comes into focus. */
@keyframes settle {
  from {
    opacity: 0;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .swap-hero .swap-intro #pageTitle {
    animation: rise-headline 900ms var(--ease-out) both;
  }

  .swap-hero #swapForm {
    animation: settle 900ms 120ms var(--ease-out) both;
  }

  .swap-hero .trust-row {
    animation: rise 900ms 240ms var(--ease-out) both;
  }

  .swap-hero .route-lockup {
    animation: rise 900ms 320ms var(--ease-out) both;
  }

  /* Each block rises as it enters the lower part of the window, and is in place a third of the way up. */
  @supports (animation-timeline: view()) {
    .editorial-sections :is(.section-title, .closing-title) {
      animation: none;
    }

    .editorial-sections
      :is(
        .section-heading,
        .section-lead,
        .compare-side,
        .record-stage,
        .showcase-item,
        .cost-frame,
        .buyback-card,
        .send-receive-tile,
        .use-case,
        .faq-list,
        .closing-panel
      ) {
      animation: rise-in var(--ease-out) both;
      animation-range: entry 0% entry 36%;
      animation-timeline: view();
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  header .brand-name,
  .swap-hero .swap-intro #pageTitle,
  .swap-hero #swapForm,
  .swap-hero .trust-row,
  .swap-hero .route-lockup {
    animation: none;
  }

  .direction-button .direction-icon,
  .use-case-art,
  .send-receive-art,
  .send-receive-arrow,
  .faq-indicator {
    transition: none;
  }

  .send-receive-tile:active .send-receive-art,
  .send-receive-tile:active .send-receive-arrow {
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .direction-button:hover .direction-icon,
    .use-case:hover .use-case-art,
    .send-receive-tile:hover .send-receive-art,
    .send-receive-tile:hover .send-receive-arrow {
      transform: none;
    }
  }
}

/* ── The phone ───────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .swap-hero .swap-intro {
    margin-bottom: var(--space-6);
  }

  .swap-hero #swapForm {
    padding: 12px;
  }

  .swap-hero .amount-field {
    min-height: 112px;
    padding: var(--space-3) var(--space-4) var(--space-2);
  }

  .trust-value {
    font-size: 1.5rem;
  }
}

/* ── The second pass, louder (24 October 2026, the owner's word) ─────────────────────────────── */

/*
 * The page stays black and the words stay the owner's. What changes is what a glance sees: a warm
 * light behind the hero, as the Figma bar's gradient hero, in the flow's own Zcash gold; the hero in
 * two weights on two lines, the last two words carrying the weight; the five facts as a row of chips,
 * as the bar's chip row; and heavier titles with tighter tracking, as two blind reviewers asked.
 */

/* The light: on the page's own canvas, under the fixed privacy flow, so the marks still cross it. The
   home only: the 404 and error pages share its shell, not its light (UX audit D-10). */
body:has(> .page-shell .swap-hero) {
  background:
    radial-gradient(ellipse 64% 48% at 50% -8%, rgb(244 183 40 / 0.46), rgb(236 132 46 / 0.2) 44%, transparent 74%),
    radial-gradient(ellipse 36% 26% at 50% 0%, rgb(255 238 178 / 0.2), transparent 72%),
    var(--ink);
  background-repeat: no-repeat;
  background-size:
    100% 1240px,
    100% 760px,
    auto;
}

/* The hero: two lines, two weights, Apple's 80px band on a desktop. */
.swap-hero .swap-intro {
  max-width: 54rem;
  margin-bottom: 40px;
}

@media (min-width: 621px) {
  .swap-hero .swap-intro {
    padding-top: var(--space-12);
  }
}

.swap-hero .swap-intro #pageTitle {
  font-size: clamp(3rem, 1.6rem + 5.4vw, 5.25rem);
  font-weight: var(--weight-text);
  letter-spacing: -0.035em;
  line-height: 1;
}

.swap-hero .swap-intro #pageTitle .hero-accent {
  display: block;
  font-style: normal;
  font-weight: var(--weight-emphasis);
  letter-spacing: -0.04em;
}

/* The facts as chips: one glass capsule each, the figure and its words on one line. */
.swap-hero .trust-row {
  display: flex;
  max-width: 52rem;
  margin-top: 24px;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.swap-hero .trust-row li {
  display: inline-flex;
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-4) 0 var(--space-3);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-pill);
  background: var(--control-fill);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.swap-hero .trust-row li + li {
  border-left: 1px solid var(--control-line);
}

.swap-hero .trust-value {
  min-height: 0;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  line-height: 1;
}

.swap-hero .trust-value svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

.swap-hero .trust-label {
  font-size: 0.9375rem;
  letter-spacing: var(--track-small);
  line-height: 1;
}

/* A chip is never wider than the row. At normal sizes every chip fits on one line, so nothing
   changes; with 200% text on a narrow phone the words wrap inside the chip, and the page does not
   scroll sideways. */
.swap-hero .trust-row li {
  max-width: 100%;
}

.swap-hero .route-lockup {
  margin-top: var(--space-6);
}

/* Heavier titles, tighter, as the reviewers asked. */
.editorial-sections .section-title,
.closing-title {
  font-weight: var(--weight-emphasis);
  letter-spacing: -0.03em;
}

@media (max-width: 639px) {
  .swap-hero .swap-intro {
    margin-bottom: var(--space-8);
  }

  /* The facts keep their place under the logos, clear of the band where the flow runs its marks. */
  .swap-hero .trust-row {
    margin-top: 64px;
    gap: 8px;
  }

  .swap-hero .trust-row li {
    min-height: 40px;
    padding: 0 var(--space-3) 0 var(--space-3);
  }

  .swap-hero .trust-label {
    font-size: 0.875rem;
  }
}

/* ── The inner pages (26 October 2026, the owner's word) ─────────────────────────────────────── */

/*
 * /swap, /send, /receive, /pay and /track, the pages whose `main` is a `.flow-screen`. They fell back
 * to the plain card on a black page, so the product looked plainer than the home that sells it. The
 * owner chose, from three framed directions, direction B: the home hero's light in the same place and
 * shape, in the confidential route's two colours (cipherpunk purple at its core, NEAR blue at its edge,
 * as the record picture holds them), and the home card's glass with a neutral rim. Gold stays the
 * home's two places. No word changes.
 */

/* The light: on the page's own canvas, as the home's gold is. It is gone by the card's middle. The
   partners page (30 October 2026) lies under the same light, behind its intro and its offer. Since 31
   October 2026 so do /agents, /integrate, the legal pages, the 404 and error page, /admin and /partner:
   behind their intro only, as it ends about 350px down. Since the same day's desloppify pass it is at
   half its first strength on every inner page (each colour's share halved: 42% to 21%, 22% to 11%,
   the core's 20% and 4% to 10% and 2%), in the same colours, place and shape. The home keeps its
   gold light as it is. */
body:has(main.flow-screen),
body:has(main.partners-screen),
body:has(main.agents-screen),
body:has(main.legal-screen),
body:has(main.notice-main),
body:has(main.admin-screen) {
  background:
    radial-gradient(
      ellipse 62% 50% at 50% -6%,
      color-mix(in srgb, var(--color-cipherpunk-purple) 21%, transparent),
      color-mix(in srgb, var(--color-near-blue) 11%, transparent) 46%,
      transparent 76%
    ),
    radial-gradient(ellipse 34% 24% at 50% 0%, color-mix(in srgb, var(--color-cipherpunk-purple) 10%, white 2%), transparent 72%),
    var(--ink);
  background-repeat: no-repeat;
  background-size:
    100% 1100px,
    100% 700px,
    auto;
}

/* Once a QR code, the progress or the status is on the page, the light keeps to the headline's band:
   the QR stays the one light square, and no colour sits behind a deposit. */
body:has(main.flow-screen :is(svg[role="img"][aria-label^="QR code"], [data-block="progress"], [data-block="status"])) {
  background-size:
    100% 560px,
    100% 420px,
    auto;
}

/* The step marker and the headline sit a little higher, so the first screen keeps its main button. */
main.flow-screen {
  padding-top: clamp(var(--space-4), 3.2vh, var(--space-8));
}

main.flow-screen .flow-intro h1,
main.partners-screen .swap-page-intro h1,
main.agents-screen .swap-page-intro h1,
main.legal-screen .swap-page-intro h1,
main.notice-main .swap-page-intro h1,
main.admin-screen .swap-page-intro h1 {
  margin-top: 12px;
  font-weight: var(--weight-emphasis);
  letter-spacing: -0.034em;
  line-height: 1.02;
  text-wrap: balance;
}

/* The card: the home card's glass, lit from above and floating, with a neutral rim. */
main.flow-screen .route-card {
  padding: var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--glass-highlight),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.04),
    var(--shadow-float);
}

/* The fields are wells in the glass, deeper in focus, with the cyan ring outside and the danger ring
   in error, as on the home card. */
main.flow-screen .route-card .amount-field {
  border-color: transparent;
  border-radius: var(--radius-panel);
  background: var(--well-fill);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.04),
    inset 0 1px 0 rgb(255 255 255 / 0.02);
  transition:
    background var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

main.flow-screen .route-card .amount-field:focus-within {
  background: var(--well-fill-focus);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

main.flow-screen .route-card .amount-field:has(input[aria-invalid="true"]) {
  box-shadow:
    inset 0 0 0 1px rgb(231 162 154 / 0.6),
    0 0 0 3px rgb(231 162 154 / 0.14);
}

/* The widget's amounts and the admin dashboard's figures take the amount's weight too (31 October
   2026). */
main.flow-screen .route-card .amount-input,
.embed-card .amount-input,
.admin-count {
  font-weight: var(--weight-label);
  letter-spacing: -0.03em;
}

main.flow-screen .destination-field input {
  border-color: transparent;
  border-radius: var(--radius-panel);
  background: var(--well-fill);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

main.flow-screen .destination-field input:focus {
  background: var(--well-fill-focus);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}

main.flow-screen .destination-field input:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    var(--shadow-focus);
}

/* The summary beside the card: a glass tile, quieter than the card. The tracking page's status tile is
   the same tile (31 October 2026). */
main.flow-screen .swap-workspace > aside.route-review-preview,
main.flow-screen section.route-review-preview {
  padding: var(--space-4) var(--space-4) var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-tile);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--glass-highlight),
    0 18px 48px -18px rgb(0 0 0 / 0.65);
}

/* The review dialog: the same glass sheet as the token and privacy dialogs. */
.review-dialog {
  border-color: var(--glass-line);
  border-radius: var(--radius-card);
  background: rgb(18 18 19 / 0.88);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  backdrop-filter: blur(32px) saturate(1.5);
  box-shadow:
    var(--glass-highlight),
    0 40px 120px -20px rgb(0 0 0 / 0.8);
}

.review-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Back, beside the main action: the home's secondary pill. So are "Try again" on the error page and
   in the widget (31 October 2026). */
.review-close-button,
.notice-retry,
.embed-retry {
  border-color: var(--control-line);
  border-radius: var(--radius-pill);
  background: var(--control-fill);
}

.review-close-button:active,
.notice-retry:active,
.embed-retry:active {
  border-color: var(--color-line-focus);
  background: var(--control-fill-hover);
}

@media (hover: hover) and (pointer: fine) {
  .review-close-button:hover,
  .notice-retry:hover,
  .embed-retry:hover {
    border-color: var(--color-line-focus);
    background: var(--control-fill-hover);
  }
}

@supports (corner-shape: squircle) {
  main.flow-screen .route-card,
  main.flow-screen .route-card .amount-field,
  main.flow-screen .destination-field input,
  main.flow-screen .swap-workspace > aside.route-review-preview,
  main.flow-screen section.route-review-preview,
  .review-dialog {
    corner-shape: squircle;
  }
}

@media (max-width: 620px) {
  body:has(main.flow-screen),
  body:has(main.partners-screen),
  body:has(main.agents-screen),
  body:has(main.legal-screen),
  body:has(main.notice-main),
  body:has(main.admin-screen) {
    background-size:
      100% 880px,
      100% 560px,
      auto;
  }

  main.flow-screen {
    padding-top: var(--space-6);
  }

  main.flow-screen .route-card {
    padding: 12px;
  }
}

/* High contrast: the system's colours, and no light behind the words. */
@media (forced-colors: active) {
  body:has(main.flow-screen),
  body:has(main.partners-screen),
  body:has(main.agents-screen),
  body:has(main.legal-screen),
  body:has(main.notice-main),
  body:has(main.admin-screen) {
    background: Canvas;
  }

  main.flow-screen .route-card,
  main.flow-screen .swap-workspace > aside.route-review-preview,
  main.flow-screen section.route-review-preview,
  .review-dialog {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}