/* ==========================================================================
   SpareMe — landing design system

   Two hues and nothing else: the hero's violet night and an orange sun. The
   page never leaves the scene it opens on — the seam ramps through a sunset
   and settles back into the same violet, so every band below the fold is lit
   rather than bleached. One typeface throughout, so the hero wordmark stays
   exact.

   The ground-and-text tokens keep their original names (--paper is the page
   ground, --ink is the text on it) so the meaning survives the inversion.
   ========================================================================== */

:root {
  --font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Violet ground, darkest first */
  --paper: #150f31;
  --paper-2: #1c1441;
  --paper-3: rgba(166, 134, 255, 0.17);
  --card: #241a55;

  /* Text on that ground */
  --ink: #f4f0ff;
  --ink-2: #beb4e8;
  --ink-3: #8d83bd;

  /* The sun */
  --coral: #ff7a3c;
  --coral-deep: #ff9a5c;
  --coral-soft: rgba(255, 122, 60, 0.11);
  --coral-line: rgba(255, 122, 60, 0.34);

  /* Purple accents, for everything the orange should not carry */
  --violet: #8b5cf6;
  --violet-bright: #b39bff;
  --violet-line: rgba(139, 92, 246, 0.4);

  /* Hero scene */
  --night: #150f31;
  --night-deck: #241a52;
  --night-surface: #241b4d;
  --night-field: #33255f;
  --night-void: #0a0619;
  --night-ink: #f0ecff;
  --night-muted: #ada4d4;
  --night-line: rgba(173, 164, 212, 0.38);
  --coral-bright: #ff9a6b;

  --good: #6ee0ad;

  --max: 1140px;
  --gutter: 24px;

  --radius: 12px;
  --radius-lg: 22px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(4, 2, 14, 0.4), 0 6px 18px rgba(4, 2, 14, 0.32);
  --shadow: 0 18px 44px rgba(4, 2, 14, 0.5);
  --shadow-lift: 0 34px 80px rgba(4, 2, 14, 0.62);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  min-width: 320px;
  color-scheme: dark;
  background: var(--night);
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

/* Nothing moves until the scene is ready, so the page arrives in one piece. */
html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.038em;
}

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

::selection {
  background: rgba(255, 122, 60, 0.3);
}

@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;
  }
}

/* ------------------------------------------------------------ utilities -- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--coral);
  color: var(--night);
  font-weight: 600;
  transition: top 0.16s var(--ease);
}

.skip-link:focus-visible {
  top: 12px;
}

.accent {
  color: var(--coral-deep);
}

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.js-reveal .reveal.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================= preloader */

.preload {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--night);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

.preload[data-done="true"] {
  opacity: 0;
  visibility: hidden;
}

.preload-inner {
  display: grid;
  justify-items: center;
  gap: 26px;
}

.preload-mark {
  width: 52px;
  height: 52px;
  object-fit: contain;
  animation: bob 1.9s var(--ease) infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(-4px) rotate(-4deg);
  }
  50% {
    transform: translateY(4px) rotate(4deg);
  }
}

.preload-bar {
  width: 168px;
  height: 2px;
  overflow: hidden;
  border-radius: var(--pill);
  background: rgba(166, 168, 198, 0.22);
}

.preload-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--pill);
  background: var(--coral-bright);
  transition: width 0.35s var(--ease);
}

.preload-word {
  color: var(--night-muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================= hero scene */

.experience {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, var(--night-surface) 0, var(--night) 42%, var(--night-void) 100%),
    var(--night);
}

.experience::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 45%,
    transparent 42%,
    rgba(10, 6, 25, 0.28) 72%,
    rgba(6, 3, 18, 0.72) 115%
  );
}

.starfield {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.starfield span {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: var(--night-ink);
  box-shadow: 0 0 4px rgba(237, 236, 246, 0.52);
  animation: twinkle var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.16;
  }
  50% {
    opacity: 0.92;
  }
}

.hero-copy {
  position: absolute;
  z-index: 1;
  top: 28%;
  left: 50%;
  width: min(70vw, 1040px);
  transform: translateX(-50%);
  text-align: center;
}

.eyebrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.eyebrow span {
  height: 2px;
  background: var(--night-line);
}

.eyebrow p {
  color: var(--coral-bright);
  font-size: clamp(13px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-copy h1 {
  margin: 8px -12vw 0;
  color: var(--night-ink);
  font-size: clamp(76px, 15.1vw, 242px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.072em;
  white-space: nowrap;
  filter: drop-shadow(0 2px 1px rgba(18, 20, 42, 0.48));
}

.hero-copy h1 span {
  color: var(--coral-bright);
}

.moon-canvas,
.moon-fallback {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.moon-canvas {
  touch-action: pan-y;
  cursor: grab;
}

.moon-canvas:active {
  cursor: grabbing;
}

.moon-fallback {
  display: none;
  top: 47%;
  left: 50%;
  width: 118vw;
  height: 118vw;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 23% 31%, rgba(0, 0, 0, 0.55) 0 1.2%, transparent 1.4%),
    radial-gradient(circle at 61% 18%, rgba(0, 0, 0, 0.48) 0 2.4%, transparent 2.7%),
    radial-gradient(circle at 74% 39%, rgba(0, 0, 0, 0.5) 0 1.6%, transparent 1.9%),
    radial-gradient(circle at 38% 52%, rgba(0, 0, 0, 0.42) 0 3.2%, transparent 3.5%),
    radial-gradient(circle at 42% 24%, var(--night-field), var(--night-deck) 42%, var(--night) 73%);
  box-shadow:
    inset -22vw -14vw 24vw rgba(5, 6, 17, 0.88),
    inset 8vw 4vw 13vw rgba(237, 236, 246, 0.12);
}

.mission {
  position: absolute;
  z-index: 4;
  top: 56%;
  left: 50%;
  width: min(66vw, 1040px);
  min-width: 670px;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 1.7fr) 1fr;
  align-items: end;
  padding: 0 0 24px;
  border-bottom: 2px solid var(--night-line);
  transform: translateX(-50%);
}

.mission > p {
  color: var(--night-ink);
  font-size: clamp(13px, 1.18vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 8px var(--night);
}

.mission-meta {
  display: flex;
  flex-direction: column;
  color: var(--night-ink);
  text-shadow: 0 2px 7px var(--night);
}

.mission-meta small {
  color: var(--night-muted);
  font-family: var(--mono);
  font-size: 10px;
}

.mission-meta strong {
  font-size: clamp(14px, 1.2vw, 19px);
}

.mission-meta-right {
  align-items: flex-end;
}

/* ------------------------------------------------------ App Store button --

   The one thing the page is asking for, so it is the only filled orange on a
   violet ground anywhere above the fold. */

.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 0 28px 0 24px;
  border-radius: var(--pill);
  background: linear-gradient(135deg, #ffa863 0%, var(--coral) 52%, #f0553a 100%);
  color: #1a0d03;
  box-shadow:
    0 16px 42px rgba(255, 122, 60, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.btn-store:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 54px rgba(255, 122, 60, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-store:active {
  transform: translateY(0);
}

.btn-store svg {
  flex: none;
  /* The Apple mark reads a touch heavy next to the type at this size. */
  margin-top: -2px;
  opacity: 0.9;
}

.btn-store-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}

.btn-store-copy small {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.68;
}

.btn-store-copy strong {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.hero-cta {
  position: absolute;
  z-index: 12;
  bottom: clamp(84px, 14vh, 146px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 15px;
  width: min(560px, calc(100% - 40px));
  transform: translateX(-50%);
  text-align: center;
}

.hero-cta-meta {
  color: var(--night-muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px var(--night);
}

/* The pull downward: a labelled cue sitting on the seam. */
.scroll-cue {
  position: absolute;
  z-index: 12;
  bottom: 24px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(166, 168, 198, 0.75);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  transform: translateX(-50%);
  transition: color 0.2s var(--ease);
}

.scroll-cue:hover {
  color: var(--coral-bright);
}

.scroll-cue-line {
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(166, 168, 198, 0.28);
}

.scroll-cue-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 14px;
  background: var(--coral-bright);
  animation: trickle 1.9s var(--ease) infinite;
}

@keyframes trickle {
  0% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(34px);
  }
}

@media (max-width: 720px) {
  .mission {
    width: calc(100% - 40px);
    min-width: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    text-align: center;
  }

  .mission-meta {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .mission-meta-right {
    align-items: center;
  }

  .hero-copy {
    width: calc(100% - 32px);
  }

  .hero-copy h1 {
    margin-inline: 0;
  }
}

/* ======================================================= scroll progress */

/* Gives the page a visible end. Without it the pinned demo reads as endless. */
.progress {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  transition: width 0.08s linear;
}

/* ================================================================= topbar */

.topbar {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease),
    opacity 0.3s var(--ease);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.topbar[data-stuck="true"] {
  background: rgba(19, 13, 45, 0.82);
  border-bottom-color: var(--paper-3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.wordmark img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.wordmark span {
  color: var(--coral-deep);
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 26px;
}

.nav-link {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.18s var(--ease);
}

.nav-link:hover {
  color: var(--coral-deep);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 600;
  transition: background-color 0.18s var(--ease);
}

.btn-coral {
  min-height: 42px;
  padding: 0 18px 0 16px;
  border-radius: var(--pill);
  background: var(--coral);
  color: #1a0f05;
  font-size: 14px;
  box-shadow: 0 8px 22px rgba(255, 122, 60, 0.28);
}

.btn-coral:hover {
  background: #ff9155;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: all 0.3s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  translate: 0 7px;
  rotate: 45deg;
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  translate: 0 -7px;
  rotate: -45deg;
}

.nav-mobile {
  display: grid;
  gap: 2px;
  padding: 6px var(--gutter) 14px;
  border-top: 1px solid var(--paper-3);
  background: rgba(19, 13, 45, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav-mobile[data-open="false"] {
  display: none;
}

.nav-mobile .nav-link {
  padding: 12px 4px;
  font-size: 15px;
}

/* The one action in the sheet, so it does not read as a fifth section link. */
.nav-mobile .nav-cta {
  justify-self: start;
  margin: 10px 4px 6px;
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
  }

  .nav-toggle,
  .nav-mobile {
    display: none;
  }
}

/* ========================================================= the seam band */

/* Dissolves the navy scene into the paper page, then states the promise so
   the first thing below the fold is a reason to keep going. */
/* A sunset, not a sunrise.

   The old page used this band to hand the night over to a white document. It
   does not hand over any more: the ramp leaves the hero, burns through an
   orange horizon in the middle, and settles back onto the same violet the rest
   of the page is built from. The horizon is a radial rather than a stop in the
   linear ramp, so it reads as a light source behind the band and the copy
   underneath still lands on flat violet.

   The hero does not end on a flat colour: it is a radial that reaches
   --night-void at the edges while staying lighter in the middle, plus a
   vignette. So this band reproduces that same centre-light radial at its top
   edge and starts from --night-void, otherwise a hard line appears on the
   join. Many close stops plus a noise layer keep the ramp from banding. */
.seam {
  position: relative;
  isolation: isolate;
  padding-block: clamp(80px, 10vw, 128px) clamp(72px, 9vw, 112px);
  background:
    /* Measured against the hero's last row: it runs #0a0619 at the edges to
       #150f31 in the middle, so this reproduces exactly that before ramping. */
    radial-gradient(52% 60% at 50% 0%, rgb(21, 15, 49) 0%, rgb(21, 15, 49) 30%, rgba(21, 15, 49, 0) 100%),
    /* The horizon. */
    radial-gradient(
      118% 40% at 50% 54%,
      rgba(255, 150, 74, 0.62) 0%,
      rgba(226, 96, 74, 0.4) 34%,
      rgba(150, 62, 132, 0.22) 62%,
      rgba(150, 62, 132, 0) 84%
    ),
    linear-gradient(
      180deg,
      #0a0619 0%,
      #0d0821 8%,
      #130b2b 18%,
      #1b0f38 30%,
      #241443 42%,
      #2a1747 54%,
      #24143f 68%,
      #1c1038 80%,
      var(--paper) 94%
    );
  text-align: center;
}

/* Dither. Eight-bit gradients band badly across a ramp this long. */
.seam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

.seam-lede {
  max-width: 21ch;
  margin-inline: auto;
  color: #fff;
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1.06;
  text-wrap: balance;
}

.seam-lede em {
  display: block;
  font-style: normal;
  color: var(--coral-bright);
}

.seam-sub {
  max-width: 34rem;
  margin-inline: auto;
  margin-top: clamp(150px, 17vw, 230px);
  color: var(--ink-2);
  font-size: clamp(16px, 1.6vw, 19px);
  text-wrap: pretty;
}

/* ================================================= section furniture */

.band {
  position: relative;
  padding-block: clamp(72px, 9vw, 118px);
}

/* One orange light and one violet one behind alternating bands, thrown from
   opposite corners, so the page keeps the hero's lit feel instead of going
   flat the whole way down. */
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 52% at 82% 6%, rgba(255, 122, 60, 0.16), transparent 64%),
    radial-gradient(60% 55% at 6% 96%, rgba(139, 92, 246, 0.2), transparent 66%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.band > * {
  position: relative;
  z-index: 1;
}

.band-paper {
  background: var(--paper-2);
}

.band-paper::before {
  background:
    radial-gradient(62% 50% at 14% 4%, rgba(255, 122, 60, 0.14), transparent 62%),
    radial-gradient(58% 52% at 94% 92%, rgba(139, 92, 246, 0.22), transparent 64%);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.section-head-center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--coral-deep);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-head-center .eyebrow-tag {
  justify-content: center;
}

.eyebrow-tag::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--coral-deep);
}

.eyebrow-count {
  color: var(--ink-3);
}

.section-head-center .eyebrow-tag::before {
  display: none;
}

.section-head h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  letter-spacing: -0.044em;
  text-wrap: balance;
}

.section-head h2 + p {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.5vw, 19px);
  text-wrap: pretty;
}

/* =============================================================== marquee */

.marquee-band {
  padding-block: clamp(40px, 5vw, 62px) clamp(56px, 7vw, 80px);
}

.marquee-label {
  margin-bottom: 30px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.marquee + .marquee {
  margin-top: 16px;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed, 46s) linear infinite;
  will-change: transform;
}

.marquee-reverse .marquee-track {
  animation-direction: reverse;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Each group carries a trailing gap equal to the inner gap, so translating by
   exactly -50% lands group two where group one started. No seam. */
.marquee-group {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* The fourth mark in each repeated group is a bank, an unsupported destination
   category. Keep it out of the public scope examples. */
.marquee-group > .brand:nth-child(4) {
  display: none;
}

.brand svg {
  width: 23px;
  height: 23px;
  flex: none;
  color: var(--brand, var(--ink-3));
}

.chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 8px 18px;
  border: 1px solid var(--paper-3);
  border-radius: var(--pill);
  background: var(--card);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

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

.marquee-note {
  max-width: 46rem;
  margin-inline: auto;
  margin-top: 28px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

/* =============================================================== problem */

.problem {
  display: grid;
  gap: 26px;
  justify-items: center;
  padding: clamp(46px, 6vw, 72px) clamp(24px, 5vw, 68px);
  border-radius: var(--radius-lg);
  background: linear-gradient(122deg, #ff8f3f 0%, #f2694b 32%, #a03a86 68%, #5b2bb8 100%);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 168, 120, 0.22) inset;
  text-align: center;
}

.friction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 44rem;
}

.friction li {
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.problem h2 {
  max-width: 20ch;
  color: #fff;
  font-size: clamp(29px, 4.2vw, 48px);
  letter-spacing: -0.042em;
}

.problem p {
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(16px, 1.5vw, 19px);
  text-wrap: pretty;
}

/* ================================================== scroll-driven demo */

.demo {
  position: relative;
  padding-block: clamp(64px, 8vw, 96px) clamp(40px, 5vw, 72px);
  background: linear-gradient(
    180deg,
    var(--paper) 0,
    var(--paper-2) clamp(96px, 10vw, 148px),
    var(--paper-2) 100%
  );
}

/* How far through the call you are, so the pinned section has a visible end. */
.demo-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.demo-rail {
  display: flex;
  gap: 5px;
}

.demo-rail i {
  width: 18px;
  height: 3px;
  border-radius: var(--pill);
  background: var(--paper-3);
  transition: background-color 0.3s var(--ease);
}

.demo-rail i[data-on="true"] {
  background: var(--coral-deep);
}

/* Block rather than a one-column grid, and that is the whole fix for phones.

   A sticky grid item can only travel inside its own grid area. Stacked, the
   device gets a row of its own that is exactly as tall as the device, so its
   travel is zero and it scrolls away like anything else — the call never
   advanced on a phone. Two columns put the device and the copy in the same
   row, which is why the desktop layout always worked. In normal flow the
   containing block is the whole demo, so the device has the full run of the
   steps to stick to. */
.demo-grid {
  display: block;
}

/* The device pins while the steps scroll past, so scrolling drives the call.
   On one column the steps pass behind it, and the gradient tail is what they
   disappear into. */
.demo-stage {
  position: sticky;
  top: 72px;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding-bottom: 18px;
  background: linear-gradient(
    180deg,
    var(--paper-2) 72%,
    rgba(28, 20, 65, 0.88) 88%,
    rgba(28, 20, 65, 0)
  );
}

.demo-steps {
  display: grid;
}

.demo-step {
  display: grid;
  align-content: center;
  /* Short enough that a phone never shows a screen of nothing between the
     pinned device and the copy it belongs to. */
  min-height: 44vh;
  padding-block: 24px;
}

.demo-step-num {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  transition: color 0.3s var(--ease);
}

.demo-step-num::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}

.demo-step[data-on="true"] .demo-step-num {
  color: var(--coral-deep);
}

.demo-step[data-on="true"] .demo-step-num::before {
  width: 42px;
}

.demo-step h3 {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.038em;
  transition: color 0.3s var(--ease);
}

.demo-step[data-on="true"] h3 {
  color: var(--ink);
}

.demo-step p {
  max-width: 30rem;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: clamp(15px, 1.5vw, 17px);
  text-wrap: pretty;
  transition: color 0.3s var(--ease);
}

.demo-step[data-on="true"] p {
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }

  .demo-stage {
    top: 0;
    height: 100svh;
    align-content: center;
    padding-bottom: 0;
    background: none;
  }

  .demo-step {
    min-height: 58vh;
  }

  .device {
    width: min(286px, 74vw);
    max-width: none;
  }
}

@media (max-width: 899px) and (max-height: 720px) {
  .demo-stage {
    top: 64px;
    padding-bottom: 8px;
  }

  /* On a short phone the band below the device is worth more than the rail,
     and each step's own copy already names the step it is on. */
  .demo-count {
    display: none;
  }
}

/* Under about 600px of viewport there is no band left to pin against: the
   device would fill the screen and the copy would never be visible beside it.
   So it stops pinning and the demo becomes an ordinary scroll. */
@media (max-width: 899px) and (max-height: 600px) {
  .demo-stage {
    position: static;
    background: none;
  }
}

/* ---- the device ---- */

.device {
  position: relative;
  /* Pinned to the top of a phone the device has to leave a band of the
     viewport for the copy it illustrates — but the call stages are laid out in
     fixed type, and under about 250px wide they overflow the screen and clip.
     So the size is bounded from below as well as above. */
  width: min(268px, max(252px, 34svh));
  max-width: 76vw;
  padding: 10px;
  border: 1px solid rgba(179, 155, 255, 0.22);
  border-radius: 44px;
  background: linear-gradient(160deg, #3a2b73, #1c1440 46%, #100b28);
  box-shadow: var(--shadow-lift), 0 0 60px rgba(139, 92, 246, 0.2);
}

.device-screen {
  position: relative;
  aspect-ratio: 9 / 16.6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 35px;
  background: var(--night);
  color: var(--night-ink);
}

.device-screen::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 50%;
  width: 72px;
  height: 21px;
  border-radius: var(--pill);
  background: #07080f;
  transform: translateX(-50%);
}

.screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 21px 0;
  color: var(--night-muted);
  font-family: var(--mono);
  font-size: 9px;
}

.screen-head {
  padding: 20px 17px 11px;
  border-bottom: 1px solid rgba(166, 168, 198, 0.2);
}

.screen-head small {
  display: block;
  color: var(--coral-bright);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.screen-head strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.screen-body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.42s var(--ease),
    transform 0.42s var(--ease);
  pointer-events: none;
}

.stage[data-active="true"] {
  opacity: 1;
  transform: none;
}

.s-field {
  padding: 10px 12px;
  border: 1px solid rgba(166, 168, 198, 0.2);
  border-radius: 10px;
  background: var(--night-surface);
}

.s-field small {
  display: block;
  color: rgba(166, 168, 198, 0.62);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.s-field p {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.s-field-accent {
  border-color: rgba(255, 142, 112, 0.42);
  background: rgba(255, 142, 112, 0.1);
}

.caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--coral-bright);
  animation: blink 1.1s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.s-cta {
  margin-top: auto;
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: var(--pill);
  background: var(--coral-bright);
  color: var(--night);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.s-tree {
  display: grid;
  gap: 6px;
}

.s-tree li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(166, 168, 198, 0.2);
  border-radius: 9px;
  background: var(--night-surface);
  color: var(--night-muted);
  font-size: 11px;
}

.s-tree li b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: var(--night-field);
  color: var(--night-muted);
  font-size: 10px;
  font-weight: 700;
}

.s-tree li[data-picked] {
  border-color: rgba(255, 142, 112, 0.42);
  background: rgba(255, 142, 112, 0.1);
  color: var(--night-ink);
  font-weight: 500;
}

.s-tree li[data-picked] b {
  background: var(--coral-bright);
  color: var(--night);
}

.s-tree li em {
  margin-left: auto;
  color: var(--coral-bright);
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.s-hold {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.s-hold-time {
  font-size: 44px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
}

.s-hold-label {
  margin-top: 8px;
  color: rgba(166, 168, 198, 0.62);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  margin-top: 24px;
}

.wave i {
  width: 3px;
  height: 100%;
  border-radius: var(--pill);
  background: var(--coral-bright);
  transform-origin: center;
  animation: wave 1.25s ease-in-out infinite;
}

.wave i:nth-child(3n) {
  background: var(--coral);
}

.wave i:nth-child(1) { animation-delay: 0s; }
.wave i:nth-child(2) { animation-delay: 0.08s; }
.wave i:nth-child(3) { animation-delay: 0.16s; }
.wave i:nth-child(4) { animation-delay: 0.24s; }
.wave i:nth-child(5) { animation-delay: 0.32s; }
.wave i:nth-child(6) { animation-delay: 0.4s; }
.wave i:nth-child(7) { animation-delay: 0.48s; }
.wave i:nth-child(8) { animation-delay: 0.56s; }
.wave i:nth-child(9) { animation-delay: 0.64s; }
.wave i:nth-child(10) { animation-delay: 0.72s; }
.wave i:nth-child(11) { animation-delay: 0.8s; }
.wave i:nth-child(12) { animation-delay: 0.88s; }

@keyframes wave {
  0%,
  100% {
    transform: scaleY(0.18);
  }
  50% {
    transform: scaleY(1);
  }
}

.s-hold-note {
  margin-top: 22px;
  color: var(--night-muted);
  font-size: 11px;
  line-height: 1.5;
}

.s-line {
  display: grid;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(166, 168, 198, 0.16);
}

.s-line:last-of-type {
  border-bottom: 0;
}

.s-line b {
  color: rgba(166, 168, 198, 0.62);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.s-line p {
  font-size: 11.5px;
  line-height: 1.45;
}

.s-line[data-you] b,
.s-line[data-you] p {
  color: var(--coral-bright);
}

.s-controls {
  margin-top: auto;
  display: flex;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid rgba(166, 168, 198, 0.2);
}

.s-controls span {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 7px 0;
  border: 1px solid rgba(166, 168, 198, 0.2);
  border-radius: var(--pill);
  color: var(--night-muted);
  font-size: 9px;
  font-weight: 600;
}

.s-controls span:last-child {
  border-color: rgba(255, 142, 112, 0.42);
  background: rgba(255, 142, 112, 0.12);
  color: var(--coral-bright);
}

.s-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: rgba(108, 201, 160, 0.16);
  color: #6cc9a0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(166, 168, 198, 0.16);
}

.s-row:last-of-type {
  border-bottom: 0;
}

.s-row small {
  color: rgba(166, 168, 198, 0.62);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.s-row strong {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

/* ---- live control trio ---- */

.control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(56px, 7vw, 88px);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  background: var(--paper-3);
  overflow: hidden;
}

.control-grid > div {
  padding: 26px 24px;
  background: var(--card);
}

.control-grid h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  letter-spacing: -0.025em;
}

.control-grid h3 svg {
  flex: none;
  color: var(--coral-deep);
}

.control-grid p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14.5px;
  text-wrap: pretty;
}

@media (min-width: 820px) {
  .control-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =============================================================== pricing */

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.price {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  background: var(--card);
}

.price-featured {
  border-color: var(--coral-line);
  background: linear-gradient(165deg, #2e1f63, var(--card) 58%);
  box-shadow: var(--shadow), 0 0 46px rgba(255, 122, 60, 0.1);
}

.price-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.price-badge {
  padding: 2px 9px;
  border-radius: var(--pill);
  background: var(--coral);
  color: #1a0f05;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.price-amount {
  margin-top: 16px;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.price-unit {
  margin-top: 8px;
  color: var(--coral-deep);
  font-size: 14px;
  font-weight: 600;
}

.price p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 14.5px;
  text-wrap: pretty;
}

.price-foot {
  max-width: 44rem;
  margin-inline: auto;
  margin-top: 28px;
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}

@media (min-width: 820px) {
  .price-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================ guardrails */

/* Alternate the violet grounds without cutting the page into rectangular
   bands. Each section owns both of its boundary colours, so the last rendered
   pixel of one section always matches the first pixel of the next. */
#pricing {
  background: var(--paper-2);
}

#guardrails {
  background: linear-gradient(
    180deg,
    var(--paper-2) 0,
    var(--paper) clamp(96px, 10vw, 148px),
    var(--paper) calc(100% - clamp(96px, 10vw, 148px)),
    var(--paper-2) 100%
  );
}

.guard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  background: var(--paper-3);
  overflow: hidden;
}

.guard {
  padding: 26px 24px;
  background: var(--paper);
}

.guard h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.guard h3 svg {
  flex: none;
  color: var(--coral-deep);
}

.guard p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14.5px;
  text-wrap: pretty;
}

@media (min-width: 660px) {
  .guard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .guard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =================================================================== FAQ */

#faq {
  background: linear-gradient(
    180deg,
    var(--paper-2) 0,
    var(--paper-2) calc(100% - clamp(96px, 10vw, 148px)),
    var(--paper) 100%
  );
}

.faq-list {
  max-width: 50rem;
  margin-inline: auto;
  border-top: 1px solid var(--paper-3);
}

.faq-list details {
  border-bottom: 1px solid var(--paper-3);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  letter-spacing: -0.025em;
  transition: color 0.18s var(--ease);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary:hover {
  color: var(--coral-deep);
}

.faq-chevron {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: rotate 0.24s var(--ease);
}

.faq-list details[open] .faq-chevron {
  rotate: 180deg;
  color: var(--coral-deep);
}

.faq-answer {
  max-width: 44rem;
  padding: 0 4px 24px;
  color: var(--ink-2);
  font-size: 15.5px;
  text-wrap: pretty;
}

.faq-list details[open] .faq-answer {
  animation: fade 0.3s var(--ease);
}

.faq-answer a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* =============================================================== end CTA */

#join {
  background: linear-gradient(
    180deg,
    var(--paper) 0,
    var(--paper) calc(100% - clamp(120px, 12vw, 176px)),
    #100a26 100%
  );
}

.endcta-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 68px);
  border-radius: var(--radius-lg);
  background: linear-gradient(118deg, #ff8f3f 0%, #ef6146 30%, #97328c 66%, #4f22b0 100%);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 168, 120, 0.22) inset;
  overflow: hidden;
}

.endcta-copy h2 {
  max-width: 16ch;
  color: #fff;
  font-size: clamp(28px, 3.3vw, 40px);
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.endcta-copy > p {
  max-width: 34rem;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(15px, 1.4vw, 17px);
  text-wrap: pretty;
}

.endcta-actions {
  display: grid;
  justify-items: start;
  gap: 16px;
  margin-top: 28px;
}

/* The card is already orange, so here the button inverts to hold its edge. */
.endcta .btn-store {
  background: #fff;
  color: #1b1042;
  box-shadow: 0 16px 40px rgba(9, 4, 28, 0.34);
}

.endcta .btn-store:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 52px rgba(9, 4, 28, 0.42);
}

.endcta-meta {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.endcta-art {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(18, 20, 42, 0.3);
}

.endcta-art .s-row {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.endcta-art .s-row small {
  color: rgba(255, 255, 255, 0.62);
}

.endcta-art .s-row strong {
  color: #fff;
  font-size: 13px;
}

.endcta-art .s-row .ok {
  color: #a8ecc9;
}

@media (min-width: 900px) {
  .endcta-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* ================================================================ footer */

.site-footer-full {
  padding-block: clamp(52px, 6vw, 76px) 40px;
  background: #100a26;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.footer-blurb {
  max-width: 24rem;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 14.5px;
}

.footer-mail {
  display: inline-block;
  margin-top: 16px;
  color: var(--coral-deep);
  font-size: 14px;
}

.footer-col p {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.footer-col a {
  color: var(--ink-2);
  font-size: 14.5px;
  transition: color 0.18s var(--ease);
}

.footer-col a:hover {
  color: var(--coral-deep);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--paper-3);
  color: var(--ink-3);
  font-size: 13px;
}

@media (min-width: 820px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
  }
}