/* ==========================================================================
   Vertal Market — marketing site
   --------------------------------------------------------------------------
   A restrained, brokerage-style system: near-neutral surfaces, hairline
   borders, one accent colour, and typography doing the heavy lifting. Flat
   panels instead of glows, 8–12px radii instead of bubbles, and no decorative
   ornament between sections.

   The brand tokens stay in step with the client portal
   (frontend/app/globals.css); if the palette moves, move both.

   Theming is driven by `color-scheme`, exactly like the portal:
     no attribute    follow the OS
     data-theme=...  an explicit choice, which wins
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  /* Warm paper, not clinical white: the neutral carries a little temperature so
     the orange reads as part of the page rather than a sticker on top of it. */
  --bg: light-dark(#fcfbf9, #0b0c10);
  --bg-soft: light-dark(#f6f4f1, #101116);
  --surface: light-dark(#ffffff, #131418);

  --ink: light-dark(#14161a, #f3f2ef);
  --body: light-dark(#4c5259, #a6a8ae);
  --muted: light-dark(#83888f, #8b8e95);

  --line: light-dark(#e8e4de, #24262c);
  --line-strong: light-dark(#d9d4cd, #303339);

  --accent: light-dark(#ea580c, #f97316);
  --accent-hover: light-dark(#c2410c, #ea580c);
  /* Orange *text* needs its own value: the fill orange is too light on white. */
  --accent-text: light-dark(#c2410c, #fdba74);
  --accent-soft: light-dark(#fff4ed, #26160c);

  --up: light-dark(#067647, #3cb179);
  --down: light-dark(#b42318, #f27a6e);

  /* The one dark band (partners). Dark on purpose in both themes. */
  --band: light-dark(#0a0f1c, #12151d);
  --band-ink: light-dark(#ffffff, #f2f4f7);
  --band-body: light-dark(#98a2b3, #a4abb8);
  --band-line: light-dark(#242c3a, #262d3a);

  --r: 12px;
  --r-sm: 8px;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-md:
    0 4px 16px -6px rgb(16 24 40 / 0.1), 0 1px 2px rgb(16 24 40 / 0.05);

  --maxw: 1160px;
  --header-h: 4rem;

  --font:
    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman",
    serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

/*
 * light-dark() needs Chrome 123 / Safari 17.5 / Firefox 120. Older engines
 * treat it as a valid custom property they cannot resolve, so every token
 * would fail at use time. They get the light palette as plain values.
 */
@supports not (color: light-dark(#fff, #000)) {
  :root {
    --bg: #fcfbf9;
    --bg-soft: #f6f4f1;
    --surface: #ffffff;
    --ink: #14161a;
    --body: #4c5259;
    --muted: #83888f;
    --line: #e8e4de;
    --line-strong: #d9d4cd;
    --accent: #ea580c;
    --accent-hover: #c2410c;
    --accent-text: #c2410c;
    --accent-soft: #fff4ed;
    --up: #067647;
    --down: #b42318;
    --band: #0a0f1c;
    --band-ink: #ffffff;
    --band-body: #98a2b3;
    --band-line: #242c3a;
    color-scheme: light;
  }
}

/* ------------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  border-color: var(--line);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: color-mix(in oklab, var(--accent) 26%, transparent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* -------------------------------------------------------------- primitives */

.container {
  width: min(var(--maxw), 100% - 3rem);
  margin-inline: auto;
}

.section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

.section--soft {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}

/* The small label above a section heading. Neutral and quiet, not a badge. */
.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-head {
  max-width: 46rem;
}

.section-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: 0.75rem;
}

.section-lede {
  margin-top: 1rem;
  font-size: 1.0625rem;
  color: var(--body);
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.up {
  color: var(--up);
}

.down {
  color: var(--down);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1.125rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn--sm {
  height: 2.25rem;
  padding-inline: 0.875rem;
  font-size: 0.875rem;
}

.btn--lg {
  height: 3rem;
  padding-inline: 1.5rem;
}

.btn--block {
  width: 100%;
}

/*
 * The header call to action shortens on the narrowest phones so the wordmark,
 * the theme switch and the menu button all keep their space without colliding.
 */
.btn__short {
  display: none;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--outline {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--bg-soft);
}

.btn--ghost {
  color: var(--body);
}

.btn--ghost:hover {
  background: var(--bg-soft);
  color: var(--ink);
}

/* On the dark band a white button reverses the pairing. */
.btn--onDark {
  background: #fff;
  color: #0a0f1c;
}

.btn--onDark:hover {
  background: rgb(255 255 255 / 0.88);
}

.btn--onDarkOutline {
  background: transparent;
  border-color: rgb(255 255 255 / 0.24);
  color: #fff;
}

.btn--onDarkOutline:hover {
  background: rgb(255 255 255 / 0.08);
}

/* ---------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}

.logo img {
  height: 1.55rem;
  width: auto;
}

.logo__text {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.logo__text b {
  font-weight: 600;
}

.logo__text span {
  font-weight: 400;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  color: var(--body);
  transition: color 0.15s ease;
}

.nav a:hover {
  color: var(--ink);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.theme-toggle:hover {
  color: var(--ink);
  background: var(--bg-soft);
}

.theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

.theme-toggle .i-moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .i-moon {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .i-sun {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .i-sun {
    display: none;
  }
}

.menu-btn {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink);
}

.menu-btn svg {
  width: 1.35rem;
  height: 1.35rem;
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 45;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 1.5rem 1.25rem;
  display: grid;
  transform: translateY(-0.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mobile-nav[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav a {
  padding: 0.8rem 0;
  font-size: 1rem;
  border-bottom: 1px solid var(--line);
}

.mobile-nav .btn {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  /*
   * Atmosphere, not decoration: two low-opacity warm pools that lift the
   * headline off the paper and give the panel something to sit in. Kept far
   * below the level where they would read as a glow.
   */
  background:
    radial-gradient(
      58rem 38rem at 80% -12%,
      color-mix(in oklab, var(--accent) 8%, transparent),
      transparent 62%
    ),
    radial-gradient(
      44rem 30rem at 4% 0%,
      color-mix(in oklab, var(--accent) 4%, transparent),
      transparent 60%
    ),
    var(--bg);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--accent);
}

.hero__title {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 5.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.hero__title em {
  font-style: italic;
  color: var(--accent-text);
}

.hero__lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--body);
  max-width: 33rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__facts {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.hero__facts li {
  /* Shrinks with the viewport so the row never has to wrap. */
  font-size: clamp(0.75rem, 3.4vw, 0.875rem);
  white-space: nowrap;
  color: var(--muted);
}

/* A pipe between the figures, the way a rate card reads. */
.hero__facts li + li::before {
  content: "|";
  margin-inline: clamp(0.45rem, 2.6vw, 0.75rem);
  color: var(--line-strong);
}

.hero__facts b {
  font-size: clamp(0.8125rem, 3.7vw, 0.9375rem);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- product panel (shared) */

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgb(20 22 26 / 0.04),
    0 30px 60px -44px rgb(20 22 26 / 0.4);
  overflow: hidden;
}

.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
}

.panel__title {
  font-size: 0.8125rem;
  font-weight: 600;
}

.panel__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.panel__body {
  padding: 1.25rem;
}

.fig {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.fig__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fig__value {
  margin-top: 0.25rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.fig__delta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--up);
  white-space: nowrap;
}

.panel__chart {
  margin-top: 1.35rem;
}

.panel__chart svg {
  display: block;
  width: 100%;
  height: 7rem;
}

.mini-table {
  margin-top: 1rem;
  font-size: 0.8125rem;
}

.mini-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--line);
}

.mini-table td {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.mini-table tr:last-child td {
  border-bottom: none;
}

.mini-table .right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mini-table .name {
  font-weight: 600;
}

.mini-table .sub {
  color: var(--muted);
}

/* ---------------------------------------------------------------- ticker */

.ticker {
  position: relative;
  border-block: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  padding-block: 0.7rem;
}

.ticker__track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: marquee 60s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.tick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.tick__sym {
  font-weight: 600;
  color: var(--ink);
}

.tick__price {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tick__chg {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------------- feature grid */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

.feature {
  padding: 2rem 2rem 2rem 0;
  border-bottom: 1px solid var(--line);
}

.feature:not(:nth-child(3n)) {
  border-right: 1px solid var(--line);
  padding-right: 2rem;
}

.feature:not(:nth-child(3n + 1)) {
  padding-left: 2rem;
}

.feature__num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: 0.04em;
}

.feature h3 {
  font-size: 1.0625rem;
  margin-top: 0.75rem;
}

.feature p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--body);
}

/* ------------------------------------------------------------------ steps */

/* A numbered list, not a row of cards: hairline separators only. */
.steplist {
  counter-reset: step;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}

.steplist li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.steplist li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-text);
  padding-top: 0.15rem;
}

.steplist b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.steplist span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--body);
}

/* -------------------------------------------------------------- two-column */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--reverse .split__media {
  order: -1;
}

.split__copy .section-head {
  max-width: none;
}

/* --------------------------------------------------------------- markets */

.markets {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.market-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.market-row dt {
  font-size: 1.0625rem;
  font-weight: 600;
}

.market-row dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.instrument {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--body);
}

/* ------------------------------------------------------------- dark band */

.band {
  background: var(--band);
  color: var(--band-ink);
  border-radius: var(--r);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.band .eyebrow {
  color: var(--band-body);
}

.band h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--band-ink);
  margin-top: 0.75rem;
}

.band p {
  margin-top: 1rem;
  color: var(--band-body);
}

.band__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.band__list {
  border-top: 1px solid var(--band-line);
}

.band__list li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--band-line);
}

.band__list b {
  display: block;
  font-size: 0.9375rem;
  color: var(--band-ink);
}

.band__list span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--band-body);
}

/* -------------------------------------------------------------- security */

.security {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

.security > div {
  padding: 1.75rem 1.75rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.security > div:not(:last-child) {
  border-right: 1px solid var(--line);
  padding-right: 1.75rem;
}

.security > div + div {
  padding-left: 1.75rem;
}

.security svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-text);
}

.security h3 {
  font-size: 1rem;
  margin-top: 0.9rem;
}

.security p {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--body);
}

/* --------------------------------------------------------------------- FAQ */

.faq {
  max-width: 48rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}

.faq__q:hover {
  color: var(--accent-text);
}

.faq__q svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.faq__item[data-open="true"] .faq__q svg {
  transform: rotate(45deg);
  color: var(--accent-text);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}

.faq__item[data-open="true"] .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  padding-bottom: 1.25rem;
  max-width: 42rem;
  font-size: 0.9375rem;
  color: var(--body);
}

/* ------------------------------------------------------------------- CTA */

.cta {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-soft);
  padding: clamp(2rem, 4.5vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 2rem;
  align-items: center;
}

.cta h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.cta p {
  margin-top: 0.75rem;
  color: var(--body);
  max-width: 34rem;
}

.cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-block: clamp(3rem, 5vw, 4rem) 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.footer__brand p {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--body);
  max-width: 22rem;
}

.footer h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.footer__col a {
  display: block;
  padding-block: 0.35rem;
  font-size: 0.9375rem;
  color: var(--body);
  transition: color 0.15s ease;
}

.footer__col a:hover {
  color: var(--ink);
}

.footer__bottom {
  padding-top: 2rem;
  display: grid;
  gap: 1.5rem;
}

.risk {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 60rem;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer__legal a:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- reveal */

/*
 * Gated behind `.js`, a class the head script adds before the first paint, so
 * with JavaScript disabled nothing is ever hidden and no content can be
 * stranded at opacity 0 if main.js fails to load.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .nav {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
  }
  .features,
  .security {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature {
    padding: 1.75rem 1.75rem 1.75rem 0;
  }
  .feature:not(:nth-child(3n)) {
    border-right: none;
  }
  .feature:not(:nth-child(3n + 1)) {
    padding-left: 0;
  }
  .feature:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-right: 1.75rem;
  }
  .feature:nth-child(even) {
    padding-left: 1.75rem;
  }
  .security > div {
    padding: 1.5rem 1.5rem 1.5rem 0;
  }
  .security > div:not(:last-child) {
    border-right: none;
    padding-right: 1.5rem;
  }
  .security > div + div {
    padding-left: 0;
  }
  .security > div:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-right: 1.5rem;
  }
  .security > div:nth-child(even) {
    padding-left: 1.5rem;
  }
}

@media (max-width: 900px) {
  .hero__grid,
  .split,
  .band,
  .cta {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: 0;
  }
  .cta__row {
    justify-content: flex-start;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(var(--maxw), 100% - 2rem);
  }
  /* Keep the wordmark on one line: the short name plus the mark is the lockup
     the installed app already uses, and it leaves room for the call to action. */
  .header__inner {
    gap: 0.5rem;
  }
  .header__actions {
    gap: 0.25rem;
  }
  .logo__text span {
    display: none;
  }
  .features,
  .security {
    grid-template-columns: 1fr;
  }
  .feature,
  .feature:nth-child(odd),
  .feature:nth-child(even) {
    padding: 1.5rem 0;
    border-right: none;
  }
  .security > div,
  .security > div:nth-child(odd),
  .security > div:nth-child(even) {
    padding: 1.5rem 0;
    border-right: none;
  }
  .market-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .header__actions .btn--ghost {
    display: none;
  }
  .hero__facts {
    margin-top: 2rem;
  }
  /*
   * On a phone the hero is a single stack, so it reads better centred. Scoped
   * to the copy column: the product panel stays left-aligned, because a centred
   * ledger would look like a mistake.
   */
  .hero__copy {
    text-align: center;
  }
  .hero__lede {
    margin-inline: auto;
  }
  .hero__cta,
  .hero__facts {
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .btn__full {
    display: none;
  }
  .btn__short {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}