/* preopen.com — the app's own design system (docs/DESIGN.md, constants/tokens.ts), on the web.
   Dark and light, as the app is (it follows the reader's device). Photographic, quiet, light type.
   Nothing here is loaded from anyone else, and nothing is kept on the visitor's device.
   Used by every page but the admin panel (which has admin.css). */

@font-face { font-family: 'Inter'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/inter-200.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }

/* ── tokens (constants/tokens.ts: DARK, then LIGHT) ───────────────────────────────────────── */
:root {
  --base: #0A0D13;
  --sunken: #06080C;
  --raised: #10141C;
  --raised-2: #151A24;
  --raised-alpha: rgba(16, 20, 28, 0.74);
  --overlay: #171C26;
  --ink: #F4F1EA;
  --ink-2: #B7BCC7;
  --ink-3: #7E8491;
  --on-accent: #0A0D13;
  --hairline: rgba(244, 241, 234, 0.07);
  --line: rgba(244, 241, 234, 0.14);
  --lit: rgba(255, 255, 255, 0.08);
  --accent: #E8C36A;
  --accent-hi: #F0CD7A;
  --accent-glow: rgba(232, 195, 106, 0.15);
  --accent-edge: rgba(232, 195, 106, 0.30);
  --up: #F0C271;
  --down: #8FA0FF;
  --gold: #F0C271;
  --coral: #E38A6B;
  --orchid: #B06A9E;
  --periwinkle: #7C8CE0;
  --hopeful: #EAA66E;
  --careful: #967BBF;
  --track: rgba(244, 241, 234, 0.08);
  --ramp: linear-gradient(90deg, var(--gold), var(--coral) 35%, var(--orchid) 68%, var(--periwinkle));
  --ramp-v: linear-gradient(180deg, var(--gold), var(--coral) 35%, var(--orchid) 68%, var(--periwinkle));
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 40px 90px -24px rgba(0, 0, 0, 0.7), 0 14px 34px -14px rgba(0, 0, 0, 0.55);
  --photo-veil: linear-gradient(180deg, rgba(10, 13, 19, 0.28) 0%, rgba(10, 13, 19, 0.42) 40%, rgba(10, 13, 19, 0.86) 76%, #0A0D13 100%);
  --photo-ink: #F4F1EA;
  --photo-ink-2: #D2D6DE;
  --frame-hi: #4A4E57;
  --frame-lo: #17191E;
  --grain: 0.045;

  --page: min(1200px, 100% - 40px);
  --narrow: min(760px, 100% - 40px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --section: clamp(56px, 7vw, 96px);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --base: #F4F2EE;
    --sunken: #EAE7E1;
    --raised: #FFFFFF;
    --raised-2: #F8F6F2;
    --raised-alpha: rgba(255, 255, 255, 0.80);
    --overlay: #EFEDE8;
    --ink: #15181F;
    --ink-2: #4A505B;
    --ink-3: #5F6570;
    --on-accent: #FFFFFF;
    --hairline: rgba(21, 24, 31, 0.08);
    --line: rgba(21, 24, 31, 0.15);
    --lit: rgba(255, 255, 255, 0.9);
    --accent: #8C5E0B;
    --accent-hi: #7A520A;
    --accent-glow: rgba(160, 108, 15, 0.14);
    --accent-edge: rgba(160, 108, 15, 0.32);
    --up: #8C5E0B;
    --down: #4558C8;
    --gold: #B57F16;
    --coral: #C9603C;
    --orchid: #9A4C88;
    --periwinkle: #5366CC;
    --hopeful: #C2733A;
    --careful: #7559A8;
    --track: rgba(21, 24, 31, 0.08);
    --shadow-1: 0 10px 30px -12px rgba(21, 24, 31, 0.16);
    --shadow-2: 0 50px 90px -40px rgba(21, 24, 31, 0.45), 0 16px 34px -16px rgba(21, 24, 31, 0.25);
    --photo-veil: linear-gradient(180deg, rgba(244, 242, 238, 0.42) 0%, rgba(244, 242, 238, 0.62) 40%, rgba(244, 242, 238, 0.90) 76%, #F4F2EE 100%);
    --photo-ink: #15181F;
    --photo-ink-2: #3A404B;
    --frame-hi: #E2DFD8;
    --frame-lo: #9B988F;
    --grain: 0.03;
    color-scheme: light;
  }
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font: 300 17px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'calt', 'kern';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* Grain over everything, as over the app's photographs: it stops the gradients banding. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: rgba(232, 195, 106, 0.28); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 10px 16px; background: var(--overlay); color: var(--ink); border-radius: 999px; }
.skip:focus { left: 12px; }
.wrap { width: var(--page); margin-inline: auto; }
[hidden] { display: none !important; }

/* ── type ─────────────────────────────────────────────────────────────────────────────────── */
.label {
  font-weight: 500;
  font-size: 11.5px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label.accent { color: var(--accent); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 11.5px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--ramp); }
h1, h2, h3, h4 { margin: 0; font-weight: 200; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(44px, 7.4vw, 98px); line-height: 0.98; letter-spacing: -0.042em; }
h2 { font-size: clamp(34px, 4.7vw, 60px); line-height: 1.05; letter-spacing: -0.034em; }
h3 { font-weight: 300; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -0.015em; }
h4 { font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6; color: var(--ink-2); }
.fine { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.ramp-text {
  background: linear-gradient(90deg, var(--gold), var(--coral) 50%, var(--orchid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  .hero .ramp-text { background-image: linear-gradient(90deg, #F4CB80, #EE9A7A 60%, #D69ACB); }
}

/* ── navigation ───────────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--base) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border-bottom-color: var(--hairline);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 400; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav .brand { color: var(--photo-ink); }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 14.5px; color: var(--photo-ink-2); transition: color 200ms; }
.nav.scrolled .brand { color: var(--ink); }
.nav.scrolled .nav-links a { color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink) !important; }
.nav .get { margin-left: 4px; }
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav .get { margin-left: auto; }
}

/* ── buttons ──────────────────────────────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 500 12px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: transform 200ms var(--ease), box-shadow 300ms var(--ease), background-color 200ms;
}
.button:hover { background: var(--accent-hi); box-shadow: 0 0 0 8px var(--accent-glow); }
.button:active { transform: scale(0.97); }
.button.small { min-height: 38px; padding: 0 16px; font-size: 11px; }

/* The App Store badge. */
.store { display: inline-block; border-radius: 11px; line-height: 0; transition: transform 200ms var(--ease), box-shadow 300ms var(--ease); }
.store img { height: 54px; width: auto; }
.store:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6); }
.store.sm img { height: 46px; }
/* Before release the badge is a label, not a link: Apple shows "not found" until the app is out. At launch,
   docs/LAUNCH.md turns every [data-store] back into the badge linking to its address. */
.soon { cursor: default; }
.button.soon:hover { background: var(--accent); box-shadow: none; }
.button.soon:active { transform: none; }
.store.soon {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 3px;
  height: 54px; padding: 0 20px; border: 1px solid var(--line); background: var(--raised-alpha);
  color: var(--ink); font: 400 18px/1 'Inter', sans-serif; letter-spacing: 0.01em;
}
.store.soon small { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.store.soon:hover { transform: none; box-shadow: none; }
.store.soon.sm { height: 46px; font-size: 16px; }
.get-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.get-note { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.get-note b { font-weight: 400; color: var(--ink); display: block; }

/* ── sections ─────────────────────────────────────────────────────────────────────────────── */
.section { position: relative; padding: var(--section) 0; overflow-x: clip; }
.section.flush { padding-top: 0; }
.head { display: grid; gap: 18px; max-width: 780px; justify-items: start; }
.head.center { margin-inline: auto; text-align: center; justify-items: center; }
.head .lede { max-width: 36em; }
.head + * { margin-top: clamp(36px, 5vw, 64px); }

/* A soft light behind a phone, from the brand's ramp. */
.glow { position: absolute; inset: 6% -10%; z-index: -1; border-radius: 50%; filter: blur(64px); opacity: 0.42; pointer-events: none;
  background: radial-gradient(closest-side, rgba(227, 138, 107, 0.5), rgba(176, 106, 158, 0.22) 60%, transparent); }
.glow.cool { background: radial-gradient(closest-side, rgba(124, 140, 224, 0.5), rgba(176, 106, 158, 0.2) 60%, transparent); }
.glow.gold { background: radial-gradient(closest-side, rgba(240, 194, 113, 0.42), rgba(227, 138, 107, 0.16) 60%, transparent); }
@media (prefers-color-scheme: light) { .glow { display: none; } }

/* ── hero ─────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(104px + env(safe-area-inset-top)) 0 0; }
.photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--base); }
.photo picture, .photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ''; position: absolute; inset: 0; background: var(--photo-veil); }
.hero .photo img { animation: drift 28s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translate3d(-1%, 0.6%, 0); } }
.hero-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 24px; align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; padding-bottom: 96px; }
.hero h1 { color: var(--photo-ink); font-size: clamp(44px, 6.9vw, 88px); } /* "Research with" stays on one line beside the phones (2026-11-06) */
/* Gradient text is painted only inside its box: room below the baseline, or the "g" of "edge" loses its tail. */
.hero h1 .ramp-text { display: block; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero .lede { max-width: 25em; color: var(--photo-ink-2); }
.hero .eyebrow { color: var(--photo-ink); }
/* The eyebrow sits inside the h1 (2026-11-09, search: the category words belong in the heading), drawn as before. */
.hero h1 .eyebrow { display: flex; width: max-content; max-width: 100%; margin-bottom: 24px; }
.hero .get-note { color: var(--photo-ink-2); }
.hero .get-note b { color: var(--photo-ink); }
.hero-stage { position: relative; height: 760px; }
.hero-stage .phone { position: absolute; top: 0; }
.main-phone { --w: 348px; left: 50%; margin-left: -292px; z-index: 3; }
.back-phone { --w: 286px; left: 50%; margin-left: 12px; top: 62px !important; rotate: 6deg; z-index: 2; }
.chip.c1 { left: calc(50% - 408px); top: 322px; }
.chip.c2 { left: calc(50% + 136px); top: 596px; }
.chip.c3 { left: calc(50% - 372px); top: 700px; }
/* The phones fade into what follows, rather than stopping at a line. */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 4; background: linear-gradient(180deg, transparent, var(--base)); pointer-events: none; }
@media (max-width: 1100px) {
  .main-phone { --w: 300px; margin-left: -240px; }
  .back-phone { --w: 240px; margin-left: 12px; }
  .hero-stage { height: 680px; }
  .chip.c1 { left: calc(50% - 372px); top: 262px; }
  .chip.c2 { left: calc(50% + 100px); top: 520px; }
  .chip.c3 { left: calc(50% - 280px); top: 580px; }
}
@media (max-width: 860px) {
  .hero { padding-top: calc(88px + env(safe-area-inset-top)); }
  .hero .photo { bottom: 30%; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { gap: 16px; padding-bottom: 28px; }
  .hero h1 .eyebrow { margin-bottom: 16px; }
  .hero-stage { height: calc(min(74vw, 340px) * 2.16); max-width: 560px; width: 100%; margin-inline: auto; }
  .main-phone { --w: min(74vw, 340px); margin-left: calc(var(--w) * -0.58); }
  .back-phone { --w: min(56vw, 280px); margin-left: calc(var(--w) * 0.03); top: 34px !important; }
  /* On a phone the chips sit in the clear, over the phones' foot and beside the dial, never over a figure. */
  .chip { font-size: 12.5px; padding: 7px 12px 7px 8px; gap: 7px; }
  .chip i { width: 21px; height: 21px; }
  .chip.c1 { left: auto; right: 0; top: calc(min(74vw, 340px) * 1.89); }
  .chip.c2 { left: auto; right: 0; top: calc(min(74vw, 340px) * 0.68); }
  .chip.c3 { left: 2px; right: auto; top: calc(min(74vw, 340px) * 2.01); }
}
/* On a phone little of the second screen shows beside the first: it sits back, out of focus, so its words don't
   read as words cut off. */
@media (max-width: 600px) {
  .back-phone .screen { filter: brightness(0.8) blur(1.2px); }
}
/* On a phone the hero's photograph sits behind the headline: a deeper veil keeps the words clear of the mist. */
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  .hero .photo::after { background: linear-gradient(180deg, rgba(10, 13, 19, 0.5) 0%, rgba(10, 13, 19, 0.58) 45%, rgba(10, 13, 19, 0.88) 78%, #0A0D13 100%); }
}
@media (max-width: 700px) and (prefers-color-scheme: light) {
  .hero .photo::after { background: linear-gradient(180deg, rgba(244, 242, 238, 0.55) 0%, rgba(244, 242, 238, 0.68) 45%, rgba(244, 242, 238, 0.92) 78%, #F4F2EE 100%); }
}

/* ── the proof, in numbers ────────────────────────────────────────────────────────────────── */
.proof { position: relative; z-index: 5; padding: 8px 0 clamp(24px, 4vw, 40px); }
.proof-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.proof-g > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 8px 24px; border-left: 1px solid var(--line); }
.proof-g > div:first-child { border-left: 0; padding-left: 0; }
.proof-g dd { margin: 0; font-weight: 200; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--gold), var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof-g dd small { font-size: 0.5em; letter-spacing: -0.02em; }
.proof-g dt { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.after-hero { display: none; }
@media (max-width: 860px) {
  .proof-g { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .proof-g > div { padding: 0 0 0 16px; }
  .proof-g > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .after-hero { display: flex; justify-content: center; margin-top: 28px; }
}

/* ── a feature: one idea, one big screen ──────────────────────────────────────────────────── */
.feat { position: relative; padding: clamp(56px, 7vw, 96px) 0; overflow: clip; }
.feat.band { background: var(--sunken); }
.feat-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.feat.flip .copy { order: 2; }
.copy { display: grid; gap: 18px; justify-items: start; max-width: 520px; }
.feat.flip .copy { justify-self: end; }
.aside { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--accent-edge); }
.aside b { font-weight: 400; color: var(--ink); }
.stage { position: relative; display: grid; justify-items: center; align-items: start; isolation: isolate; }
.stage { --w: min(330px, 78vw); }
/* A phone rising out of the section's foot: the page goes on below, and the edge is meant. */
.feat.rise { padding-bottom: 0; }
.feat.rise .feat-in { align-items: end; }
.feat.rise .copy { align-self: center; padding-bottom: clamp(0px, 7vw, 96px); }
.rise .stage { height: calc(var(--w) * var(--crop, 1.86)); clip-path: inset(-160px -160px 0 -160px); }
.rise .stage::after { content: ''; position: absolute; inset: auto -40px 0; height: 56px; z-index: 5; background: linear-gradient(180deg, transparent, var(--bg, var(--base))); pointer-events: none; }
.feat.band { --bg: var(--sunken); }
/* Fair value: the page and, over its foot, the case for and against. */
.st-worth { --w: 330px; }
.st-worth { justify-items: start; }
.st-worth .float { position: absolute; right: -60px; bottom: 16px; width: 322px; z-index: 3; }
/* Before the Bell and the Lock Screen together, rising out of the section's foot. */
.st-ahead { --w: 316px; --crop: 2; }
.st-ahead .pa { position: absolute; left: 0; top: 0; z-index: 2; }
.st-ahead .pb { --w: 268px; position: absolute; right: -36px; top: 56px; z-index: 3; rotate: 3deg; }
@media (max-width: 1400px) {
  .st-worth .float { right: -16px; width: 320px; }
}
@media (max-width: 1100px) {
  .st-worth { --w: 300px; }
  .st-worth .float { width: 330px; right: -20px; bottom: -28px; }
  .st-ahead { --w: 280px; }
  .st-ahead .pb { --w: 240px; }
}
@media (max-width: 860px) {
  .feat-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feat.flip .copy { order: 0; justify-self: start; }
  .copy { max-width: 620px; gap: 14px; }
  .stage { --w: min(78vw, 340px); }
  .feat.rise .copy { padding-bottom: 0; }
  .st-worth { max-width: 460px; width: 100%; margin-inline: auto; }
  .st-worth { --w: min(74vw, 330px); }
  .st-worth { justify-items: center; }
  .st-worth .float { position: relative; right: auto; bottom: auto; width: 100%; margin-top: -148px; }
  /* On a phone the article reads first, and the Lock Screen comes up over its foot, big enough to read. */
  .st-ahead { --w: min(76vw, 340px); --crop: 2.47; width: 100%; max-width: 520px; margin-inline: auto; }
  .st-ahead .pa { left: calc(50% - var(--w) / 2); }
  .st-ahead .pb { --w: min(90vw, 402px); top: calc(min(76vw, 340px) * 1.09); left: calc(50% - var(--w) / 2); right: auto; rotate: 0deg; }
}

/* ── also inside ──────────────────────────────────────────────────────────────────────────── */
.more { padding: clamp(52px, 6vw, 80px) 0 clamp(44px, 5vw, 64px); }
.more h2 { text-align: center; }
.more-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(26px, 3vw, 40px); }
.more-t { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; padding: 22px; border-radius: 26px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 var(--lit); }
.more-t h3 { font-weight: 300; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
.more-t > p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.more-a { height: 96px; display: grid; align-content: center; margin-bottom: 8px; }
.coins { height: 48px; width: 110px; }
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 0; text-align: center; font-weight: 400; font-size: 12.5px; color: var(--ink-3); max-width: 170px; }
.cal .sel { color: var(--accent); }
.cal i { justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--track); }
.cal i.on { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cal-n { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px !important; font-weight: 400; font-size: 12.5px; line-height: 17px; color: var(--ink); }
.cal-n svg { flex: none; width: 13px; height: 13px; color: var(--accent); }
.less { display: grid; gap: 7px; }
.less p { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; line-height: 18px; color: var(--ink); white-space: nowrap; }
.less i { flex: none; width: 16px; height: 3px; border-radius: 2px; background: var(--c); }
.wdg { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: var(--overlay); max-width: 190px; }
.wdg svg { width: 60px; height: 60px; }
.wdg p { display: flex; justify-content: space-between; gap: 6px; font-weight: 400; font-size: 11.5px; line-height: 17px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.wdg em { font-style: normal; color: var(--up); }
.get-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 1000px) { .more-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) {
  .more-g { gap: 10px; }
  .more-t { padding: 16px; border-radius: 22px; }
  .more-a { height: 84px; }
  .more-t h3 { font-size: 17px; }
  .more-t > p { font-size: 14px; line-height: 1.45; }
  .more-t h3 { overflow-wrap: anywhere; }
  .wdg { grid-template-columns: 38px minmax(0, 1fr); gap: 7px; padding: 8px; border-radius: 15px; }
  .wdg svg { width: 38px; height: 38px; }
  .wdg p { font-size: 10.5px; line-height: 16px; gap: 4px; }
  .less p { font-size: 12px; }
  .less i { width: 12px; }
  .cal-n { font-size: 11.5px; }
}

@media (max-width: 360px) {
  .wdg { grid-template-columns: minmax(0, 1fr); }
  .wdg svg { display: none; }
  .cal { max-width: none; }
  .chip.c2 { display: none; }
}

/* ── trust ────────────────────────────────────────────────────────────────────────────────── */
.trust { background: var(--sunken); padding: clamp(48px, 5vw, 72px) 0; }
.trust h2 { text-align: center; }
.trust-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); margin-top: clamp(26px, 3vw, 40px); }
.trust-g > div { padding-top: 16px; background: var(--ramp) top / 100% 1px no-repeat; display: grid; gap: 8px; align-content: start; }
.trust-g h3 { font-weight: 300; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; }
.trust-g p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 760px) { .trust-g { grid-template-columns: minmax(0, 1fr); } }


/* ── pricing ──────────────────────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 14px; align-items: stretch; max-width: 1200px; margin-inline: auto; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.6vw, 36px); border-radius: 30px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 var(--lit), var(--shadow-1); }
/* PreOpen Plus keeps its own look, gold on near-black in either theme, as in the app (components/paywall/plus.ts). */
.plan.plus { background: #0B0E14; color: #F4F1EA; box-shadow: inset 0 0 0 1px rgba(232, 195, 106, 0.45), 0 40px 100px -40px rgba(232, 195, 106, 0.45); overflow: hidden; isolation: isolate; }
.plan.plus::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, #F0C271, #E38A6B 35%, #B06A9E 68%, #7C8CE0); }
.plan.plus::after { content: ''; position: absolute; top: -30%; right: -25%; width: 75%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 195, 106, 0.16), transparent); }
.plan .name { display: grid; gap: 4px; }
.plan .name h3 { font-weight: 200; font-size: clamp(30px, 3vw, 38px); letter-spacing: -0.03em; }
.plan .name p { color: var(--ink-2); font-size: 15px; }
.plan.plus h3, .plan.plus h4 { color: #F4F1EA; }
.plan.plus .name p { color: #B7BCC7; }
.plan .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan .price b { font-weight: 200; font-size: clamp(44px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.plan .price span { color: var(--ink-2); font-size: 16px; }
/* The Screener's three things to look for (owner, 2026-11-12): the plans' ticks, a little larger, under the lede. */
.copy .ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.copy .ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.copy .ticks li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.copy .ticks b { display: block; font-weight: 500; color: var(--ink); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.plan li svg { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.plan.plus li { color: #D5D9E1; }
.plan.plus li svg { color: #E8C36A; }
.plan .group { font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.plan.plus .group { color: #8A909C; }
.plan .foot { margin-top: auto; display: grid; gap: 12px; justify-items: start; }
.plan .lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.plan .lists > div { display: grid; gap: 9px; align-content: start; }
@media (max-width: 560px) { .plan .lists { grid-template-columns: minmax(0, 1fr); } }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-p { position: relative; padding: 15px 16px; border-radius: 20px; background: #10141C; box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.1); display: grid; gap: 4px; align-content: start; }
.choice-p.best { box-shadow: inset 0 0 0 1.5px rgba(232, 195, 106, 0.75); background: #131722; }
.choice-p .label { color: #8A909C; }
.choice-p.best .label { color: #E8C36A; }
.choice-p .amount { font-weight: 300; font-size: clamp(30px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.03em; color: #F4F1EA; font-variant-numeric: tabular-nums; }
.choice-p .per { font-size: 15px; color: #B7BCC7; }
.choice-p .small { margin-top: 3px; font-size: 13px; line-height: 1.45; color: #9DA3AF; }
.plan.plus .button { background: #E8C36A; color: #0A0D13; }
.plan.plus .button:hover { background: #F0CD7A; box-shadow: 0 0 0 8px rgba(232, 195, 106, 0.15); }
.plan.plus .fine { color: #8A909C; }
.plan.plus .fine b { font-weight: 400; color: #F4F1EA; }
.plan.plus a { color: #E8C36A; }
.small-print { max-width: 780px; margin: 22px auto 0; text-align: center; }
.small-print a { color: var(--ink-2); }
@media (max-width: 880px) { .plans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .choices { grid-template-columns: minmax(0, 1fr); } }

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────── */
.faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--hairline); }
.faq-list details, .faq details { border-bottom: 1px solid var(--hairline); }
.faq-list summary, .faq summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative; font-weight: 300; color: var(--ink); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.4; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.faq-list summary::after, .faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--ink-3), var(--ink-3)) center / 14px 1.5px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) center / 1.5px 14px no-repeat; transition: transform 300ms var(--ease); }
.faq-list details[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover, .faq summary:hover { color: var(--accent); }
.faq-list details > div, .faq details > p { padding: 0 44px 20px 0; color: var(--ink-2); }
.faq-list details > div p + p { margin-top: 12px; }
.ask-us { text-align: center; margin-top: 24px; }
.ask-us a { color: var(--accent); }
.faq-list a, .faq a { color: var(--accent); text-underline-offset: 3px; text-decoration-color: var(--accent-edge); }

/* ── closing ──────────────────────────────────────────────────────────────────────────────── */
.closing { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 10vw, 136px) 0; text-align: center; }
.closing .photo::after { background: linear-gradient(180deg, var(--base) 0%, color-mix(in srgb, var(--base) 35%, transparent) 30%, color-mix(in srgb, var(--base) 45%, transparent) 70%, var(--base) 100%); }
@media (prefers-color-scheme: light) {
  .closing .photo::after { background: linear-gradient(180deg, var(--base) 0%, rgba(244, 242, 238, 0.62) 26%, rgba(244, 242, 238, 0.74) 50%, rgba(244, 242, 238, 0.96) 76%, var(--base) 100%); }
}
.closing .wrap { display: grid; gap: 22px; justify-items: center; }
.closing h2 { max-width: 16ch; color: var(--photo-ink); font-size: clamp(38px, 5.4vw, 72px); }
.closing .lede { max-width: 30em; color: var(--photo-ink-2); }
.closing .appicon { width: 84px; height: 84px; border-radius: 19px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--hairline); }
.closing .get-note { color: var(--photo-ink-2); }

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */
footer { position: relative; padding: 44px 0 calc(36px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-3); background: var(--base); }
footer .wrap { display: grid; gap: 24px; }
footer .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
footer nav a { text-decoration: none; color: var(--ink-2); padding: 4px 0; }
footer nav a:hover { color: var(--ink); }
footer .legal { display: grid; gap: 8px; max-width: 860px; font-size: 13px; line-height: 1.55; }
footer .legal .company { color: var(--ink-2); }

/* ── document pages: privacy, terms, support, about, email ────────────────────────────────── */
.doc-head { position: relative; overflow: hidden; isolation: isolate; padding: calc(150px + env(safe-area-inset-top)) 0 56px; }
.doc-head .photo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--base) 35%, transparent) 0%, color-mix(in srgb, var(--base) 75%, transparent) 55%, var(--base) 100%); }
.doc-head .wrap { position: relative; z-index: 1; display: grid; gap: 16px; width: var(--narrow); }
.doc-head h1 { font-size: clamp(40px, 6vw, 68px); }
.doc-head .lede a { color: var(--accent); }
.doc { width: var(--narrow); margin: 0 auto; padding: 24px 0 120px; }
.doc h2 { font-size: clamp(26px, 3vw, 32px); font-weight: 300; margin: 56px 0 14px; letter-spacing: -0.02em; }
.doc h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 400; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p { margin-top: 14px; }
.doc ul { padding-left: 20px; margin: 12px 0; }
.doc li { margin: 8px 0; }
.doc a { color: var(--accent); text-decoration-color: var(--accent-edge); text-underline-offset: 3px; }
.doc strong { font-weight: 400; color: var(--ink); }
.doc .summary { padding: 24px 26px; border-radius: 22px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline); }
.doc .summary li { margin: 6px 0; }
.doc .facts { display: grid; grid-template-columns: 180px 1fr; gap: 14px 20px; margin: 4px 0; }
.doc .facts dt { padding-top: 4px; font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.doc .facts dd { margin: 0; color: var(--ink); }
.doc .get-app { margin-top: 48px; padding: 26px 28px; border-radius: 24px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; justify-content: space-between; }
.doc .get-app p { color: var(--ink); max-width: 32ch; }
.doc .small { font-size: 14px; color: var(--ink-3); }
.doc .log { list-style: none; padding: 0; margin: 20px 0 0; }
.doc .log li { margin: 0; padding: 20px 0; border-top: 1px solid var(--hairline); }
.doc .log p + p { margin-top: 6px; }
.doc .log .when { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.doc .log .what { color: var(--ink); }
@media (max-width: 520px) { .doc .facts { grid-template-columns: 1fr; gap: 2px; } .doc .facts dd { margin-bottom: 12px; } }

/* A page that is one message: open/ and 404. */
.solo { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.solo .wrap { padding: 120px 0; display: grid; gap: 24px; justify-items: start; }
.solo h1 { max-width: 13ch; color: var(--photo-ink); font-size: clamp(42px, 7vw, 84px); }
.solo .lede { max-width: 36ch; color: var(--photo-ink-2); }
.solo .label { color: var(--photo-ink-2); }
.solo .label.accent { color: var(--accent); }
.solo .photo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--base) 25%, transparent), color-mix(in srgb, var(--base) 70%, transparent) 70%, var(--base)); }

/* ── motion ───────────────────────────────────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 90ms; }
.js .reveal.d2 { transition-delay: 180ms; }
.js .reveal.d3 { transition-delay: 270ms; }
/* The first screen never waits on a script: its phones rise and its chips arrive by themselves. The ring and
   the figures still draw when the script marks it in view. */
.js .hero-stage.reveal { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes arrive { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }
.hero-stage .phone { animation: rise 1000ms var(--ease-out) both; }
.hero-stage .back-phone { animation-delay: 140ms; }
.main-phone .bezel { animation: float 9s ease-in-out infinite alternate; }
.back-phone .bezel { animation: float 11s ease-in-out -4s infinite alternate; }
.chip { animation: arrive 700ms var(--ease-out) 700ms both, float 7s ease-in-out infinite alternate; }
.chip.c2 { animation-delay: 900ms, -3s; }
.chip.c3 { animation-delay: 1100ms, -5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── AI Picks: the stat beside the phone, and every portfolio against the S&P 500 ─────────────── */
.pf-stat { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; margin-top: 8px; }
.pf-stat b { font-weight: 200; font-size: clamp(40px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.02em; color: var(--accent); }
.pf-stat b.m { font-size: clamp(26px, 3vw, 34px); color: var(--ink-2); }
.pf-stat span { color: var(--ink-2); font-size: 15px; }
.pf-stat p { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
/* On a phone the same figures are one scroll below, on the phone itself. */
@media (max-width: 860px) { .pf-stat { display: none; } }
.pf-all { margin-top: clamp(36px, 5vw, 64px); }
.pf-all h3 { font-weight: 300; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.015em; margin-bottom: 20px; }
.pf-led { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 860px) { .pf-led { grid-template-columns: minmax(0, 1fr); } }
.pf-col { padding: 20px 22px; border-radius: 22px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 var(--lit); }
.pf-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pf-t b { font-weight: 400; font-size: 15px; }
.pf-t span { font-size: 13px; color: var(--ink-2); }
.pf-t i { display: inline-block; width: 2px; height: 11px; margin-right: 7px; vertical-align: -1px; background: var(--ink); opacity: 0.7; }
.pf-col ul { list-style: none; margin: 0; padding: 0; }
.pf-col li { display: grid; grid-template-columns: 8.2em minmax(0, 1fr) 4.2em; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; border-top: 1px solid var(--hairline); }
.pf-n { color: var(--ink-2); line-height: 1.25; }
.pf-bar { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pf-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--accent) 62%, transparent); }
.pf-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.7; }
.pf-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.pf-hi .pf-n { color: var(--ink); }
.pf-hi .pf-bar i { background: var(--accent); }
.pf-low .pf-v { color: var(--ink-2); }
.pf-low .pf-bar i { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.pf-note { max-width: 62em; margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.pf-note b { font-weight: 400; color: var(--ink); }

/* The contact form on /support: shown once its script has run (assets/contact.js); without it, the address above stands. */
.contact { padding-bottom: 8px; }
#contact-form { display: none; max-width: 620px; }
/* Drawn from the first paint wherever scripts run, so the questions below never jump down when the script
   arrives (that shift scored 0.28 CLS on phones, 2026-11-09); .ready stays for browsers without the query. */
@media (scripting: enabled) { #contact-form { display: block; } }
#contact-form.ready { display: block; }
#contact-form .field { margin-bottom: 18px; }
#contact-form label { display: block; margin-bottom: 8px; color: var(--ink-2); font-size: 14px; }
#contact-form input, #contact-form select, #contact-form textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: 300 16px/1.45 'Inter', sans-serif;
}
#contact-form select option { color: #15181F; }
#contact-form textarea { resize: vertical; }
#contact-form input:focus-visible, #contact-form select:focus-visible, #contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#contact-form .trap { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
#contact-form button:disabled { opacity: 0.55; cursor: default; }
#contact-form .contact-note { margin-top: 14px; color: var(--ink-3); }
#contact-form .contact-status { min-height: 1.4em; margin-top: 10px; color: var(--ink); }
#contact-form .contact-status.bad { color: #D9745F; }