@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600&display=swap');

:root {
  --ink: #07131F;
  --night: #0D2231;
  --paper: #EAF0ED;
  --muted: #9BAAB0;
  --line: #29404A;
  --signal: #79E2D0;
  --warm: #D7C7A8;
  --white: #F7FAF8;
  --shade: #102B3B;
  --deep: #041019;
  --signal-dim: #427E78;
  --muted-dark: #6F838A;
  --danger: #E99A91;
  --success: #93D7B9;
  --gutter: clamp(1rem, 3vw, 4rem);
  --shell: 1240px;
  --measure: 70ch;
  --hairline: 1px solid var(--line);
  --frame: 2px solid var(--line);
  --radius: 2px;
  --image-radius: 4px;
  --s-1: .375rem;
  --s-2: .625rem;
  --s-3: .875rem;
  --s-4: 1.25rem;
  --s-5: 1.75rem;
  --s-6: 2.5rem;
  --s-7: 3.5rem;
  --s-8: 5rem;
  --s-9: 7rem;
  --s-10: 10rem;
  --text-xs: .6875rem;
  --text-sm: .8125rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1.5vw, 1.35rem);
  --text-xl: clamp(1.45rem, 2.5vw, 2.2rem);
  --text-2xl: clamp(2rem, 5vw, 4.8rem);
  --text-3xl: clamp(2.4rem, 7vw, 7.2rem);
  --leading-tight: 1.05;
  --leading-snug: 1.22;
  --leading-body: 1.7;
  --leading-loose: 1.85;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Manrope', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-linear: linear;
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 700ms;
  --duration-scene: 1100ms;
  --shadow-frame: 0 18px 48px rgba(0,0,0,.22);
  --shadow-float: 0 16px 34px rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-body); text-rendering: optimizeLegibility; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a, select, input[type=checkbox], input[type=radio] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--white); }
p, h1, h2, h3, h4, blockquote, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
address { font-style: normal; }
::selection { background: var(--signal); color: var(--ink); }
:focus { outline: 0; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

h1, h2, h3, h4 { color: var(--paper); font-family: var(--display); font-weight: 500; line-height: var(--leading-tight); letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--text-3xl); max-width: 11ch; }
h2 { font-size: var(--text-2xl); max-width: 15ch; }
h3 { font-size: var(--text-xl); max-width: 24ch; }
h4 { font-size: var(--text-lg); }
strong { font-weight: 600; color: var(--white); }
small, .eyebrow, .mono, time, label, dt, th, .meta { font-family: var(--mono); }
small { font-size: var(--text-xs); }
.lede { max-width: 57ch; font-size: var(--text-lg); line-height: 1.6; color: var(--paper); }
.muted { color: var(--muted); }
.eyebrow { color: var(--signal); font-size: var(--text-xs); line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.kicker { color: var(--warm); font-family: var(--mono); font-size: var(--text-sm); }
.prose { max-width: var(--measure); color: var(--muted); }
.prose > * + * { margin-top: 1.35em; }
.prose h2, .prose h3, .prose h4 { margin-top: 2.4em; color: var(--paper); }
.prose h2 { font-size: clamp(1.75rem, 3vw, 2.8rem); }
.prose h3 { font-size: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.5rem; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .6em; }
.prose a { color: var(--signal); }
.prose blockquote { border-left: 2px solid var(--signal); padding: .4rem 0 .4rem 1.25rem; color: var(--paper); font-family: var(--display); font-size: 1.4rem; }
.prose code { padding: .15em .35em; color: var(--signal); background: var(--night); font-family: var(--mono); font-size: .9em; }

.shell { width: min(calc(100% - 2 * var(--gutter)), var(--shell)); margin-inline: auto; }
.full-bleed { width: 100%; }
.stack > * + * { margin-top: var(--stack-space, var(--s-5)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-4)); }
.grid { display: grid; min-width: 0; }
.grid > * { min-width: 0; }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 3rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 5rem); }
.section { padding-block: clamp(5rem, 11vw, 10rem); }
.section-tight { padding-block: clamp(3rem, 7vw, 6rem); }
.rule { border-top: var(--hairline); }
.frame { border: var(--frame); box-shadow: var(--shadow-frame); }
.inset { padding: clamp(1.25rem, 4vw, 3.5rem); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-150%); padding: .7rem 1rem; background: var(--signal); color: var(--ink); font-family: var(--mono); font-size: .8rem; transition: transform var(--duration-fast) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

[data-motion], .motion-line, .scene-step, .diagram-callout { will-change: transform, opacity; }
@media (max-width: 720px) {
  .grid-12, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .section { padding-block: clamp(4rem, 16vw, 6rem); }
  h1 { max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-motion], .motion-line, .scene-step, .diagram-callout { will-change: auto; }
}

.flow { display: flex; flex-direction: column; gap: var(--flow-gap, var(--s-5)); }
.flow-lg { --flow-gap: clamp(2rem, 5vw, 5rem); }
.align-end { align-items: flex-end; }
.text-center { text-align: center; }
.text-signal { color: var(--signal); }
.text-warm { color: var(--warm); }
.max-copy { max-width: var(--measure); }
.icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; fill: currentColor; }
.icon-lg { width: 1.4rem; height: 1.4rem; }

@media (min-width: 721px) {
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
}