/* ── TOKENS ─────────────────────────────────────────────────────────────────────────── */
:root {
  --navy: #1a2b4c;
  --paper: #f9f7f2;
  --snow: #f4f1ea;
  --amber: #d4a058;
  --amber-ink: #8c6526; /* amber for TEXT on light bg — WCAG AA (~5:1) */
  /* Elevation ladder — ambient contact layer + soft key cast, both navy-tinted
     (colored shadows read premium; neutral gray reads cheap). Lifts content off
     the flat cream bands. */
  --shadow-1:
    0 1px 2px rgba(26, 43, 76, 0.05), 0 2px 6px rgba(26, 43, 76, 0.04);
  --shadow-2:
    0 2px 4px rgba(26, 43, 76, 0.05), 0 10px 24px rgba(26, 43, 76, 0.07);
  --shadow-3:
    0 3px 6px rgba(26, 43, 76, 0.06), 0 24px 60px rgba(26, 43, 76, 0.09);
  --shadow-4:
    0 6px 12px rgba(26, 43, 76, 0.08), 0 48px 90px rgba(26, 43, 76, 0.12);
  --text: #1c1a16;
  --mid: #4a4438;
  /* Was #7a7264, which measured 4.21:1 on the snow footer and 4.44:1 on paper,
     both under AA for the small caption/meta text this drives. #6a6355 keeps
     the same warm-gray character and clears 4.5 on both bands (5.28 snow /
     5.56 paper). (Dark-mode/contrast audit, 2026-09-21.) */
  --light: #6a6355;
  --rule: #e2dcce;
  --rust: #b46545;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Numeric readouts (prices, counts, countdowns). Mirrors the app's
     --font-num token so digits on the marketing site read identically to
     the in-app numerals: DM Sans with tabular lining figures. */
  --font-num: "DM Sans", -apple-system, "SF Pro Text", system-ui, sans-serif;

  --ease-enter: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html,
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;
  scroll-behavior: smooth;
}

/* Skip-to-content link: off-screen until it takes keyboard focus, then it
   parks at the top-left so a keyboard user can jump past the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--navy);
  color: var(--snow);
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
/* Belt-and-suspenders horizontal-overflow clamp. iOS Safari can still
   surface document-level horizontal scroll when only body has
   overflow-x: hidden — `overflow-x: clip` on html stops the page from
   ever scrolling sideways no matter what a descendant does. clip is
   preferred over hidden on BOTH elements because `hidden` makes the
   element a scroll container, which (a) establishes a containing block
   for fixed descendants and (b) breaks `position: sticky` on children
   like the nav — it scrolls away instead of pinning. `clip` clamps the
   overflow without either side effect. */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  min-height: 100vh;
}

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

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

button {
  font-family: inherit;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--navy);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition:
    transform 140ms var(--ease-spring),
    box-shadow 140ms var(--ease-exit),
    background 140ms var(--ease-exit);
  will-change: transform;
}
.btn:active {
  transform: scale(0.965);
}
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.btn-amber {
  background: var(--amber);
  color: var(--navy);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(212, 160, 88, 0.18);
}
.btn-amber:hover {
  background: #c8943e;
}
.btn-navy {
  background: var(--navy);
  color: var(--snow);
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(26, 43, 76, 0.18);
}
.btn-navy:hover {
  background: #243557;
}
.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(26, 43, 76, 0.22);
  color: var(--navy);
}
.btn-outline:hover {
  border-color: rgba(26, 43, 76, 0.45);
  background: rgba(26, 43, 76, 0.03);
}
.btn-lg {
  padding: 14px 26px;
  font-size: 15px;
  min-height: 48px;
}

/* ── NAV ───────────────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  background: rgba(249, 247, 242, 0);
  backdrop-filter: saturate(180%) blur(0px);
  -webkit-backdrop-filter: saturate(180%) blur(0px);
  border-bottom: 1px solid transparent;
  transition:
    background 220ms var(--ease-exit),
    backdrop-filter 220ms var(--ease-exit),
    -webkit-backdrop-filter 220ms var(--ease-exit),
    border-bottom-color 220ms var(--ease-exit);
}
.nav.nav-scrolled {
  background: rgba(249, 247, 242, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  /* No hard divider — the header melts into the page via .nav::after below. */
  border-bottom-color: transparent;
}
/* Translucent fade beneath the sticky header: a short strip that continues the
   header's paper tint + blur and masks out to nothing, so page content melts
   under the header instead of meeting a straight cut-off — the header reads as
   floating a little above the page. Fades in with the scrolled state. */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(249, 247, 242, 0.8),
    rgba(249, 247, 242, 0)
  );
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  opacity: 0;
  transition: opacity 260ms var(--ease-exit);
}
.nav.nav-scrolled::after {
  opacity: 1;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-mark {
  flex-shrink: 0;
  border-radius: 8px;
}
.nav-wordmark {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
}
.nav-platform {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
  align-self: center;
  margin-left: -4px;
  margin-top: 6px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 24px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  transition: color 140ms var(--ease-exit);
}
.nav-links a:hover {
  color: var(--navy);
}
.nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
}
/* Compact App Store badge sized to sit in the header. */
.nav-cta .appstore-badge {
  padding: 5px 11px;
  border-radius: 9px;
  gap: 7px;
}
.nav-cta .appstore-badge-logo {
  width: 18px;
  height: 18px;
}
.nav-cta .appstore-badge-kicker {
  font-size: 8px;
}
.nav-cta .appstore-badge-word {
  font-size: 13px;
}

/* ── HERO ─────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 96px 32px 100px;
  overflow: hidden;
  background: var(--paper);
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-bg {
  will-change: transform;
}
.hero-bg svg {
  width: 100%;
  height: 100%;
}
.hero-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
}
.orb-a {
  top: 80px;
  right: 8%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, var(--amber), transparent 70%);
  opacity: 0.3;
}
.orb-b {
  bottom: -40px;
  left: 12%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(26, 43, 76, 0.18), transparent 70%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 22px;
}
.hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--mid);
  max-width: 620px;
  margin: 0 auto 32px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.hero-actions-stack {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-text-link {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 4px 2px;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}
.hero-text-link:hover,
.hero-text-link:focus-visible {
  color: var(--text);
  border-bottom-color: var(--amber);
}
.hero-fineprint {
  font-size: 13px;
  color: var(--light);
  letter-spacing: 0.02em;
}

/* ── DEVICE FRAME (the app, on a phone) ──────────────────────────── */
.band-app .band-title {
  margin-bottom: 14px;
}
.band-app .band-lede {
  margin-bottom: 44px;
}
.device-frame {
  display: flex;
  justify-content: center;
  margin: 0 auto 32px;
}
.device-frame-bezel {
  width: 320px;
  aspect-ratio: 9 / 19.5;
  background: #0a0a0a;
  border-radius: 44px;
  padding: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 60px -20px rgba(28, 26, 22, 0.45),
    0 12px 24px -12px rgba(28, 26, 22, 0.35);
  position: relative;
}
.device-frame-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #0a0a0a;
  border-radius: 14px;
  z-index: 2;
}
.device-frame-screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}
.device-frame-cta {
  display: flex;
  justify-content: center;
}

/* ── APP MOCK (in the device frame) ───────────────────────────── */
/* Stylized recreation of the Collection screen — Polaroid recent capture,
   Locker grid, brand tab bar. Pure CSS/SVG, no iframe. */
.app-mock {
  width: 100%;
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  color: var(--text);
  overflow: hidden;
  position: relative;
}
.app-mock-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  margin-top: 18px; /* clear of the notch */
}
.app-mock-status-glyphs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--navy);
}
.app-mock-header {
  padding: 6px 18px 12px;
}
.app-mock-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 4px;
}
.app-mock-greeting {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.app-mock-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
}
.app-mock-attestation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}
.app-mock-count {
  color: var(--navy);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* Polaroid recent-capture card */
.app-mock-polaroid {
  margin: 0 18px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 8px 14px;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.05),
    0 4px 10px rgba(28, 26, 22, 0.06),
    0 14px 28px -10px rgba(28, 26, 22, 0.18);
  transform: rotate(-0.6deg);
}
.app-mock-album {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.app-mock-album-recent {
  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(212, 160, 88, 0.55),
      transparent 55%
    ),
    linear-gradient(140deg, #1a2b4c 0%, #2b3f5e 50%, #0f1a30 100%);
}
.app-mock-album-grain {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(244, 241, 234, 0.04) 0 1px,
      transparent 1px 3px
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0.18) 0 1px,
      transparent 1px 6px
    );
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.app-mock-album-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amber);
  box-shadow:
    0 0 0 4px rgba(28, 26, 22, 0.5),
    0 0 0 5px rgba(212, 160, 88, 0.3);
}
.app-mock-polaroid-label {
  padding: 10px 6px 0;
  font-family: var(--serif);
}
.app-mock-polaroid-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.app-mock-polaroid-artist {
  font-size: 11px;
  font-style: italic;
  color: var(--mid);
  margin-top: 1px;
  font-family: var(--serif);
}

/* Locker grid — 2 columns of stylized album art tiles */
.app-mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 18px;
}
.app-mock-tile {
  aspect-ratio: 1;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.06),
    0 6px 14px -4px rgba(28, 26, 22, 0.14);
}
.app-mock-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    110deg,
    rgba(244, 241, 234, 0.05) 0 1px,
    transparent 1px 2px
  );
  mix-blend-mode: overlay;
}
.app-mock-tile[data-art="bowie"] {
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(180, 101, 69, 0.85),
      transparent 55%
    ),
    linear-gradient(160deg, #1c1a16 0%, #4a3a30 100%);
}
.app-mock-tile[data-art="parton"] {
  background:
    radial-gradient(
      circle at 30% 70%,
      rgba(212, 160, 88, 0.55),
      transparent 55%
    ),
    linear-gradient(135deg, #f4e8d0 0%, #d4a058 100%);
}
.app-mock-tile[data-art="curtis"] {
  background:
    radial-gradient(
      circle at 60% 40%,
      rgba(244, 241, 234, 0.18),
      transparent 60%
    ),
    linear-gradient(150deg, #2c4a35 0%, #14241a 100%);
}
.app-mock-tile[data-art="davis"] {
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(180, 101, 69, 0.4),
      transparent 60%
    ),
    linear-gradient(145deg, #d6cab2 0%, #a89572 100%);
}

/* Bottom tab bar — pinned to the bottom of the screen */
.app-mock-tabs {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 4px 4px;
  background: rgba(244, 241, 234, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(26, 43, 76, 0.08);
}
.app-mock-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(26, 43, 76, 0.45);
  letter-spacing: 0.04em;
}
.app-mock-tab svg {
  color: rgba(26, 43, 76, 0.55);
}
.app-mock-tab-active {
  color: var(--navy);
}
.app-mock-tab-active svg {
  color: var(--navy);
}

.app-mock-home-indicator {
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: rgba(26, 43, 76, 0.4);
  margin: 6px auto 8px;
}

/* ── HOW IT WORKS (compressed three-line variant) ─────────────────── */
.how-compact .band-title {
  margin-bottom: 32px;
}
.how-compact-list {
  list-style: none;
  counter-reset: how;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.how-compact-list li {
  counter-increment: how;
  position: relative;
  padding: 18px 20px 18px 64px;
  background: rgba(28, 26, 22, 0.03);
  border-left: 2px solid var(--amber);
  border-radius: 6px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
.how-compact-list li::before {
  content: counter(how, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 18px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.04em;
}

/* ── BANDS ──────────────────────────────────────────────────────────────────── */
.band {
  padding: 96px 32px;
  position: relative;
  overflow: hidden;
}
.band-cream {
  background: var(--snow);
}
.band-paper {
  background: var(--paper);
}
.band-navy {
  background: var(--navy);
  color: var(--snow);
}
.band-amber {
  background: linear-gradient(140deg, var(--amber), #c08a40);
  color: var(--navy);
}
.band-navy-soft {
  background: linear-gradient(180deg, var(--navy), #243557);
}

.band-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.band-inner-narrow {
  max-width: 720px;
}

.band-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: 14px;
}
.band-eyebrow-on-dark {
  color: var(--amber);
}

.band-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin-bottom: 18px;
}
.band-title-on-dark {
  color: var(--snow);
}

.band-lede {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--mid);
  max-width: 640px;
  margin-bottom: 40px;
}
.band-lede-on-dark {
  color: rgba(244, 241, 234, 0.7);
}

/* ── PHASE TAGS ────────────────────────────────────────────────────────────── */
/* Inline pill that flags content as Phase 2 / Phase 3. Sits next to
   eyebrows + section titles. Lower opacity than the brand amber so the
   eye reads "annotation" rather than "primary action." */
.phase-tag {
  display: inline-block;
  vertical-align: middle;
  padding: 3px 8px;
  margin-left: 8px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.phase-tag--p2 {
  background: rgba(212, 160, 88, 0.18);
  color: var(--amber);
}
.phase-tag--p3 {
  background: rgba(122, 114, 100, 0.16);
  color: var(--light);
}
.band-amber .phase-tag--p2 {
  background: rgba(28, 26, 22, 0.14);
  color: rgba(28, 26, 22, 0.7);
}

/* Section-level contextual note that explains a phase boundary. Sits inline
   with section content, low-key but visible. */
.phase-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 16px 20px;
  background: rgba(212, 160, 88, 0.08);
  border: 1px solid rgba(212, 160, 88, 0.2);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mid);
}
.phase-note .phase-tag {
  margin-left: 0;
  flex-shrink: 0;
}

/* ── PROBLEM ───────────────────────────────────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.problem-cell {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.04),
    0 1px 2px rgba(26, 43, 76, 0.04),
    0 12px 28px rgba(26, 43, 76, 0.06);
}
.problem-num {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.problem-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
}

/* ── HOW IT WORKS ───────────────────────────────────────────────────────────────────── */
.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.how-step {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.04),
    0 1px 2px rgba(26, 43, 76, 0.04),
    0 12px 32px rgba(26, 43, 76, 0.06);
}
.how-step-num {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  /* --amber (#d4a058) as text is 2.19:1 on the light card. --amber-ink
     (#8c6526) is the token for amber TEXT and clears AA (5.24:1 on #fff). */
  color: var(--amber-ink);
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}
.how-step h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 12px;
}
.how-step p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mid);
}

/* ── GET THE APP (five native platforms, all "coming with launch") ───────────────
   Marketing-side mirror of the app's GetAppSection (uki-audio
   src/landing/Landing.jsx). Built native to this repo: a bordered panel on the
   paper ground holding five tiles that read as one set. Every tile is
   non-interactive "Coming with launch" today, because none has a live URL yet
   (iOS in review, Android not public, desktop builds being set up) and a link
   that 404s reads as hype. To take one live, set its href and flip status to
   "live" in the getApps array in index.njk: .get-tile-live and .get-chip-live
   below pick up the interactive treatment. That data edit is the only change.

   Five is an awkward count, so the grid steps: full-width rows on phone, a 3-up
   (3 + 2 wrap) at mid width, one row of five wide. All five stay inside the one
   panel at every breakpoint. Entrance rides the parent .band reveal, which
   main.js arms only when prefers-reduced-motion is not set, so it is
   reduced-motion-safe by construction; the guard below covers hover on any
   future live tile. */
.get-panel {
  margin-top: 40px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.03),
    0 1px 2px rgba(26, 43, 76, 0.04),
    0 18px 44px rgba(26, 43, 76, 0.06);
}
.get-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr; /* phone: full-width rows */
  gap: 14px;
  text-align: left;
}
@media (min-width: 560px) {
  /* Mid: three per row, each tile spanning 2 of a 6-column track so the
     trailing two can be centered under the three (cols 2-3 and 4-5) rather
     than left-hanging in a plain 3-column wrap. */
  .get-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .get-grid > li {
    grid-column: span 2;
  }
  .get-grid > li:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .get-grid > li:nth-child(5) {
    grid-column: 4 / span 2;
  }
}
@media (min-width: 960px) {
  /* Wide: one row of five. Reset the mid-width span/placement. */
  .get-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .get-grid > li,
  .get-grid > li:nth-child(4),
  .get-grid > li:nth-child(5) {
    grid-column: auto;
  }
}
.get-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 20px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
}
.get-tile.is-soon {
  cursor: default; /* present, but clearly "not yet" */
}
.get-glyph {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--navy);
  background: rgba(26, 43, 76, 0.05);
  border: 1px solid rgba(26, 43, 76, 0.08);
  /* A 1px inner top-highlight lifts the well into a raised "token," the same
     layered-light read the hardware/patent cards carry. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition:
    transform 200ms var(--ease-spring),
    box-shadow 200ms var(--ease-exit);
}
.get-glyph svg {
  width: 24px;
  height: 24px;
}
.get-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.get-label {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}
.get-sub {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--light);
}
.get-chip {
  margin-top: auto;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  background: rgba(122, 114, 100, 0.12);
  border: 1px solid rgba(122, 114, 100, 0.34);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
/* Future live state: amber "Get" chip, and the tile lifts on hover/focus like
   the rest of the site's interactive cards. Dormant until a tile flips live. */
.get-tile-live {
  cursor: pointer;
  transition:
    transform 160ms var(--ease-spring),
    box-shadow 160ms var(--ease-exit),
    border-color 160ms var(--ease-exit);
}
.get-tile-live:hover,
.get-tile-live:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(212, 160, 88, 0.5);
  box-shadow: 0 10px 26px rgba(26, 43, 76, 0.1);
}
/* The glyph well leads the lift, a shared-element cue: the icon scales and
   deepens a touch while the tile rises. Dormant until a tile flips live. */
.get-tile-live:hover .get-glyph,
.get-tile-live:focus-visible .get-glyph {
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 12px rgba(26, 43, 76, 0.12);
}
.get-tile-live:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.get-chip-live {
  color: var(--navy);
  background: rgba(212, 160, 88, 0.16);
  border-color: rgba(212, 160, 88, 0.4);
}
/* Tiles settle in with a short left-to-right stagger once the band reveals, the
   same sequenced entrance the value/feature grids use (section-reveal block
   above). Keyed under .reveal-pending, which main.js adds only when motion is
   allowed, so under reduced motion (or if JS never runs) the tiles render at
   rest with no hidden state. */
.reveal-pending .get-grid > li {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 460ms var(--ease-enter),
    transform 460ms var(--ease-enter);
}
.reveal-pending.reveal-in .get-grid > li {
  opacity: 1;
  transform: translateY(0);
}
.reveal-pending.reveal-in .get-grid > li:nth-child(1) {
  transition-delay: 80ms;
}
.reveal-pending.reveal-in .get-grid > li:nth-child(2) {
  transition-delay: 140ms;
}
.reveal-pending.reveal-in .get-grid > li:nth-child(3) {
  transition-delay: 200ms;
}
.reveal-pending.reveal-in .get-grid > li:nth-child(4) {
  transition-delay: 260ms;
}
.reveal-pending.reveal-in .get-grid > li:nth-child(5) {
  transition-delay: 320ms;
}
@media (prefers-reduced-motion: reduce) {
  .get-tile-live,
  .get-glyph {
    transition: none;
  }
  .get-tile-live:hover,
  .get-tile-live:focus-visible {
    transform: none;
  }
  .get-tile-live:hover .get-glyph,
  .get-tile-live:focus-visible .get-glyph {
    transform: none;
  }
}

/* ── HARDWARE ───────────────────────────────────────────────────────────────────── */
.band-navy .band-eyebrow {
  color: var(--amber);
}
.hardware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 40px;
  margin-bottom: 36px;
}
.hw-card {
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid rgba(244, 241, 234, 0.1);
  border-radius: 16px;
  padding: 26px;
  backdrop-filter: blur(8px);
}
.hw-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(244, 241, 234, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.hw-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--snow);
  margin-bottom: 4px;
}
.hw-format {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.hw-body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 241, 234, 0.7);
  margin-bottom: 18px;
}
.hw-price {
  font-size: 12px;
  font-weight: 600;
  color: rgba(244, 241, 234, 0.85);
  letter-spacing: 0.04em;
}
.hw-foot {
  text-align: center;
  margin-top: 28px;
  padding: 22px 28px;
  background: rgba(212, 160, 88, 0.1);
  border: 1px solid rgba(212, 160, 88, 0.25);
  border-radius: 14px;
}
.hw-foot p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 241, 234, 0.85);
  max-width: 640px;
  margin: 0 auto;
}

/* ── PATENTS ───────────────────────────────────────────────────────────────────── */
.patent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.patent-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 22px 22px 78px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.04),
    0 1px 2px rgba(26, 43, 76, 0.04),
    0 8px 22px rgba(26, 43, 76, 0.05);
}
.patent-pip {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(212, 160, 88, 0.16);
  color: var(--amber);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.patent-card h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 10px;
}
.patent-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mid);
}

/* ── ARTIST ECONOMICS ──────────────────────────────────────────────────────────────── */
.band-amber .band-eyebrow {
  color: rgba(28, 26, 22, 0.65);
}
.band-amber .band-title {
  color: var(--navy);
}
.band-amber .band-lede {
  color: rgba(28, 26, 22, 0.78);
}
.econ-row {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}
.econ-card {
  background: rgba(28, 26, 22, 0.06);
  border: 1px solid rgba(28, 26, 22, 0.12);
  border-radius: 14px;
  padding: 20px 36px;
  text-align: center;
  min-width: 200px;
}
.econ-stat {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.econ-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(28, 26, 22, 0.65);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
}
.econ-vs {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: rgba(28, 26, 22, 0.5);
}

/* ── PRICING ───────────────────────────────────────────────────────────────────── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.tier-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.04),
    0 1px 2px rgba(26, 43, 76, 0.04),
    0 10px 28px rgba(26, 43, 76, 0.06);
}
.tier-card-featured {
  background: var(--navy);
  color: var(--snow);
  box-shadow:
    0 0 0 1px rgba(212, 160, 88, 0.4),
    0 1px 2px rgba(26, 43, 76, 0.06),
    0 22px 50px rgba(26, 43, 76, 0.22);
  transition:
    transform 140ms var(--ease-spring),
    box-shadow 140ms var(--ease-exit);
  will-change: transform;
}
.tier-card-featured:active {
  transform: scale(0.99);
  box-shadow:
    0 0 0 1px rgba(212, 160, 88, 0.5),
    0 1px 2px rgba(26, 43, 76, 0.08),
    0 12px 28px rgba(26, 43, 76, 0.18);
}
.tier-chip {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--navy);
  background: var(--amber);
  padding: 4px 9px;
  border-radius: 4px;
}
.tier-label {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.tier-card-featured .tier-label,
.tier-card-featured .tier-num,
.tier-card-featured .tier-tagline,
.tier-card-featured .tier-bullets li {
  color: var(--snow);
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}
.tier-num {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: -0.012em;
}
.tier-card-featured .tier-num {
  color: var(--amber);
}
.tier-per {
  font-size: 14px;
  color: var(--light);
}
.tier-card-featured .tier-per {
  color: rgba(244, 241, 234, 0.55);
}
.tier-tagline {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mid);
  margin-bottom: 20px;
}
.tier-card-featured .tier-tagline {
  color: rgba(244, 241, 234, 0.7);
}
.tier-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex: 1;
}
.tier-bullets li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mid);
  padding-left: 22px;
  position: relative;
}
.tier-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none' stroke='%23D4A058' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,5 4.5,8 11,1.5'/></svg>");
  background-repeat: no-repeat;
}
.tier-card-featured .tier-bullets li {
  color: rgba(244, 241, 234, 0.85);
}
.tier-cta {
  width: 100%;
  margin-top: auto;
}
.founding-fan {
  margin-top: 28px;
  padding: 22px 28px;
  background: rgba(212, 160, 88, 0.1);
  border: 1px solid rgba(212, 160, 88, 0.25);
  border-radius: 14px;
  text-align: center;
}
.founding-fan p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
  margin-top: 6px;
}

/* ── FOUNDER NOTE ───────────────────────────────────────────────────────────────────────── */
.founder-quote {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-style: italic;
  line-height: 1.5;
  color: var(--snow);
  margin: 18px 0 16px;
}
.founder-sig {
  font-size: 13px;
  color: rgba(244, 241, 234, 0.55);
  letter-spacing: 0.04em;
}

/* ── WAITLIST ───────────────────────────────────────────────────────────────────── */
.waitlist-inner {
  text-align: center;
}
.waitlist-form {
  display: flex;
  gap: 10px;
  margin: 24px auto 12px;
  max-width: 480px;
}
.waitlist-form input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition:
    border-color 140ms var(--ease-exit),
    box-shadow 140ms var(--ease-exit);
}
.waitlist-form input:focus-visible {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(212, 160, 88, 0.18);
}
.waitlist-form button {
  min-width: 130px;
}
.waitlist-status {
  font-size: 13px;
  color: var(--mid);
  min-height: 22px;
  margin-bottom: 6px;
}
.waitlist-status.ok {
  /* #4f8f5a was 3.63:1 on paper; #356b40 clears AA on both bands it renders on
     (5.59 snow / 5.89 paper). */
  color: #356b40;
}
.waitlist-status.error {
  /* --rust (#b46545) was 4.01:1 on paper; a darker rust clears AA (5.48 snow /
     5.78 paper) while staying the same warm-red family. */
  color: #9a4a30;
}
.waitlist-fineprint {
  font-size: 12px;
  color: var(--light);
  line-height: 1.55;
}

/* ── FOOTER ────────────────────────────────────────────────────────────────────────── */
.footer {
  background: var(--snow);
  border-top: 1px solid var(--rule);
  padding: 64px 32px 32px;
  color: var(--mid);
  font-size: 14px;
  line-height: 1.65;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-col-waitlist .footer-waitlist-tag {
  margin: 0 0 10px;
  color: var(--mid);
  font-size: 13px;
  line-height: 1.55;
}
.footer-waitlist-form {
  display: flex;
  gap: 6px;
}
.footer-waitlist-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  background: var(--paper);
  color: var(--text);
}
.footer-waitlist-form input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}
@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer-col-brand,
  .footer-col-waitlist {
    grid-column: 1 / -1;
  }
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col-brand {
  gap: 12px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-wordmark {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
}
.footer-platform {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
  margin-left: -4px;
  align-self: center;
  margin-top: 4px;
}
.footer-tag {
  font-size: 14px;
  color: var(--mid);
}
.footer-credit {
  font-size: 12px;
  color: var(--light);
  margin-top: 4px;
}
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 4px;
}
.footer-col a {
  color: var(--mid);
  font-size: 14px;
  transition: color 140ms var(--ease-exit);
}
.footer-col a:hover {
  color: var(--navy);
}

.legal {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.legal h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.legal p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mid);
  margin-bottom: 12px;
}
.legal a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-bottom {
  max-width: 1100px;
  margin: 32px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--light);
}
.footer-bottom a {
  color: var(--mid);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav {
    padding: 12px 18px;
    gap: 12px;
  }
  .nav-links {
    display: none;
  }
  .hero {
    padding: 56px 22px 72px;
  }
  .hero-actions-stack .btn {
    width: 100%;
  }
  .band {
    padding: 64px 22px;
  }
  .footer {
    padding: 48px 22px 22px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .device-frame-bezel {
    width: 280px;
  }
  .how-compact-list li {
    font-size: 16px;
    padding: 16px 18px 16px 56px;
  }
  .how-compact-list li::before {
    left: 18px;
    top: 16px;
    font-size: 20px;
  }
}

/* ── INSTALL BAND ───────────────────────────────────────────────────────────────────── */
.band-install {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 160, 88, 0.1), transparent 40%),
    radial-gradient(
      circle at 88% 100%,
      rgba(26, 43, 76, 0.06),
      transparent 40%
    ),
    var(--paper);
}
.install-inner {
  text-align: center;
}
.install-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 32px 0 36px;
}
.install-cta .btn {
  min-width: 240px;
}
.install-fallback {
  font-size: 13px;
  font-weight: 500;
  color: var(--mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 43, 76, 0.25);
  transition:
    color 140ms var(--ease-exit),
    text-decoration-color 140ms var(--ease-exit);
}
.install-fallback:hover {
  color: var(--navy);
  text-decoration-color: var(--amber);
}
.install-platforms {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
  text-align: left;
}
.install-platforms li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(26, 43, 76, 0.04),
    0 1px 2px rgba(26, 43, 76, 0.04),
    0 8px 22px rgba(26, 43, 76, 0.05);
}
.install-platform-glyph {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(26, 43, 76, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}
.install-platform-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.install-platform-detail {
  font-size: 12px;
  color: var(--light);
  line-height: 1.5;
}

/* T2x — Success pulse on install completion. Amber checkmark wipes
   across the install band's primary CTA before the button text relabels
   to "Open the app." Triggered by the `installed-pulse` class added in
   main.js when `appinstalled` fires. */
.install-success-flash {
  position: relative;
  overflow: hidden;
}
.install-success-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(212, 160, 88, 0.85) 0%,
      rgba(212, 160, 88, 0) 55%
    ),
    linear-gradient(
      90deg,
      rgba(212, 160, 88, 0.6),
      rgba(212, 160, 88, 0.95) 50%,
      rgba(212, 160, 88, 0.6)
    );
  animation: installSuccessSweep 720ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  pointer-events: none;
}
@keyframes installSuccessSweep {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0.95;
  }
  60% {
    clip-path: inset(0 0% 0 0);
    opacity: 0.95;
  }
  100% {
    clip-path: inset(0 0% 0 0);
    opacity: 0;
  }
}

/* ── SECTION REVEAL (T2s) ───────────────────────────────────────────────── */
.reveal-pending {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 520ms var(--ease-enter),
    transform 520ms var(--ease-enter);
}
.reveal-pending.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Grid children settle in with a short stagger after their band reveals — the
   sequenced entrance the in-app screens use. Keyed under .reveal-pending,
   which JS only adds when motion is allowed, so under reduced motion (or if
   JS fails) the cards render at rest with no hidden state. */
.reveal-pending .cs-feature,
.reveal-pending .value-card {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 460ms var(--ease-enter),
    transform 460ms var(--ease-enter);
}
.reveal-pending.reveal-in .cs-feature,
.reveal-pending.reveal-in .value-card {
  opacity: 1;
  transform: translateY(0);
}
.reveal-pending.reveal-in .cs-feature:nth-child(1),
.reveal-pending.reveal-in .value-card:nth-child(1) {
  transition-delay: 60ms;
}
.reveal-pending.reveal-in .cs-feature:nth-child(2),
.reveal-pending.reveal-in .value-card:nth-child(2) {
  transition-delay: 120ms;
}
.reveal-pending.reveal-in .cs-feature:nth-child(3),
.reveal-pending.reveal-in .value-card:nth-child(3) {
  transition-delay: 180ms;
}
.reveal-pending.reveal-in .cs-feature:nth-child(4) {
  transition-delay: 240ms;
}

/* ── App Store badge (hero / app-section primary CTA) ── */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  border-radius: 13px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 10px 26px -12px rgba(0, 0, 0, 0.5);
  transition:
    transform 140ms var(--ease-spring),
    box-shadow 160ms var(--ease-exit);
  will-change: transform;
}
.appstore-badge:hover {
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.26),
    0 16px 32px -12px rgba(0, 0, 0, 0.55);
}
.appstore-badge:active {
  transform: scale(0.965);
}
.appstore-badge:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.appstore-badge-logo {
  width: 26px;
  height: 26px;
  flex: none;
  color: #fff;
}
.appstore-badge-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  text-align: left;
}
.appstore-badge-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.appstore-badge-word {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.appstore-badge-lg {
  padding: 12px 24px;
  border-radius: 14px;
}
.appstore-badge-lg .appstore-badge-logo {
  width: 30px;
  height: 30px;
}
.appstore-badge-lg .appstore-badge-word {
  font-size: 22px;
}

/* ── Android install badge ─────────────────────────────────────────────
   A true peer of the App Store badge (identical geometry + press physics),
   differentiated on one axis — navy fill + an amber install-arrow glyph —
   so it reads as unmistakably Uki and never as an official store badge.
   Opens the native install prompt or the how-to modal (main.js). */
.android-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  border-radius: 13px;
  background: var(--navy);
  color: var(--snow);
  border: none;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 2px rgba(26, 43, 76, 0.22),
    0 10px 26px -12px rgba(26, 43, 76, 0.5);
  transition:
    transform 140ms var(--ease-spring),
    box-shadow 160ms var(--ease-exit);
  will-change: transform;
}
.android-badge:hover {
  box-shadow:
    0 2px 5px rgba(26, 43, 76, 0.26),
    0 16px 32px -12px rgba(26, 43, 76, 0.55);
}
.android-badge:active {
  transform: scale(0.965);
}
.android-badge:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.android-badge-logo {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--snow);
}
.android-badge-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  text-align: left;
}
.android-badge-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.android-badge-word {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.android-badge-lg {
  padding: 12px 24px;
  border-radius: 14px;
}
.android-badge-lg .android-badge-logo {
  width: 30px;
  height: 30px;
}
.android-badge-lg .android-badge-word {
  font-size: 22px;
}
.nav-cta .android-badge {
  padding: 5px 11px;
  border-radius: 9px;
  gap: 7px;
}
.nav-cta .android-badge-logo {
  width: 18px;
  height: 18px;
}
.nav-cta .android-badge-kicker {
  font-size: 8px;
}
.nav-cta .android-badge-word {
  font-size: 13px;
}

/* App Store + Android badges side by side, rendered as an equal-width matched
   pair (neither out-sizes the other despite different copy lengths). Wraps to
   stacked full-width badges on narrow screens. */
.badge-row {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
/* Keep both badges' copy on their two intended lines so heights always match. */
.appstore-badge-kicker,
.appstore-badge-word,
.android-badge-kicker,
.android-badge-word {
  white-space: nowrap;
}

/* Nav pair: render the App Store + Android badges as equal-width columns so the
   longer "Download on the App Store" copy can't make it read as larger than the
   Android badge. */
.nav-cta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  width: fit-content;
  align-items: center;
}
.nav-cta .appstore-badge,
.nav-cta .android-badge {
  justify-content: center;
}

/* ── Android PWA-install how-to modal ──────────────────────────────────
   Accessible dialog (focus-trap/Esc/backdrop in main.js). Bottom sheet on
   mobile, centered card on desktop. Visual language ported from the
   checkout sheet. */
.uki-install-modal[hidden] {
  display: none;
}
.uki-install-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.uki-install-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 43, 76, 0.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms var(--ease-exit);
}
.uki-install-modal.is-open .uki-install-backdrop {
  opacity: 1;
}
.uki-install-sheet {
  position: relative;
  width: 100%;
  max-width: 468px;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-4);
  text-align: center;
  transform: translateY(100%);
  transition: transform 480ms cubic-bezier(0.32, 1.12, 0.5, 1);
}
.uki-install-modal.is-open .uki-install-sheet {
  transform: translateY(0);
}
.uki-install-grabber {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
  margin: 0 auto 10px;
}
.uki-install-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 140ms var(--ease-exit),
    color 140ms var(--ease-exit);
}
.uki-install-close:hover {
  background: rgba(26, 43, 76, 0.06);
  color: var(--navy);
}
.uki-install-close:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.uki-install-brand {
  display: block;
  margin: 2px auto 10px;
}
.uki-install-title {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
}
.uki-install-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--mid);
  margin: 0 auto 20px;
  max-width: 34ch;
}
.uki-install-steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
  text-align: left;
}
.uki-install-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.uki-install-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.uki-install-step-body {
  display: flex;
  flex-direction: column;
}
.uki-install-step-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.uki-install-step-label strong {
  font-weight: 700;
}
.uki-install-step-hint {
  font-size: 13px;
  color: var(--light);
  margin-top: 2px;
}
.uki-install-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border-radius: 13px;
  background: var(--navy);
  color: var(--snow);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 140ms var(--ease-spring);
}
.uki-install-cta:active {
  transform: scale(0.98);
}
.uki-install-cta:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.uki-install-fineprint {
  font-size: 12.5px;
  color: var(--light);
  margin: 12px 0 0;
}
.uki-install-modal.is-open .uki-install-step {
  animation: uki-install-step-in 340ms var(--ease-spring) both;
}
.uki-install-modal.is-open .uki-install-step:nth-child(1) {
  animation-delay: 90ms;
}
.uki-install-modal.is-open .uki-install-step:nth-child(2) {
  animation-delay: 170ms;
}
.uki-install-modal.is-open .uki-install-step:nth-child(3) {
  animation-delay: 250ms;
}
@keyframes uki-install-step-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (min-width: 560px) {
  .uki-install-modal {
    align-items: center;
  }
  .uki-install-sheet {
    border-radius: 22px;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition:
      transform 360ms var(--ease-spring),
      opacity 240ms var(--ease-exit);
  }
  .uki-install-modal.is-open .uki-install-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .uki-install-grabber {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .uki-install-backdrop,
  .uki-install-sheet {
    transition-duration: 1ms;
  }
  .uki-install-sheet {
    transform: none;
    opacity: 1;
  }
  .uki-install-modal.is-open .uki-install-step {
    animation: none;
  }
}

/* Capture / status tags land with a small staggered pop as their section
   scroll-reveals (rides .band.reveal-in; instant under reduced-motion). */
.reveal-pending .capture-tag,
.reveal-pending .status-tag {
  opacity: 0;
  transform: translateY(5px) scale(0.9);
  transition:
    opacity 340ms var(--ease-spring),
    transform 340ms var(--ease-spring);
}
.reveal-pending.reveal-in .product-tags > :nth-child(1) {
  transition-delay: 230ms;
}
.reveal-pending.reveal-in .product-tags > :nth-child(2) {
  transition-delay: 320ms;
}
.reveal-pending.reveal-in .capture-tag,
.reveal-pending.reveal-in .status-tag {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ──────────────────────────────────────────────────────────────────────────────
   SUBPAGE CHROME
   ──────────────────────────────────────────────────────────────────────────────
   Used by /membership/, /hardware/, /artists/, /store/, /about/, /faq/.
   The homepage is one long scroll; subpages are narrower, focused product
   pages with a single hero and a couple of bands. */

.nav-links a[aria-current="page"] {
  color: var(--navy);
  position: relative;
}
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--amber);
  border-radius: 1px;
}

/* Subpage hero: shorter, more focused than the homepage hero. */
.sub-hero {
  position: relative;
  padding: 80px 32px 56px;
  background: var(--paper);
  text-align: center;
  overflow: hidden;
}
.sub-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.sub-hero-bg::before,
.sub-hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.sub-hero-bg::before {
  width: 360px;
  height: 360px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, var(--amber), transparent 70%);
}
.sub-hero-bg::after {
  width: 320px;
  height: 320px;
  top: -60px;
  right: -100px;
  background: radial-gradient(circle, rgba(26, 43, 76, 0.4), transparent 70%);
}
.sub-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.sub-hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.014em;
  color: var(--navy);
  font-weight: 600;
  margin: 14px 0 18px;
}
.sub-hero p.lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--mid);
  max-width: 560px;
  margin: 0 auto;
}

/* Coming-soon hero variant: oversized status word + delicate underline. */
.sub-hero-coming {
  padding: 88px 32px 80px;
}
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(212, 160, 88, 0.14);
  color: #8c6526;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.coming-soon-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(212, 160, 88, 0.3);
  animation: comingSoonPulse 1.8s ease-in-out infinite;
}
@keyframes comingSoonPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   PRICING (membership)
   ────────────────────────────────────────────────────────────────────────────── */

.pricing-band {
  padding: 72px 32px 88px;
  background: var(--snow);
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.pricing-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 32px 28px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card-featured {
  background: var(--navy);
  color: var(--snow);
  border-color: var(--navy);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 60px -24px rgba(26, 43, 76, 0.45);
}
.pricing-card-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(
    circle at 18% 0%,
    rgba(212, 160, 88, 0.18),
    transparent 55%
  );
}
.pricing-tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 14px;
}
.pricing-card-featured .pricing-tier {
  color: var(--amber);
}

.pricing-amount {
  /* Numerals match the in-app readout face (DM Sans, tabular lining figures)
     instead of the editorial serif, so prices read identically to the app. */
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.pricing-card-featured .pricing-amount {
  color: var(--snow);
}
.pricing-amount-suffix {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--light);
  margin-left: 4px;
  letter-spacing: 0;
}
.pricing-card-featured .pricing-amount-suffix {
  color: rgba(244, 241, 234, 0.6);
}

.pricing-tagline {
  font-size: 13px;
  color: var(--light);
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}
.pricing-card-featured .pricing-tagline {
  color: rgba(244, 241, 234, 0.7);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-features li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--mid);
  padding-left: 22px;
  position: relative;
}
.pricing-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 12px;
  height: 8px;
  border-left: 1.6px solid var(--amber);
  border-bottom: 1.6px solid var(--amber);
  transform: rotate(-45deg);
}
.pricing-card-featured .pricing-features li {
  color: rgba(244, 241, 234, 0.85);
}
.pricing-features li strong {
  color: var(--navy);
  font-weight: 600;
}
.pricing-card-featured .pricing-features li strong {
  color: var(--snow);
}

.pricing-cta {
  width: 100%;
  margin-top: auto;
}

/* Founder pricing — yearly toggle with strike-through. */
.pricing-toggle {
  display: inline-flex;
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid rgba(244, 241, 234, 0.14);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
}
.pricing-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(244, 241, 234, 0.7);
  font: inherit;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    color 160ms var(--ease-exit),
    background 160ms var(--ease-exit);
}
.pricing-toggle-btn[aria-selected="true"] {
  background: var(--amber);
  color: var(--navy);
}
.pricing-toggle-savings {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(26, 43, 76, 0.18);
}
.pricing-toggle-btn[aria-selected="true"] .pricing-toggle-savings {
  background: rgba(26, 43, 76, 0.18);
}

/* Strike-through original price next to active founder price. */
.price-original {
  display: inline-block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: rgba(244, 241, 234, 0.42);
  margin-right: 12px;
  position: relative;
  letter-spacing: -0.01em;
  vertical-align: 2px;
}
.price-original::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 54%;
  height: 2px;
  background: var(--amber);
  transform: rotate(-8deg);
  border-radius: 2px;
}
/* Billing-toggle visibility: controlled by the [hidden] attribute, which
   the browser maps to display:none. JS on /membership/ flips [hidden] on
   each variant block when the user clicks Monthly / Yearly. No CSS rules
   needed here — [hidden] does the right thing for every element type
   (divs, anchors, spans). */

.founder-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(212, 160, 88, 0.16);
  border: 1px solid rgba(212, 160, 88, 0.3);
  border-radius: 10px;
  font-size: 12px;
  color: var(--snow);
  line-height: 1.4;
}
.founder-callout-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(212, 160, 88, 0.16);
}

/* Pricing math callout below the cards. */
.pricing-math {
  max-width: 560px;
  margin: 56px auto 0;
  padding: 28px 28px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.pricing-math-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 16px;
}
.pricing-math-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 14px;
  color: var(--mid);
}
.pricing-math-row:last-child {
  border-bottom: 0;
}
.pricing-math-row.pricing-math-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--navy);
  border-bottom: 0;
  color: var(--navy);
  font-weight: 600;
}
.pricing-math-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pricing-math-positive {
  color: #3f8b52;
}
.pricing-math-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--light);
  line-height: 1.5;
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────────────────
   FAQ (details / summary)
   ────────────────────────────────────────────────────────────────────────────── */

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.faq-list details {
  border-bottom: 1px solid var(--rule);
  padding: 22px 4px;
}
.faq-list summary {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  -webkit-tap-highlight-color: transparent;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(var(--mid), var(--mid)) center / 10px 1.6px no-repeat,
    linear-gradient(var(--mid), var(--mid)) center / 1.6px 10px no-repeat,
    transparent;
  transition:
    transform 280ms var(--ease-spring),
    background-color 200ms var(--ease-exit);
}
.faq-list details[open] summary::after {
  background:
    linear-gradient(var(--amber), var(--amber)) center / 10px 1.6px no-repeat,
    transparent;
  transform: rotate(180deg);
}
.faq-list details > p {
  margin-top: 14px;
  color: var(--mid);
  font-size: 15px;
  line-height: 1.65;
  max-width: 640px;
  animation: faqAnswerIn 320ms var(--ease-enter) both;
}
@keyframes faqAnswerIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   ABOUT (manifesto, patents, mission)
   ────────────────────────────────────────────────────────────────────────────── */

.manifesto {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--snow);
  max-width: 720px;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.manifesto p {
  margin-bottom: 18px;
}
.manifesto p:last-child {
  margin-bottom: 0;
}
.manifesto em {
  color: var(--amber);
  font-style: italic;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 16px;
}
.value-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 26px 24px;
}
.value-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.value-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mid);
}
.value-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(212, 160, 88, 0.14);
  color: var(--amber);
  margin-bottom: 14px;
}

.patents-list {
  max-width: 720px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.patents-list li {
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  font-size: 14px;
}
.patents-list li:first-child {
  border-top: 0;
}
.patents-list .patents-id {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  padding-top: 2px;
}
.patents-list .patents-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 4px;
  font-weight: 600;
}
.patents-list .patents-desc {
  color: var(--mid);
  line-height: 1.55;
}

/* ──────────────────────────────────────────────────────────────────────────────
   COMING-SOON page bodies (hardware / artists / store)
   ────────────────────────────────────────────────────────────────────────────── */

.cs-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.cs-feature {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-2);
}
.cs-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(26, 43, 76, 0.06);
  color: var(--navy);
  margin-bottom: 14px;
}
.band-navy .cs-feature {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.band-navy .cs-feature-icon {
  background: rgba(212, 160, 88, 0.18);
  color: var(--amber);
}
.cs-feature h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.band-navy .cs-feature h3 {
  color: var(--snow);
}
.cs-feature p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mid);
}
.band-navy .cs-feature p {
  color: rgba(244, 241, 234, 0.7);
}

/* Single-column "spec list" for hardware specs / artist economics. */
.cs-speclist {
  max-width: 760px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.cs-speclist li {
  background: var(--paper);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  font-size: 14px;
}
.cs-speclist .cs-speclist-key {
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.cs-speclist .cs-speclist-val {
  color: var(--mid);
  line-height: 1.5;
}

/* Stripe-button row on the membership card with help text below. */
.pricing-cta-help {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(244, 241, 234, 0.5);
  text-align: center;
  line-height: 1.4;
}
.pricing-card:not(.pricing-card-featured) .pricing-cta-help {
  color: var(--light);
}

/* ──────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .value-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cs-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .sub-hero {
    padding: 60px 22px 40px;
  }
  .sub-hero-coming {
    padding: 64px 22px 56px;
  }
  .pricing-band {
    padding: 56px 22px 64px;
  }
  .value-grid {
    grid-template-columns: 1fr;
  }
  .cs-feature-grid {
    grid-template-columns: 1fr;
  }
  .patents-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cs-speclist li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 18px;
  }
  .pricing-amount {
    font-size: 44px;
  }
  .price-original {
    font-size: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE + TABLET NAV — Horizontal section tabs (replaces the earlier drawer)
   ──────────────────────────────────────────────────────────────────────────────
   The drawer hid every section behind a hamburger — discoverability was bad
   and tap-through to subpages was unreliable on iOS. Now on <1000px, .nav
   wraps and .nav-links becomes a horizontal pill-tab strip on a second row
   below the brand + install button. Always visible. Always scrollable. Edge
   masks hint at overflow. The active tab auto-scrolls into view via main.js
   on page load.

   The band runs to 999px, not 720px: the single-row desktop header needs
   1000px to lay the brand + five labels + both install badges out on one
   line, so between 721–999px (every iPad in portrait — 768 / 810 / 820 /
   834) the labels used to wrap mid-phrase and stack "Uki / Music / App"
   three lines deep. iPad landscape (1024px+) is untouched and keeps the
   single-row header. Phone values live here; the 721–999px sub-band below
   widens the same strip for tablet-sized touch targets. */
.nav-menu-toggle {
  display: none !important;
} /* drawer toggle deprecated */
.nav-backdrop {
  display: none !important;
} /* drawer backdrop deprecated */

@media (max-width: 999px) {
  .nav {
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 14px 0;
    gap: 8px;
  }
  .nav-brand {
    flex: 0 0 auto;
  }
  .nav-cta {
    flex: 0 0 auto;
    margin-left: auto;
  }
  /* On phones both nav badges keep the smaller base size (5px/18px/13px) and
     are equalized to one width by the .nav-cta grid — no per-badge override
     here, or the App Store badge would out-size the Android one. */

  /* Section-tab strip — second row, horizontal scroll. The strip lives
     inside the nav's natural padding (no negative margin). On iOS Safari
     a negative margin pushed scrollWidth past the viewport, surfacing a
     horizontal page scroll — gone now. */
  .nav-links {
    display: flex;
    flex-direction: row;
    flex: 1 0 100%;
    order: 3;
    gap: 6px;
    margin: 0;
    padding: 8px 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox */
    /* Right edge-fade hints the strip is scrollable. No left fade: it washed
       out the left side of the first (active) pill on page load. */
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 14px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 14px),
      transparent 100%
    );

    /* Reset everything inherited from the desktop / drawer rules so the
       row sits flush in the nav and doesn't get misplaced. */
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    z-index: auto;
    max-height: none;
  }
  .nav-links::-webkit-scrollbar {
    display: none;
  } /* WebKit */

  .nav-links a {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mid);
    background: rgba(26, 43, 76, 0.05);
    border-radius: 999px;
    scroll-snap-align: start;
    scroll-margin-inline: 14px;
    transition:
      background-color 160ms var(--ease-exit),
      color 160ms var(--ease-exit),
      transform 180ms var(--ease-spring);
    white-space: nowrap;
  }
  .nav-links a:hover {
    background: rgba(26, 43, 76, 0.1);
    color: var(--navy);
  }
  .nav-links a:active {
    transform: scale(0.96);
  }
  .nav-links a[aria-current="page"] {
    background: var(--amber);
    color: var(--navy);
  }
  /* The desktop underline indicator is meaningless inside a pill. */
  .nav-links a[aria-current="page"]::after {
    display: none;
  }

  /* Tighten the .nav-scrolled vibrancy so the tab strip stays legible
     against blurred content beneath. */
  .nav.nav-scrolled {
    background: rgba(249, 247, 242, 0.92);
  }
}

/* Tablet sub-band (iPad portrait) — the same second-row tab strip, given the
   room a tablet actually has. The five pills total ~645px, so from 721px up
   the whole set fits inside the 32px gutters with no scrolling: the strip
   reads as a deliberate row of tabs, not a cramped phone rail. (Below 721px
   the phone values above take over and the rail scrolls again.) Only spacing
   changes here — layout,
   colors, and the active-pill treatment are inherited from the block above. */
@media (min-width: 721px) and (max-width: 999px) {
  .nav {
    padding: 12px 32px 0; /* desktop's 32px gutters, kept */
    gap: 16px;
  }
  .nav-links {
    gap: 8px;
    padding: 8px 0 12px;
    /* Nothing overflows at this width, so the right-edge scroll hint would
       just fade empty space. Drop it; overflow-x stays auto as a safety net
       for long labels or large accessibility text sizes. */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .nav-links a {
    padding: 12px 18px; /* 45px tall — clears the 44pt target */
    letter-spacing: 0.005em;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH — Pricing card hover lift + conic-gradient sweep
   ──────────────────────────────────────────────────────────────────────────────
   Hover lifts the card 2px with spring physics. The featured (Citizenship)
   card additionally gets a once-only amber sweep the first time it enters
   the viewport — JS adds .pricing-card-revealed on intersection. */
.pricing-card {
  position: relative;
  transition:
    transform 280ms var(--ease-spring),
    box-shadow 320ms var(--ease-exit);
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.pricing-card-featured:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 32px 80px -22px rgba(26, 43, 76, 0.55);
}

/* Conic-gradient ring that sweeps once on first reveal. Lives on a
   second pseudo so it doesn't conflict with the radial highlight in
   .pricing-card-featured::before. mask-composite carves the ring out
   of the rectangle so only a 1.5px border remains. */
.pricing-card-featured.pricing-card-revealed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(212, 160, 88, 0) 6%,
    rgba(212, 160, 88, 0.85) 14%,
    rgba(212, 160, 88, 0) 22%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: pricingSweep 1500ms cubic-bezier(0.4, 0, 0.2, 1) 280ms 1 both;
  z-index: 2;
}
@keyframes pricingSweep {
  0% {
    transform: rotate(-30deg);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: rotate(330deg);
    opacity: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH — Founder strikethrough draw-in
   ──────────────────────────────────────────────────────────────────────────────
   When the Citizenship card enters the viewport, the slash through $49
   draws left-to-right with a 240ms delay so the eye reads the original
   price first, then sees it crossed out. Default (no-JS / no-observer)
   state is fully drawn — the animation is a bonus, never load-bearing. */
.price-original::after {
  transform-origin: left center;
}
.pricing-card-revealed .price-original::after {
  animation: priceStrike 480ms cubic-bezier(0.32, 0.72, 0, 1) 240ms both;
}
@keyframes priceStrike {
  from {
    transform: rotate(-8deg) scaleX(0);
  }
  to {
    transform: rotate(-8deg) scaleX(1);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH ROUND 2 — Sub-hero entrance stagger
   ──────────────────────────────────────────────────────────────────────────────
   Every subpage's hero (.eyebrow → h1 → .lede, with optional badge or
   secondary CTA) now reveals with a 60ms cascade so the page feels
   *staged* rather than instantaneous. Pure CSS, runs on page load — no
   JS, no IntersectionObserver. The 8px translateY + ease-spring is the
   same vocabulary iOS uses for its sheet entrances. */
.sub-hero-inner > * {
  animation: subHeroIn 600ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.sub-hero-inner > *:nth-child(1) {
  animation-delay: 0ms;
}
.sub-hero-inner > *:nth-child(2) {
  animation-delay: 60ms;
}
.sub-hero-inner > *:nth-child(3) {
  animation-delay: 120ms;
}
.sub-hero-inner > *:nth-child(4) {
  animation-delay: 180ms;
}
.sub-hero-inner > *:nth-child(5) {
  animation-delay: 240ms;
}
@keyframes subHeroIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH ROUND 2 — Pressed-state depth on buttons
   ──────────────────────────────────────────────────────────────────────────────
   Buttons used to scale down on :active but didn't shed their elevation
   — they shrunk in mid-air instead of pressing into the page. Adding a
   default lift shadow on the two solid variants + collapsing it on
   press, plus shortening the press transition to 80ms (release retains
   the 140ms spring), gives the right tactile "click" feel. */
.btn-amber {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 4px 12px -4px rgba(212, 160, 88, 0.42);
}
.btn-amber:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 16px -4px rgba(212, 160, 88, 0.52);
}
.btn-navy {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 12px -4px rgba(26, 43, 76, 0.42);
}
.btn-navy:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 16px -4px rgba(26, 43, 76, 0.52);
}

/* Press: shrink a touch deeper, collapse the elevation, speed up the
   transition. The release uses the parent .btn's spring (140ms) so the
   bounce-back feels lively. */
.btn:active {
  transform: scale(0.96);
  transition-duration: 80ms;
  transition-timing-function: var(--ease-exit);
}
.btn-amber:active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 1px 3px -1px rgba(212, 160, 88, 0.35);
}
.btn-navy:active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 3px -1px rgba(26, 43, 76, 0.45);
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH ROUND 2 — FAQ row hover feedback
   ──────────────────────────────────────────────────────────────────────────────
   Tapping anywhere on a FAQ row toggles the answer (browser default for
   <details>) but visual feedback was previously chevron-only. Add a
   subtle row tint on hover + open state so the tap-target reads as a
   tap-target. The bordered divider between rows continues to live on
   the details element, so the rounded hover bg + sharp divider coexist
   cleanly. */
.faq-list details {
  transition: background-color 200ms var(--ease-exit);
  border-radius: 10px;
}
.faq-list details:hover,
.faq-list details[open] {
  background-color: rgba(26, 43, 76, 0.035);
}
.faq-list summary {
  transition: color 160ms var(--ease-exit);
}
.faq-list details:hover summary::after {
  background:
    linear-gradient(var(--navy), var(--navy)) center / 10px 1.6px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.6px 10px no-repeat,
    transparent;
}
.faq-list details[open]:hover summary::after {
  background:
    linear-gradient(var(--amber), var(--amber)) center / 10px 1.6px no-repeat,
    transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   T2 POLISH — FAQ summary pressed state
   ──────────────────────────────────────────────────────────────────────────────
   The whole row is the tap target; a small scale on :active gives it the
   same tactile press as the buttons (see .btn:active). Transform-only, so
   it stays on the compositor; the global reduced-motion reset zeroes it. */
.faq-list summary {
  transition:
    color 160ms var(--ease-exit),
    transform 120ms var(--ease-exit);
}
.faq-list summary:active {
  transform: scale(0.985);
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH — FAQ genuine height expand
   ──────────────────────────────────────────────────────────────────────────────
   Engines that ship interpolate-size (allow-keywords) can animate the
   ::details-content box from 0 to its auto height, so the answer grows
   into place instead of snapping the row taller. Progressive enhancement:
   browsers without support (incl. current Safari/iOS) keep the instant
   open plus the faqAnswerIn fade below. Inside @supports we hand the
   reveal to the container and silence the per-paragraph keyframe so the
   two don't double up. The global prefers-reduced-motion reset collapses
   every duration to ~0. */
@supports (interpolate-size: allow-keywords) {
  .faq-list {
    interpolate-size: allow-keywords;
  }
  .faq-list details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size 340ms var(--ease-enter),
      opacity 240ms var(--ease-exit),
      content-visibility 340ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  .faq-list details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
  .faq-list details > p {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH ROUND 3 — Pricing toggle slide indicator
   ──────────────────────────────────────────────────────────────────────────────
   The Monthly / Yearly toggle previously snapped the amber background
   from one button to the other. Now a single ::before pill slides
   between the two positions with iOS spring physics. Equal-width
   buttons (flex: 1 1 0) so the 50% slide is geometrically exact — no
   JS measurement needed. */
.pricing-toggle {
  position: relative;
}
.pricing-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--amber);
  border-radius: 7px;
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 0;
}
.pricing-card-featured[data-billing="yearly"] .pricing-toggle::before {
  transform: translateX(100%);
}
.pricing-toggle-btn {
  flex: 1 1 0%;
  min-width: 96px;
  position: relative;
  z-index: 1;
  /* Override the previous always-on amber bg — the sliding pill
     handles selection now. The button itself stays transparent so the
     pill is what actually moves. */
  background: transparent !important;
}
.pricing-toggle-btn[aria-selected="true"] {
  color: var(--navy);
}
.pricing-toggle-btn[aria-selected="true"] .pricing-toggle-savings {
  background: rgba(26, 43, 76, 0.22);
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH ROUND 3 — Universal card hover lift
   ──────────────────────────────────────────────────────────────────────────────
   Same hover vocabulary as .pricing-card, applied across every card on
   the site so the whole page feels uniformly responsive. translateY(-2px)
   + a soft layered shadow on light backgrounds, slightly deeper on the
   navy band where contrast is higher. */
.cs-feature,
.value-card {
  transition:
    transform 280ms var(--ease-spring),
    box-shadow 320ms var(--ease-exit);
}
.cs-feature:hover,
.value-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.band-navy .cs-feature:hover,
.band-navy-soft .cs-feature:hover {
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────────
   T1 POLISH ROUND 3 — Sticky active-tab indicator
   ──────────────────────────────────────────────────────────────────────────────
   The amber underline on aria-current="page" was 2px tall, flush with
   the text width, and could vanish against the blurred nav backdrop on
   subpages. Bumped to 2.5px, extended 3px past the text on each side,
   added a subtle glow + heavier text weight on the current tab so the
   user always knows where they are. */
.nav-links a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
}
.nav-links a[aria-current="page"]::after {
  left: -3px;
  right: -3px;
  bottom: -7px;
  height: 2.5px;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(212, 160, 88, 0.35);
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════════════
   v13 ADDITIONS — persistent install bar, shop/artist sub-tabs, product &
   album cards, artist directory + sign-up, sample artist page.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* ── SHOP / ARTIST SUB-TABS ──────────────────────────────────────────────────────────── */
.shop-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(249, 247, 242, 0.9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--rule);
}
.shop-tabs {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  justify-content: center;
}
.shop-tab {
  appearance: none;
  border: 1.5px solid transparent;
  background: rgba(26, 43, 76, 0.06);
  color: var(--mid);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 160ms var(--ease-exit),
    color 160ms var(--ease-exit),
    transform 180ms var(--ease-spring);
}
.shop-tab:hover {
  background: rgba(26, 43, 76, 0.1);
  color: var(--navy);
}
.shop-tab:active {
  transform: scale(0.97);
}
.shop-tab[aria-selected="true"] {
  background: var(--navy);
  color: var(--snow);
}
.shop-tab:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.shop-panel[hidden] {
  display: none;
}

/* ── PRODUCT CARDS (hardware, merch) ─────────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Hardware now ships just two devices — a centered 2-up. Scoped to a
   modifier so the generic .product-grid (artists/sample merch grid, 3
   cards) keeps its 3-column layout. */
.product-grid--pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 2px 10px rgba(26, 43, 76, 0.04);
  transition:
    transform 200ms var(--ease-exit),
    box-shadow 200ms var(--ease-exit);
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(26, 43, 76, 0.1);
}
.product-art {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 43, 76, 0.05);
  color: var(--navy);
  margin-bottom: 16px;
}
.product-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: 6px;
}
.product-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.product-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 14px;
}
.product-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.format-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(212, 160, 88, 0.14);
  border: 1px solid rgba(212, 160, 88, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
}
.product-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}
.product-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.product-price-note {
  font-size: 11px;
  font-weight: 500;
  color: var(--light);
}
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 10px;
}

/* Capture-type + status tags on hardware cards. Warm = analog, cool =
   digital: the color contrast makes the analog/digital split legible
   before the label is even read. Neutral grey = a "not yet" status. */
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px;
}
.capture-tag,
.status-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.capture-analog {
  color: #855313;
  background: rgba(212, 160, 88, 0.2);
  border-color: rgba(212, 160, 88, 0.55);
}
.capture-digital {
  color: #2f5a86;
  background: rgba(58, 110, 162, 0.14);
  border-color: rgba(58, 110, 162, 0.42);
}
.status-tag {
  color: var(--mid);
  background: rgba(122, 114, 100, 0.12);
  border-color: rgba(122, 114, 100, 0.34);
}

/* ── ALBUM CARDS (music store, discography) ──────────────────────────────────────────── */
.album-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.album-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26, 43, 76, 0.04);
  transition:
    transform 200ms var(--ease-exit),
    box-shadow 200ms var(--ease-exit);
}
.album-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(26, 43, 76, 0.1);
}
.album-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--navy);
}
.album-meta {
  padding: 14px 14px 8px;
}
.album-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.album-artist {
  font-size: 12px;
  color: var(--light);
  margin-top: 2px;
}
.album-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px 14px;
}
.album-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.shop-note {
  text-align: center;
  font-size: 13px;
  color: var(--light);
  max-width: 560px;
  margin: 28px auto 0;
}

/* ── ARTIST DIRECTORY ────────────────────────────────────────────────────────────────── */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.artist-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px;
  transition:
    transform 200ms var(--ease-exit),
    box-shadow 200ms var(--ease-exit),
    border-color 200ms var(--ease-exit);
}
.artist-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(26, 43, 76, 0.1);
}
.artist-card-featured {
  border-color: rgba(212, 160, 88, 0.5);
  background: linear-gradient(180deg, rgba(212, 160, 88, 0.08), #fff 60%);
}
.artist-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--avatar, var(--navy));
  color: var(--snow);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
}
.artist-card-body {
  min-width: 0;
}
.artist-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.artist-card-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(212, 160, 88, 0.16);
  border-radius: 999px;
  padding: 2px 7px;
}
.artist-card-genre {
  font-size: 13px;
  color: var(--mid);
  margin-top: 2px;
}
.artist-card-fans {
  font-size: 12px;
  color: var(--light);
  margin-top: 3px;
}

/* ── ARTIST SIGN-UP FORM ─────────────────────────────────────────────────────────────── */
.artist-form {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.artist-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.artist-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.artist-field span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mid);
}
.artist-field input,
.artist-field select {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  transition:
    border-color 160ms var(--ease-exit),
    box-shadow 160ms var(--ease-exit);
}
.artist-field input:focus,
.artist-field select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(212, 160, 88, 0.18);
}
.btn-block {
  width: 100%;
}
.artist-status {
  font-size: 14px;
  text-align: center;
  min-height: 20px;
  color: var(--mid);
}
.artist-status.ok {
  color: #2c6b3f;
  font-weight: 600;
}
.artist-status.error {
  color: var(--rust);
  font-weight: 600;
}
.artist-status-on-dark {
  color: rgba(244, 241, 234, 0.8);
}
.artist-legal {
  font-size: 12px;
  color: var(--light);
  text-align: center;
}
.artist-form-inline {
  flex-direction: row;
  max-width: 460px;
  gap: 10px;
}
.artist-form-inline input {
  flex: 1;
  font-family: var(--sans);
  font-size: 15px;
  border: 1.5px solid rgba(244, 241, 234, 0.25);
  background: rgba(244, 241, 234, 0.06);
  color: var(--snow);
  border-radius: 12px;
  padding: 12px 14px;
}
.artist-form-inline input::placeholder {
  color: rgba(244, 241, 234, 0.5);
}
.artist-form-inline input:focus {
  outline: none;
  border-color: var(--amber);
}

/* ── SAMPLE ARTIST PAGE ──────────────────────────────────────────────────────────────── */
.sample-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(212, 160, 88, 0.14);
  border-bottom: 1px solid rgba(212, 160, 88, 0.3);
  font-size: 13px;
  color: var(--mid);
}
.sample-banner a {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1.5px solid var(--amber);
}
.artist-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: 64px 32px;
}
.artist-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(212, 160, 88, 0.28),
      transparent 55%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(212, 160, 88, 0.12),
      transparent 50%
    );
  pointer-events: none;
}
.artist-hero-inner {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.artist-hero-avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #2a3a5c, #101a30);
  color: var(--amber);
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 700;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(212, 160, 88, 0.4);
}
.artist-hero-copy .eyebrow {
  color: var(--amber);
  margin-bottom: 10px;
}
.artist-hero-copy h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--snow);
  margin-bottom: 10px;
}
.artist-hero-tag {
  font-size: 16px;
  color: rgba(244, 241, 234, 0.7);
  font-style: italic;
  font-family: var(--serif);
  margin-bottom: 20px;
}
.artist-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 22px;
}
.artist-stat {
  font-size: 13px;
  color: rgba(244, 241, 234, 0.6);
}
.artist-stat strong {
  color: var(--snow);
  font-size: 16px;
}
.artist-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.artist-hero-actions .btn-outline {
  border-color: rgba(244, 241, 234, 0.4);
  color: var(--snow);
}
.artist-hero-actions .btn-outline:hover {
  background: rgba(244, 241, 234, 0.08);
  border-color: var(--snow);
}

.tour-list {
  list-style: none;
  margin-top: 28px;
}
.tour-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--rule);
}
.tour-date {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--amber);
  width: 72px;
  flex-shrink: 0;
}
.tour-venue {
  flex: 1;
  font-size: 15px;
  color: var(--text);
}
.tour-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  border: 1.5px solid rgba(26, 43, 76, 0.22);
  border-radius: 999px;
  padding: 6px 16px;
  flex-shrink: 0;
}
.tour-cta:hover {
  border-color: var(--amber);
}

/* ── RESPONSIVE (v13) ────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
  }
  .album-grid {
    grid-template-columns: 1fr 1fr;
  }
  .artist-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  .artist-grid {
    grid-template-columns: 1fr;
  }
  .artist-form-row {
    grid-template-columns: 1fr;
  }
  .artist-hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 22px;
  }
  .artist-hero-proof,
  .artist-hero-actions {
    justify-content: center;
  }
  .artist-form-inline {
    flex-direction: column;
  }
}
@media (max-width: 420px) {
  .album-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── UKI ONE PREORDER ─────────────────────────────────────────────────────────
   A featured, elevated card for the limited-time hardware preorder. Sits in a
   band-paper section right after the hero. Reuses the brand tokens; the amber
   top-rule + save pill + strikethrough price carry the "limited drop" read. */
.uki-one {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 52px 40px;
  text-align: center;
  box-shadow: var(--shadow-3);
}
.uki-one::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.uki-one-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9822f;
  margin-bottom: 16px;
}
.uki-one-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(212, 160, 88, 0.18);
  animation: ukiOnePulse 2.4s ease-in-out infinite;
}
@keyframes ukiOnePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.uki-one-price {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 8px;
}
.uki-one-was {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 24px;
  font-weight: 600;
  color: var(--light);
  text-decoration: line-through;
  text-decoration-color: rgba(180, 101, 69, 0.7);
  text-decoration-thickness: 2px;
}
.uki-one-now {
  /* App-matched numerals (DM Sans tabular lining) rather than editorial serif. */
  font-family: var(--font-num);
  font-size: clamp(44px, 7vw, 58px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}
.uki-one-save {
  align-self: center;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--snow);
  background: var(--amber);
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(212, 160, 88, 0.4);
}
.uki-one-ends {
  font-family: var(--sans);
  /* Tabular figures keep the live countdown from reflowing each second. */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 14px;
  font-weight: 600;
  color: #b9822f;
  margin: 2px 0 28px;
}
.uki-one-cta {
  padding: 16px 36px;
  font-size: 16px;
}
.uki-one-fine {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--light);
}
.uki-one-fine strong {
  color: var(--text);
  font-weight: 700;
}
.uki-one-sep {
  opacity: 0.4;
}

/* ── Uki One RESERVATION program (two-track: US SetupIntent / Intl waitlist) ─ */
.uki-one-price-note {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--light);
  margin: 8px 0 28px;
}
.uki-one-track {
  max-width: 480px;
  margin: 0 auto 26px;
  padding: 26px 24px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  text-align: left;
}
.uki-one-track-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-ink, #8a5a1c);
  margin: 0 0 10px;
}
.uki-one-track-copy {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mid);
  margin: 0 0 16px;
}
.uki-one-track-copy strong {
  color: var(--text);
  font-weight: 700;
}
/* FCC pre-authorization disclaimer — must read as the honest fine print. */
.uki-one-disclaimer {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--light);
  margin: 4px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--rule);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 8px 8px 0;
}
.uki-one-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 12px;
}
.uki-one-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition:
    border-color 140ms var(--ease-exit),
    box-shadow 140ms var(--ease-exit);
}
.uki-one-form input:focus-visible {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(212, 160, 88, 0.18);
}
/* Stripe card Element mounts here (US-live only). */
.uki-one-card-element {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: #fff;
  min-height: 46px;
}
.uki-one-authz {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--light);
  margin: 0;
}
.uki-one-submit {
  width: 100%;
}
.uki-one-status {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid);
  min-height: 20px;
  margin-bottom: 4px;
}
.uki-one-status.ok {
  color: #4f8f5a;
}
.uki-one-status.error {
  color: var(--rust);
}
.uki-one-reg {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--light);
  margin: 4px 0 14px;
}

/* Footer shop link. */
.footer-shop-cta {
  display: inline-block;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--amber-ink);
  text-decoration: none;
  margin-top: 4px;
}
.footer-shop-cta:hover {
  color: #6f4f1e;
}

@media (prefers-reduced-motion: reduce) {
  .uki-one-dot {
    animation: none;
  }
}

/* ── UKI ONE — device illustration + scroll reveal (polish pass) ───────────── */
.uki-one-device {
  width: clamp(120px, 22vw, 150px);
  margin: 0 auto 20px;
}
.uki-one-device svg {
  display: block;
  width: 100%;
  height: auto;
}
.uki-one-led {
  animation: ukiOneLed 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes ukiOneLed {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uki-one-led {
    animation: none;
  }
}

/* ── UKI ONE — two-button region hierarchy (Board + Design consensus) ─────────
   US primary (amber), International secondary (ghost). Each button prints its
   own shipping rate (no surprise at checkout) and links to a region-locked
   Payment Link (wrong rate is impossible — Stripe rejects the address). Keep
   BOTH links' price + FOUNDERWHOLESALE in sync — "changed a Payment Link?
   change both." */
.uki-one-cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
}
.uki-one-cta {
  flex-direction: column;
  gap: 3px;
  padding: 13px 26px;
  line-height: 1.15;
}
.uki-one-cta-label {
  font-size: 16px;
  font-weight: 700;
}
.uki-one-cta-note {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.82;
}
/* Secondary — international, ghost weight beneath the amber primary. */
.uki-one-cta-intl {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--rule);
  box-shadow: none;
}
.uki-one-cta-intl:hover {
  border-color: var(--amber);
  background: rgba(212, 160, 88, 0.06);
}
.uki-one-cta-intl .uki-one-cta-note {
  color: var(--light);
  opacity: 1;
}

/* ── UKI ONE — layered spring arrival (Apple-polish pass) ─────────────────────
   The preorder card is the money moment, so it earns a composed entrance rather
   than a flat band fade: the card springs up as a unit, its contents settle in
   sequence (device → eyebrow → title → lede → price → deadline → CTAs → fine),
   and the SAVE pill stamps in last. Everything is keyed under .reveal-pending,
   which main.js only adds when motion is allowed — reduced-motion users get the
   static card for free. GPU-only (transform/opacity). */
.reveal-pending .uki-one {
  transform: scale(0.965);
  transition:
    transform 640ms var(--ease-spring),
    box-shadow 640ms var(--ease-exit);
  will-change: transform;
}
.reveal-pending.reveal-in .uki-one {
  transform: scale(1);
  transition-delay: 40ms;
  box-shadow:
    0 1px 2px rgba(26, 43, 76, 0.05),
    0 34px 82px rgba(26, 43, 76, 0.11);
}
.reveal-pending .uki-one > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 460ms var(--ease-enter),
    transform 560ms var(--ease-spring);
}
.reveal-pending.reveal-in .uki-one > * {
  opacity: 1;
  transform: none;
}
.reveal-pending.reveal-in .uki-one > :nth-child(1) {
  transition-delay: 90ms;
}
.reveal-pending.reveal-in .uki-one > :nth-child(2) {
  transition-delay: 160ms;
}
.reveal-pending.reveal-in .uki-one > :nth-child(3) {
  transition-delay: 230ms;
}
.reveal-pending.reveal-in .uki-one > :nth-child(4) {
  transition-delay: 300ms;
}
.reveal-pending.reveal-in .uki-one > :nth-child(5) {
  transition-delay: 370ms;
}
.reveal-pending.reveal-in .uki-one > :nth-child(6) {
  transition-delay: 440ms;
}
.reveal-pending.reveal-in .uki-one > :nth-child(7) {
  transition-delay: 510ms;
}
.reveal-pending.reveal-in .uki-one > :nth-child(8) {
  transition-delay: 580ms;
}

/* SAVE pill stamps in a beat after the price lands (rides inside child #5). */
.reveal-pending .uki-one-save {
  opacity: 0;
  transform: scale(0.72) rotate(-5deg);
  transition:
    opacity 320ms var(--ease-enter),
    transform 460ms var(--ease-spring);
}
.reveal-pending.reveal-in .uki-one-save {
  opacity: 1;
  transform: none;
  transition-delay: 560ms;
}

/* Primary Reserve CTA lifts on hover, presses on tap — a physical feel. */
.uki-one-cta:not(.uki-one-cta-intl) {
  transition:
    transform 160ms var(--ease-spring),
    box-shadow 200ms var(--ease-exit),
    background 140ms var(--ease-exit);
}
@media (hover: hover) {
  .uki-one-cta:not(.uki-one-cta-intl):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(212, 160, 88, 0.34);
  }
}
.uki-one-cta:not(.uki-one-cta-intl):active {
  transform: translateY(0) scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-pending .uki-one,
  .reveal-pending .uki-one > *,
  .reveal-pending .uki-one-save {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── UKI ONE — record-on-platter stage (navy box + slowly-spinning record) ────
   Founder direction: the true product is a compact navy 3D-printed box; a
   hyperreal Uki record turns slowly behind it — "a record on the platter, the
   box is what captures it." ~9s/rev is a luxurious turntable feel (33⅓ literal
   would read as a loading spinner). GPU-only; the record freezes under
   reduced-motion. Specular + rim on the record stay fixed while it turns. */
.uki-one-stage {
  position: relative;
  width: clamp(230px, 66vw, 320px);
  height: clamp(196px, 56vw, 268px);
  margin: 0 auto 24px;
}
.uki-one-record {
  position: absolute;
  left: 0;
  top: 14%;
  width: 64%;
  height: auto;
  z-index: 0;
  filter: drop-shadow(0 12px 26px rgba(26, 37, 64, 0.3));
}
.uki-one-box {
  position: absolute;
  left: 32%;
  top: 24%;
  width: 72%;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 18px 34px rgba(26, 37, 64, 0.24));
}
.uki-one-record-rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: ukiRecSpin 9s linear infinite;
}
@keyframes ukiRecSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .uki-one-record-rotor {
    animation: none;
  }
}

/* ── SHOW THE APP — floating real screenshots (replaces the SVG mock) ─────────
   Three real app screens as rounded "floating" panels: a front hero + two
   angled backs that peek out, each lifted on the elevation ladder so the set
   reads as physical objects on a surface, not a flat brochure. Mobile collapses
   to the single front screen. */
.app-showcase {
  position: relative;
  height: clamp(384px, 64vw, 452px);
  margin: 44px 0 12px;
}
.app-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 34px;
  overflow: hidden;
  background: #0a0a0d;
  outline: 1px solid rgba(26, 43, 76, 0.06);
  outline-offset: -1px;
}
.app-phone img {
  display: block;
  width: 100%;
  height: auto;
}
.app-phone-front {
  width: clamp(206px, 54vw, 242px);
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: var(--shadow-4);
}
.app-phone-back {
  width: clamp(170px, 44vw, 202px);
  z-index: 1;
  box-shadow: var(--shadow-3);
  opacity: 0.97;
}
.app-phone-l {
  transform: translate(-90%, -50%) rotate(-8deg);
}
.app-phone-r {
  transform: translate(-10%, -50%) rotate(8deg);
}
@media (max-width: 640px) {
  .app-showcase {
    height: auto;
    display: flex;
    justify-content: center;
    margin: 32px 0 12px;
  }
  .app-phone {
    position: static;
  }
  .app-phone-back {
    display: none;
  }
  .app-phone-front {
    width: min(74vw, 290px);
    transform: none;
  }
}

/* ── COLLECT STORY: the featured spinning record ─────────────────────────────
   The vinyl graphic shown SOLO (no device box) as the hero of the
   "how you collect" section. Reuses the .uki-one-record-rotor spin, which is
   already frozen under prefers-reduced-motion. Reads best on a light band. */
.collect-disc {
  width: clamp(240px, 56vw, 400px);
  margin: 8px auto 4px;
  filter: drop-shadow(0 22px 44px rgba(26, 37, 64, 0.22));
}
.collect-disc-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── MEDIA ROW: one real app screenshot beside a copy column ─────────────────
   Alternating image-left / image-right rows for the app-surface story. Reuses
   the .app-phone chrome (rounded, dark, outlined) but sits it statically in a
   two-column grid instead of the absolute .app-showcase stack. Stacks on
   mobile with the image on top. Wrap each row in .reveal-pending to inherit
   the existing scroll-in. */
.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.media-figure {
  position: static;
  margin: 0 auto;
  width: min(72vw, 248px);
  box-shadow: var(--shadow-4);
}
.media-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.media-copy .band-lede {
  margin-bottom: 0;
}
.media-row-reverse .media-figure {
  order: 2;
} /* image-right */
@media (max-width: 640px) {
  .media-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Stacked on mobile: header + copy first, then the screenshot, every row. */
  .media-copy {
    order: 1;
  }
  .media-figure {
    order: 2;
    width: min(74vw, 258px);
  }
  .media-row-reverse .media-figure {
    order: 2;
  }
}

/* Membership: three-tier pricing grid (Free · Collector · Audiophile). */
.pricing-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1120px;
}
@media (max-width: 900px) {
  .pricing-grid-3 {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

/* ── SHOP ────────────────────────────────────────────────────────────────────
   Product cards for /shop/. Built on the existing .cs-feature card shell +
   brand tokens, only extended into a flex column so prices align and the CTA
   sits at the card foot. No new visual system. */
.shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.shop-spec {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: 10px;
}
.shop-card .coming-soon-badge {
  align-self: flex-start;
  margin-bottom: 14px;
}
.shop-card h3 {
  margin-bottom: 8px;
}
.shop-price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.shop-price-note {
  font-size: 13px;
  color: var(--light);
  margin-bottom: 14px;
}
.shop-card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mid);
  margin-bottom: 20px;
  flex: 1;
}
.shop-cta {
  width: 100%;
  margin-top: auto;
}
/* Affiliate / honesty disclosure — a quiet, muted line near the "Uki's pick"
   Amazon links (FTC + honesty). Left-aligned under a section title by default;
   the --center modifier centers it in the narrow footer band. */
.shop-affiliate-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--light);
  max-width: 640px;
  margin: -8px 0 28px;
}
.shop-affiliate-note--center {
  margin: 14px auto 0;
  text-align: center;
}
/* Outbound "Buy on Amazon" button — deliberately humbler than the solid amber
   buy button: a tinted amber outline that fills on hover/press. Keeps Uki's
   OWN devices (solid navy/amber) the visual heroes, so the affiliate picks
   read as curated, outbound supporting cast. Press-scale + spring come free
   from the base .btn. */
.btn-amazon {
  background: rgba(212, 160, 88, 0.09);
  color: var(--amber-ink);
  border: 1.5px solid rgba(212, 160, 88, 0.5);
  font-weight: 700;
}
.btn-amazon:hover {
  background: var(--amber);
  color: var(--navy);
  border-color: var(--amber);
}
/* New-tab hint under the Fit-Card buy rows — makes the outbound intent
   unmistakable at the narrowest width, quiet and muted so it never competes. */
.uki-fit-buy-hint {
  font-size: 12px;
  color: var(--light);
  margin: -2px 0 12px;
}
/* Compact "Notify me" capture inside a coming-soon card. Reuses the waitlist
   input/button vocabulary; sits flush in the card, full width. */
.shop-notify {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  max-width: none;
  width: 100%;
}
.shop-notify input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition:
    border-color 140ms var(--ease-exit),
    box-shadow 140ms var(--ease-exit);
}
.shop-notify input:focus-visible {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(212, 160, 88, 0.18);
}
.shop-notify button {
  flex-shrink: 0;
}
.shop-note {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
}

/* ─────────────────────────────────────────────────────────────────────────────
   GEAR CHECK — the Fitting Card (/shop/)
   ──────────────────────────────────────────────────────────────────────────────
   A two-tap concierge on the shop page. Built on the .cs-feature card values
   and the site's easing tokens; every class here is new (uki-fit-*), nothing
   existing is edited. JS (setupFitCard in main.js) runs the step morphs; the
   markup alone renders Q1 as plain anchor tiles so the card degrades to a
   "jump to the right product" row without JS. */
.uki-fit-lede {
  max-width: 620px;
  margin: 0 auto 36px;
}
.uki-fit-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-2);
  max-width: 640px;
  margin: 0 auto;
  transition: border-color 400ms var(--ease-exit);
}
.uki-fit-card.is-done {
  border-color: var(--amber);
}
.uki-fit-stage {
  position: relative;
}
.uki-fit-stage.is-morphing {
  overflow: hidden;
}

/* Question voice — the FAQ-summary treatment, so it reads as Uki asking. */
.uki-fit-step {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.uki-fit-q {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 18px;
  padding: 0;
  outline: none;
}

/* Answered-question chips — coming-soon-badge geometry, navy, revisable. */
.uki-fit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.uki-fit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(26, 43, 76, 0.07);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms var(--ease-exit);
}
.uki-fit-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.uki-fit-chip:hover {
  background: rgba(26, 43, 76, 0.12);
}

/* Q1 gear tiles — recognition over recall. auto-fit so the future 5th
   ("snap a photo") tile slots in with zero relayout. */
.uki-fit-tiles {
  display: grid;
  /* 128px min → all four tiles share one row inside the 640px card;
     auto-fit still reflows cleanly when the photo tile joins later. */
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 14px;
}
.uki-fit-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 140ms var(--ease-spring),
    box-shadow 140ms var(--ease-exit),
    border-color 140ms var(--ease-exit);
}
.uki-fit-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(212, 160, 88, 0.45);
}
.uki-fit-tile:active {
  transform: scale(0.965);
}
.uki-fit-tile svg {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

/* Q2/Q3 option rows — statements, not glyphs. */
.uki-fit-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uki-fit-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 140ms var(--ease-spring),
    box-shadow 140ms var(--ease-exit),
    border-color 140ms var(--ease-exit);
}
.uki-fit-row:hover {
  box-shadow: var(--shadow-2);
  border-color: rgba(212, 160, 88, 0.45);
}
.uki-fit-row:active {
  transform: scale(0.985);
}
.uki-fit-row em {
  font-style: italic;
}

/* Result panels — the reveal moment. Sweep + border-to-amber + the
   signal-chain draw are sequenced below; reduced-motion snaps them off. */
.uki-fit-result {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.uki-fit-result.is-revealed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: fitSweep 720ms cubic-bezier(0.32, 0.72, 0, 1) 400ms forwards;
  pointer-events: none;
}
@keyframes fitSweep {
  to {
    transform: translateX(100%);
  }
}

.uki-fit-r-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
  outline: none;
}
.uki-fit-r-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--amber-ink);
  margin-bottom: 8px;
}
.uki-fit-r-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 14px;
}
.uki-fit-why {
  margin: -4px 0 14px;
  font-size: 14px;
  color: var(--mid);
}
.uki-fit-why summary {
  cursor: pointer;
  color: var(--amber-ink);
  font-weight: 600;
  font-size: 13px;
}
.uki-fit-why p {
  margin-top: 8px;
  line-height: 1.6;
}
.uki-fit-result .coming-soon-badge {
  margin-bottom: 14px;
}

/* Product row inside a result — same Stripe CTAs as the main cards. */
.uki-fit-buy {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  margin-bottom: 10px;
}
.uki-fit-buy .shop-spec {
  margin-bottom: 2px;
}
.uki-fit-buy-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
}
.uki-fit-buy-price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-weight: 600;
  font-size: 24px;
  color: var(--navy);
  margin-left: auto;
}
.uki-fit-buy > div:first-child {
  flex: 1 1 auto;
}
.uki-fit-buy .btn {
  flex-shrink: 0;
}

.uki-fit-app {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mid);
  margin-top: 14px;
}
.uki-fit-app a {
  color: var(--amber-ink);
  font-weight: 600;
}

.uki-fit-restart {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--light);
  text-decoration: underline;
  cursor: pointer;
}
.uki-fit-restart:hover {
  color: var(--mid);
}

.uki-fit-noscript {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
}
.uki-fit-noscript a {
  color: var(--amber-ink);
  font-weight: 600;
}

/* Signal-chain diagram — uki-one.njk's stroke language at chip scale.
   The line draws first (pathLength=1 trick), nodes pop in as it reaches
   them, then the phone screen fills and the amber sun lands the chain. */
.uki-fit-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  color: var(--navy);
}
.uki-fit-d-line {
  stroke: rgba(26, 43, 76, 0.3);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}
.uki-fit-d-node {
  transform-box: fill-box;
  transform-origin: center;
}
.uki-fit-result.is-revealed .uki-fit-d-line {
  stroke-dasharray: 1;
  animation: fitLine 700ms var(--ease-enter) forwards;
}
@keyframes fitLine {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.uki-fit-result.is-revealed .uki-fit-d-node {
  animation: fitNode 380ms var(--ease-spring) backwards;
}
.uki-fit-result.is-revealed .uki-fit-d-n1 {
  animation-delay: 120ms;
}
.uki-fit-result.is-revealed .uki-fit-d-n2 {
  animation-delay: 260ms;
}
.uki-fit-result.is-revealed .uki-fit-d-n3 {
  animation-delay: 400ms;
}
.uki-fit-result.is-revealed .uki-fit-d-n4 {
  animation-delay: 540ms;
}
@keyframes fitNode {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.uki-fit-result.is-revealed .uki-fit-d-tile {
  animation: fitFade 300ms var(--ease-enter) backwards;
}
.uki-fit-result.is-revealed .uki-fit-d-t1 {
  animation-delay: 760ms;
}
.uki-fit-result.is-revealed .uki-fit-d-t2 {
  animation-delay: 880ms;
}
.uki-fit-result.is-revealed .uki-fit-d-t3 {
  animation-delay: 1000ms;
}
.uki-fit-result.is-revealed .uki-fit-d-sun {
  animation: fitFade 300ms var(--ease-enter) 1120ms backwards;
}
@keyframes fitFade {
  from {
    opacity: 0;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .uki-fit-card {
    padding: 22px 18px 20px;
  }
  .uki-fit-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .uki-fit-buy {
    flex-wrap: wrap;
  }
  .uki-fit-buy .btn {
    width: 100%;
  }
}

/* Reduced motion — plain crossfades only (JS handles the step morphs);
   no line-draw, no node pops, no sweep, no tile presses. */
@media (prefers-reduced-motion: reduce) {
  .uki-fit-tile,
  .uki-fit-row,
  .uki-fit-chip {
    transition: none;
  }
  .uki-fit-tile:hover,
  .uki-fit-tile:active,
  .uki-fit-row:active {
    transform: none;
  }
  .uki-fit-card {
    transition: none;
  }
  .uki-fit-result.is-revealed::after {
    animation: none;
    opacity: 0;
  }
  .uki-fit-result.is-revealed .uki-fit-d-line,
  .uki-fit-result.is-revealed .uki-fit-d-node,
  .uki-fit-result.is-revealed .uki-fit-d-tile,
  .uki-fit-result.is-revealed .uki-fit-d-sun {
    animation: none;
  }
}

/* ── /cancelling/ off-ramp timeline ──────────────────────────────────────────
   Mirrors the app's CancelMembershipSheet rail (navy rule + dots) so the
   hand-off from the in-app sheet to the browser reads as one continuous
   surface rather than two unrelated pages. No new tokens, fonts or colours. */
.offramp-rail {
  list-style: none;
  margin: 32px 0 0;
  padding: 0 0 0 26px;
  position: relative;
}
.offramp-rail::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(26, 43, 76, 0.14);
  border-radius: 2px;
}
.offramp-rail > li {
  position: relative;
  margin: 0 0 26px;
}
.offramp-rail > li:last-child {
  margin-bottom: 0;
}
.offramp-rail > li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--navy);
}
.offramp-rail h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.offramp-rail p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(26, 43, 76, 0.72);
}
.offramp-note {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 43, 76, 0.12);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26, 43, 76, 0.6);
}
/* One quiet line under the pricing grid: prices are pre-tax, Stripe adds tax
   at checkout. Same weight as the off-ramp note so it reads as fine print. */
.pricing-tax-note {
  margin: 22px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  /* Was navy at 0.55 alpha = 3.47:1 on the light pricing band, under AA. A
     tax/VAT disclosure has to be legible; 0.72 clears it (5.77:1 on white)
     and stays a muted navy. */
  color: rgba(26, 43, 76, 0.72);
}
@media (max-width: 600px) {
  .offramp-rail h3,
  .offramp-rail p {
    font-size: 14px;
  }
}

/* The actual cancel affordance on /cancelling/. Outlined, not amber: this is
   the exit, not a purchase, and it must not compete with Uki Play below it —
   nor be so quiet that the page becomes another dead end (which is exactly
   what /membership/ was for anyone arriving from the app to cancel). */
.offramp-act {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(26, 43, 76, 0.12);
}
.offramp-act .btn {
  width: 100%;
  max-width: 320px;
}
.offramp-act .offramp-note {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}

/* Confirmation after cancelling on the web. Same three facts the app states —
   cancelled, access through <date>, no further charges — because we no longer
   borrow Stripe's confirmation page and California's auto-renewal law wants an
   immediate acknowledgment. */
.offramp-done h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.offramp-done p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26, 43, 76, 0.72);
}