:root,
.theme-light {
  --bg: #ffffff;
  --bg-elev: #f7f6f3;
  --surface: #ffffff;
  --text: #252b2a;
  --muted: #66706e;
  --card: #fbfaf8;
  --border: #d9d5cd;
  --brand: #3f4947;
  --brand-600: #303836;
  --brand-700: #252b2a;
  --brand-25a: rgba(63, 73, 71, 0.16);
  --ring: rgba(63, 73, 71, 0.24);
  --brand-bg: rgba(63, 73, 71, 0.07);
  --story-glow: rgba(229, 184, 76, 0.28);
  --story-accent: #c89524;
  /* Two-tone orbit wires (light: charcoal + gold) */
  --story-wire-a: #3f4947;
  --story-wire-b: #c89524;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* Exact match: frontend .ui-btn:hover / VaultItemDeck shadow-amber-300 */
  --kv-amber-glow:
    0 0 0 1px rgba(252, 211, 77, 0.5),
    0 2px 4px rgba(252, 211, 77, 0.4),
    0 4px 8px rgba(252, 211, 77, 0.3),
    0 8px 16px rgba(252, 211, 77, 0.2);
}

.theme-dark {
  --bg: #161412;
  --bg-elev: #211e1b;
  --surface: #1d1a18;
  --text: #f4efe7;
  --muted: #b7aea2;
  --card: #25211d;
  --border: #403a33;
  --brand: #e5b84c;
  --brand-600: #c89a31;
  --brand-700: #a77d24;
  --brand-25a: rgba(229, 184, 76, 0.2);
  --ring: rgba(229, 184, 76, 0.34);
  --brand-bg: rgba(229, 184, 76, 0.08);
  --story-glow: rgba(229, 184, 76, 0.23);
  --story-accent: #e5b84c;
  /* Cream + gold — not mono gold */
  --story-wire-a: #e8e0d4;
  --story-wire-b: #e5b84c;
  --kv-amber-glow:
    0 0 0 1px rgba(252, 211, 77, 0.5),
    0 2px 4px rgba(252, 211, 77, 0.4),
    0 4px 8px rgba(252, 211, 77, 0.3),
    0 8px 16px rgba(252, 211, 77, 0.2);
}

.theme-blue {
  --bg: #ffffff;
  --bg-elev: #f5f8ff;
  --surface: #ffffff;
  --text: #18233b;
  --muted: #62708d;
  --card: #f8faff;
  --border: #cad6ef;
  --brand: #2563eb;
  --brand-600: #1e4fc1;
  --brand-700: #1e40af;
  --brand-25a: rgba(37, 99, 235, 0.16);
  --ring: rgba(37, 99, 235, 0.28);
  --brand-bg: rgba(37, 99, 235, 0.07);
  --story-glow: rgba(37, 99, 235, 0.2);
  --story-accent: #2563eb;
  /* Soft slate + blue */
  --story-wire-a: #64748b;
  --story-wire-b: #2563eb;
  --kv-amber-glow:
    0 0 0 1px rgba(37, 99, 235, 0.5),
    0 2px 4px rgba(37, 99, 235, 0.4),
    0 4px 8px rgba(37, 99, 235, 0.3),
    0 8px 16px rgba(37, 99, 235, 0.2);
}

.theme-emerald {
  --bg: #ffffff;
  --bg-elev: #f2f8f5;
  --surface: #ffffff;
  --text: #17362c;
  --muted: #587268;
  --card: #f7fbf9;
  --border: #c8ddd4;
  --brand: #1b5c43;
  --brand-600: #154d38;
  --brand-700: #0f3d2e;
  --brand-25a: rgba(27, 92, 67, 0.16);
  --ring: rgba(27, 92, 67, 0.28);
  --brand-bg: rgba(27, 92, 67, 0.07);
  --story-glow: rgba(27, 92, 67, 0.2);
  --story-accent: #1b5c43;
  /* Soft sage + emerald */
  --story-wire-a: #6b8f7c;
  --story-wire-b: #1b5c43;
  --kv-amber-glow:
    0 0 0 1px rgba(27, 92, 67, 0.5),
    0 2px 4px rgba(27, 92, 67, 0.4),
    0 4px 8px rgba(27, 92, 67, 0.3),
    0 8px 16px rgba(27, 92, 67, 0.2);
}

.theme-blue .btn-nav-login,
.theme-emerald .btn-nav-login {
  color: #ffffff !important;
}

html {
  scroll-padding-top: 4.5rem;
}

body.landing-story {
  padding-top: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
}

/* Smooth scroll + sticky panels feels rubbery / hitchy on wheel */
body.landing-story,
body.landing-story html {
  scroll-behavior: auto;
}

html:has(body.landing-story) {
  scroll-behavior: auto;
}

body.landing-story::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 4rem);
  width: 48rem;
  background-image: url("pillar-background.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 90%, transparent);
  pointer-events: none;
}

body.landing-story::after {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, var(--brand-bg), transparent 32%),
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 91%, transparent) 45%, color-mix(in srgb, var(--bg) 58%, transparent));
  pointer-events: none;
}

.landing-story .nav {
  background: color-mix(in srgb, var(--bg) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  backdrop-filter: blur(18px) saturate(125%);
}

.landing-story .nav-inner {
  padding-block: 0.55rem;
}

.landing-story .nav-right .pill {
  display: none;
}

.landing-story .nav-right {
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.landing-story .ui-logo,
.landing-story .ui-logo-shield {
  height: 3.15rem;
}

.landing-story main {
  position: relative;
}

.scroll-progress {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--story-accent));
  box-shadow: 0 0 14px var(--story-glow);
}

.story-shell {
  width: min(1180px, calc(100vw - 4rem));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.story-panel {
  min-height: 100svh;
  padding: clamp(6rem, 9vw, 9rem) 0;
  position: relative;
  display: grid;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
}

.story-panel h1,
.story-panel h2,
.story-panel h3,
.story-panel p {
  color: inherit;
}

.story-panel h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  /* Type scale compressed for accessibility (~3× body, not ~10×) */
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.story-panel h1 .u {
  color: var(--brand);
  box-shadow: none;
}

.story-panel h2 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.story-panel h3 {
  font-family: inherit;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.25;
}

.story-index {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.story-index::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}

.landing-hero {
  min-height: 100svh;
  padding-top: 9rem;
  overflow: hidden;
}

.hero-content {
  padding-right: min(38vw, 35rem);
}

.landing-hero h1 {
  max-width: 18ch;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: -0.022em;
  font-weight: 700;
}

.hero-lede {
  max-width: 36rem;
  margin: 2.1rem 0 0;
  color: var(--muted) !important;
  font-size: clamp(1.05rem, 1.25vw, 1.15rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 2.2rem;
}

.story-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: none;
  filter: none;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

/* .story-cta { display } must not defeat [hidden] from app-availability */
.story-cta[hidden],
a.story-cta[hidden] {
  display: none !important;
}

.story-cta:hover {
  transform: translateY(-1px);
  text-decoration: none;
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
  filter: none;
}

.story-cta-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  border-color: var(--brand);
}

.theme-dark .story-cta-primary {
  color: #161412;
}

.story-cta-secondary {
  background: var(--surface);
  color: var(--text);
  /* Thin theme accent edge — visible on white/light surfaces */
  border-color: var(--story-accent, var(--brand));
}

.hero-proof {
  max-width: 48rem;
  margin-top: 2.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.hero-proof span::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--story-accent);
  box-shadow: 0 0 0.75rem var(--story-glow);
}

.hero-orbit {
  position: absolute;
  right: clamp(4rem, 8vw, 10rem);
  top: 50%;
  width: min(32vw, 34rem);
  aspect-ratio: 1;
  transform: translateY(calc(-50% + var(--hero-shift, 0px)));
  display: grid;
  place-items: center;
}

.hero-orbit::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--story-glow), transparent 68%);
  filter: blur(2rem);
}

.orbit {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  animation: orbit-spin 22s linear infinite;
}

.orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 18deg,
    transparent 0 7%,
    color-mix(in srgb, var(--story-wire-a) 55%, transparent) 7% 24%,
    transparent 24% 34%,
    color-mix(in srgb, var(--story-wire-a) 32%, transparent) 34% 52%,
    transparent 52% 67%,
    color-mix(in srgb, var(--story-wire-b) 52%, transparent) 67% 82%,
    transparent 82% 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 0.48rem var(--story-glow));
}

.orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.22rem;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--story-accent);
  box-shadow: 0 0 0 0.38rem color-mix(in srgb, var(--story-accent) 16%, transparent), 0 0 1.45rem var(--story-glow);
  transform: translateX(-50%);
  animation: seal-node-pulse 3.8s ease-in-out infinite;
}

.orbit-two {
  inset: 22%;
  animation-direction: reverse;
  animation-duration: 15s;
}

.orbit-two::after {
  background: conic-gradient(
    from 210deg,
    transparent 0 13%,
    color-mix(in srgb, var(--story-wire-b) 62%, transparent) 13% 35%,
    transparent 35% 54%,
    color-mix(in srgb, var(--story-wire-a) 40%, transparent) 54% 76%,
    transparent 76% 100%
  );
}

.orbit-two::before {
  top: auto;
  bottom: -0.2rem;
  animation-delay: 1.2s;
}

.orbit-core {
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.orbit-core img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.2rem 1.8rem color-mix(in srgb, var(--text) 18%, transparent));
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transform: translateX(-50%);
}

.scroll-cue i {
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(var(--brand), transparent);
  animation: cue-pulse 1.8s ease-in-out infinite;
}

.story-bookmarks {
  position: fixed;
  z-index: 70;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transform: translateY(-50%);
}

.story-bookmarks a {
  position: relative;
  width: 9.1rem;
  min-height: 3.35rem;
  margin-left: 0.85rem;
  padding: 0.78rem 0.95rem 0.78rem 1.15rem;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  background: var(--surface);
  /* Real 1px border — same as hero .story-cta-secondary */
  border: 1px solid var(--story-accent, var(--brand));
  border-right: 0;
  border-radius: 0;
  color: var(--muted);
  clip-path: none;
  box-shadow: none;
  filter: none;
  transition: width 180ms ease, color 180ms ease, background-color 180ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/* Left arrow tip with matching theme border */
.story-bookmarks a::before,
.story-bookmarks a::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

.story-bookmarks a::before {
  border-width: calc(1.675rem + 1px) 0.9rem calc(1.675rem + 1px) 0;
  border-color: transparent var(--story-accent, var(--brand)) transparent transparent;
}

.story-bookmarks a::after {
  right: calc(100% - 1px);
  border-width: 1.675rem 0.82rem 1.675rem 0;
  border-color: transparent var(--surface) transparent transparent;
}

.story-bookmarks a:hover,
.story-bookmarks a.is-active {
  width: 10.2rem;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--story-accent, var(--brand)) 12%, var(--surface));
  border-color: var(--story-accent, var(--brand));
  box-shadow: var(--kv-amber-glow);
  filter: none;
}

.story-bookmarks a:hover::after,
.story-bookmarks a.is-active::after {
  border-color: transparent color-mix(in srgb, var(--story-accent, var(--brand)) 12%, var(--surface)) transparent transparent;
}

.theme-dark .story-bookmarks a:hover,
.theme-dark .story-bookmarks a.is-active {
  background: color-mix(in srgb, var(--story-accent) 14%, var(--surface));
}

.theme-dark .story-bookmarks a:hover::after,
.theme-dark .story-bookmarks a.is-active::after {
  border-color: transparent color-mix(in srgb, var(--story-accent) 14%, var(--surface)) transparent transparent;
}

.story-bookmarks a span {
  font-size: 0.875rem;
  color: var(--brand);
  font-weight: 800;
}

.story-bookmarks a b {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.story-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.8fr);
  gap: clamp(4rem, 10vw, 10rem);
  align-items: start;
}

.story-sticky {
  position: sticky;
  top: 22vh;
}

.story-quote {
  max-width: 27rem;
  margin-top: 2rem;
  font-family: inherit;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.48;
  color: var(--muted) !important;
}

.story-flow {
  display: grid;
  gap: 24vh;
  padding: 20vh 0;
}

.story-card {
  min-height: 19rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  border: 1px solid var(--border);
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.story-card:hover {
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
}

.story-card p {
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.15rem);
  line-height: 1.55;
}

.story-card-emphasis {
  border-color: var(--brand);
}

.story-card-emphasis:hover {
  box-shadow: var(--kv-amber-glow);
}

.card-number {
  margin-bottom: auto;
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-panel {
  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
}

.product-stage {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.product-copy p,
.chapter-heading p,
.security-lede,
.daily-copy p {
  max-width: 37rem;
  color: var(--muted) !important;
  font-size: clamp(1.05rem, 1.25vw, 1.15rem);
  line-height: 1.7;
}

.feature-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 2rem;
  max-width: 37rem;
}

.feature-ribbon span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 3rem;
  height: 3rem;
  padding: 0.45rem 0.55rem;
  text-align: center;
  border: 1px solid var(--story-accent, var(--brand));
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: normal;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.feature-ribbon span:hover {
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
}

@media (max-width: 720px) {
  .feature-ribbon {
    grid-template-columns: 1fr;
  }
}

.product-window {
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 1px rgba(252, 211, 77, 0.22),
    0 2px 4px rgba(252, 211, 77, 0.12),
    0 1.5rem 3.5rem color-mix(in srgb, var(--text) 12%, transparent);
  transform: perspective(80rem) rotateY(-5deg) rotateX(1deg);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.product-window:hover {
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
  transform: perspective(80rem) rotateY(-5deg) rotateX(1deg) translateY(-2px);
}

.window-bar {
  min-height: 2.6rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}

.window-bar i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--border);
}

.window-bar i:first-child {
  background: var(--story-accent);
}

.window-bar span {
  margin-left: auto;
}

.product-window img {
  display: block;
  width: 100%;
}

.product-window figcaption {
  padding: 1rem 1.2rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
}

.chapter-heading {
  max-width: 50rem;
  margin-bottom: 5rem;
}

.story-footnote {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.sharing-map {
  min-height: 34rem;
  position: relative;
  display: grid;
  place-items: center;
}

.vault-node,
.person-node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.main-node {
  left: 50%;
  top: 50%;
  width: 13rem;
  padding: 1.7rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--brand);
  box-shadow: none;
  transform: translate(-50%, -50%);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.main-node:hover {
  box-shadow: var(--kv-amber-glow);
}

.main-node img {
  width: 4.4rem;
  margin-bottom: 0.5rem;
}

.vault-node span,
.person-node span {
  color: var(--muted);
  font-size: 0.875rem;
  font-family: inherit;
}

.person-node {
  width: 10rem;
  padding: 1.2rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.person-node:hover {
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
  transform: translateY(-2px);
}

.person-node i {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand);
  font-style: normal;
  font-weight: 800;
}

.person-one {
  left: 5%;
  top: 8%;
}

.person-two {
  right: 4%;
  top: 15%;
}

.person-three {
  right: 14%;
  bottom: 2%;
}

.sharing-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.route-bed,
.route-thread,
.route-packet,
.route-origin-ring {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.route-bed {
  stroke: color-mix(in srgb, var(--brand) 26%, var(--border));
  stroke-width: 1.2;
}

.route-thread {
  stroke: url("#protected-route");
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 7 7;
  animation: route-drift 7s linear infinite;
}

.route-packet {
  stroke: var(--story-accent);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 4 96;
  /* No SVG filter — feGaussianBlur on animated paths causes scroll jank */
  animation: route-packet 4.6s cubic-bezier(0.42, 0, 0.3, 1) infinite;
}

.route-two .route-packet {
  animation-delay: 1.45s;
}

.route-three .route-packet {
  animation-delay: 2.9s;
}

.route-origin-ring {
  stroke: var(--brand);
  transform-box: fill-box;
  transform-origin: center;
  animation: route-seal 3.8s ease-out infinite;
}

.ring-outer {
  opacity: 0.18;
}

.ring-inner {
  opacity: 0.38;
  animation-delay: 1.1s;
}

.route-three-narrow {
  display: none;
}

.chapter-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 4rem;
  background: transparent;
  border: 0;
}

.mini-story {
  min-height: 17rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.mini-story:hover {
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
  transform: translateY(-2px);
}

.mini-story > span {
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 800;
}

.mini-story h3 {
  margin-top: 4rem;
}

.mini-story p {
  color: var(--muted) !important;
  font-size: 0.93rem;
}

.security-panel {
  overflow: hidden;
  /* Neutral dark vault field — brand only whispers, accents carry theme */
  background: color-mix(in srgb, var(--brand-700) 12%, #12100e);
  color: #f6f4ed;
}

.theme-light .security-panel {
  /* Charcoal vault that already works in light mode */
  background: color-mix(in srgb, #252b2a 90%, #0a0908);
}

.security-panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: url("pillar-background.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.11;
  transform: rotate(8deg) scale(1.05);
  /* Desaturate pattern so theme color does not wash the field */
  filter: grayscale(0.35) contrast(1.05);
}

.security-stage {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: center;
  gap: clamp(4rem, 10vw, 10rem);
}

.security-lock {
  min-height: 32rem;
  position: relative;
  display: grid;
  place-items: center;
}

.lock-ring {
  position: absolute;
  width: 19rem;
  height: 19rem;
  border-radius: 50%;
  animation: orbit-spin 18s linear infinite;
}

.lock-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 28deg,
    transparent 0 8%,
    rgba(255, 255, 255, 0.38) 8% 22%,
    transparent 22% 38%,
    rgba(255, 255, 255, 0.16) 38% 57%,
    transparent 57% 72%,
    color-mix(in srgb, var(--story-accent) 62%, transparent) 72% 87%,
    transparent 87% 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 0.45rem color-mix(in srgb, var(--story-accent) 28%, transparent));
}

.lock-ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.25rem;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: var(--story-accent);
  box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--story-accent) 12%, transparent), 0 0 1.1rem color-mix(in srgb, var(--story-accent) 35%, transparent);
  transform: translateX(-50%);
  animation: seal-node-pulse 3.4s ease-in-out infinite;
}

.ring-b {
  width: 14rem;
  height: 14rem;
  animation-direction: reverse;
  animation-duration: 11s;
}

.ring-b::after {
  background: conic-gradient(
    from 195deg,
    transparent 0 16%,
    color-mix(in srgb, var(--story-accent) 78%, transparent) 16% 39%,
    transparent 39% 61%,
    rgba(255, 255, 255, 0.34) 61% 79%,
    transparent 79% 100%
  );
}

.ring-b::before {
  top: auto;
  bottom: -0.24rem;
  animation-delay: 1.1s;
}

.lock-core {
  width: 8.5rem;
  height: 8.5rem;
  display: grid;
  place-items: center;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 0 2.5rem color-mix(in srgb, var(--story-accent) 18%, transparent);
}

.lock-core span {
  width: 2.3rem;
  height: 3rem;
  border: 0.25rem solid var(--story-accent);
  border-radius: 0.35rem;
  position: relative;
}

.lock-core span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.15rem);
  width: 1.25rem;
  height: 1.5rem;
  border: 0.25rem solid var(--story-accent);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  transform: translateX(-50%);
}

.security-copy .story-index,
.security-copy .text-link {
  color: var(--story-accent);
}

.security-copy h2 {
  max-width: 11ch;
}

.security-lede {
  color: rgba(255, 255, 255, 0.7) !important;
}

.truth-stack {
  display: grid;
  gap: 0.85rem;
  margin: 2.2rem 0 0;
}

.truth-block {
  margin: 0;
  padding: 1.5rem 1.7rem;
  border-left: 2px solid color-mix(in srgb, var(--story-accent) 55%, rgba(255, 255, 255, 0.35));
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.truth-block:hover {
  border-color: color-mix(in srgb, var(--story-accent) 70%, rgba(255, 255, 255, 0.4));
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--story-accent) 28%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.truth-block > span {
  color: var(--story-accent);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.truth-block h3 {
  margin: 0.65rem 0;
}

.truth-block p {
  margin: 0;
  color: rgba(255, 255, 255, 0.67) !important;
}

.text-link {
  font-weight: 760;
}

.daily-stage {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(4rem, 10vw, 10rem);
  align-items: center;
}

.timeline {
  position: relative;
  display: grid;
  gap: 1.3rem;
  padding-left: 2.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: linear-gradient(var(--brand), var(--story-accent), transparent);
}

.timeline article {
  position: relative;
  padding: 1.5rem 1.7rem;
  display: grid;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  font-family: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.timeline article:hover {
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
  transform: translateY(-2px);
}

.timeline article,
.timeline article * {
  font-family: inherit;
}

.timeline article::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 2rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--brand);
}

.timeline time {
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timeline span {
  color: var(--muted);
  font-size: 0.9rem;
}

.pricing-panel {
  background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
}

.plan-grid {
  max-width: 60rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.plan-card {
  min-height: 34rem;
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: visible;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.plan-card:hover {
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
}

/* No transform here. It never applied: .reveal-on-scroll sets `transform` at
   the same specificity and appears LATER in this file, so it won a source-order
   tie and the lift was dead CSS. With four cards the featured card also sits in
   row two, where a -1.5rem lift against a 1.75rem gap would have left about 4px
   between the rows. The featured card is marked by its border and the
   "Most popular" badge instead, which cannot fight the reveal animation. */
.plan-card-featured {
  border-color: var(--brand);
  box-shadow: none;
  position: relative;
}

/* "MOST POPULAR" was withdrawn: nothing charges yet and there are no
   customers, so there was no evidence for it. .plan-fact takes the same slot
   and the same geometry, carrying a fact the pricing policy can prove. */
.plan-fact {
  position: absolute;
  top: 0;
  right: clamp(1.5rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  background: var(--brand);
  color: #0b0c0f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-card-featured:hover {
  box-shadow: var(--kv-amber-glow);
}

.plan-label {
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.plan-card > strong {
  margin: 1rem 0 0;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
}

.plan-card > strong small {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.plan-card > p {
  color: var(--muted) !important;
}

.plan-card ul {
  padding: 0;
  margin: 2rem 0;
  flex: 1;
  list-style: none;
}

.plan-card li {
  padding: 0.75rem 0 0.75rem 1.4rem;
  position: relative;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.plan-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.5rem;
  height: 0.5rem;
  transform: rotate(45deg);
  background: rgba(252, 211, 77, 0.95);
  box-shadow:
    0 0 0 1px rgba(252, 211, 77, 0.5),
    0 2px 4px rgba(252, 211, 77, 0.35);
}

.theme-blue .plan-card li::before {
  background: rgba(37, 99, 235, 0.95);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.5),
    0 2px 4px rgba(37, 99, 235, 0.35);
}

.theme-emerald .plan-card li::before {
  background: rgba(27, 92, 67, 0.95);
  box-shadow:
    0 0 0 1px rgba(27, 92, 67, 0.5),
    0 2px 4px rgba(27, 92, 67, 0.35);
}

/* Stack CTAs with the same gap as .story-bookmarks (0.45rem) */
.plan-card > a.story-cta:first-of-type {
  margin-top: auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.plan-card > a.story-cta + a.story-cta {
  margin-top: 0.45rem;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.plan-note {
  text-align: center;
  color: var(--muted) !important;
}

/* Sits above the cards so the trial is read before the prices, not after. */
.plan-trial-line {
  max-width: 60rem;
  margin: 0 auto 1.75rem;
  text-align: center;
  font-weight: 600;
}

/* ==============================
   COMPANY / TEAM PANEL
   ==============================
   Deliberately not a fifth priced card: the company model is unfinished and a
   fixed price would be a public promise the product cannot yet keep. */
.company-plan-note {
  max-width: 60rem;
  margin: 2.5rem auto 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px dashed var(--border);
  text-align: center;
}

.company-plan-note h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.company-plan-note p {
  margin: 0 auto 1.25rem;
  max-width: 44rem;
  color: var(--muted);
}

/* ==============================
   POSITIONING BLOCK
   ============================== */
.positioning-grid {
  max-width: 60rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.positioning-point {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
}

.positioning-point h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--brand);
}

.positioning-point p {
  margin: 0;
  color: var(--muted);
}

/* ==============================
   ACCESS & RETENTION SUMMARY
   ============================== */
.retention-grid {
  max-width: 60rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.retention-card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
}

.retention-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.retention-card p {
  margin: 0;
  color: var(--muted);
}

/* Text, not colour, carries the "this is not built yet" meaning. */
.kv-status-badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.75rem;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border: 1px solid var(--brand);
  border-radius: 999px;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.retention-summary-actions {
  margin: 2rem 0 0.75rem;
  text-align: center;
}

.retention-disclaimer,
.faq-more {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
  color: var(--muted);
}

.faq-more {
  margin-top: 2rem;
}

/* ==============================
   WAITLIST PLAN FIELDSET
   ==============================
   A real fieldset needs its browser chrome removed; the group still announces
   as a group, which a span + div never did. */
.story-plan-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.story-plan-fieldset > legend {
  padding: 0;
}

/* Focus lands here after a pricing CTA, so it must be visible when it does. */
.story-plan-fieldset:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.faq-stage {
  display: grid;
  grid-template-columns: minmax(11rem, 0.45fr) minmax(0, 1.55fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.faq-groups {
  min-width: 0;
}

.faq-intro {
  position: sticky;
  top: 9rem;
}

.story-faq details {
  padding: 1.15rem 1.35rem 1.25rem;
  margin: 0 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 96%, var(--card));
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.story-faq details:hover,
.story-faq details[open] {
  transform: translateY(-1px);
  border-color: var(--brand);
  box-shadow: var(--kv-amber-glow);
}

.story-faq details:last-child {
  margin-bottom: 0;
}

.story-faq summary {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--text);
}

.story-faq p {
  max-width: 43rem;
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 88%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--text) !important;
  line-height: 1.55;
}

.final-panel {
  min-height: 92svh;
  overflow: hidden;
  text-align: center;
}

.final-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 64rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.final-seal,
.final-seal-aura {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.final-seal {
  background: conic-gradient(
    from 12deg,
    transparent 0 11%,
    color-mix(in srgb, var(--story-wire-a) 55%, transparent) 11% 28%,
    transparent 28% 43%,
    color-mix(in srgb, var(--story-wire-b) 50%, transparent) 43% 59%,
    transparent 59% 75%,
    color-mix(in srgb, var(--story-wire-a) 48%, transparent) 75% 90%,
    transparent 90% 100%
  );
  /* Finer ring than the earlier 3.5px weight */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.75px), #000 calc(100% - 1.75px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.75px), #000 calc(100% - 1.75px));
  filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--story-accent) 35%, transparent));
}

.final-seal-outer {
  inset: 0;
  animation: orbit-spin 36s linear infinite;
}

.final-seal-inner {
  inset: 15%;
  background: conic-gradient(
    from 184deg,
    transparent 0 18%,
    color-mix(in srgb, var(--story-wire-b) 58%, transparent) 18% 38%,
    transparent 38% 64%,
    color-mix(in srgb, var(--story-wire-a) 50%, transparent) 64% 82%,
    transparent 82% 100%
  );
  animation: orbit-spin 24s linear infinite reverse;
}

.final-seal-aura {
  inset: 23%;
  background: radial-gradient(circle, var(--story-glow), transparent 70%);
  filter: blur(1rem);
}

.final-copy {
  max-width: 52rem;
  display: grid;
  justify-items: center;
}

.final-copy > img {
  width: 5.5rem;
  margin-bottom: 2rem;
  filter: drop-shadow(0 1rem 2rem color-mix(in srgb, var(--text) 14%, transparent));
}

.final-copy h2 {
  max-width: none;
}

.final-copy > p {
  max-width: 38rem;
  color: var(--muted) !important;
  font-size: 1.15rem;
}

.final-copy .hero-actions {
  justify-content: center;
}

.final-copy small {
  margin-top: 1.4rem;
  color: var(--muted);
}

.story-waitlist-form {
  width: min(100%, 28rem);
  margin-top: 2rem;
  display: grid;
  gap: 0.65rem;
  text-align: left;
  padding: 1.35rem 1.4rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--story-accent, var(--brand));
  box-shadow: none;
}

.story-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.story-field,
.story-waitlist-form .story-field {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
}

.story-field:focus,
.story-textarea:focus {
  outline: none;
  border-color: var(--story-accent, var(--brand));
  box-shadow: var(--kv-amber-glow);
}

.story-textarea {
  min-height: 6rem;
  resize: vertical;
}

.story-plan-options {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.story-plan-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text);
}

.story-waitlist-submit {
  width: 100%;
  margin-top: 0.55rem;
  border: 1px solid var(--brand);
  cursor: pointer;
}

.story-waitlist-signin {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
}

.story-waitlist-signin a {
  color: var(--brand);
  font-weight: 700;
}

.story-waitlist-live {
  margin-top: 2rem;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 760ms cubic-bezier(0.2, 0.75, 0.2, 1), transform 760ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Website legal long-reads (privacy / terms) — same story chrome, quieter layout */
.landing-legal .legal-panel {
  min-height: auto;
  padding: clamp(5rem, 8vw, 7rem) 0 clamp(4rem, 6vw, 5.5rem);
  align-items: start;
}

.landing-legal .legal-shell {
  max-width: 42rem;
}

.landing-legal .legal-lede {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  color: var(--muted) !important;
}

.landing-legal .legal-scope {
  margin: 0.85rem 0 0;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted) !important;
}

.landing-legal .legal-updated {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--muted) !important;
}

.landing-legal .legal-doc {
  margin-top: 2.75rem;
  display: grid;
  gap: 1.75rem;
}

.landing-legal .legal-doc h2 {
  margin: 0 0 0.55rem;
  max-width: none;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.landing-legal .legal-doc p,
.landing-legal .legal-doc li {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
}

.landing-legal .legal-doc ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.45rem;
}

.landing-legal .legal-doc section {
  display: grid;
  gap: 0.55rem;
}

/* ==============================
   PLANNED-POLICY BANNER (retention page)
   ==============================
   Not fine print. The whole page describes rules the application does not yet
   enforce, so the qualification is the first thing under the heading and is
   carried by text, never by colour alone. */
.landing-legal .kv-planned-banner {
  margin: 1.5rem 0 2rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid var(--brand);
  border-radius: 0.5rem;
}

.landing-legal .kv-planned-banner p {
  margin: 0.5rem 0 0;
}

/* "Which deadline applies" - a definition list rather than a table: it reflows
   at 200% zoom and on a phone without a horizontal scroller, and screen readers
   announce each term with its own deadline. */
.landing-legal .deadline-list {
  margin: 0.5rem 0 0;
}

/* Each dt/dd pair draws one card between them - the dt the top half, the dd
   the bottom - so no wrapper element is needed inside the dl. The 0.75rem
   that used to be the grid gap is now the dt's top margin. */
.landing-legal .deadline-list dt {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 0.4rem 0.4rem 0 0;
  font-weight: 700;
}

.landing-legal .deadline-list dt:first-child {
  margin-top: 0;
}

.landing-legal .deadline-list dd {
  margin: 0;
  padding: 0.25rem 1rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 0.4rem 0.4rem;
  color: var(--muted);
}

/* The worked example reads as an aside, not as another rule. */
.landing-legal .policy-example {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--surface);
  border-left: 3px solid var(--brand);
}

.landing-legal .policy-example p:last-child {
  margin-bottom: 0;
}

/* Keep decorative motion only while the panel is on screen */
.story-panel.is-offscreen .orbit,
.story-panel.is-offscreen .lock-ring,
.story-panel.is-offscreen .final-glow,
.story-panel.is-offscreen .final-seal,
.story-panel.is-offscreen .route-thread,
.story-panel.is-offscreen .route-packet,
.story-panel.is-offscreen .route-origin-ring,
.story-panel.is-offscreen .scroll-cue i {
  animation-play-state: paused;
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes seal-node-pulse {
  0%, 100% {
    opacity: 0.42;
    transform: translateX(-50%) scale(0.7);
  }
  48% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes cue-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scaleY(0.55);
    transform-origin: top;
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes route-drift {
  to {
    stroke-dashoffset: -56;
  }
}

@keyframes route-packet {
  0% {
    stroke-dashoffset: 4;
    opacity: 0;
  }
  12%, 82% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -96;
    opacity: 0;
  }
}

@keyframes route-seal {
  0% {
    opacity: 0.45;
    transform: scale(0.72);
  }
  72%, 100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@media (max-width: 1080px) {
  .story-bookmarks {
    display: none;
  }

  .hero-content {
    padding-right: min(32vw, 20rem);
  }

  .hero-orbit {
    right: -2rem;
    width: 36vw;
  }
}

@media (max-width: 820px) {
  body.landing-story {
    padding-top: 3.8rem;
  }

  .landing-story .nav-right {
    display: none;
  }

  .story-shell {
    width: min(100% - 2rem, 43rem);
  }

  .story-panel {
    min-height: auto;
    padding: 6.5rem 0;
  }

  .landing-hero {
    min-height: calc(100svh - 3.8rem);
    padding-top: 5rem;
  }

  .hero-content {
    padding-right: 0;
  }

  .story-panel h1 {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
  }

  .landing-hero h1 {
    max-width: 14ch;
    font-size: clamp(1.85rem, 6.5vw, 2.4rem);
    line-height: 1.16;
  }

  .hero-orbit {
    position: relative;
    inset: auto;
    width: min(76vw, 24rem);
    margin: 3.5rem auto 1rem;
    transform: none;
  }

  .scroll-cue {
    display: none;
  }

  .story-split,
  .product-stage,
  .security-stage,
  .daily-stage,
  .faq-stage {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .story-sticky,
  .faq-intro {
    position: relative;
    top: auto;
  }

  .story-flow {
    gap: 1rem;
    padding: 0;
  }

  .story-card {
    min-height: 16rem;
  }

  .product-window {
    transform: none;
  }

  .product-window:hover {
    transform: translateY(-2px);
  }

  .sharing-map {
    min-height: 38rem;
  }

  .person-one {
    left: 0;
  }

  .person-two {
    right: 0;
  }

  .person-three {
    right: 4%;
  }

  .chapter-cards,
  .plan-grid,
  .positioning-grid,
  .retention-grid {
    grid-template-columns: 1fr;
  }

  .security-lock {
    min-height: 20rem;
  }

  .lock-ring {
    width: 16rem;
    height: 16rem;
  }

  .ring-b {
    width: 11rem;
    height: 11rem;
  }
}

@media (max-width: 520px) {
  .story-panel h2 {
    font-size: clamp(1.85rem, 6vw, 2.35rem);
  }

  .hero-actions {
    display: grid;
    gap: 0.45rem;
  }

  .story-cta {
    width: 100%;
  }

  .hero-proof {
    display: grid;
    gap: 0.45rem;
  }

  .sharing-map {
    min-height: 43rem;
  }

  .main-node {
    top: 48%;
    width: 11.5rem;
  }

  .person-node {
    width: 8.5rem;
  }

  .person-one {
    top: 0;
  }

  .person-two {
    top: 4rem;
  }

  .person-three {
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
  }

  .route-three-wide {
    display: none;
  }

  .route-three-narrow {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .orbit,
  .lock-ring,
  .final-glow,
  .final-seal,
  .route-thread,
  .route-packet,
  .route-origin-ring,
  .scroll-cue i {
    animation: none;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
   Landing SEO / security-details / professionals pass
   ------------------------------------------------------------------------- */

/* ONE development notice. In the hero as a line of copy with a brand
   hairline — noticeable, not a full-width construction banner. Removing it
   makes present-tense claims on the page untrue. */
.landing-hero .kv-dev-notice {
  max-width: 34rem;
  margin: 1.15rem 0 0;
  padding: 0.15rem 0 0.15rem 1rem;
  border: 0;
  border-left: 2px solid var(--brand);
  background: none;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Boundary lines: said once, under the section they qualify, rather than
   hedged into every card. */
.positioning-boundary,
.sharing-free-note {
  max-width: 52rem;
  margin: 1.75rem auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.security-actions,
.professionals-actions {
  margin: 2rem 0 0;
  text-align: center;
}

/* The professional responsibility panel is deliberately heavier than a
   footnote: a professional reader must not be able to skim past it. */
.professional-responsibility {
  max-width: 56rem;
  margin: 2rem auto 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--surface) 96%, var(--card));
}

.professional-responsibility p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

/* Three audiences, one page. The group headings are what let a
   non-technical reader stop before the technical group without feeling
   they have missed something. */
.faq-group-heading {
  max-width: none;
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--brand-700);
  letter-spacing: 0.02em;
  scroll-margin-top: 6rem;
}

.faq-group-heading:first-of-type {
  margin-top: 1rem;
}

/* Plain answer first, boundary second, technical detail last and closed.
   All three are in the static HTML - nothing is fetched on click. */
.faq-boundary {
  font-size: 0.92rem;
  color: var(--muted) !important;
  border-style: dashed !important;
}

.story-faq details.faq-technical {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.9rem;
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--surface));
  border: 1px dashed var(--border);
}

/* The nested block must not inherit the outer card's hover lift, or the whole
   answer appears to jump when the pointer crosses it. */
.story-faq details.faq-technical:hover,
.story-faq details.faq-technical[open] {
  transform: none;
  box-shadow: none;
  border-color: var(--brand);
}

.story-faq details.faq-technical > summary {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.story-faq details.faq-technical p {
  font-size: 0.94rem;
  /* Long identifiers (AES-256-GCM, alias/keepsvault-<env>-release-authority)
     must wrap rather than push the page sideways on a 375px viewport. */
  overflow-wrap: anywhere;
}

/* Primary sources only, and deliberately quiet: they follow the advanced
   answers rather than competing with the page. */
.faq-sources {
  max-width: none;
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.faq-sources h4 {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.faq-sources ul {
  margin: 0;
  padding-left: 1.1rem;
}

.faq-sources li {
  margin-bottom: 0.3rem;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .landing-hero .kv-dev-notice {
    font-size: 0.92rem;
  }
}