@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #0a1730;
  --navy: #071327;
  --navy-2: #10243c;
  --parchment: #f3eddf;
  --ivory: #fbf8f0;
  --brass: #b99455;
  --brass-light: #dcc28a;
  --brass-deep: #866632;
  --line-dark: rgba(10, 23, 48, 0.18);
  --line-light: rgba(243, 237, 223, 0.22);
  --success: #54745e;
  --page-gutter: clamp(20px, 4.5vw, 72px);
  --content-max: 1280px;
  --hero-progress: 0;
  --drift: 56px;
  --display: "Fraunces", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

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

html {
  scroll-behavior: smooth;
  background: var(--navy);
  scrollbar-color: var(--brass) var(--navy);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 4px;
}

.container {
  width: min(100%, calc(var(--content-max) + var(--page-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  color: var(--navy);
  background: var(--ivory);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  color: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.site-header.is-scrolled {
  background: rgba(7, 19, 39, 0.93);
  border-color: var(--line-light);
  box-shadow: 0 8px 36px rgba(2, 9, 19, 0.12);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  gap: 28px;
}

.brand { display: block; flex: 0 0 auto; width: clamp(132px, 12vw, 174px); }
/* Header/footer wordmark asset is pre-tinted ivory with the yellow mark kept. */
.brand img { width: 100%; height: auto; }

.desktop-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: clamp(20px, 2.4vw, 38px);
}

.desktop-nav a {
  position: relative;
  padding: 8px 0;
  color: rgba(251, 248, 240, 0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 1px;
  background: var(--brass-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.button {
  display: inline-flex;
  border-radius: 8px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 13px 22px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.button:hover { transform: translateY(-2px); }
.closing__note { margin: 18px 0 0; color: rgba(251,248,240,.62); font-size: 13px; }
.button--small { min-height: 42px; padding: 10px 17px; font-size: 12px; }
.button--light { color: var(--navy); background: var(--ivory); }
.button--light:hover { background: var(--brass-light); }
.button--brass {
  color: #1d1405;
  background: linear-gradient(180deg, #eedcab 0%, #d9ba79 55%, #c6a25c 100%);
  border-color: rgba(122, 90, 42, .65);
  border-radius: 8px;
  min-height: 56px;
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 12px 32px rgba(185, 148, 85, .28), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 88, 40, .28);
}
.button--brass:hover {
  background: linear-gradient(180deg, #f6e6ba 0%, #e3c78a 55%, #d0ad67 100%);
  box-shadow: 0 16px 40px rgba(185, 148, 85, .4), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 88, 40, .28);
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 12px 9px;
  border: 1px solid var(--line-light);
  color: currentColor;
  background: transparent;
  cursor: pointer;
}

.menu-button span { display: block; width: 22px; height: 1px; margin: 3px 0; background: currentColor; }

.mobile-menu {
  width: min(100% - 20px, 460px);
  max-height: calc(100dvh - 20px);
  margin: 10px 10px 10px auto;
  padding: 24px;
  color: var(--ivory);
  background: var(--navy);
  border: 1px solid var(--line-light);
  box-shadow: -20px 0 80px rgba(0,0,0,.28);
}

.mobile-menu::backdrop { background: rgba(4, 11, 24, 0.68); backdrop-filter: blur(4px); }
.mobile-menu[open] { animation: menu-in 250ms ease-out both; }
@keyframes menu-in { from { opacity: 0; transform: translateX(20px); } }

.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--line-light); }
.mobile-menu__title { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.menu-close { position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-light); background: transparent; color: var(--ivory); cursor: pointer; }
.menu-close span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; margin-left: -10px; background: currentColor; transform: rotate(45deg); }
.menu-close span + span { transform: rotate(-45deg); }
.mobile-menu__nav { display: grid; margin: 18px 0 28px; }
.mobile-menu__nav a { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line-light); font: 400 clamp(25px, 8vw, 35px)/1.15 var(--display); }
.mobile-menu__nav a span { color: var(--brass-light); font: 400 16px/1 var(--sans); }
.mobile-menu__cta { width: 100%; }
.mobile-menu__note { max-width: 32ch; margin: 22px 0 0; color: rgba(251,248,240,.66); font-size: 12px; line-height: 1.6; }

/* The hero is a tall scroll region; the pinned frame inside stays fixed while
   scroll drives the whole night-to-dawn arc, then releases into the page. */
.hero {
  position: relative;
  height: 250vh;
  height: 250svh;
  background: var(--navy);
}

.hero-pin {
  position: sticky;
  top: 0;
  height: max(760px, min(1000px, 100vh));
  height: max(760px, min(1000px, 100svh));
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  color: var(--ivory);
  background: var(--navy);
}

.hero-scene, .hero-base, .hero-vignette { position: absolute; inset: 0; }
.hero-scene { z-index: -1; overflow: hidden; }
.hero-base img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }

/* Night-to-dawn: the page loads at night; scrolling lifts the sun from below
   the horizon (the wrap clips everything under the waterline), burns off the
   night grade and stars, and wakes the sea reflection. */
.hero-sun-wrap {
  position: absolute;
  z-index: 1;
  inset: 0 0 41.5% 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-sun {
  position: absolute;
  left: 88%;
  bottom: 0;
  width: clamp(90px, 10vw, 154px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, #fff9d6 0 8%, #f8dc9b 48%, #d89b58 74%, rgba(203,131,62,.1) 75%);
  box-shadow: 0 0 34px rgba(247,204,129,.3), 0 0 90px rgba(220,151,70,.28);
  transform: translate3d(-50%, calc(145% - var(--hero-progress) * 430%), 0);
}

.hero-sun-glow {
  position: absolute;
  left: 88%;
  bottom: 0;
  width: clamp(300px, 38vw, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: calc(.12 + var(--hero-progress) * .5);
  background: radial-gradient(circle, rgba(255,220,156,.3), rgba(221,151,79,.1) 38%, transparent 70%);
  mix-blend-mode: screen;
  transform: translate3d(-50%, calc(32% - var(--hero-progress) * 120%), 0);
}

.hero-sun-reflection {
  position: absolute;
  z-index: 1;
  top: 58.5%;
  left: 88%;
  width: clamp(70px, 8vw, 120px);
  height: 32%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,215,145,.45), rgba(255,200,120,.12) 55%, transparent 85%);
  mix-blend-mode: screen;
  opacity: calc(var(--hero-progress) * .8);
  filter: blur(10px);
}

.hero-night {
  position: absolute;
  z-index: 6;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,10,26,.88), rgba(6,14,30,.7) 55%, rgba(3,9,22,.5));
  mix-blend-mode: multiply;
  opacity: calc(1 - var(--hero-progress) * 1.35);
  pointer-events: none;
}

.hero-stars {
  position: absolute;
  z-index: 7;
  inset: 0 0 48% 0;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 22%, rgba(255,252,240,.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 16% 58%, rgba(240,244,255,.7), transparent 55%),
    radial-gradient(1.8px 1.8px at 23% 14%, rgba(255,250,235,.85), transparent 55%),
    radial-gradient(1.1px 1.1px at 31% 42%, rgba(235,240,255,.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 38% 8%, rgba(255,252,244,.8), transparent 55%),
    radial-gradient(1.2px 1.2px at 46% 30%, rgba(240,244,255,.65), transparent 55%),
    radial-gradient(1.7px 1.7px at 54% 65%, rgba(255,250,238,.75), transparent 55%),
    radial-gradient(1.1px 1.1px at 61% 18%, rgba(238,242,255,.6), transparent 55%),
    radial-gradient(1.4px 1.4px at 69% 48%, rgba(255,252,242,.8), transparent 55%),
    radial-gradient(1.2px 1.2px at 76% 10%, rgba(240,246,255,.65), transparent 55%),
    radial-gradient(1.9px 1.9px at 84% 36%, rgba(255,250,236,.9), transparent 55%),
    radial-gradient(1.1px 1.1px at 91% 62%, rgba(238,242,255,.6), transparent 55%),
    radial-gradient(1.3px 1.3px at 96% 24%, rgba(255,252,240,.7), transparent 55%);
  opacity: calc(.95 - var(--hero-progress) * 1.55);
  pointer-events: none;
}

.hero-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2.2px 2.2px at 12% 36%, rgba(255,252,240,.95), transparent 55%),
    radial-gradient(1.4px 1.4px at 20% 12%, rgba(240,244,255,.8), transparent 55%),
    radial-gradient(2px 2px at 29% 52%, rgba(255,250,235,.85), transparent 55%),
    radial-gradient(1.3px 1.3px at 41% 20%, rgba(238,242,255,.7), transparent 55%),
    radial-gradient(2.4px 2.4px at 50% 44%, rgba(255,252,244,.9), transparent 55%),
    radial-gradient(1.4px 1.4px at 58% 8%, rgba(240,244,255,.75), transparent 55%),
    radial-gradient(2px 2px at 66% 30%, rgba(255,250,238,.85), transparent 55%),
    radial-gradient(1.5px 1.5px at 73% 58%, rgba(238,242,255,.7), transparent 55%),
    radial-gradient(2.2px 2.2px at 80% 16%, rgba(255,252,242,.9), transparent 55%),
    radial-gradient(1.4px 1.4px at 88% 46%, rgba(240,246,255,.7), transparent 55%),
    radial-gradient(1.8px 1.8px at 95% 8%, rgba(255,250,236,.85), transparent 55%),
    radial-gradient(1.3px 1.3px at 5% 60%, rgba(238,242,255,.65), transparent 55%);
  animation: star-twinkle 5.5s ease-in-out infinite alternate;
}

@keyframes star-twinkle { from { opacity: .35; } to { opacity: 1; } }

.hero-sea-glint {
  position: absolute;
  z-index: 4;
  top: 58.5%;
  bottom: 0;
  left: -2%;
  right: -2%;
  overflow: hidden;
  opacity: calc(.4 + var(--hero-progress) * .35);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 80%, transparent);
  pointer-events: none;
}

.hero-sea-glint::before, .hero-sea-glint::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 200%;
  background: repeating-linear-gradient(176deg, transparent 0 24px, rgba(226,232,240,.05) 24px 26px, transparent 26px 59px);
  animation: glint-drift 24s ease-in-out infinite alternate;
}

.hero-sea-glint::after {
  background: repeating-linear-gradient(184deg, transparent 0 41px, rgba(255,236,200,.045) 41px 43px, transparent 43px 96px);
  animation-duration: 33s;
  animation-direction: alternate-reverse;
}

@keyframes glint-drift { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(0%, 0, 0); } }

.hero-caustics {
  position: absolute;
  z-index: 2;
  left: 26%;
  bottom: -20%;
  width: 76%;
  opacity: calc(.08 + var(--hero-progress) * .14);
  mix-blend-mode: screen;
  animation: caustic-drift 16s ease-in-out infinite alternate;
}

.hero-caustics img, .vessel-layer img { width: 100%; height: 100%; object-fit: contain; }

.vessel-stack {
  position: absolute;
  z-index: 5;
  left: 37%;
  top: 21.5%;
  width: min(63.5vw, 915px);
  aspect-ratio: 1586 / 992;
  transform-origin: 52% 64%;
  animation: vessel-drift 9s ease-in-out infinite;
}

/* Boat hidden in the dark, then surfaces early (5%–30% scroll) so it's visible
   for most of its left-to-right voyage as the sun rises.
   Scoped to has-js so no-JS visitors (progress stuck at 0) still see the boat. */
html.has-js .vessel-stack { opacity: clamp(0, (var(--hero-progress) - .05) / .25, 1); }

.vessel-layer { position: absolute; inset: 0; }
.vessel-wake { z-index: 1; opacity: .82; }
.vessel-wake img { animation: wake-drift 13s ease-in-out infinite alternate; }
@keyframes wake-drift { from { transform: translate3d(-4px, 0, 0); } to { transform: translate3d(4px, 0, 0); } }
.vessel-base { z-index: 2; }
.vessel-highlight { z-index: 3; opacity: calc(var(--hero-progress) * .78); mix-blend-mode: screen; }
.vessel-shimmer { z-index: 4; opacity: .5; mix-blend-mode: screen; animation: constellation 4.2s ease-in-out infinite alternate; }

.crew-glows { position: absolute; inset: 0; z-index: 5; opacity: calc(.55 + (1 - var(--hero-progress)) * .45); pointer-events: none; }
.crew-glow {
  position: absolute;
  width: 2.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .45;
  background: radial-gradient(circle, rgba(255,226,168,.9) 0 18%, rgba(255,196,110,.32) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: crew-pulse 4.6s ease-in-out infinite;
}
.crew-glow--1 { left: 36.4%; top: 74.4%; }
.crew-glow--2 { left: 48.5%; top: 79.2%; animation-delay: -1.6s; animation-duration: 5.4s; }
.crew-glow--3 { left: 60.2%; top: 82.2%; animation-delay: -3s; animation-duration: 4.1s; }
@keyframes crew-pulse { 0%, 100% { opacity: .22; transform: scale(.88); } 50% { opacity: .85; transform: scale(1.1); } }

.hero-vignette {
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(4,12,28,.86) 0%, rgba(5,16,35,.46) 34%, rgba(5,15,31,.04) 62%),
    linear-gradient(0deg, rgba(5,13,28,.66) 0%, transparent 27%, rgba(3,10,22,.22) 100%),
    radial-gradient(circle at 68% 46%, transparent 0 30%, rgba(4,11,24,.18) 78%);
  pointer-events: none;
}

@keyframes vessel-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.18deg); } 50% { transform: translate3d(0, -5px, 0) rotate(.18deg); } }
@keyframes constellation { 0% { opacity: .36; } 100% { opacity: .9; } }
@keyframes caustic-drift { from { transform: translate3d(-4px, 0, 0); } to { transform: translate3d(5px, -6px, 0); } }

.hero:not(.is-visible) .vessel-stack,
.hero:not(.is-visible) .vessel-shimmer,
.hero:not(.is-visible) .hero-caustics,
.hero:not(.is-visible) .hero-stars::after,
.hero:not(.is-visible) .crew-glow,
.hero:not(.is-visible) .vessel-wake img,
.hero:not(.is-visible) .hero-sea-glint::before,
.hero:not(.is-visible) .hero-sea-glint::after { animation-play-state: paused; }

.hero__inner { position: relative; z-index: 10; height: 100%; display: flex; align-items: center; }
.hero-copy { width: min(45%, 555px); margin-top: 28px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 25px;
  color: rgba(10,23,48,.64);
  font: 500 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.eyebrow > span { width: 28px; height: 1px; background: var(--brass); }
.eyebrow--light { color: rgba(251,248,240,.65); }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 380; letter-spacing: -.045em; }
h1 { max-width: 11ch; font-size: clamp(62px, 6.4vw, 96px); line-height: .94; text-wrap: balance; }
h1 em, h2 em { color: var(--brass-light); font-weight: 320; }
h2 em { color: var(--brass-deep); }

.hero-copy__body { max-width: 51ch; margin: 32px 0 0; color: rgba(251,248,240,.76); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; }
.hero-copy__actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.text-link { display: inline-flex; align-items: center; gap: 15px; padding: 11px 0; font-size: 12px; font-weight: 600; }
.text-link--light { color: rgba(251,248,240,.78); }
.text-link span { color: var(--brass-light); }

.hero-marker { position: absolute; right: var(--page-gutter); top: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(251,248,240,.5); font: 500 9px/1 var(--mono); }
.hero-marker__line { width: 1px; height: 78px; background: linear-gradient(var(--brass-light) calc(var(--hero-progress) * 100%), var(--line-light) 0); }

.product-section { position: relative; padding: clamp(110px, 11vw, 170px) 0; overflow: hidden; overflow: clip; }
.accounts, .controls { background: var(--ivory); }
.accounts::before, .benefits::before, .controls::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .025;
  background-image:
    repeating-linear-gradient(7deg, rgba(7,19,39,.9) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(97deg, rgba(7,19,39,.55) 0 1px, transparent 1px 7px);
  background-size: 5px 7px, 7px 9px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.accounts > .container, .benefits > .container, .controls > .container { position: relative; z-index: 1; }
.section-index { display: flex; gap: 18px; align-items: center; margin-bottom: clamp(70px, 7vw, 104px); color: rgba(10,23,48,.62); font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.section-index::after { content: ""; height: 1px; flex: 1; background: var(--line-dark); }
.section-index span:first-child { color: var(--brass-deep); }
.section-index--light { color: rgba(251,248,240,.6); }
.section-index--light span:first-child { color: var(--brass-light); }
.section-index--light::after { background: var(--line-light); }

.split-layout { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); align-items: center; gap: clamp(64px, 8vw, 128px); }
.section-copy h2, .benefits__header h2, .integrations__header h2, .closing h2 { max-width: 11ch; font-size: clamp(52px, 5vw, 76px); line-height: 1.02; text-wrap: balance; }
.section-copy__lead { max-width: 52ch; margin: 28px 0 0; color: rgba(10,23,48,.66); font-size: 16px; line-height: 1.75; }
.section-copy__refrain { position: relative; max-width: 44ch; margin: 20px 0 0; font: 400 clamp(19px, 1.9vw, 23px)/1.45 var(--display); letter-spacing: -.015em; color: var(--ink); }
.section-copy__refrain em { color: var(--brass-deep); }
.section-copy--light .section-copy__refrain { color: var(--ivory); }
.section-copy--light .section-copy__refrain em { color: var(--brass-light); }
.integrations__header .section-copy__refrain { max-width: 39ch; margin-bottom: 8px; color: var(--ivory); }
.integrations__header .section-copy__refrain em { color: var(--brass-light); }
.section-copy--light { color: var(--ivory); }
.section-copy--light h2 em { color: var(--brass-light); }
.section-copy--light .section-copy__lead { color: rgba(251,248,240,.65); }

.ledger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3.5vw, 52px); margin-top: clamp(64px, 7vw, 110px); }
.ledger-grid article { border-top: 1px solid var(--line-dark); padding-top: 24px; }
.ledger-grid h3 { margin: 0 0 10px; font: 400 clamp(19px, 1.8vw, 23px)/1.25 var(--display); letter-spacing: -.02em; }
.ledger-grid p { margin: 0; max-width: 46ch; color: rgba(10,23,48,.66); font-size: 14px; line-height: 1.75; }

.ledger-glyph { display: block; width: 72px; height: 72px; margin-bottom: 18px; filter: drop-shadow(0 6px 14px rgba(90,60,20,.25)); transition: transform 320ms cubic-bezier(.2,.9,.25,1.3), filter 260ms ease; }
.ledger-glyph img { width: 100%; height: 100%; display: block; }
.ledger-grid article:hover .ledger-glyph { transform: translateY(-4px) rotate(-6deg); filter: drop-shadow(0 10px 20px rgba(90,60,20,.35)); }

/* Ledger-voyage video runs inside an engraved navy frame; the frame PNG has a
   transparent window (insets measured from the artwork) so no edge-hiding needed. */
.ledger-stage { position: relative; display: block; transform: scale(var(--stage-scale, 1)); }
.art-stage--ledger { --stage-scale: 1.03; }
.ledger-frame__art { position: relative; z-index: 2; display: block; pointer-events: none; }
.ledger-frame__art img { width: 100%; height: auto; display: block; }
.ledger-video { position: absolute; z-index: 1; left: 13.2%; top: 22%; width: 74.4%; height: 57.5%; object-fit: cover; object-position: 50% 60%; }

.feature-list { padding: 0; margin: 42px 0 0; list-style: none; border-top: 1px solid var(--line-dark); }
.feature-list li { display: flex; align-items: center; min-height: 49px; padding: 10px 0; border-bottom: 1px solid var(--line-dark); color: rgba(10,23,48,.78); font-size: 13px; }
.feature-list li { transition: transform 320ms cubic-bezier(.2, .9, .25, 1.3), color 220ms ease; }
.feature-list li:hover { transform: translateX(6px); color: var(--ink); }
.feature-list li::before { content: ""; width: 14px; height: 1px; flex: none; margin-right: 16px; background: var(--brass); opacity: .55; transform-origin: left; transition: transform 320ms cubic-bezier(.2, .9, .25, 1.3), opacity 220ms ease; }
.feature-list li:hover::before { transform: scaleX(1.7); opacity: .95; }

.art-stage { position: relative; margin: 0; }
.art-stage picture, .art-stage img { width: 100%; height: auto; }
.art-stage picture { display: block; transform: scale(var(--stage-scale, 1)); }
.art-stage figcaption { display: flex; justify-content: space-between; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line-dark); color: rgba(10,23,48,.6); font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.art-stage--atlas { max-width: min(100%, 620px); margin-inline: auto; }
.art-stage--atlas img { mix-blend-mode: multiply; }
.atlas-stage {
  position: relative;
  display: block;
  transform: scale(var(--stage-scale, 1));
}
.art-stage--atlas picture { transform: none; }
.atlas-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* The chart's own bezel ring, cut from a duplicate of the artwork and slowly
   rotated about the chart center. Real rotational mechanics, zero new pixels. */
.atlas-rotor {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: slow-spin 150s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 38% 38% at 50% 50%, transparent 0 87.5%, #000 90% 99%, transparent 100%);
  mask-image: radial-gradient(ellipse 38% 38% at 50% 50%, transparent 0 87.5%, #000 90% 99%, transparent 100%);
}
.atlas-rotor img { width: 100%; height: auto; display: block; }

.atlas-orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: slow-spin 76s linear infinite reverse;
}
.atlas-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: atlas-ring 4.2s ease-out infinite; }
.atlas-ring--mid { animation-delay: 1.3s; }
.atlas-ring--late { animation-delay: 2.6s; }
@keyframes atlas-ring { 0% { transform: scale(.55); opacity: .7; } 70% { opacity: .15; } 100% { transform: scale(1.65); opacity: 0; } }
.art-stage--atlas:not(.is-visible) .atlas-overlay * { animation-play-state: paused; }
.art-stage--atlas { --stage-scale: 1.06; }

.cards { color: var(--ivory); background: var(--navy); }
.cards::before { content: ""; position: absolute; inset: 0; opacity: .6; background: radial-gradient(circle at 76% 48%, rgba(185,148,85,.12), transparent 32%), linear-gradient(130deg, transparent 62%, rgba(255,255,255,.018)); pointer-events: none; }
.cards-layout { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: center; gap: clamp(50px, 7vw, 110px); }
.art-stage--cards {
  --card-width: clamp(150px, 17.4vw, 250px);
  --fan-offset: clamp(74px, 10vw, 128px);
  min-width: 0;
  height: clamp(390px, 38vw, 540px);
  perspective: 1100px;
}
.card-fan { position: absolute; inset: 0; }
.payment-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-width);
  aspect-ratio: 5 / 8;
  transform-origin: 50% 82%;
  will-change: transform;
}
.payment-card--left {
  z-index: 1;
  transform: translate3d(calc(-50% - var(--fan-offset) - var(--sp, .5) * 16px), calc(-50% + 34px + var(--sp, .5) * 6px), 0) rotate(calc(-6.2deg - var(--sp, .5) * 3.8deg)) scale(.94);
}
.payment-card--center { z-index: 3; transform: translate3d(-50%, -50%, 0) scale(1.025); }
.payment-card--right .payment-card__holder { left: auto; right: 18px; text-align: right; }
.payment-card--right {
  z-index: 2;
  transform: translate3d(calc(-50% + var(--fan-offset) + var(--sp, .5) * 16px), calc(-50% + 34px + var(--sp, .5) * 6px), 0) rotate(calc(6.2deg + var(--sp, .5) * 3.8deg)) scale(.94);
}
.payment-card__face {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(220,194,138,.72);
  border-radius: 14px;
  color: var(--ivory);
  background:
    radial-gradient(circle at 74% 20%, rgba(220,194,138,.095), transparent 34%),
    radial-gradient(circle at 20% 84%, rgba(255,255,255,.035), transparent 38%),
    linear-gradient(145deg, #0b1930 0%, #061121 56%, #0a182c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 -1px 0 rgba(0,0,0,.35);
  transition: transform 320ms cubic-bezier(.22,.7,.2,1);
}
.payment-card__face::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background:
    repeating-linear-gradient(117deg, transparent 0 6px, rgba(255,255,255,.028) 6px 7px, transparent 7px 13px),
    repeating-linear-gradient(23deg, rgba(185,148,85,.035) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.payment-card__face::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 12px;
  pointer-events: none;
}
.payment-card--center .payment-card__face { box-shadow: 0 30px 65px rgba(0,0,0,.42), 0 8px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05); }
.payment-card__wordmark { position: absolute; z-index: 2; top: 6.5%; left: 8%; font: 600 clamp(11px, 1vw, 14px)/1 var(--sans); letter-spacing: -.025em; }
.payment-card__type { position: absolute; z-index: 2; top: 13.5%; right: 8%; padding: 5px 9px; border: 1px solid rgba(220,194,138,.5); border-radius: 999px; color: var(--brass-light); font: 500 clamp(6px, .55vw, 8px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.payment-card--left .payment-card__type { right: auto; left: 8%; top: 15%; }
.payment-card__datum { position: absolute; z-index: 2; top: 7%; right: 8%; color: rgba(220,194,138,.68); font: 500 clamp(6px, .55vw, 8px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.payment-card__compass {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: 68%;
  aspect-ratio: 1;
  fill: none;
  stroke: var(--brass-light);
  stroke-width: .72;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .25;
  transform: translate(-50%,-50%);
}
.payment-card__compass circle:first-child { stroke-dasharray: 1.5 5; }
.payment-card__compass circle:last-child { fill: var(--brass-light); stroke: none; }
.payment-card__holder { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 7%; display: grid; gap: 6px; }
.payment-card__holder strong { overflow: hidden; color: rgba(251,248,240,.94); font: 500 clamp(9px, .9vw, 13px)/1.2 var(--sans); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.payment-card__holder small { color: var(--brass-light); font: 500 clamp(6px, .64vw, 9px)/1 var(--mono); letter-spacing: .17em; text-transform: uppercase; }

@media (hover: hover) and (pointer: fine) {
  .payment-card:hover .payment-card__face { transform: translate3d(0,-7px,0); }
}

.credential-key { margin-top: 38px; border-top: 1px solid var(--line-light); }
.credential-key > div { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line-light); }
.credential-key__mark { display: grid; width: 34px; aspect-ratio: 1; flex: none; place-items: center; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass-light); font: 500 10px/1 var(--mono); }
.credential-key__mark--agent { border-radius: 2px; transform: rotate(45deg); }
.credential-key__mark--agent b { display: block; font-weight: 500; transform: rotate(-45deg); }
.credential-key__mark--agent + p { margin-left: 2px; }
.credential-key p { margin: 0; color: rgba(251,248,240,.68); font-size: 11px; line-height: 1.55; }
.credential-key strong { color: rgba(251,248,240,.85); font-size: 12px; font-weight: 550; }

.feature-rail { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 70px; padding-top: 20px; border-top: 1px solid var(--line-light); list-style: none; }
.feature-rail li { display: flex; align-items: baseline; gap: 9px; padding-right: 16px; color: rgba(251,248,240,.7); font: 500 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.feature-rail li::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; background: linear-gradient(transparent 3.5px, var(--brass-light) 3.5px 4.5px, transparent 4.5px), linear-gradient(90deg, transparent 3.5px, var(--brass-light) 3.5px 4.5px, transparent 4.5px); transform: translateY(1px); }

.benefits { background: var(--parchment); }
.benefits__header { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 60px; }
.benefits__header p:last-child { max-width: 44ch; margin: 0 0 8px; color: rgba(10,23,48,.64); }
.medallions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: clamp(70px, 8vw, 110px); }
.medallions figure { position: relative; min-width: 0; margin: 0; padding: 0 clamp(16px,2.4vw,34px); text-align: center; }
.medallions figure:not(:last-child)::after { content: ""; position: absolute; top: 5%; right: 0; width: 1px; height: 90%; background: var(--line-dark); }
.medallion__visual { position: relative; display: grid; width: clamp(120px,14vw,190px); margin-inline: auto; place-items: center; isolation: isolate; }
.medallion__visual::after { content: ""; position: absolute; z-index: 0; left: 18%; right: 18%; bottom: 2%; height: 13%; border-radius: 50%; background: rgba(10,23,48,.18); opacity: .18; transform: scale(.82); transition: opacity 260ms ease, transform 260ms ease; }
.medallion__visual picture, .medallion__visual img { display: block; width: 100%; height: auto; }
.medallion__visual picture { position: relative; z-index: 1; transition: transform 260ms cubic-bezier(.22,.7,.2,1); }
.medallions figcaption { margin-top: clamp(17px,2vw,24px); color: var(--ink); font: 430 clamp(20px,1.7vw,22px)/1.1 var(--display); }
@media (hover: hover) and (pointer: fine) {
  .medallions figure:hover .medallion__visual picture { transform: translate3d(0,-4px,0); }
  .medallions figure:hover .medallion__visual::after { opacity: .3; transform: scale(1); }
}
.benefits__foot { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 85px; border-top: 1px solid var(--line-dark); }
.benefits__foot p { margin: 0; padding: 17px 12px 0 0; color: rgba(10,23,48,.62); font: 500 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.benefits__foot p::before { content: "✓"; padding-right: 8px; color: var(--success); }

.controls { background: var(--ivory); }
.controls-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: clamp(70px, 9vw, 140px); }
.art-stage--controls { display: grid; place-items: center; }
.instrument-stage { position: relative; width: 96%; }
.instrument-stage > picture { position: relative; z-index: 1; }
.instrument-stage picture { transform: none; }
.instrument-rotor, .instrument-needle { position: absolute; inset: 0; pointer-events: none; }
.instrument-rotor { z-index: 2; transform-origin: 50% 49.4%; animation: slow-spin 130s linear infinite; -webkit-mask-image: radial-gradient(circle at 50% 49.4%, transparent 0 14%, #000 15% 27%, transparent 28%); mask-image: radial-gradient(circle at 50% 49.4%, transparent 0 14%, #000 15% 27%, transparent 28%); }
.instrument-needle { z-index: 3; transform-origin: 50% 49.4%; animation: needle-sway 9s ease-in-out infinite alternate; -webkit-mask-image: radial-gradient(circle at 50% 49.4%, #000 0 14%, transparent 15%), radial-gradient(ellipse 1% 14% at 50% 35%, #000 0 100%, transparent 100%); mask-image: radial-gradient(circle at 50% 49.4%, #000 0 14%, transparent 15%), radial-gradient(ellipse 1% 14% at 50% 35%, #000 0 100%, transparent 100%); }
.instrument-rotor picture, .instrument-needle picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.instrument-rotor img, .instrument-needle img { width: 100%; height: 100%; object-fit: contain; }
.instrument-orbit { position: absolute; width: 82%; aspect-ratio: 1; border: 1px solid var(--line-dark); border-radius: 50%; }
.instrument-orbit::before, .instrument-orbit::after { content: ""; position: absolute; inset: -14%; border: 1px dashed rgba(185,148,85,.23); border-radius: inherit; }
.instrument-orbit::after { inset: 18%; border-style: solid; border-color: rgba(185,148,85,.18); }
.art-stage--controls:not(.is-visible) .instrument-rotor, .art-stage--controls:not(.is-visible) .instrument-needle { animation-play-state: paused; }
.feature-list--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }

.integrations { color: var(--ivory); background: var(--navy-2); }
.integrations::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, rgba(185,148,85,.11), transparent 34%); }
.integrations__header { position: relative; z-index: 1; display: grid; grid-template-columns: .75fr 1fr .6fr; align-items: end; gap: 50px; }
.integrations__header .eyebrow { align-self: start; margin-top: 14px; }
.integrations__header h2 em { color: var(--brass-light); }
.integrations__header > p:last-child { max-width: 39ch; margin: 0 0 8px; color: rgba(251,248,240,.62); }

@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes needle-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

.berth-manifest {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-top: 74px;
  padding: clamp(24px, 3.2vw, 42px) clamp(20px, 3.2vw, 46px);
  background: linear-gradient(180deg, rgba(251,248,240,.04), rgba(251,248,240,.012));
  border: 1px solid rgba(220,194,138,.3);
}

.berth-manifest__head { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line-light); }
.berth-manifest__seal { width: 62px; aspect-ratio: 1; flex: none; fill: none; stroke: var(--brass-light); stroke-width: .8; opacity: .85; animation: slow-spin 60s linear infinite; }
.berth-manifest__title strong { display: block; color: var(--ivory); font: 440 clamp(20px, 1.8vw, 26px)/1.1 var(--display); }
.berth-manifest__title small { display: block; margin-top: 7px; color: rgba(251,248,240,.66); font-size: 12px; }
.berth-manifest__badge { margin-left: auto; flex: none; padding: 9px 13px; border: 1px solid rgba(220,194,138,.34); border-radius: 999px; color: rgba(220,194,138,.85); font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }

.berth-list { position: relative; margin: 0; padding: 0; list-style: none; }
.berth-list li { position: relative; display: flex; align-items: center; gap: 18px; padding: 21px 6px; border-bottom: 1px solid var(--line-light); transition: background-color 220ms ease, transform 320ms cubic-bezier(.2, .9, .25, 1.3); }
.berth-list li:hover { transform: translateX(6px); }
.berth-glyph { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid rgba(220,194,138,.28); border-radius: 50%; transition: border-color 240ms ease, transform 320ms cubic-bezier(.2, .9, .25, 1.3), box-shadow 240ms ease; }
.berth-glyph svg { width: 22px; height: 22px; fill: none; stroke: var(--brass-light); stroke-width: 1.5; opacity: .85; transition: opacity 240ms ease; }
.berth-list li:hover .berth-glyph { border-color: rgba(220,194,138,.7); transform: scale(1.12) rotate(-4deg); box-shadow: 0 0 22px rgba(185,148,85,.22); }
.berth-list li:hover .berth-glyph svg { opacity: 1; }
.berth-list li:hover { background: rgba(251,248,240,.025); }
.berth-list li strong { display: block; color: rgba(251,248,240,.94); font-size: 14px; font-weight: 550; }
.berth-list li p { margin: 3px 0 0; color: rgba(251,248,240,.62); font-size: 12px; }
.berth-tick { margin-left: auto; flex: none; width: 26px; height: 1px; background: var(--brass-light); opacity: .4; transform: scaleX(.6); transform-origin: right; transition: opacity 220ms ease, transform 220ms ease; }
.berth-list li:hover .berth-tick { opacity: 1; transform: scaleX(1); }

.faq { background: var(--ivory); }
.faq-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(54px, 7vw, 110px); }
.faq-layout .section-copy { position: sticky; top: 110px; }

.faq-list { border-top: 1px solid var(--line-dark); }
.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 21px 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color 200ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brass-deep); }
.faq-toggle { position: relative; width: 26px; height: 26px; flex: none; border: 1px solid rgba(134,102,50,.45); border-radius: 50%; transition: transform 260ms cubic-bezier(.22,.7,.2,1), background-color 220ms ease; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.2px; background: var(--brass-deep); transform: translate(-50%, -50%); }
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 260ms cubic-bezier(.22,.7,.2,1); }
.faq-item[open] .faq-toggle { transform: rotate(45deg); background: rgba(185,148,85,.12); }
.faq-item > p { max-width: 56ch; margin: 0; padding: 0 44px 22px 2px; color: rgba(10,23,48,.74); font-size: 14px; line-height: 1.75; }

.closing { position: relative; overflow: hidden; padding: clamp(120px,14vw,210px) 0; color: var(--ivory); background: #09172c; text-align: center; }
.closing__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.closing .eyebrow { justify-content: center; }
.closing h2 { max-width: 15ch; }
.closing h2 em { color: var(--brass-light); }
.closing .button { margin-top: 46px; }
.waitlist-form { display: flex; gap: 12px; width: min(100%, 560px); margin-top: 46px; }
.waitlist-form input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  color: var(--ivory);
  background: rgba(251, 248, 240, .06);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  font: 400 15px/1 var(--sans);
}
.waitlist-form input::placeholder { color: rgba(251, 248, 240, .45); }
.waitlist-form input:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 2px; }
.waitlist-form .button { margin-top: 0; flex: none; }
.waitlist-form .button[disabled] { opacity: .6; pointer-events: none; }
.waitlist-status { min-height: 1.4em; margin: 14px 0 0; color: var(--brass-light); font-size: 13px; }
.waitlist-status.is-error { color: #e4a9a0; }
.closing__note a { color: rgba(251,248,240,.85); border-bottom: 1px solid rgba(251,248,240,.35); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.closing__horizon { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(185,148,85,.06), transparent 45%); }
.closing__horizon::before { content: ""; position: absolute; left: 10%; right: 10%; top: auto; bottom: 9%; height: 1px; background: linear-gradient(90deg, transparent, rgba(220,194,138,.35) 30%, rgba(220,194,138,.35) 70%, transparent); }
.closing__horizon span { position: absolute; left: 50%; top: auto; bottom: 9%; width: 13px; aspect-ratio: 1; border-radius: 50%; background: var(--brass-light); box-shadow: 0 0 30px rgba(220,194,138,.55); transform: translate(-50%,-50%); }

.site-footer { color: var(--ivory); background: #050e1d; }
.site-footer__top { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr; gap: 70px; padding-top: 72px; padding-bottom: 72px; }
.brand--footer { width: 170px; align-self: start; }
.site-footer__top > p { max-width: 34ch; margin: 0; color: rgba(251,248,240,.66); font-size: 13px; }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.site-footer__nav nav { display: grid; gap: 9px; align-content: start; }
.site-footer__nav strong { margin-bottom: 8px; color: rgba(251,248,240,.62); font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.site-footer__nav a { width: fit-content; color: rgba(251,248,240,.76); font-size: 12px; }
.site-footer__nav a:hover { color: var(--brass-light); }
.site-footer__bottom { display: flex; justify-content: space-between; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--line-light); color: rgba(251,248,240,.6); font: 500 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

/* Content stays visible without JS; the reveal treatment only applies once
   main.js has confirmed scripting. */
html.has-js .stagger > * { opacity: 0; transform: translateY(12px); transition: opacity 480ms ease, transform 480ms cubic-bezier(.22,.7,.2,1); }
html.has-js .reveal.is-visible .stagger > *,
html.has-js .reveal.is-visible.stagger > * { opacity: 1; transform: none; }
.stagger > :nth-child(1) { transition-delay: 40ms; }
.stagger > :nth-child(2) { transition-delay: 110ms; }
.stagger > :nth-child(3) { transition-delay: 180ms; }
.stagger > :nth-child(4) { transition-delay: 250ms; }
.stagger > :nth-child(5) { transition-delay: 320ms; }
.stagger > :nth-child(6) { transition-delay: 390ms; }
.stagger > :nth-child(7) { transition-delay: 460ms; }
.stagger > :nth-child(8) { transition-delay: 530ms; }

html.has-js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.7,.2,1); }
html.has-js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 18px; }
  .hero-copy { width: 46%; }
  .vessel-stack { left: 36%; width: 68vw; }
  .hero-sun, .hero-sun-glow, .hero-sun-reflection { left: 88%; }
  .cards-layout, .split-layout { gap: 54px; }
  .integrations__header { grid-template-columns: .65fr 1.1fr .75fr; gap: 30px; }
}

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .header-cta { margin-left: auto; }
  .hero-pin { height: max(780px, 100vh); height: max(780px, 100svh); }
  .hero__inner { align-items: flex-start; padding-top: 150px; }
  .hero-copy { width: 60%; }
  .hero-copy h1 { font-size: clamp(58px, 9vw, 78px); }
  .vessel-stack { left: 30%; top: 34%; width: 82vw; }
  .hero-sun-wrap { inset: 0 0 53% 0; }
  .hero-sun, .hero-sun-glow { left: 72%; }
  .hero-sun-reflection { left: 72%; top: 47%; height: 26%; }
  .hero-stars { inset: 0 0 55% 0; }
  .hero-sea-glint { top: 47%; }
  .split-layout, .cards-layout, .controls-layout { grid-template-columns: 1fr; }
  .split-layout .section-copy, .cards-layout .section-copy, .controls-layout .section-copy { max-width: 650px; }
  .art-stage--atlas { max-width: 760px; margin-inline: auto; }
  .art-stage--ledger { max-width: 700px; margin-inline: auto; }
  .ledger-grid { grid-template-columns: 1fr 1fr; }
  .cards-layout .art-stage { grid-row: 2; }
  .art-stage--cards { --card-width: clamp(210px,32vw,250px); --fan-offset: clamp(88px,13vw,118px); width: 100%; max-width: 760px; height: 480px; margin-inline: auto; }
  .feature-rail { grid-template-columns: repeat(3,1fr); gap: 16px 0; }
  .benefits__header { grid-template-columns: 1fr; gap: 25px; }
  .benefits__header p:last-child { margin: 0; }
  .controls-layout .art-stage { max-width: 640px; margin-inline: auto; }
  .integrations__header { grid-template-columns: 1fr; gap: 25px; }
  .integrations__header .eyebrow { margin: 0; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__nav { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 700px) {
  :root { --page-gutter: clamp(20px, 6vw, 30px); --drift: 26px; }
  .site-header__inner { min-height: 70px; }
  .brand { width: 132px; }
  .header-cta { display: none; }
  .hero { height: 230vh; height: 230svh; }
  .hero-pin { height: max(720px, 100vh); height: max(720px, 100svh); }
  .hero__inner { display: block; padding-top: 116px; }
  .hero-copy { width: 100%; max-width: 460px; margin: 0; }
  .hero-copy h1 { max-width: 8.4ch; font-size: clamp(51px, 15.2vw, 69px); line-height: .96; }
  .hero-copy__body { max-width: 40ch; margin-top: 20px; font-size: 14px; line-height: 1.58; }
  .hero-copy__actions { gap: 20px; margin-top: 24px; }
  .hero-copy__actions .button { min-height: 48px; padding-inline: 17px; }
  .hero-copy__actions .text-link { font-size: 11px; }
  .hero .eyebrow { margin-bottom: 18px; }
  .vessel-stack { left: 4%; top: auto; bottom: 7%; width: 112vw; }
  .hero-caustics { display: none; }
  /* Mobile: copy owns the sky, so the sun takes a low dawn arc over the open
     water between the CTA and the hull, never crossing text. */
  .hero-sun-wrap { inset: 0 0 32% 0; }
  .hero-sun { left: 51%; width: 56px; transform: translate3d(-50%, calc(145% - var(--hero-progress) * 220%), 0); }
  .hero-sun-glow { left: 51%; width: 220px; transform: translate3d(-50%, calc(30% - var(--hero-progress) * 90%), 0); }
  .hero-sun-reflection { top: 68.5%; left: 51%; height: 18%; width: 52px; }
  .hero-stars { inset: 0 0 60% 0; }
  .hero-sea-glint { top: 68.5%; }
  .hero-vignette { background: linear-gradient(180deg, rgba(4,12,28,.84) 0%, rgba(5,16,35,.26) 47%, rgba(5,13,28,.45) 100%); }
  .hero-marker { display: none; }
  .product-section { padding: 88px 0; }
  .ledger-grid { grid-template-columns: 1fr; gap: 34px; }
  .section-index { margin-bottom: 58px; }
  .section-copy h2, .benefits__header h2, .integrations__header h2, .closing h2 { font-size: clamp(42px, 12vw, 56px); }
  .section-copy__lead { margin-top: 22px; font-size: 14px; }
  .feature-list { margin-top: 32px; }
  .split-layout, .cards-layout, .controls-layout { gap: 52px; }
  .art-stage--atlas { --stage-scale: 1.1; }
  .feature-rail { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .benefits__header { gap: 20px; }
  .art-stage--cards { --card-width: clamp(150px,39vw,220px); --fan-offset: clamp(62px,15vw,92px); height: clamp(330px,65vw,440px); }
  .medallions { grid-template-columns: 1fr 1fr; row-gap: 48px; margin-top: 60px; }
  .medallions figure { padding-inline: clamp(8px,3vw,20px); }
  .medallions figure::after { display: none; }
  .medallions figure:nth-child(odd)::after { display: block; }
  .medallion__visual { width: clamp(120px,36vw,190px); }
  .benefits__foot { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 62px; }
  .feature-list--two { grid-template-columns: 1fr; }
  .controls-layout .art-stage { grid-row: 2; }
  .waitlist-form { flex-direction: column; }
  .faq-layout { grid-template-columns: 1fr; gap: 34px; }
  .faq-layout .section-copy { position: static; }
  .berth-manifest { margin-top: 52px; }
  .berth-manifest__head { gap: 14px; }
  .berth-manifest__badge { display: none; }
  .berth-manifest__seal { width: 48px; }
  .berth-list li p { font-size: 11px; }
  .closing { padding: 120px 0; }
  .closing__horizon::before { left: 0; right: 0; }
  .site-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__nav { grid-column: 1; grid-row: auto; margin-top: 14px; }
}

@media (max-width: 430px) {
  .hero-copy__actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero-copy__actions .button { width: 100%; }

  .vessel-stack { bottom: 7.5%; }
  .credential-key p { font-size: 10px; }
  .feature-rail { grid-template-columns: 1fr; }
  .site-footer__bottom { gap: 22px; flex-direction: column; }
}

@media (max-width: 360px) {
  .hero__inner { padding-top: 100px; }
  .hero-copy h1 { font-size: 48px; }
  .hero-copy__body { font-size: 13px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero-copy__actions { margin-top: 17px; }
  .vessel-stack { bottom: 6%; width: 120vw; left: 0; }
  .section-index span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero { --hero-progress: 1; height: auto; }
  .hero-pin { position: relative; }
  .vessel-stack, .hero-caustics, .vessel-shimmer, .berth-manifest__seal, .atlas-overlay *, .instrument-rotor, .instrument-needle { animation: none !important; }
  .art-stage--cards { --sp: 1; }
  .payment-card:hover .payment-card__face, .medallions figure:hover .medallion__visual picture { transform: none !important; }
  .medallions figure:hover .medallion__visual::after { opacity: .18; transform: scale(.82); }
  .berth-list li:hover .berth-tick { opacity: .4; transform: scaleX(.6); }
  .berth-list li:hover, .feature-list li:hover { transform: none; }
  .berth-list li:hover .berth-glyph { transform: none; }
  .feature-list li:hover::before { transform: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .stagger > * { opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; }
  /* Full-warmth daylight: sun parked above the horizon, night fully lifted. */
  .hero-sun { transform: translate3d(-50%, -160%, 0); }
  .hero-sun-glow { transform: translate3d(-50%, -60%, 0); }
}

@supports not (height: 100svh) {
  .hero-pin { min-height: 760px; height: min(1000px, 100vh); }
}

/* ---- Scroll-scrubbed motion (JS sets --sp per [data-scrub] element) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Voyage: boat starts at the extreme right in the dark and sails left into
     its berth as the sun rises, never crossing under the hero copy. */
  html.has-js .vessel-stack {
    translate:
      calc(52vw - var(--hero-progress) * 52vw + var(--hero-progress) * 44px)
      /* Ocean bumps: three scroll-scrubbed swells over the crossing, fading as it berths. */
      calc(var(--hero-progress) * -12px + sin(var(--hero-progress) * 6 * pi) * (1 - var(--hero-progress)) * 9px);
    rotate: calc(sin(var(--hero-progress) * 6 * pi + .6) * (1 - var(--hero-progress)) * 1.1deg);
  }

  html.has-js .art-stage[data-scrub] picture { transform: translate3d(0, calc((.5 - var(--sp, .5)) * var(--drift)), 0) scale(var(--stage-scale, 1)); }
  html.has-js .art-stage--atlas[data-scrub] picture { transform: none; }
  html.has-js .art-stage--atlas[data-scrub] .atlas-stage { transform: translate3d(0, calc((.5 - var(--sp, .5)) * var(--drift)), 0) scale(var(--stage-scale, 1)); }
  /* The frame is a <picture>, so exempt it from the generic picture scrub above —
     otherwise it slides with scroll while the video stays put. The stage carries
     the parallax for frame + video together. */
  html.has-js .art-stage--ledger[data-scrub] picture { transform: none; }
  html.has-js .art-stage--ledger[data-scrub] .ledger-stage { transform: translate3d(0, calc((.5 - var(--sp, .5)) * var(--drift)), 0) scale(var(--stage-scale, 1)); }
  html.has-js .art-stage--controls[data-scrub] picture { transform: none; }
  html.has-js .art-stage--controls[data-scrub] .instrument-stage { transform: translate3d(0, calc((.5 - var(--sp, .5)) * var(--drift)), 0) scale(var(--stage-scale, 1)); }
  html.has-js .medallions[data-scrub] figure:nth-child(odd) .medallion__visual { transform: translate3d(0, calc((.5 - var(--sp, .5)) * 18px), 0); }
  html.has-js .medallions[data-scrub] figure:nth-child(even) .medallion__visual { transform: translate3d(0, calc((.5 - var(--sp, .5)) * 28px), 0); }

  html.has-js .section-index[data-scrub]::after { transform-origin: left; transform: scaleX(min(1, calc(var(--sp, 1) * 2.4))); }


  html.has-js .closing[data-scrub] .closing__horizon::before { transform-origin: 50%; transform: scaleX(calc(.15 + min(1, var(--sp, 1) * 1.5) * .85)); }
  html.has-js .closing[data-scrub] .closing__horizon span { opacity: min(1, calc(var(--sp, 1) * 1.8)); }
}

/* ---- Products mega-menu ("chart table"): ivory drawer of numbered chapters ---- */
.nav-products { display: contents; }
.nav-products__btn { position: relative; padding: 8px 0; border: 0; background: none; color: rgba(251,248,240,.78); font: 500 13px/1 var(--sans); letter-spacing: .02em; cursor: pointer; }
.nav-caret { display: inline-block; margin-left: 7px; border: 4px solid transparent; border-top-color: var(--brass-light); transform: translateY(2px); transition: transform 200ms ease; }
.nav-products:hover .nav-caret, .nav-products:focus-within .nav-caret, .nav-products.is-open .nav-caret { transform: translateY(-1px) rotate(180deg); }
.mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 90; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 240ms ease, transform 240ms cubic-bezier(.22,.7,.2,1), visibility 0s linear 240ms; background: var(--ivory); color: var(--ink); border-top: 1px solid rgba(185,148,85,.5); box-shadow: 0 44px 80px rgba(10,23,48,.22); }
.mega::before { content: ""; position: absolute; top: -34px; left: 0; right: 0; height: 34px; }
.nav-products:hover .mega, .nav-products:focus-within .mega, .nav-products.is-open .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mega__rows { max-width: calc(var(--content-max) + var(--page-gutter) * 2); margin-inline: auto; padding: 8px var(--page-gutter) 16px; }
.mega__row { display: grid; grid-template-columns: 52px 265px 1fr 30px; align-items: baseline; gap: 20px; padding: 16px 8px; border-bottom: 1px solid var(--line-dark); color: var(--ink); transition: transform 220ms ease; }
.mega__row:last-child { border-bottom: 0; }
.mega__row:hover { transform: translateX(6px); }
.mega__num { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--brass-deep); }
.mega__row strong { font: 400 20px/1.2 var(--display); letter-spacing: -.015em; }
.mega__row:hover strong em { color: var(--brass-deep); }
.mega__desc { color: rgba(10,23,48,.6); font-size: 13px; }
.mega__arr { justify-self: end; color: var(--brass); opacity: 0; transition: opacity 180ms ease; }
.mega__row:hover .mega__arr { opacity: 1; }
.mega__foot { background: var(--parchment); border-top: 1px solid var(--line-dark); }
.mega__foot-inner { max-width: calc(var(--content-max) + var(--page-gutter) * 2); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; padding: 13px var(--page-gutter) 15px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-deep); }
.mega__foot-inner a { color: var(--ink); font: 600 12px/1 var(--sans); letter-spacing: 0; text-transform: none; }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } .mega__row { transition: none; } }
/* Mega rows are <a> inside .desktop-nav — out-rank the nav link color/underline. */
.desktop-nav .mega a { color: var(--ink); }
.desktop-nav .mega a::after { content: none; }
.desktop-nav .mega .mega__row { padding: 17px 8px; }
.desktop-nav .mega .mega__foot-inner a { padding: 0; }

/* Life of a swipe: the cards section's proof strip. */
.swipe-life { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); padding-top: 26px; border-top: 1px solid var(--line-light); }
.swipe-life__title { font: 600 10px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass-light); }
.swipe-life__steps { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.swipe-life__steps li { display: flex; align-items: center; gap: 10px; color: rgba(251,248,240,.75); font-size: 13px; }
.swipe-life__steps li span { font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--brass-light); }
.swipe-life__steps li:not(:last-child)::after { content: "\2192"; margin-left: 18px; color: rgba(220,194,138,.55); }
.swipe-life__end { margin-left: auto; font: 400 16px/1.2 var(--display); font-style: italic; color: var(--brass-light); }
@media (max-width: 900px) { .swipe-life__end { margin-left: 0; } }

/* Paysmith mark on the payment cards, echoing the header logo. */
.payment-card__wordmark { display: inline-flex; align-items: center; gap: 7px; }
.payment-card__mark { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: #0c1611; box-shadow: inset 0 0 0 1px rgba(251,248,240,.25); }
.payment-card__mark::after { content: ""; width: 6.5px; height: 6.5px; border-radius: 50%; background: #FACC15; }

.swipe-life--light { border-top-color: var(--line-dark); }
.swipe-life--light .swipe-life__title, .swipe-life--light .swipe-life__steps li span, .swipe-life--light .swipe-life__end { color: var(--brass-deep); }
.swipe-life--light .swipe-life__steps li { color: rgba(10,23,48,.7); }
.swipe-life--light .swipe-life__steps li:not(:last-child)::after { color: rgba(134,102,50,.5); }

/* Open-source label chip (Atomic ID). */
.tag-oss { display: inline-block; margin-left: 10px; padding: 3px 9px 4px; border-radius: 12px; vertical-align: 2px; font: 650 9px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; background: var(--navy); color: #FACC15; }

/* Integration status chips on manifest rows. */
.berth-status { flex: none; margin-left: auto; padding: 4px 9px 5px; border-radius: 11px; font: 650 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.berth-status--live { background: rgba(84,116,94,.28); color: #a4c9b0; }
.berth-status--soon { background: rgba(220,194,138,.16); color: var(--brass-light); }
.berth-status--charted { background: rgba(243,237,223,.08); color: rgba(251,248,240,.55); }

/* Integration rings: tile cabinet on navy. */
.int-ring-title { margin: 0 0 30px; font-size: clamp(30px, 3.6vw, 44px); color: var(--ivory); }
.int-ring-title em { color: var(--brass-light); }
.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(243,237,223,.14); border: 1px solid rgba(243,237,223,.14); }
.int-tile { position: relative; background: var(--navy); padding: 26px 26px 24px; transition: background-color 220ms ease; }
.int-tile:hover { background: var(--navy-2); }
.int-tile .berth-status { position: absolute; top: 18px; right: 18px; margin: 0; }
.int-glyph { display: block; }
.int-glyph svg { width: 34px; height: 34px; fill: none; stroke: var(--brass-light); stroke-width: 1.5; transition: transform 320ms cubic-bezier(.2,.9,.25,1.3); }
.int-tile:hover .int-glyph svg { transform: translateY(-4px) rotate(-5deg); }
.int-tile strong { display: block; margin: 16px 0 7px; font: 400 19px/1.25 var(--display); letter-spacing: -.015em; color: var(--ivory); }
.int-tile p { margin: 0; font-size: 12.5px; line-height: 1.65; color: rgba(251,248,240,.58); }
.int-grid--2 { grid-template-columns: repeat(4, 1fr); }
.int-grid--2 .int-tile { padding: 24px 22px 22px; }
.int-grid--2 .int-tile strong { font-size: 17px; }
.int-grid--2 .int-tile p { font-size: 12px; }
@media (max-width: 1000px) { .int-grid, .int-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .int-grid { grid-template-columns: 1fr; } }