:root {
  --neutral-black: #151A2E; --neutral-white: #fff;              
  --paper: #EFEEE7; --paper-soft: #F8F7F2; --paper-dark: #E3E2DA; --paper-darker: #CBC9BF;   
  --blue: #5477F5; --blue-subtle: #ECEEF9; --blue-soft: #C4CFFB; --blue-dark: #2743B8;      
  --blue-ink: #3355D8;             
  --navy: #18204A; --navy-subtle: #E8EAF1; --navy-soft: #CDD2E3; --navy-dark: #0E1533;
  --peri: #97ADFB; --peri-subtle: #F1F4FE; --peri-soft: #DCE3FD; --peri-dark: #2B3F8F;
  --stone: #B7B3A6; --stone-subtle: #F2F1EC; --stone-soft: #E4E1D7; --stone-dark: #4B483F;
  --fg: var(--neutral-black);
  --bg: var(--paper-soft);
  --fg-80: color-mix(in oklab, var(--fg) 80%, transparent);
  --fg-60: color-mix(in oklab, var(--fg) 60%, transparent);
  --fg-40: color-mix(in oklab, var(--fg) 40%, transparent);
  --fg-12: color-mix(in oklab, var(--fg) 12%, transparent);
  --fg-08: color-mix(in oklab, var(--fg) 8%, transparent);
  --fg-04: color-mix(in oklab, var(--fg) 4%, transparent);
  --border: var(--paper-darker);
  --logo: var(--blue);                
  --shade: #080C1E;                   
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --frame: 1600px; --page: 1536px; --narrow: 760px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --header-h: 64px;
}
*, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; border-color: var(--border, currentColor); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--fg); min-height: 100svh; font-feature-settings: "calt", "rlig";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
ol, ul, menu { list-style: none; }
html { scroll-padding-top: var(--header-height, 120px); }   
@media (prefers-reduced-motion: no-preference) { html[data-scroll-ready] { scroll-behavior: smooth; } }   
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
img { color: transparent; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border-radius: 0; }
button { cursor: pointer; }
input::placeholder { opacity: 1; }
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; top: -.5em; }
summary { display: list-item; }
dialog { padding: 0; }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.t-display-3xl { font-size: 9rem; line-height: 1; letter-spacing: -.01em; font-weight: 400; }
.t-display-2xl { font-size: 7.5rem; line-height: 1; letter-spacing: -.01em; font-weight: 400; }
.t-display-xl { font-size: 6rem; line-height: 1; letter-spacing: -.01em; font-weight: 400; }
.t-display-lg { font-size: 4.4375rem; line-height: 1; letter-spacing: -.01em; font-weight: 400; }
.t-display-md { font-size: 3.1875rem; line-height: 1; letter-spacing: -.01em; font-weight: 400; }
.t-display-sm { font-size: 2.25rem; line-height: 1; letter-spacing: -.01em; font-weight: 400; }
.t-title-xl { font-size: 2rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.t-title-lg { font-size: 1.625rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.t-title-md { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.t-title-sm { font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.t-body-lg { font-size: 1.25rem; line-height: 1.6; letter-spacing: 0; font-weight: 400; }
.t-body-md { font-size: 1rem; line-height: 1.6; letter-spacing: 0; font-weight: 400; }
.t-body-sm { font-size: .875rem; line-height: 1.6; letter-spacing: 0; font-weight: 400; }
.t-body-xs { font-size: .8125rem; line-height: 1.4; letter-spacing: 0; font-weight: 400; }
.t-legal { font-size: .8125rem; line-height: 1.3; letter-spacing: 0; font-weight: 400; }
.t-caption-sm { font-size: .875rem; line-height: 1.3; letter-spacing: .02em; font-weight: 400; }
.t-button { font-size: 1rem; line-height: 1.3; letter-spacing: 0; font-weight: 500; }
.wordmark path, .symbol path { fill: currentColor; }
.f-display, .h2 { font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; }
.f-display em, .h2 em, em.f-display { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }
.f-sans { font-family: var(--font-sans); }
.f-mono { font-family: var(--font-mono); }
.trim { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; }
.frame { width: 100%; max-width: var(--frame); margin-inline: auto; padding-inline: 16px; }
.page { width: 100%; max-width: var(--page); margin-inline: auto; }
@media (min-width: 48rem) { .frame { padding-inline: 32px; } }
.eyebrow { display: block; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; color: var(--blue-ink);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; margin-bottom: 32px; text-wrap: pretty; }
.h2 { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: -.01em; font-weight: 400;
  text-wrap: balance; white-space: pre-line; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.lead { margin-top: 48px; max-width: 42rem; font-size: 1.125rem; line-height: 1.6; color: var(--fg-80); white-space: pre-line;
  text-wrap: pretty; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
@media (min-width: 48rem) {
  .h2 { font-size: 4.4375rem; }
  .lead { font-size: 1.25rem; }
}
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: 100%; }
.intro-grid > .intro { grid-column: span 12 / span 12; display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 64rem) { .intro-grid > .intro { grid-column: 4 / span 6; } }
.link-strong { color: var(--blue-ink); font-weight: 600; }
a.link-strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { a.link-strong:hover { text-decoration-thickness: 2px; } }
.chip { display: inline-flex; min-height: 28px; align-items: center; gap: 8px; border-radius: 8px; padding: 4px 10px; font-size: .875rem;
  line-height: 1.3; font-weight: 500; background: var(--paper-dark); color: var(--fg); }
.h2--sm { font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 48rem) { .h2--sm { font-size: 3.1875rem; } }
.btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--font-sans);
  font-size: 1rem; line-height: 1; font-weight: 500; border-radius: calc(infinity * 1px); gap: 12px; cursor: pointer;
  transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), outline-color .15s var(--ease); }
.btn--48 { height: 48px; min-width: 80px; padding-inline: 24px; }
.btn--56 { height: 56px; min-width: 120px; padding-inline: 28px; }
.btn--blue { background: var(--blue-ink); color: var(--neutral-white); }
.btn--blue:active { background: var(--blue-dark); }
@media (hover: hover) { .btn--blue:hover { background: var(--blue-dark); } }
.btn--blue:focus-visible { outline: 2px solid var(--neutral-black); outline-offset: -2px; }
.btn--white { background: var(--neutral-white); color: var(--neutral-black); }
@media (hover: hover) { .btn--white:hover { background: var(--paper-dark); } }
.btn--white:active { background: var(--paper-darker); }
.btn--white:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.btn--outline { border: 1px solid color-mix(in oklab, var(--neutral-black) 40%, transparent); color: var(--neutral-black); background: transparent; }
@media (hover: hover) { .btn--outline:hover { border-color: color-mix(in oklab, var(--neutral-black) 60%, transparent); background: color-mix(in oklab, var(--neutral-black) 4%, transparent); } }
.btn--outline:active { border-color: color-mix(in oklab, var(--neutral-black) 80%, transparent); background: color-mix(in oklab, var(--neutral-black) 8%, transparent); }
.btn--outline:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-sans);
  font-size: 1rem; line-height: 1.3; font-weight: 500; border-radius: 4px; cursor: pointer; background: transparent; }
.tbtn__label { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
@media (hover: hover) { .tbtn:hover .tbtn__label, .group:hover .tbtn__label { text-decoration: underline; text-underline-position: from-font; } }
.arrow-disc { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px;
  border-radius: calc(infinity * 1px); background: var(--blue-ink); color: var(--neutral-white); transition: color .15s var(--ease), background-color .15s var(--ease); }
.arrow-disc svg { width: 12px; height: 12px; }
