/* VaultClean website. Satin Glass on the web: Vault scenes open and close the
   page, Daylight carries everything in between. No outside fonts, scripts or
   trackers: SF Pro on Apple devices, the system font everywhere else. */

@property --t1 { syntax: "<color>"; inherits: true; initial-value: #3D84FF; }
@property --t2 { syntax: "<color>"; inherits: true; initial-value: #1358E6; }

:root {
  color-scheme: light dark;
  --f-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #F3F5F9;
  --surface: #FFFFFF;
  --surface-2: #F6F7FB;
  --ink: #0D1626;
  --ink-2: #434E61;
  --ink-3: #566175;
  --line: rgba(13, 22, 38, 0.09);
  --accent: #1565F2;
  --accent-text: #0F58DC;
  --accent-tint: #E7F0FF;
  --ok: #0A7E4D;
  --ok-tint: #E2F6EC;
  --warn: #9A5003;
  --warn-tint: #FDF0DD;
  --danger-text: #B41C25;
  --danger-tint: #FDECEC;
  --track: #E3E7EF;
  --tick: rgba(13, 22, 38, 0.22);
  --tick-major: rgba(13, 22, 38, 0.46);
  --disc-1: #FFFFFF;
  --disc-2: #EEF1F6;
  --disc-rim: rgba(255, 255, 255, 0.95);
  --disc-shadow: 0 1px 1px rgba(13, 30, 70, 0.06), 0 10px 20px -6px rgba(13, 30, 70, 0.16), 0 26px 40px -22px rgba(13, 30, 70, 0.24);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.9);
  --glass-line: rgba(13, 22, 38, 0.1);
  --card-shadow: 0 0 0 0.5px rgba(13, 22, 38, 0.05), 0 1px 2px rgba(13, 30, 70, 0.04), 0 16px 34px -22px rgba(13, 30, 70, 0.2);
  --card-shadow-lg: 0 0 0 0.5px rgba(13, 22, 38, 0.05), 0 2px 4px rgba(13, 30, 70, 0.04), 0 34px 64px -34px rgba(13, 30, 70, 0.32);
  --frost-bg: #FFFFFF;
  --frost-ring: rgba(13, 22, 38, 0.14);

  --vault: #081126;
  --vault-ink-2: #C9D6EC;
  --brass: #F0CE7E;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: clamp(20px, 5vw, 48px);
  --max: 1180px;
  --nav-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0E17;
    --surface: #161C29;
    --surface-2: #1D2534;
    --ink: #F3F6FC;
    --ink-2: #BAC4D4;
    --ink-3: #A5B0C2;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #1F6BFF;
    --accent-text: #8AB6FF;
    --accent-tint: #1A2C4D;
    --ok: #4FD49A;
    --ok-tint: #12332A;
    --warn: #F2BB6B;
    --warn-tint: #3A2A12;
    --danger-text: #FF9DA3;
    --danger-tint: #3A1B20;
    --track: #252E3F;
    --tick: rgba(255, 255, 255, 0.24);
    --tick-major: rgba(255, 255, 255, 0.55);
    --disc-1: #252E40;
    --disc-2: #171E2C;
    --disc-rim: rgba(255, 255, 255, 0.16);
    --disc-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 24px -6px rgba(0, 0, 0, 0.55), 0 26px 44px -20px rgba(0, 0, 0, 0.7);
    --glass: rgba(22, 28, 41, 0.78);
    --glass-rim: rgba(255, 255, 255, 0.12);
    --glass-line: rgba(255, 255, 255, 0.09);
    --card-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.07);
    --card-shadow-lg: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 34px 64px -34px rgba(0, 0, 0, 0.8);
    --frost-bg: #232C3C;
    --frost-ring: rgba(255, 255, 255, 0.16);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.55 var(--f-text);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "calt";
}
img, svg, picture { display: block; max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(21, 101, 242, 0.24); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 100; padding: 14px 20px; border-radius: 14px;
  background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none; box-shadow: var(--card-shadow-lg);
}
.skip:focus { top: 12px; }

.gl { width: 24px; height: 24px; flex: none; }

/* The download button is only a link once the new version is out:
   set data-release="live" on <html> on release day. */
[data-release="soon"] .if-live, [data-release="live"] .if-soon { display: none !important; }

/* ---------- Vault scenes ---------- */
.vault {
  --ink: #FFFFFF;
  --ink-2: #C9D6EC;
  --ink-3: #B6C5DF;
  --line: rgba(255, 255, 255, 0.12);
  --accent-text: #9CC2FF;
  --surface: rgba(255, 255, 255, 0.06);
  --card-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  --card-shadow-lg: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 40px 80px -40px rgba(0, 0, 0, 0.6);
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(130% 58% at 50% -4%, #1C4AA6 0%, rgba(28, 74, 166, 0) 74%),
    radial-gradient(100% 34% at 50% 102%, #123274 0%, rgba(18, 50, 116, 0) 100%),
    var(--vault);
  overflow: clip;
}
/* Engraved rings, as on the app's Vault screens */
.rings::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--rings-y, 220px);
  width: 1500px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 79px, rgba(255, 255, 255, 0.055) 79px 80px);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
  mask: radial-gradient(circle, #000 18%, transparent 62%);
  pointer-events: none;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 0.5px 0 var(--glass-line);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav.on-dark {
  color: #FFFFFF;
  background: rgba(8, 17, 38, 0.32);
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
.nav.on-dark.at-top { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-in { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  color: inherit; text-decoration: none;
  font: 650 19px/1 var(--f-display); letter-spacing: -0.015em;
}
.brand img { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 6px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 22px;
  color: inherit; text-decoration: none; font-size: 16px; font-weight: 550; opacity: 0.86;
  transition: opacity 0.2s, background-color 0.2s;
}
.nav-links a:hover { opacity: 1; background: rgba(127, 140, 160, 0.14); }
.nav .btn { height: 44px; padding: 0 18px; font-size: 16px; border-radius: 22px; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 28px; border-radius: 30px;
  font: 650 19px/1 var(--f-text); letter-spacing: -0.012em; white-space: nowrap; text-decoration: none;
  transition: transform 0.12s var(--ease), filter 0.12s var(--ease), background-color 0.2s;
}
.btn:active { transform: scale(0.98); filter: brightness(0.92); }
.btn .gl { width: 22px; height: 22px; }
.btn-primary {
  color: #FFFFFF;
  background: linear-gradient(180deg, #1F6BFF 0%, #1565F2 46%, #0D52D6 100%);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.46), inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(5, 24, 90, 0.34), 0 1px 2px rgba(10, 40, 120, 0.34), 0 12px 22px -10px rgba(21, 90, 240, 0.62);
}
.btn-white {
  color: #0B1B3F;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FC 100%);
  box-shadow: inset 0 -1px 0.5px rgba(10, 30, 80, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 26px -12px rgba(120, 170, 255, 0.5);
}
.btn-glass {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.26), inset 0 1px 0.5px rgba(255, 255, 255, 0.3);
}
.btn-frost { color: var(--ink); background: var(--frost-bg); box-shadow: inset 0 0 0 1px var(--frost-ring), 0 1px 2px rgba(13, 30, 70, 0.05); }
.btn-tint { color: var(--accent-text); background: var(--accent-tint); }
.btn-soon { cursor: default; }
.btn-soon:active { transform: none; filter: none; }
.btn-soon .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brass);
  box-shadow: 0 0 0 4px rgba(240, 206, 126, 0.18);
}
.nav:not(.on-dark) .btn-soon { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--frost-ring); }
.nav:not(.on-dark) .btn-soon .dot { background: #C89A2E; box-shadow: 0 0 0 4px rgba(200, 154, 46, 0.16); }

/* ---------- Glass tiles ---------- */
.tile {
  --s: 46px;
  --t1: #3D84FF; --t2: #1358E6; --t3: rgba(10, 50, 160, 0.42); --t4: rgba(19, 88, 230, 0.55);
  position: relative; flex: none; width: var(--s); height: var(--s);
  border-radius: calc(var(--s) * 0.285);
  display: flex; align-items: center; justify-content: center; color: #FFFFFF;
  background:
    radial-gradient(85% 58% at 28% -4%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.16) 68%, rgba(255, 255, 255, 0) 82%),
    linear-gradient(170deg, var(--t1) 0%, var(--t2) 100%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 -1.5px 2px var(--t3),
    0 1px 1.5px var(--t3),
    0 7px 12px -5px var(--t4);
  transition: --t1 0.6s var(--ease), --t2 0.6s var(--ease);
}
.tile .gl { width: 60%; height: 60%; }
.h-violet { --t1: #8E63F7; --t2: #6A37E8; --t3: rgba(64, 24, 170, 0.42); --t4: rgba(106, 55, 232, 0.55); }
.h-coral  { --t1: #F35E50; --t2: #D73328; --t3: rgba(150, 25, 16, 0.42); --t4: rgba(215, 51, 40, 0.5); }
.h-pink   { --t1: #EE4F8F; --t2: #CB2A6B; --t3: rgba(140, 16, 70, 0.42); --t4: rgba(203, 42, 107, 0.5); }
.h-green  { --t1: #15A768; --t2: #0A7F4E; --t3: rgba(4, 80, 48, 0.42); --t4: rgba(10, 127, 78, 0.5); }
.h-blue   { --t1: #3D84FF; --t2: #1358E6; --t3: rgba(10, 50, 160, 0.42); --t4: rgba(19, 88, 230, 0.55); }
.h-indigo { --t1: #6A6DF3; --t2: #4337CC; --t3: rgba(40, 30, 140, 0.42); --t4: rgba(67, 55, 204, 0.55); }
.h-sky    { --t1: #109FC4; --t2: #0A789C; --t3: rgba(4, 80, 110, 0.42); --t4: rgba(10, 120, 156, 0.5); }
.h-teal   { --t1: #11A295; --t2: #0A7C75; --t3: rgba(4, 80, 76, 0.42); --t4: rgba(10, 124, 117, 0.5); }
.h-amber  { --t1: #D97A06; --t2: #B55C04; --t3: rgba(120, 60, 0, 0.42); --t4: rgba(181, 92, 4, 0.5); }
.h-slate  { --t1: #6E7D93; --t2: #465468; --t3: rgba(30, 40, 60, 0.42); --t4: rgba(70, 84, 104, 0.45); }
.h-navy   { --t1: #36496F; --t2: #182645; --t3: rgba(8, 14, 34, 0.5); --t4: rgba(24, 38, 69, 0.55); }

/* ---------- Iris ---------- */
.iris { position: relative; width: var(--iris, 112px); aspect-ratio: 1; margin-inline: auto; }
.iris::before {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 140, 255, 0.55) 0%, rgba(40, 110, 255, 0.18) 38%, rgba(40, 110, 255, 0) 68%);
  pointer-events: none;
}
.iris svg, .iris img { position: relative; width: 100%; height: 100%; }
.iris .blade { transform-box: view-box; transform-origin: 0 0; }
.iris .b1 { transform: rotate(72deg); }
.iris .b2 { transform: rotate(144deg); }
.iris .b3 { transform: rotate(216deg); }
.iris .b4 { transform: rotate(288deg); }
.iris .blades { transform-box: view-box; transform-origin: 0 0; animation: iris-turn 120s linear infinite; }
@keyframes iris-turn { to { transform: rotate(360deg); } }
@keyframes iris-open {
  from { transform: rotate(calc(var(--r) - 48deg)) scale(0.55); opacity: 0; }
  to { transform: rotate(var(--r)) scale(1); opacity: 1; }
}
.js .iris .blade { animation: iris-open 1.4s var(--ease) both; }
.iris .b0 { --r: 0deg; }
.iris .b1 { --r: 72deg; animation-delay: 0.05s; }
.iris .b2 { --r: 144deg; animation-delay: 0.1s; }
.iris .b3 { --r: 216deg; animation-delay: 0.15s; }
.iris .b4 { --r: 288deg; animation-delay: 0.2s; }

/* ---------- Hero ---------- */
.hero { --rings-y: 300px; padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 96px)); text-align: center; }
.hero .iris { --iris: clamp(88px, 9vw, 116px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 30px;
  height: 36px; padding: 0 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
  color: var(--vault-ink-2); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.hero h1 {
  margin: 22px auto 0;
  max-width: 20ch;
  font: 700 clamp(46px, 7.6vw, 100px)/0.98 var(--f-display);
  letter-spacing: -0.038em;
}
.hero h1 span { display: block; color: var(--vault-ink-2); }
.hero .lede {
  max-width: 44ch; margin: 26px auto 0;
  font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--vault-ink-2);
}
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.fine { margin-top: 16px; font-size: 15px; color: rgba(201, 214, 236, 0.82); }

.fan { position: relative; height: clamp(360px, 44vw, 580px); margin-top: clamp(56px, 7vw, 88px); }
.phone {
  --w: clamp(210px, 23vw, 296px);
  position: absolute; left: 50%; top: 0;
  width: var(--w); aspect-ratio: 640 / 1392;
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.165);
  background: linear-gradient(150deg, #3B4250 0%, #0B0E14 52%, #2A303B 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 calc(var(--w) * 0.012) #05070B,
    0 60px 90px -45px rgba(0, 0, 0, 0.7),
    0 30px 60px -30px rgba(10, 40, 120, 0.45);
}
.phone img { width: 100%; height: 100%; border-radius: calc(var(--w) * 0.135); object-fit: cover; }
.phone::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%);
}
.fan .p-center { z-index: 3; transform: translateX(-50%); }
.fan .p-left, .fan .p-right { --w: clamp(180px, 20vw, 256px); z-index: 2; filter: brightness(0.88); }
.fan .p-left { transform: translate(-128%, 9%) rotate(-8deg); }
.fan .p-right { transform: translate(28%, 9%) rotate(8deg); }
/* The script sets --p from 0 to 1 over the first screen of scrolling. */
.fan .p-left, .fan .p-right { translate: 0 calc(var(--p, 0) * -56px); }
.fan .p-center { translate: 0 calc(var(--p, 0) * -20px); }

.float {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px; border-radius: 24px;
  text-align: left; color: #0D1626;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 18px 40px -16px rgba(0, 10, 40, 0.55);
  animation: float 7s ease-in-out infinite;
}
.float .tile { --s: 40px; }
.float strong { display: block; font-size: 16px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.float small { display: block; font-size: 15px; line-height: 1.3; color: #434E61; white-space: nowrap; }
.float.f1 { left: calc(50% - clamp(330px, 37vw, 470px)); top: 12%; animation-delay: -1s; }
.float.f2 { left: calc(50% + clamp(150px, 15vw, 210px)); top: 34%; animation-delay: -3.5s; }
.float.f3 { left: calc(50% - clamp(300px, 33vw, 420px)); top: 60%; animation-delay: -5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 760px) {
  .fan { height: clamp(330px, 96vw, 430px); }
  .fan .p-left { transform: translate(-112%, 12%) rotate(-8deg); }
  .fan .p-right { transform: translate(12%, 12%) rotate(8deg); }
  .float.f1 { left: 4px; top: 5%; }
  .float.f2 { left: auto; right: 4px; top: 40%; }
  .float.f3 { display: none; }
  .float { padding: 8px 14px 8px 8px; gap: 10px; }
  .float .tile { --s: 34px; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(96px, 13vw, 168px) 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 650; letter-spacing: 0.005em; color: var(--accent-text);
}
.kicker .tile { --s: 36px; }
.h2 {
  margin-top: 18px; max-width: 17ch;
  font: 700 clamp(38px, 5.4vw, 66px)/1.03 var(--f-display);
  letter-spacing: -0.034em;
}
.lead { margin-top: 22px; max-width: 46ch; font-size: clamp(19px, 1.65vw, 22px); line-height: 1.5; color: var(--ink-2); }
.center { text-align: center; }
.center .h2, .center .lead { margin-inline: auto; }

.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }

/* ---------- The honest check: dial and rows ---------- */
.check-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(40px, 6vw, 72px);
}
.dial-wrap { position: sticky; top: calc(50vh - min(230px, 22vw) - 20px); }
.dial { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin-inline: auto; }
.dial > svg { width: 100%; height: 100%; overflow: visible; }
.dial .ticks { stroke: var(--tick); }
.dial .ticks-major { stroke: var(--tick-major); }
.dial .ring { stroke: var(--track); }
.dial .seg { stroke: url(#dial-red); }
/* A fixed segment fills with green clockwise, as the app's dial does. */
.dial .seg-ok { stroke: url(#dial-green); stroke-dasharray: 0 1005.31; transition: stroke-dasharray 0.7s var(--ease); }
.dial .seg-ok.on { stroke-dasharray: 120.66 884.65; }
.dial-disc {
  position: absolute; inset: 21%; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(90% 90% at 38% 22%, var(--disc-1) 0%, var(--disc-1) 34%, var(--disc-2) 100%);
  box-shadow: inset 0 0 0 0.5px var(--disc-rim), inset 0 1.5px 1px var(--disc-rim), var(--disc-shadow);
}
.dial-num {
  font: 600 clamp(64px, 8.4vw, 108px)/1 var(--f-display); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--danger-text);
}
.dial-ok { display: none; color: var(--ok); }
.dial-ok .gl { width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); }
.dial.clear .dial-num { display: none; }
.dial.clear .dial-ok { display: block; }
.dial-label { margin-top: 8px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.3; color: var(--ink-2); max-width: 13ch; }
.dial-caption { margin-top: 22px; text-align: center; font-size: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.checks { list-style: none; margin: 0; padding: 18vh 0 34vh; display: flex; flex-direction: column; gap: 16vh; }
.check-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 18px 18px 18px; border-radius: 26px;
  background: var(--surface); box-shadow: var(--card-shadow-lg);
}
.check-row .body { flex: 1 1 auto; min-width: 0; }
.check-row .t { display: block; font-size: 19px; line-height: 1.3; font-weight: 650; letter-spacing: -0.012em; }
.check-row .d { display: block; margin-top: 3px; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.state {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 20px;
  font-size: 16px; font-weight: 650; letter-spacing: -0.01em;
}
.state .gl { width: 20px; height: 20px; }
.state-fix { color: var(--accent-text); background: var(--accent-tint); }
.state-ok { color: var(--ok); background: var(--ok-tint); }
.check-row .when-done { display: none; }
.check-row.done .when-done { display: block; }
.check-row.done .when-problem { display: none; }
.check-row.done .state-ok { display: inline-flex; }
.check-row .state-ok, .check-row.done .state-fix { display: none; }
.check-row .tile { transition-duration: 0.2s; }
.check-row.done .tile {
  --t1: #15A768; --t2: #0A7F4E; --t3: rgba(4, 80, 48, 0.42); --t4: rgba(10, 127, 78, 0.5);
  animation: tile-pop 0.5s var(--ease);
}
@keyframes tile-pop { from { transform: scale(0.84); } to { transform: scale(1); } }
.check-row .tile .ok { display: none; }
.check-row.done .tile .ok { display: block; }
.check-row.done .tile .was { display: none; }

@media (max-width: 860px) {
  .check-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dial-wrap {
    top: var(--nav-h); z-index: 2; padding: 12px 0 28px;
    background: linear-gradient(var(--bg) 78%, rgba(0, 0, 0, 0));
  }
  .dial { width: min(240px, 62vw); }
  .dial-caption { margin-top: 10px; }
  .checks { padding: 4vh 0 30vh; gap: 12vh; }
  .check-row { padding: 14px; gap: 12px; }
  .check-row .tile { --s: 42px; }
  .state { height: 36px; padding: 0 12px; font-size: 15px; }
}

/* ---------- Pillars ---------- */
.pillar-grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(40px, 7vw, 112px); align-items: center;
}
.flip .pillar-visual { order: -1; }
@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: minmax(0, 1fr); }
  .flip .pillar-visual { order: 0; }
}
.features {
  list-style: none; margin: 40px 0 0; padding: 0;
  background: var(--surface); border-radius: 28px; box-shadow: var(--card-shadow-lg); overflow: hidden;
}
.feature { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; }
.feature + .feature::before { content: ""; position: absolute; top: 0; left: 84px; right: 0; height: 0.5px; background: var(--line); }
.feature h3 { font-size: 19px; line-height: 1.3; font-weight: 650; letter-spacing: -0.012em; }
.feature p { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

.stage {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 52vw, 680px);
  display: grid; place-items: center;
  border-radius: 44px;
  background: var(--stage-bg, linear-gradient(160deg, #E8F0FF, #F6F8FC));
  box-shadow: var(--card-shadow);
  overflow: clip;
}
.stage::before, .stage::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(10px);
}
.stage::before { width: 70%; aspect-ratio: 1; left: -12%; top: -14%; background: var(--glow-1, rgba(61, 132, 255, 0.28)); }
.stage::after { width: 60%; aspect-ratio: 1; right: -14%; bottom: -16%; background: var(--glow-2, rgba(17, 162, 149, 0.22)); }
.stage .phone { position: relative; left: auto; top: auto; --w: clamp(220px, 22vw, 276px); }
.stage-protection { --stage-bg: linear-gradient(165deg, #E5F4F8 0%, #EEF3FB 60%, #F7F9FC 100%); --glow-1: rgba(16, 159, 196, 0.26); --glow-2: rgba(21, 167, 104, 0.2); }
.stage-passwords { --stage-bg: linear-gradient(165deg, #E7EEFF 0%, #EFF2FB 60%, #F7F9FC 100%); --glow-1: rgba(61, 132, 255, 0.3); --glow-2: rgba(106, 109, 243, 0.24); }
.stage-cleanup { --stage-bg: linear-gradient(165deg, #F1ECFF 0%, #F5F2FC 55%, #FBF6F6 100%); --glow-1: rgba(142, 99, 247, 0.26); --glow-2: rgba(243, 94, 80, 0.18); }
@media (prefers-color-scheme: dark) {
  .stage-protection { --stage-bg: linear-gradient(165deg, #0E2530 0%, #121A28 70%); }
  .stage-passwords { --stage-bg: linear-gradient(165deg, #12213F 0%, #141B2A 70%); }
  .stage-cleanup { --stage-bg: linear-gradient(165deg, #1E1838 0%, #191A2A 70%); }
}

/* A card drawn with the app's own parts */
.ui-card {
  position: absolute; z-index: 2;
  width: min(330px, 78%);
  padding: 20px; border-radius: 28px;
  color: #0D1626; background: #FFFFFF;
  box-shadow: 0 0 0 0.5px rgba(13, 22, 38, 0.06), 0 30px 60px -24px rgba(13, 30, 70, 0.4);
}
.ui-card h4 { margin: 0; font: 700 22px/1.2 var(--f-display); letter-spacing: -0.015em; }
.ui-card > p { margin-top: 6px; font-size: 16px; line-height: 1.4; color: #434E61; }
.ui-rows { margin: 14px -6px 0; }
.ui-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 6px; }
.ui-row + .ui-row::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 0.5px; background: rgba(13, 22, 38, 0.09); }
.ui-row .tile { --s: 40px; }
.ui-row b { display: block; font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
.ui-row small { display: block; font-size: 15px; line-height: 1.35; color: #434E61; }
.ui-row .pill { margin-left: auto; flex: none; height: 34px; padding: 0 14px; border-radius: 17px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 650; color: #0F58DC; background: #E7F0FF; }
.ui-card .btn { width: 100%; height: 52px; margin-top: 14px; font-size: 17px; border-radius: 26px; }
.ui-card .attr { margin-top: 12px; text-align: center; font-size: 14px; color: #566175; }
.ui-card .attr b { color: #0F58DC; font-weight: 600; }
.stage-protection .ui-card { left: 5%; bottom: 7%; }
.stage-protection .phone { transform: translateX(16%) rotate(3deg); }
.stage-passwords .ui-card { right: 4%; bottom: 8%; width: min(356px, 84%); }
.stage-passwords .phone { transform: translateX(-14%) rotate(-3deg); }
/* On a phone the stage stacks: the screen first, the card over its lower part. */
@media (max-width: 560px) {
  .stage { min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 28px 14px 16px; border-radius: 36px; }
  .stage-protection .phone, .stage-passwords .phone { --w: 210px; transform: none; }
  .stage-protection .ui-card, .stage-passwords .ui-card {
    position: relative; left: auto; right: auto; bottom: auto; transform: none;
    width: 100%; margin-top: -150px;
  }
  .stage-cleanup { padding: 24px 14px; }
}

/* ---------- Private: a Vault scene ---------- */
.private { --rings-y: 50%; }
.private .features { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); }
.private .feature + .feature::before { background: rgba(255, 255, 255, 0.1); }
.private .kicker { color: var(--brass); }
.duo { position: relative; min-height: clamp(540px, 54vw, 680px); }
.duo .phone { --w: clamp(220px, 22vw, 280px); }
.duo .p-back { left: 50%; top: 4%; transform: translateX(-88%) rotate(-5deg); filter: brightness(0.8); }
.duo .p-front { left: 50%; top: 10%; transform: translateX(-6%) rotate(4deg); z-index: 2; }
@media (max-width: 560px) {
  .duo { min-height: 520px; }
  .duo .phone { --w: 200px; }
  .duo .p-back { transform: translateX(-92%) rotate(-5deg); }
  .duo .p-front { transform: translateX(-12%) rotate(4deg); }
}

/* ---------- Cleanup: swipe through photos ---------- */
.swipe {
  position: relative; z-index: 1;
  width: min(340px, 88%);
  padding: 18px 18px 20px; border-radius: 34px;
  background: var(--bg-card, #F3F5F9);
  box-shadow: 0 0 0 0.5px rgba(13, 22, 38, 0.06), 0 40px 80px -36px rgba(13, 30, 70, 0.45);
  color: #0D1626;
  --bg-card: #F3F5F9;
}
.swipe-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 14px; }
.swipe-head b { font: 700 24px/1.2 var(--f-display); letter-spacing: -0.02em; }
.swipe-head span { font-size: 16px; color: #434E61; font-variant-numeric: tabular-nums; }
.deck { position: relative; aspect-ratio: 4 / 5; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.photo {
  position: absolute; inset: 0; margin: 0; border-radius: 24px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 30, 70, 0.1), 0 16px 30px -18px rgba(13, 30, 70, 0.5);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
  cursor: grab;
}
.photo { z-index: 1; }
.photo:nth-child(1) { z-index: 4; }
.photo:nth-child(2) { z-index: 3; transform: translateY(8px) scale(0.97); }
.photo:nth-child(3) { z-index: 2; transform: translateY(16px) scale(0.94); }
.photo:nth-child(n + 4) { transform: translateY(16px) scale(0.94); opacity: 0; }
/* With the script running, classes say which card is on top. */
.js .photo { z-index: 1; transform: translateY(16px) scale(0.94); opacity: 0; }
.js .photo.p0 { z-index: 4; transform: none; opacity: 1; }
.js .photo.p1 { z-index: 3; transform: translateY(8px) scale(0.97); opacity: 1; }
.js .photo.p2 { z-index: 2; transform: translateY(16px) scale(0.94); opacity: 1; }
.photo.dragging { transition: none; cursor: grabbing; }
.photo.gone-left, .photo.gone-right { z-index: 5; opacity: 0; pointer-events: none; }
.photo.gone-left { transform: translateX(-130%) rotate(-14deg) !important; }
.photo.gone-right { transform: translateX(130%) rotate(14deg) !important; }
.photo figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-size: 15px; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.photo::before, .photo::after { content: ""; position: absolute; }
.ph-1 { background: linear-gradient(180deg, #F9C27B 0%, #F2866B 38%, #A9558E 64%, #3A3F7A 100%); }
.ph-1::before { left: 50%; top: 40%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #FFF2C9 0%, #FFD58A 45%, rgba(255, 213, 138, 0) 72%); }
.ph-1::after { inset: 62% 0 0; background: linear-gradient(180deg, #2E4C7E 0%, #1B2B52 100%); }
.ph-2 { background: linear-gradient(180deg, #BFD9F4 0%, #E8F1FA 55%, #F4F7FB 100%); }
.ph-2::before { inset: 34% -10% 0; background: linear-gradient(160deg, #6E86A8 0%, #3E5578 100%); clip-path: polygon(0 100%, 0 58%, 22% 24%, 38% 46%, 58% 4%, 80% 40%, 100% 22%, 100% 100%); }
.ph-2::after { inset: 62% -10% 0; background: linear-gradient(180deg, #2F6B57 0%, #1D4A3D 100%); clip-path: polygon(0 100%, 0 40%, 30% 10%, 55% 36%, 78% 6%, 100% 30%, 100% 100%); }
.ph-3 { background: radial-gradient(120% 80% at 70% 8%, #FFE9B0 0%, rgba(255, 233, 176, 0) 50%), linear-gradient(180deg, #A9DDC6 0%, #72BE98 55%, #4A9572 100%); }
.ph-3::before { left: -24%; right: 28%; bottom: -22%; height: 56%; border-radius: 50%; background: linear-gradient(180deg, #3E8460 0%, #2A5E43 100%); }
.ph-3::after { left: 34%; right: -28%; bottom: -26%; height: 60%; border-radius: 50%; background: linear-gradient(180deg, #2F6E4E 0%, #1E4B35 100%); }
.ph-4 { background: linear-gradient(180deg, #121B3A 0%, #233061 60%, #3B3F74 100%); }
.ph-4::before { inset: 0; background:
  radial-gradient(circle at 20% 30%, rgba(255, 214, 120, 0.9) 0 2.5%, transparent 3%),
  radial-gradient(circle at 70% 22%, rgba(255, 170, 120, 0.8) 0 3.5%, transparent 4%),
  radial-gradient(circle at 46% 58%, rgba(140, 190, 255, 0.85) 0 3%, transparent 3.5%),
  radial-gradient(circle at 82% 66%, rgba(255, 220, 160, 0.8) 0 2%, transparent 2.5%),
  radial-gradient(circle at 30% 76%, rgba(255, 150, 190, 0.75) 0 4%, transparent 4.5%); filter: blur(1.5px); }
.ph-4::after { inset: auto 0 0; height: 30%; background: linear-gradient(180deg, rgba(10, 14, 30, 0) 0%, rgba(10, 14, 30, 0.85) 100%); }
.mark {
  position: absolute; top: 14px; z-index: 3; height: 34px; padding: 0 14px; border-radius: 17px;
  display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; opacity: 0;
  transition: opacity 0.15s;
}
.mark-del { left: 14px; color: #B41C25; background: #FDECEC; }
.mark-keep { right: 14px; color: #0F58DC; background: #E7F0FF; }
.swipe-end {
  position: absolute; inset: 0; border-radius: 24px; padding: 24px;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: #FFFFFF; box-shadow: 0 0 0 0.5px rgba(13, 22, 38, 0.06);
}
.swipe-end.on { display: flex; }
.swipe-end .tile { --s: 64px; }
.swipe-end b { font: 700 22px/1.25 var(--f-display); letter-spacing: -0.015em; }
.swipe-end p { font-size: 16px; color: #434E61; }
.swipe-end .btn { height: 48px; font-size: 17px; }
.swipe-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.swipe-actions .btn { height: 56px; padding: 0 16px; font-size: 18px; color: #0D1626; }
.swipe-actions .btn-tint { color: #0F58DC; background: #E7F0FF; }
.swipe-actions .btn-frost { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(13, 22, 38, 0.14); }
.swipe-actions .btn:disabled { opacity: 0.4; cursor: default; transform: none; filter: none; }

/* ---------- Privacy ---------- */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.promise { padding: 26px 24px 28px; border-radius: 28px; background: var(--surface); box-shadow: var(--card-shadow-lg); }
.promise .tile { --s: 52px; }
.promise h3 { margin-top: 22px; font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -0.014em; }
.promise p { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.footnote { margin-top: 28px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 1040px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .promises { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Price ---------- */
.price {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(40px, 6vw, 64px);
  border-radius: 34px; background: var(--surface); box-shadow: var(--card-shadow-lg); overflow: hidden;
}
.plan { padding: clamp(28px, 4vw, 44px); }
.plan + .plan { border-left: 0.5px solid var(--line); }
.plan .tag { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.plan-free .tag { color: var(--ok); background: var(--ok-tint); }
.center .price { text-align: left; }
/* Premium is the one place brass appears outside the Vault scenes, so it gets a small Vault of its own. */
.plan-premium {
  position: relative; color: #FFFFFF;
  background: radial-gradient(120% 90% at 85% -10%, #1C4AA6 0%, rgba(28, 74, 166, 0) 62%), #0B1530;
}
.plan-premium .tag { color: #2B2005; background: var(--brass); }
.price .plan-premium > p { color: #C9D6EC; }
.plan-premium .ticks-list .gl { color: var(--brass); }
.plan + .plan.plan-premium { border-left: 0; }
.plan h3 { margin-top: 18px; font: 700 clamp(26px, 2.6vw, 32px)/1.15 var(--f-display); letter-spacing: -0.022em; }
.plan > p { margin-top: 10px; color: var(--ink-2); font-size: 17px; }
.ticks-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks-list li { display: flex; gap: 12px; font-size: 17px; line-height: 1.45; }
.ticks-list .gl { width: 22px; height: 22px; margin-top: 1px; color: var(--ok); }
.price-note { margin-top: 22px; text-align: center; font-size: 16px; color: var(--ink-2); }
@media (max-width: 760px) {
  .price { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 0.5px solid var(--line); }
}

/* ---------- Questions ---------- */
.faq { max-width: 820px; margin: clamp(40px, 6vw, 64px) auto 0; border-radius: 28px; background: var(--surface); box-shadow: var(--card-shadow-lg); overflow: hidden; }
.faq details { position: relative; }
.faq details + details::before { content: ""; position: absolute; top: 0; left: 24px; right: 0; height: 0.5px; background: var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 18px 24px;
  font-size: 19px; line-height: 1.35; font-weight: 650; letter-spacing: -0.012em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .gl { margin-left: auto; width: 22px; height: 22px; color: var(--ink-3); transition: transform 0.3s var(--ease); }
.faq details[open] summary .gl { transform: rotate(180deg); }
.faq .answer { padding: 0 24px 24px; max-width: 64ch; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.faq .answer p + p { margin-top: 10px; }
.more { margin-top: 22px; text-align: center; font-size: 17px; }

/* ---------- Closing scene ---------- */
.closing { --rings-y: 42%; padding: clamp(110px, 15vw, 190px) 0; text-align: center; }
.closing .iris { --iris: clamp(120px, 14vw, 168px); }
.closing .h2 { margin: 34px auto 0; }
.closing .lead { margin-inline: auto; }

/* ---------- Footer ---------- */
.footer { padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 16px; color: var(--ink-2); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.footer .brand { color: var(--ink); }
.footer nav ul { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ink-2); text-decoration: none; border-radius: 12px; }
.footer nav a:hover { color: var(--ink); background: rgba(127, 140, 160, 0.12); }
.footer .copy { margin-left: auto; }
.footer .legal { width: 100%; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* ---------- Text pages: support, privacy, terms ---------- */
.page-head { padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(48px, 7vw, 80px); --rings-y: 0px; }
.page-head h1 { font: 700 clamp(40px, 6vw, 72px)/1.03 var(--f-display); letter-spacing: -0.034em; max-width: 16ch; }
.page-head p { margin-top: 16px; color: var(--vault-ink-2); font-size: 19px; }
.doc { max-width: 760px; margin-inline: auto; padding: clamp(48px, 7vw, 80px) 0 clamp(80px, 10vw, 120px); }
.doc h2 { margin: 48px 0 0; font: 700 clamp(24px, 2.6vw, 30px)/1.2 var(--f-display); letter-spacing: -0.02em; }
.doc h3 { margin: 30px 0 0; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -0.012em; }
.doc p, .doc ul, .doc ol { margin: 14px 0 0; color: var(--ink-2); line-height: 1.65; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--ink); }
.doc .summary { margin: 0; padding: 26px 28px; border-radius: 26px; background: var(--surface); box-shadow: var(--card-shadow-lg); }
.doc .summary p:first-child { margin-top: 0; }
.doc .question { margin-top: 18px; padding: 24px 26px; border-radius: 26px; background: var(--surface); box-shadow: var(--card-shadow); }
.doc .question h3 { margin: 0; }
.doc .question p { margin-top: 8px; }
.doc .contact { margin-top: 40px; padding: 28px; border-radius: 28px; background: var(--surface); box-shadow: var(--card-shadow-lg); }
.doc .contact .btn { margin-top: 18px; }
.doc .links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.doc .links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow); text-decoration: none; font-weight: 600; }
.doc table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 16px; }
.doc th, .doc td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 0.5px solid var(--line); }
.doc .table { overflow-x: auto; }

.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--nav-h) var(--gutter) 40px; --rings-y: 50%; }
.lost .iris { --iris: 120px; }
.lost h1 { margin-top: 30px; font: 700 clamp(40px, 6vw, 64px)/1.05 var(--f-display); letter-spacing: -0.032em; }
.lost p { margin-top: 14px; color: var(--vault-ink-2); font-size: 19px; }
.lost .actions { margin-top: 30px; }

/* ---------- Spotlight on cards that can be hovered ---------- */
@media (hover: hover) and (pointer: fine) {
  .spot { background-image: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(21, 101, 242, 0.07), transparent 60%); }
  .vault .spot { background-image: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(156, 194, 255, 0.1), transparent 60%); }
}

/* ---------- Comfort settings ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .photo, .tile, .dial .seg-ok { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.on-dark.at-top { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.on-dark, .nav.on-dark.at-top { background: var(--vault); }
  .float { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .tile, .btn { border: 1px solid CanvasText; }
}
@media print {
  .nav, .fan, .footer nav, .actions { display: none !important; }
  .vault { background: none; color: #000; }
}

/* First heading on a text page, and headings inside cards */
.doc > h2:first-child, .doc .contact h2 { margin-top: 0; }