/* Project site, variant "Instrument" (owner's pick, 2026-10-10). Colours come from tokens.css only (--t-*).
   Radii: window 24, core 16 (24 minus the 8 px shell), fields 12, pills 999. */

:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r-window: 24px;
  --r-core: 16px;
  --r-field: 12px;
  --wrap: 1200px;
  --gutter: 32px;
  --nav-h: 56px;
  --btn-ink: var(--t-bg);          /* dark theme: dark text on the cobalt pill (contrast ~8:1) */
}
:root[data-theme="light"] { --btn-ink: var(--t-panel); }   /* light theme: white text on #1d5fd6 (5.6:1) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--t-bg); color: var(--t-ink);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 60; transform: translateY(-180%);
  padding: 10px 16px; border-radius: 999px; background: var(--t-panel); color: var(--t-ink);
  border: 1px solid var(--t-hair2); font-size: 14px; font-weight: 500; transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

h1 { font-size: clamp(38px, 4.6vw, 64px); font-weight: 400; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; max-width: 15ch; }
h2 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; max-width: 22ch; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
p { color: var(--t-muted); max-width: 60ch; }
.lead { font-size: 18px; line-height: 1.5; }

/* ── Navigation: a pill detached from the top edge ── */
.pill {
  position: fixed; top: 16px; left: 50%; z-index: 30; transform: translateX(-50%);
  display: flex; align-items: center; gap: 20px; height: var(--nav-h);
  padding: 0 8px 0 14px; border-radius: 999px;
  border: 1px solid var(--t-hair2);
  background: linear-gradient(180deg, var(--t-glass-top), var(--t-glass-bottom));
  box-shadow: inset 0 1px 0 var(--t-glass-highlight), 0 18px 50px -26px var(--t-shadow);
  backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
  white-space: nowrap;
}
@media (prefers-reduced-transparency: reduce) { .pill, .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--t-panel); } }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.mark {
  display: block; flex: none; width: 28px; height: 28px; color: var(--t-accent);
}
.links { display: flex; gap: 2px; }
.links a { display: block; padding: 7px 12px; border-radius: 999px; font-size: 14px; color: var(--t-muted); transition: color .35s var(--ease), background .35s var(--ease); }
.links a:hover { color: var(--t-ink); background: var(--t-well); }
.tools { display: flex; gap: 4px; margin-left: 4px; }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: transparent; color: var(--t-muted); cursor: pointer; transition: color .35s var(--ease), background .35s var(--ease);
}
.icon-btn:hover { color: var(--t-ink); background: var(--t-well); }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
.menu-toggle { display: none; }    /* the phone navigation, shown only under 900 px (see the phone block) */
.menu-panel { display: none; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 500 15px/1 'Instrument Sans', sans-serif; letter-spacing: -.005em; cursor: pointer; white-space: nowrap;
  transition: transform .5s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .5s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.btn-primary {
  color: var(--btn-ink); font-weight: 600;
  background: linear-gradient(180deg, var(--t-accent), var(--t-accent2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 30px -14px var(--t-shadow);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 36px -14px var(--t-shadow); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }
.btn-secondary { color: var(--t-ink); border-color: var(--t-hair2); background: var(--t-well); }
.btn-secondary:hover { border-color: var(--t-accent); }
.btn-wide { width: 100%; margin-top: 22px; }
.btn[data-pending] { color: var(--t-muted); cursor: default; }   /* the demo instance is not up yet: looks like a button, says why on hover */
.btn[data-pending]:hover { border-color: var(--t-hair2); }
.text-link { display: inline-block; margin-top: 18px; color: var(--t-accent); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color .35s var(--ease); }
.text-link:hover { border-color: var(--t-accent); }

/* ── Double frame: shell + core (a screenshot as an object) ── */
.frame {
  padding: 8px; border-radius: var(--r-window);
  background: var(--t-panel2); border: 1px solid var(--t-hair2);
  box-shadow: inset 0 1px 0 var(--t-glass-highlight), 0 50px 120px -50px var(--t-shadow);
}
.core {
  position: relative; overflow: hidden; border-radius: var(--r-core);
  background: var(--t-panel); border: 1px solid var(--t-hair);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
}
.shot { position: relative; aspect-ratio: 16 / 10; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot.pending img { display: none; }   /* display, not visibility: Chromium paints a broken image's alt text despite visibility:hidden in a full-page screenshot */
.shot.pending::before {
  content: ""; position: absolute; inset: 0; background: var(--t-well);
  background-image: linear-gradient(var(--t-hair) 1px, transparent 1px), linear-gradient(90deg, var(--t-hair) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
}
.shot.pending::after {
  content: "Screenshot pending: " attr(data-file);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--t-hair2); background: var(--t-panel);
  color: var(--t-muted); font-size: 13.5px; font-weight: 500; white-space: normal; text-align: center; max-width: 82%;
}

/* ── Hero ── */
.hero { position: relative; min-height: var(--dvh, 100dvh); overflow: hidden; display: flex; }
#hero-threads { position: absolute; inset: 0 0 auto 0; width: 100%; height: 66%; }   /* the fan lives in the headline band; the frame sits below it on a clean background */
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 26%; background: linear-gradient(to bottom, transparent, var(--t-bg)); pointer-events: none; }
.hero-grid {
  position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: 40px; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 36px; width: min(var(--wrap), 100% - 2 * var(--gutter)); min-height: var(--dvh, 100dvh);
}
.hero-copy { position: relative; max-width: 720px; }
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -56px -90px -56px -140px;
  background: radial-gradient(closest-side, var(--t-bg) 55%, transparent); opacity: .92; pointer-events: none;
}
.hero-copy .lead { margin-top: 20px; max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-frame { display: flex; flex-direction: column; min-height: 0; }
.hero-frame .core { flex: 1; min-height: 0; display: flex; }
.hero-frame .shot { flex: 1; aspect-ratio: auto; min-height: 0; }
.hero-frame .shot img { position: absolute; inset: 0; height: 100%; object-position: 50% 15%; }   /* imposes no height: the frame fills the rest of the first screen; 15 % keeps the app's top bar (90/1800 px of the screenshot) above the crop, so "Net worth" and the chart are visible */

/* The one orchestrated moment: headline, lead and buttons rise; the frame comes in from below and settles. */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) var(--d, 0ms) forwards; }
  .settle { opacity: 0; transform: translateY(72px); animation: settle 1.3s var(--ease) .32s forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes settle { to { opacity: 1; transform: none; } }
}

/* ── Sections ── */
section { padding: 120px 0; }
section + section { padding-top: 0; }
section[id], main[id] { scroll-margin-top: 96px; }   /* a jump to an anchor must not land the heading under the pill */
.hero { padding: 0; }

/* The story with a pinned screenshot */
.story { padding-top: 40px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; margin-top: 48px; align-items: start; }
.story-stage { position: sticky; top: calc(var(--nav-h) + 40px); }
.core-stack { aspect-ratio: 16 / 10; }
.core-stack .shot { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.core-stack .shot.is-active { opacity: 1; z-index: 1; }   /* the active screenshot on top: the crossfade always runs above the previous one */
.story-text { display: flex; flex-direction: column; padding-top: 24px; }
.story-text .step { min-height: calc(var(--dvh, 100vh) * .42); display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 28px; border-left: 1px solid var(--t-line); }
.story-text .step h3 { font-size: 26px; font-weight: 500; letter-spacing: -.025em; color: var(--t-faint); transition: color .6s var(--ease); }
.story-text .step p { margin-top: 10px; max-width: 34ch; color: var(--t-faint); transition: color .6s var(--ease); }
.story-text .step.is-active { border-left-color: var(--t-accent); }
.story-text .step.is-active h3 { color: var(--t-ink); }
.story-text .step.is-active p { color: var(--t-muted); }

/* A band of three steps with thin connectors */
.steps-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.steps-band li { position: relative; padding-top: 52px; }
.num {
  position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--t-hair2); background: var(--t-panel); color: var(--t-ink); font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.steps-band li:not(:last-child)::before { content: ""; position: absolute; top: 16px; left: 40px; right: -40px; height: 1px; background: var(--t-line); }
.steps-band li:not(:last-child)::after { content: ""; position: absolute; top: 13px; right: -43px; width: 7px; height: 7px; border-radius: 999px; background: var(--t-bg); border: 1px solid var(--t-hair2); }
.steps-band p { margin-top: 10px; max-width: 34ch; }

/* Ownership and sources: two statements separated by a hairline */
.own-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.own-grid > div + div { padding-left: 64px; border-left: 1px solid var(--t-line); }
.own-grid p { margin-top: 18px; max-width: 44ch; }
.own-grid .btn { margin-top: 26px; }

/* Institutions */
.inst .lead { margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chips li { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--t-hair2); background: var(--t-panel2); font-size: 15px; font-weight: 500; }
.chips .chip-link { padding: 0; border-style: dashed; background: transparent; }
.chips .chip-link a { display: inline-flex; align-items: center; height: 100%; padding: 0 18px; border-radius: 999px; color: var(--t-accent); }

/* Install: a code block in a frame */
.install-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; }
.install-grid p { margin-top: 18px; }
.code-core { padding: 56px 28px 24px; min-width: 0; }
.code-core pre { font: 14.5px/1.8 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--t-ink); overflow-x: auto; }
.code-core pre code::before { content: "$ "; color: var(--t-faint); }
.code-core pre code { display: block; white-space: pre; }
.btn-copy { position: absolute; top: 12px; right: 12px; height: 34px; padding: 0 12px 0 10px; font-size: 13.5px; color: var(--t-muted); border-color: var(--t-hair2); background: var(--t-panel2); }
.btn-copy:hover { color: var(--t-ink); border-color: var(--t-accent); }
.btn-copy svg { width: 15px; height: 15px; }
.btn-copy.is-done { color: var(--t-ink); border-color: var(--t-accent); }

/* Waiting list: a glass window */
.hosted-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hosted-wrap h2 { max-width: none; }
.hosted-wrap .lead { margin-top: 16px; max-width: 48ch; }
.glass {
  width: min(520px, 100%); margin-top: 40px; padding: 28px; text-align: left; border-radius: var(--r-window);
  border: 1px solid var(--t-hair2);
  background: linear-gradient(180deg, var(--t-glass-top), var(--t-glass-bottom));
  box-shadow: inset 0 1px 0 var(--t-glass-highlight), 0 40px 90px -40px var(--t-shadow);
  backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
.field + .field { margin-top: 18px; }
label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 500; color: var(--t-muted); }
input, textarea {
  width: 100%; border-radius: var(--r-field); border: 1px solid var(--t-hair2); background: var(--t-well); color: var(--t-ink);
  font: 15px/1.5 'Instrument Sans', sans-serif; outline: none; transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
input { height: 46px; padding: 0 14px; }
textarea { padding: 11px 14px; resize: vertical; min-height: 88px; }
input:focus, textarea:focus { border-color: color-mix(in srgb, var(--t-accent) 75%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-accent) 18%, transparent); }
.btn[disabled] { opacity: .7; cursor: progress; }
.form-note { margin-top: 14px; font-size: 13.5px; min-height: 1.5em; }
.form-note.is-error { color: var(--t-neg); }

/* Demo */
.demo .frame { margin-top: 40px; }
.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }

/* Footer */
.foot { border-top: 1px solid var(--t-line); padding: 48px 0 56px; }
.foot-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 48px; align-items: start; }
.foot-brand p { margin-top: 14px; font-size: 14px; }
.foot-links { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--t-muted); }
.foot-links a:hover { color: var(--t-ink); }
.foot-tools { display: flex; gap: 10px; }
.select { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--t-hair2); background: var(--t-well); color: var(--t-ink); font-size: 15px; font-weight: 500; }
.select svg { width: 17px; height: 17px; fill: currentColor; color: var(--t-muted); }
.select select { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding-right: 4px; cursor: pointer; outline: none; }
.select:focus-within { border-color: var(--t-accent); }
.foot .theme-toggle svg { width: 17px; height: 17px; }

/* ── Phone ── */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .links { display: none; }
  .menu-toggle { display: grid; }
  .menu-panel:not([hidden]) {
    position: fixed; top: calc(16px + var(--nav-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 40;
    display: flex; flex-direction: column; min-width: 220px; padding: 8px;
    border-radius: 18px; border: 1px solid var(--t-hair2);
    background: linear-gradient(180deg, var(--t-glass-top), var(--t-glass-bottom));
    box-shadow: inset 0 1px 0 var(--t-glass-highlight), 0 24px 60px -30px var(--t-shadow);
    backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
  }
  .menu-panel a { padding: 13px 16px; border-radius: 12px; font-size: 16px; color: var(--t-ink); }
  .menu-panel a:hover { background: var(--t-well); }
  .pill { gap: 8px; padding-left: 12px; }
  section { padding: 80px 0; }
  .hero-grid { padding-top: calc(var(--nav-h) + 40px); gap: 32px; min-height: 0; }
  .hero { min-height: 0; }
  .hero-copy::before { inset: -40px -40px; }
  .hero-frame .shot { aspect-ratio: 5 / 7; }
  .hero-frame .shot img { object-position: 50% 31%; }   /* phone screenshot 1170×2532: the app's top bar (222 px) stays above the crop */
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
  .story-stage { position: sticky; top: calc(var(--nav-h) + 24px); z-index: 2; }
  .story-text { padding-top: 8px; }
  .story-text .step { min-height: 0; padding: 20px 0 20px 20px; }
  .story-text .step h3 { font-size: 22px; }
  .steps-band { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
  .steps-band li { padding: 0 0 0 52px; }
  .steps-band li:not(:last-child)::before { top: 40px; bottom: -32px; left: 16px; right: auto; width: 1px; height: auto; }
  .steps-band li:not(:last-child)::after { top: auto; bottom: -36px; left: 13px; right: auto; }
  .own-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .own-grid > div + div { padding-left: 0; padding-top: 40px; border-left: 0; border-top: 1px solid var(--t-line); }
  .install-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .code-core { padding: 56px 18px 20px; }
  .wrap, .frame, .core, .glass { min-width: 0; max-width: 100%; }
  .code-core pre { font-size: 13.5px; }
  .demo-foot { flex-direction: column; align-items: flex-start; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}