/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--spacing: 0.25rem;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--font-body: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-heading: "Clash Grotesk", "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.gap-5 {
gap: calc(var(--spacing) * 5);
}
.font-body {
font-family: var(--font-body);
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:root {
color-scheme: dark;
--bg: #070b15;
--surface: #101624;
--line: #293144;
--muted: #b0bbce;
--cyan: #59ecf0;
--violet: #b99afa;
--header-height: 122px;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 22px);
}
body {
margin: 0;
background: var(--bg);
color: #f3f5fa;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
*,*::before,*::after {
box-sizing: border-box;
}
::selection {
background: #9459cc;
color: #fff;
}
a {
text-decoration: none;
color: inherit;
}
a,button,summary {
-webkit-tap-highlight-color: transparent;
}
button,summary {
cursor: pointer;
}
button {
font: inherit;
}
:focus-visible {
outline: 3px solid #7ef5f2;
outline-offset: 5px;
border-radius: 4px;
}
[hidden] {
display: none !important;
}
img {
display: block;
max-width: 100%;
height: auto;
}
svg {
display: block;
flex-shrink: 0;
}
h1,h2,h3,h4 {
font-family: var(--font-heading);
line-height: 1.13;
font-weight: 700;
letter-spacing: -.035em;
color: #f5f7fb;
}
h1 {
font-size: clamp(2.5rem,5vw,4.6rem);
margin: 0 0 24px;
}
h2 {
font-size: clamp(2rem,3.4vw,3rem);
margin: 0 0 20px;
}
h3 {
font-size: 1.28rem;
line-height: 1.35;
letter-spacing: -.025em;
}
p {
margin: 0 0 1.25rem;
}
p:last-child {
margin-bottom: 0;
}
.wrap {
width: min(1280px,calc(100% - 80px));
margin-inline: auto;
}
.narrow {
max-width: 870px;
margin-inline: auto;
}
.section {
padding-block: 88px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: .16em;
font-size: 11px;
font-weight: 700;
color: var(--cyan);
margin: 0 0 22px;
}
.eyebrow::before {
content: "";
width: 23px;
height: 2px;
background: currentColor;
flex-shrink: 0;
}
.muted {
color: var(--muted);
}
.lead {
font-size: 18px;
color: #bcc7da;
line-height: 1.85;
max-width: 670px;
}
.gradient-text {
color: #a2ddfc;
background: linear-gradient(100deg,#57ecf0 5%,#b8a0ff 68%,#f9a3d8);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.skip-link {
position: fixed;
top: 8px;
left: 20px;
transform: translateY(-150%);
padding: 10px 20px;
background: #59ecf0;
color: #071020;
z-index: 1000;
border-radius: 8px;
font-weight: 700;
}
.skip-link:focus {
transform: translateY(0);
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(7,11,21,.96);
backdrop-filter: blur(18px);
border-bottom: 1px solid #2a3142;
}
.header-main {
height: 76px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
position: relative;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
letter-spacing: -.05em;
white-space: nowrap;
font-family: var(--font-heading);
font-size: 21px;
font-weight: 700;
line-height: 1.1;
}
.brand-mark {
width: 38px;
height: 38px;
}
.brand-accent {
color: #6be8ef;
}
.brand-dot {
font-weight: 500;
color: #acb7ca;
}
.desktop-main {
display: flex;
align-items: center;
gap: 29px;
color: #bac5d7;
font-size: 13px;
font-weight: 500;
}
.desktop-main a:hover,.desktop-main a[aria-current=page] {
color: #70eff2;
}
.nav-lab {
padding: 9px 16px;
border: 1px solid #44515f;
border-radius: 7px;
color: #eff5ff !important;
display: flex;
align-items: center;
gap: 12px;
}
.topic-nav {
border-top: 1px solid #202735;
}
.topic-nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
min-height: 44px;
font-size: 11px;
font-weight: 500;
color: #b6c1d3;
}
.topic-nav a {
padding: 11px 0;
white-space: nowrap;
}
.topic-nav a:hover,.topic-nav a[aria-current=page] {
color: var(--cyan);
}
.mobile-nav {
display: none;
}
.mobile-nav>summary {
list-style: none;
padding: 10px 13px;
border: 1px solid #3c465c;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
}
.mobile-nav>summary::-webkit-details-marker {
display: none;
}
.mobile-nav>summary::after {
content: " +";
margin-left: 5px;
color: var(--cyan);
}
.mobile-nav[open]>summary::after {
content: " −";
}
.mobile-menu {
position: absolute;
top: calc(100% + 1px);
left: -20px;
right: -20px;
background: #0b111e;
border-bottom: 1px solid #536175;
max-height: calc(100dvh - 77px);
overflow: auto;
padding: 20px;
box-shadow: 0 18px 30px #0008;
}
.mobile-menu nav {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 6px 12px;
}
.mobile-menu a {
padding: 12px;
border: 1px solid #263043;
border-radius: 6px;
font-size: 13px;
color: #d4ddeb;
}
.mobile-menu a:hover {
border-color: var(--cyan);
color: var(--cyan);
}
.mobile-menu .mobile-primary {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.mobile-primary a {
flex: 1;
text-align: center;
min-width: 90px;
}
.hero {
position: relative;
overflow: hidden;
background: radial-gradient(ellipse at 72% 12%,#35266a5c,transparent 55%),radial-gradient(ellipse at 5% 75%,#0d3c5050,transparent 48%);
border-bottom: 1px solid #252c3e;
padding: 68px 0 0;
}
.hero-grid {
display: grid;
grid-template-columns: 1.07fr 1fr;
align-items: center;
gap: 36px;
position: relative;
z-index: 1;
}
.hero h1 {
font-size: clamp(3rem,5.25vw,4.7rem);
line-height: 1.055;
letter-spacing: -.055em;
max-width: 670px;
}
.hero h1 span {
display: block;
}
.hero .lead {
font-size: 17px;
max-width: 535px;
color: #b9c5db;
line-height: 1.8;
}
.hero .eyebrow {
margin-bottom: 27px;
}
.buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 23px;
border: 1px solid #46516a;
border-radius: 8px;
padding: 13px 21px;
min-height: 49px;
color: #e7edf8;
font-size: 13px;
font-weight: 650;
line-height: 1.5;
transition: transform .18s,border-color .18s,box-shadow .18s;
}
.button.primary {
color: #04131b;
background: linear-gradient(110deg,#58efec,#90eafa);
border-color: transparent;
}
.button:hover {
transform: translateY(-2px);
border-color: #6ce9ef;
box-shadow: 0 7px 22px #43ced319;
}
.button.primary:hover {
box-shadow: 0 9px 30px #45e3e332;
}
.button.small {
padding: 10px 15px;
font-size: 12px;
min-height: 42px;
}
.hero-note {
display: flex;
align-items: center;
gap: 9px;
color: #abb9ce;
font-size: 11px;
margin-top: 20px;
}
.hero-note svg {
color: #77d4d9;
}
.hero-media {
position: relative;
border: 1px solid #5b518579;
border-radius: 22px;
overflow: hidden;
background: #0b1024;
box-shadow: 0 0 65px #44398725;
}
.hero-media>img {
width: 100%;
aspect-ratio: 1.1;
object-fit: cover;
}
.media-label {
position: absolute;
top: 23px;
left: 24px;
display: flex;
align-items: center;
gap: 8px;
font-size: 9px;
letter-spacing: .16em;
font-weight: 700;
color: #c5d1e5;
background: #0b112acc;
padding: 6px 10px;
border: 1px solid #526578;
border-radius: 5px;
}
.media-label span {
height: 6px;
width: 6px;
border-radius: 100%;
background: #8fdef0;
}
.media-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 25px 25px 20px;
background: linear-gradient(transparent,#090e23f5 45%);
display: flex;
align-items: end;
justify-content: space-between;
gap: 10px;
}
.media-bottom strong {
font-size: 13px;
font-weight: 500;
}
.media-bottom small {
display: block;
color: #9cacc6;
font-size: 10px;
margin-top: 2px;
}
.media-orbit-label {
font-size: 10px;
color: #8deaee;
text-transform: uppercase;
letter-spacing: .16em;
}
.hero-strip {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
border-top: 1px solid #364055;
margin-top: 55px;
padding-block: 25px;
gap: 28px;
}
.hero-strip>div {
display: flex;
gap: 14px;
align-items: center;
}
.hero-strip strong {
color: #d2def0;
font-size: 13px;
display: block;
}
.hero-strip span {
color: #929fb8;
font-size: 11px;
}
.strip-icon {
height: 36px;
width: 36px;
border: 1px solid #3b465a;
border-radius: 9px;
display: grid;
place-items: center;
color: #a4a6f3;
font-size: 15px;
flex-shrink: 0;
}
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 36px;
}
.section-head h2 {
margin-bottom: 12px;
}
.section-head p {
max-width: 600px;
color: #a9b7cc;
font-size: 15px;
margin: 0;
}
.text-link {
font-size: 13px;
color: #70e8eb;
display: inline-flex;
gap: 14px;
align-items: center;
white-space: nowrap;
}
.text-link:hover {
color: #d4fcff;
text-decoration: underline;
text-underline-offset: 5px;
}
.research-section {
background: radial-gradient(ellipse at 4% 40%,#034c4d26,transparent 70%);
}
.topic-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 17px;
}
.topic-card {
background: linear-gradient(135deg,#151c2bc9,#0e1421);
border: 1px solid #2c354a;
border-radius: 14px;
padding: 27px;
transition: border-color .2s,transform .2s,box-shadow .2s;
position: relative;
display: flex;
flex-direction: column;
min-height: 244px;
}
.topic-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 9px 30px #0003;
}
.topic-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.topic-icon {
width: 42px;
height: 42px;
color: var(--accent);
background: var(--accent);
@supports (color: color-mix(in lab, red, red)) {
background: color-mix(in srgb,var(--accent) 7%,transparent);
}
border: 1px solid var(--accent);
@supports (color: color-mix(in lab, red, red)) {
border: 1px solid color-mix(in srgb,var(--accent) 27%,transparent);
}
border-radius: 10px;
display: grid;
place-items: center;
}
.topic-icon svg {
width: 24px;
height: 24px;
}
.topic-index {
font-size: 11px;
color: #8594af;
letter-spacing: .12em;
}
.topic-card h3 {
margin-bottom: 10px;
font-size: 19px;
}
.topic-card p {
font-size: 12px;
color: #aab9cf;
line-height: 1.8;
margin-bottom: 18px;
}
.card-arrow {
font-size: 12px;
color: var(--accent);
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.topic-card .card-arrow svg {
width: 17px;
}
.framework-section {
background: radial-gradient(ellipse at 90% 55%,#582c6e40,transparent 64%),linear-gradient(130deg,#171124,#0f1625);
border-block: 1px solid #373044;
}
.framework-layout {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 100px;
}
.framework-layout .lead {
font-size: 16px;
}
.principle-list {
border-top: 1px solid #4c4258;
}
.principle {
padding: 22px 0;
display: grid;
grid-template-columns: 30px 1fr;
gap: 18px;
border-bottom: 1px solid #4c4258;
}
.principle>span {
color: #dcb0ff;
font-size: 11px;
padding-top: 5px;
}
.principle h3 {
font-size: 18px;
margin-bottom: 7px;
}
.principle p {
font-size: 13px;
color: #b8bdd1;
line-height: 1.8;
}
.feature-paths {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 26px;
}
.path-card {
position: relative;
overflow: hidden;
border-radius: 14px;
border: 1px solid #685059;
background: linear-gradient(135deg,#38231e,#231930);
padding: 33px;
}
.path-card:nth-child(2) {
border-color: #445774;
background: linear-gradient(135deg,#172a40,#271c3e);
}
.path-card h3 {
font-size: 25px;
max-width: 350px;
margin-bottom: 14px;
}
.path-card p {
font-size: 13px;
color: #c5bcc6;
max-width: 365px;
line-height: 1.8;
}
.path-card .eyebrow {
color: #fac57f;
margin-bottom: 25px;
}
.path-card:nth-child(2) .eyebrow {
color: #83d7f2;
}
.path-card .text-link {
margin-top: 18px;
color: #f1d2a4;
}
.path-card:nth-child(2) .text-link {
color: #8cd5f4;
}
.path-symbol {
position: absolute;
right: -16px;
bottom: -29px;
font-size: 135px;
line-height: 1;
color: #ffffff06;
font-weight: 800;
letter-spacing: -.12em;
pointer-events: none;
}
.post-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 25px;
}
.post-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.post-image {
display: block;
overflow: hidden;
border: 1px solid #333e55;
border-radius: 14px;
background: #101725;
}
.post-image img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
transition: transform .35s;
}
.post-image:hover img {
transform: scale(1.015);
}
.post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .055em;
color: #a3b1c8;
margin-top: 21px;
margin-bottom: 11px;
}
.post-category {
color: var(--accent,#78dce3);
}
.post-card h3 {
font-size: 21px;
line-height: 1.35;
margin-bottom: 12px;
}
.post-card h3 a:hover {
color: #82eff2;
}
.post-card p {
font-size: 13px;
line-height: 1.8;
color: #aab7ce;
}
.post-card .text-link {
margin-top: auto;
padding-top: 14px;
font-size: 12px;
}
.faq-section {
border-top: 1px solid #273045;
background: #0b101c;
}
.faq-layout {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 90px;
}
.faq-list {
border-top: 1px solid #374358;
}
.faq-list details {
border-bottom: 1px solid #374358;
}
.faq-list summary {
position: relative;
list-style: none;
padding: 23px 40px 23px 0;
font-size: 15px;
font-weight: 550;
line-height: 1.5;
color: #dae4f6;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary::after {
content: "+";
position: absolute;
right: 5px;
top: 18px;
color: #9ae6e9;
font-size: 25px;
font-weight: 400;
}
.faq-list details[open] summary::after {
content: "−";
}
.faq-list details p {
color: #aabbd0;
font-size: 14px;
line-height: 1.85;
padding-right: 28px;
margin: 0 0 23px;
}
.faq-list summary:hover {
color: #77e9f2;
}
.end-cta {
padding: 65px 0;
border-top: 1px solid #48415e;
background: radial-gradient(ellipse at 20% 20%,#40316b88,transparent 75%),#10111f;
}
.end-cta .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
}
.end-cta h2 {
font-size: 36px;
line-height: 1.2;
margin-bottom: 10px;
}
.end-cta p {
font-size: 14px;
color: #b4bcd1;
max-width: 550px;
}
.end-cta .buttons {
margin: 0;
flex-shrink: 0;
}
.site-footer {
background: #060a12;
padding: 65px 0 25px;
border-top: 1px solid #2b3041;
}
.footer-grid {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-brand .brand {
font-size: 20px;
gap: 10px;
}
.footer-brand .brand-mark {
width: 33px;
height: 33px;
}
.footer-brand>p {
font-size: 12px;
color: #97a9c2;
max-width: 270px;
line-height: 1.9;
margin: 20px 0;
}
.footer-mail {
font-size: 12px;
color: #80e0e7;
overflow-wrap: anywhere;
}
.footer-title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
margin-bottom: 20px;
}
.footer-links {
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
}
.footer-links a {
font-size: 11px;
color: #adbad0;
}
.footer-links a:hover {
color: var(--cyan);
}
.footer-bottom {
margin-top: 43px;
padding-top: 21px;
border-top: 1px solid #252e3d;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
color: #8c9db7;
font-size: 10px;
}
.footer-disclaimer {
font-size: 10px;
color: #94a5bf;
margin-top: 20px;
line-height: 1.9;
max-width: 1030px;
}
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 11px;
line-height: 1.6;
color: #a1b0c8;
margin: 0 0 29px;
}
.breadcrumbs a:hover {
color: #6ae5ea;
}
.breadcrumbs .separator {
color: #65758e;
}
.breadcrumbs [aria-current] {
color: #ced7e8;
max-width: 650px;
}
.page-hero {
background: radial-gradient(ellipse at 80% 0,#31275655,transparent 70%);
border-bottom: 1px solid #2b3548;
padding: 38px 0 60px;
}
.page-hero h1 {
font-size: clamp(2.4rem,4.6vw,4rem);
max-width: 930px;
line-height: 1.08;
}
.page-hero .lead {
max-width: 780px;
font-size: 17px;
}
.page-hero .eyebrow {
margin-bottom: 18px;
}
.hero-subhead {
color: var(--accent,#d4c7f7);
font-size: 22px;
letter-spacing: -.025em;
line-height: 1.4;
margin-bottom: 18px;
}
.topic-hero-grid {
display: grid;
grid-template-columns: 1.4fr .6fr;
gap: 55px;
align-items: center;
}
.topic-feature {
padding: 15px;
border: 1px solid #39445d;
border-radius: 18px;
background: #111928;
max-width: 345px;
justify-self: end;
transform: rotate(2deg);
}
.topic-feature img {
width: 100%;
border-radius: 10px;
aspect-ratio: 1;
}
.topic-feature-label {
font-size: 10px;
line-height: 1.7;
color: #b9c6da;
padding: 14px 3px 0;
display: flex;
justify-content: space-between;
gap: 10px;
}
.two-col-content {
display: grid;
grid-template-columns: minmax(0,1fr) 310px;
gap: 72px;
align-items: start;
}
.prose {
font-size: 16px;
line-height: 1.9;
color: #bbc8dc;
}
.prose h2 {
font-size: 28px;
line-height: 1.25;
margin: 43px 0 18px;
scroll-margin-top: calc(var(--header-height) + 22px);
}
.prose>h2:first-child {
margin-top: 0;
}
.prose h3 {
font-size: 21px;
line-height: 1.35;
margin: 26px 0 13px;
}
.prose p {
margin-bottom: 21px;
}
.prose strong {
color: #edf2fa;
font-weight: 650;
}
.prose a {
color: #7de3eb;
text-decoration: underline;
text-decoration-color: #547980;
text-underline-offset: 4px;
overflow-wrap: anywhere;
}
.prose a:hover {
color: #c3fbff;
text-decoration-color: currentColor;
}
.prose ul,.prose ol {
padding-left: 23px;
margin: 20px 0 25px;
}
.prose ul {
list-style: disc;
}
.prose ol {
list-style: decimal;
}
.prose li {
margin: 9px 0;
}
.prose blockquote {
margin: 25px 0;
border-left: 3px solid #a998f4;
padding: 5px 25px;
color: #d2d5ef;
}
.prose table {
width: 100%;
font-size: 14px;
border-collapse: collapse;
}
.prose td,.prose th {
padding: 12px;
border-bottom: 1px solid #39455c;
text-align: left;
}
.prose code {
background: #1a2338;
padding: 3px 6px;
border-radius: 4px;
font-size: .88em;
}
.prose hr {
border-color: #3f4860;
margin: 30px 0;
}
.side-box {
padding: 25px;
background: linear-gradient(130deg,#172231,#18162a);
border: 1px solid #3a4860;
border-radius: 14px;
}
.side-box h2 {
font-size: 18px;
line-height: 1.4;
margin-bottom: 18px;
}
.side-box p {
font-size: 12px;
color: #b0c1d9;
line-height: 1.9;
}
.side-box .text-link {
font-size: 12px;
white-space: normal;
margin-top: 10px;
}
.side-box ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-box li {
font-size: 12px;
line-height: 1.75;
color: #c3cee0;
padding: 12px 0;
border-top: 1px solid #3b455c;
}
.side-stack {
display: flex;
flex-direction: column;
gap: 22px;
}
.research-notice {
border: 1px solid #3d4c62;
border-left: 3px solid #76dcdf;
border-radius: 7px;
padding: 18px 22px;
background: #141e2a;
color: #b6c9de;
font-size: 12px;
line-height: 1.85;
margin-top: 32px;
}
.research-notice strong {
color: #d5f4f7;
}
.blog-hero-grid {
display: grid;
grid-template-columns: 1fr .55fr;
gap: 90px;
align-items: center;
}
.blog-hero-card {
display: block;
background: #101725;
border: 1px solid #45516c;
padding: 13px;
border-radius: 15px;
}
.blog-hero-card img {
border-radius: 8px;
width: 100%;
aspect-ratio: 1;
}
.blog-hero-card span {
display: block;
font-size: 11px;
color: #b8c9df;
margin: 13px 6px 3px;
}
.archive-chips {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 30px 0 0;
}
.chip {
border: 1px solid #3c4963;
border-radius: 7px;
padding: 8px 14px;
color: #b9c9de;
font-size: 11px;
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1.5;
}
.chip:hover,.chip.active {
color: #8decef;
border-color: #5fbbc4;
background: #142532;
}
.chip .count {
color: #8fa4bd;
font-size: 10px;
}
.collection-intro {
max-width: 880px;
}
.collection-intro p {
font-size: 15px;
color: #b2c0d6;
line-height: 1.9;
}
.collection-intro h2 {
font-size: 24px;
margin-top: 25px;
}
.article-hero {
padding-bottom: 49px;
}
.article-hero-grid {
display: grid;
grid-template-columns: minmax(0,1.5fr) minmax(0,.7fr);
gap: 70px;
align-items: center;
}
.article-hero h1 {
font-size: clamp(2.1rem,3.6vw,3.3rem);
line-height: 1.13;
letter-spacing: -.04em;
margin-bottom: 25px;
}
.article-hero .lead {
font-size: 15px;
}
.article-hero .post-meta {
margin-top: 0;
font-size: 11px;
gap: 14px;
}
.article-feature-image {
width: 100%;
border-radius: 14px;
border: 1px solid #4b4c71;
box-shadow: 0 0 50px #5a2a7a25;
}
.article-byline {
display: flex;
align-items: center;
gap: 12px;
margin-top: 23px;
font-size: 11px;
color: #bbcbe2;
}
.byline-mark {
width: 33px;
height: 33px;
}
.reading-shell {
display: grid;
grid-template-columns: 248px minmax(0,770px);
gap: 64px;
justify-content: center;
align-items: start;
}
.toc {
position: sticky;
top: calc(var(--header-height) + 25px);
font-size: 12px;
max-height: calc(100vh - var(--header-height) - 55px);
overflow: auto;
padding: 0 15px 20px 0;
}
.toc h2 {
font-size: 13px;
letter-spacing: 0;
padding-bottom: 16px;
border-bottom: 1px solid #3a455a;
margin-bottom: 13px;
}
.toc ol {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
}
.toc a {
display: block;
color: #a9b9d0;
line-height: 1.6;
padding: 7px 0;
}
.toc a:hover {
color: #7be4e9;
}
.toc .toc-footer {
padding-top: 22px;
margin-top: 16px;
border-top: 1px solid #354359;
font-size: 10px;
color: #97a9c5;
}
.article-body {
font-size: 17px;
line-height: 1.95;
}
.article-body>p:first-child {
font-size: 19px;
color: #d5deeb;
line-height: 1.85;
}
.article-body h2 {
font-size: 29px;
margin-top: 49px;
}
.article-tags {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #38415b;
}
.article-tags p {
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #a8b6d2;
margin-bottom: 14px;
}
.article-tags .archive-chips {
margin: 0;
}
.reading-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg,#4be8eb,#bf8fff);
z-index: 200;
pointer-events: none;
}
.contact-card {
padding: 44px;
background: linear-gradient(135deg,#222043,#112832);
border: 1px solid #695a82;
border-radius: 17px;
}
.contact-address {
font-size: clamp(1.2rem,3.3vw,2.7rem);
line-height: 1.4;
letter-spacing: -.035em;
font-weight: 650;
color: #90eef0;
overflow-wrap: anywhere;
}
.contact-card .eyebrow {
color: #d5b7ff;
}
.contact-card p {
color: #c3c9dd;
max-width: 690px;
font-size: 15px;
margin-top: 19px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 24px;
margin-top: 35px;
}
.info-card {
padding: 27px;
border: 1px solid #35415a;
border-radius: 12px;
background: #101827;
}
.info-card h2 {
font-size: 21px;
line-height: 1.35;
margin-bottom: 15px;
}
.info-card p {
font-size: 13px;
color: #b1bfd5;
line-height: 1.9;
}
.policy-layout {
display: grid;
grid-template-columns: 1fr .45fr;
gap: 75px;
align-items: start;
}
.glossary-links {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 25px 0;
}
.glossary-links a {
font-size: 12px;
color: #84e3e8;
border: 1px solid #3c4960;
border-radius: 6px;
padding: 7px 11px;
}
.glossary-list {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 22px;
}
.glossary-entry {
padding: 27px;
background: #111825;
border: 1px solid #33415a;
border-radius: 12px;
scroll-margin-top: 145px;
}
.glossary-entry dt {
font-family: var(--font-heading);
font-size: 23px;
line-height: 1.2;
font-weight: 650;
color: #e4eafa;
margin-bottom: 15px;
letter-spacing: -.03em;
}
.glossary-entry dd {
color: #b7c5db;
font-size: 14px;
line-height: 1.85;
margin: 0;
}
.glossary-entry a {
color: #83dfea;
text-decoration: underline;
text-underline-offset: 4px;
}
@media (min-width:1600px) {
.hero {
padding-top: 85px;
}
.hero-grid {
gap: 65px;
}
.hero-strip {
margin-top: 65px;
}
}
@media (max-width:1100px) {
.wrap {
width: calc(100% - 52px);
}
.brand {
font-size: 18px;
}
.desktop-main {
gap: 19px;
font-size: 12px;
}
.topic-nav-inner {
gap: 10px;
font-size: 10px;
}
.hero-grid {
gap: 25px;
}
.hero h1 {
font-size: 57px;
}
.framework-layout {
gap: 55px;
}
.faq-layout {
gap: 55px;
}
.topic-card {
padding: 23px;
}
.article-hero-grid {
gap: 38px;
}
.reading-shell {
grid-template-columns: 215px minmax(0,1fr);
gap: 40px;
}
.two-col-content {
gap: 40px;
grid-template-columns: minmax(0,1fr) 270px;
}
.footer-grid {
gap: 25px;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
}
@media (max-width:900px) {
:root {
--header-height: 77px;
}
.wrap {
width: calc(100% - 40px);
}
.desktop-main,.topic-nav {
display: none;
}
.mobile-nav {
display: block;
}
.brand {
font-size: 20px;
}
.hero {
padding-top: 43px;
}
.hero-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.hero h1 {
font-size: 45px;
}
.hero .lead {
font-size: 15px;
}
.hero .eyebrow {
font-size: 10px;
}
.hero-media>img {
aspect-ratio: .84;
object-fit: cover;
}
.hero-strip {
gap: 15px;
}
.hero-strip strong {
font-size: 11px;
}
.hero-strip span {
font-size: 10px;
}
.section {
padding-block: 66px;
}
.topic-grid {
gap: 13px;
}
.topic-card {
padding: 20px;
min-height: 255px;
}
.topic-card h3 {
font-size: 17px;
}
.topic-card p {
font-size: 11px;
}
.topic-top {
margin-bottom: 23px;
}
.post-grid {
gap: 20px;
}
.post-card h3 {
font-size: 18px;
}
.post-card p {
font-size: 12px;
}
.framework-layout,.faq-layout {
gap: 40px;
}
.footer-grid {
grid-template-columns: 1.35fr 1fr 1fr;
row-gap: 35px;
}
.footer-grid>div:last-child {
grid-column: 2;
}
.end-cta h2 {
font-size: 29px;
}
.end-cta .wrap {
gap: 23px;
}
.end-cta .buttons {
flex-direction: column;
align-items: stretch;
}
.two-col-content {
grid-template-columns: minmax(0,1fr) 245px;
gap: 30px;
}
.topic-hero-grid {
gap: 30px;
grid-template-columns: 1.2fr .7fr;
}
.topic-feature {
padding: 10px;
}
.topic-feature-label {
font-size: 8px;
}
.topic-hero-grid h1 {
font-size: 41px;
}
.article-hero-grid {
gap: 28px;
grid-template-columns: 1.2fr .7fr;
}
.article-hero h1 {
font-size: 35px;
}
.reading-shell {
grid-template-columns: 1fr;
max-width: 770px;
margin-inline: auto;
}
.toc {
position: static;
max-height: none;
padding: 0;
border-bottom: 1px solid #3c4560;
}
.toc ol {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
.toc .toc-footer {
display: none;
}
.reading-shell {
gap: 25px;
}
.policy-layout {
grid-template-columns: 1fr .45fr;
gap: 35px;
}
.blog-hero-grid {
gap: 45px;
}
.contact-grid {
gap: 16px;
}
.info-card {
padding: 22px;
}
}
@media (max-width:640px) {
.wrap {
width: calc(100% - 36px);
}
.header-main {
height: 70px;
gap: 8px;
}
:root {
--header-height: 71px;
}
.brand {
font-size: 17px;
gap: 8px;
letter-spacing: -.05em;
}
.brand-mark {
width: 30px;
height: 30px;
}
.mobile-nav>summary {
font-size: 11px;
padding: 9px;
}
.mobile-menu {
left: -18px;
right: -18px;
padding: 18px;
max-height: calc(100dvh - 71px);
}
.mobile-menu a {
font-size: 12px;
}
.hero {
padding-top: 37px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 34px;
}
.hero h1 {
font-size: clamp(2.55rem,10vw,3.4rem);
max-width: 530px;
line-height: 1.07;
}
.hero .eyebrow {
margin-bottom: 21px;
font-size: 9px;
}
.hero .lead {
font-size: 15px;
line-height: 1.85;
}
.buttons {
margin-top: 25px;
gap: 10px;
}
.button {
font-size: 12px;
padding: 12px 16px;
gap: 12px;
}
.hero-note {
font-size: 10px;
margin-top: 18px;
}
.hero-media {
border-radius: 16px;
}
.hero-media>img {
aspect-ratio: 1.25;
object-fit: cover;
}
.media-label {
font-size: 8px;
top: 17px;
left: 17px;
}
.media-bottom {
padding: 23px 17px 15px;
}
.media-bottom strong {
font-size: 12px;
}
.media-bottom small {
font-size: 9px;
}
.media-orbit-label {
font-size: 8px;
}
.hero-strip {
margin-top: 32px;
grid-template-columns: 1fr;
padding-block: 19px;
gap: 15px;
}
.hero-strip>div {
gap: 12px;
}
.hero-strip strong {
font-size: 12px;
display: inline;
margin-right: 8px;
}
.hero-strip span {
font-size: 10px;
}
.strip-icon {
height: 29px;
width: 29px;
font-size: 12px;
}
.section {
padding-block: 51px;
}
.eyebrow {
font-size: 10px;
margin-bottom: 18px;
}
h2 {
font-size: 31px;
letter-spacing: -.04em;
}
.section-head {
display: block;
margin-bottom: 29px;
}
.section-head p {
font-size: 14px;
}
.section-head>.text-link {
margin-top: 20px;
}
.topic-grid {
grid-template-columns: 1fr;
gap: 13px;
}
.topic-card {
padding: 23px;
min-height: 0;
}
.topic-top {
margin-bottom: 20px;
}
.topic-card h3 {
font-size: 21px;
}
.topic-card p {
font-size: 13px;
margin-bottom: 19px;
}
.topic-index {
font-size: 11px;
}
.card-arrow {
font-size: 12px;
}
.framework-layout,.faq-layout {
grid-template-columns: 1fr;
gap: 29px;
}
.framework-layout .lead {
font-size: 15px;
}
.principle {
padding: 22px 0;
gap: 15px;
}
.feature-paths {
grid-template-columns: 1fr;
gap: 18px;
}
.path-card {
padding: 27px;
}
.path-card h3 {
font-size: 26px;
}
.post-grid {
grid-template-columns: 1fr;
gap: 37px;
}
.post-card h3 {
font-size: 22px;
}
.post-card p {
font-size: 14px;
}
.post-meta {
font-size: 10px;
}
.post-card .text-link {
font-size: 13px;
padding-top: 8px;
}
.post-image {
border-radius: 13px;
}
.faq-list summary {
font-size: 14px;
padding-block: 21px;
}
.faq-list details p {
font-size: 13px;
}
.end-cta {
padding-block: 45px;
}
.end-cta .wrap {
display: block;
}
.end-cta h2 {
font-size: 32px;
}
.end-cta p {
font-size: 13px;
}
.end-cta .buttons {
flex-direction: row;
margin-top: 25px;
}
.site-footer {
padding-top: 43px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 31px 18px;
}
.footer-brand {
grid-column: 1 / -1;
}
.footer-brand>p {
max-width: 100%;
font-size: 12px;
}
.footer-grid>div:last-child {
grid-column: auto;
}
.footer-brand .brand {
font-size: 19px;
}
.footer-title {
font-size: 12px;
margin-bottom: 16px;
}
.footer-links a {
font-size: 11px;
}
.footer-bottom {
align-items: start;
flex-direction: column;
gap: 14px;
margin-top: 32px;
font-size: 10px;
}
.footer-disclaimer {
font-size: 10px;
margin-top: 18px;
}
.breadcrumbs {
font-size: 10px;
margin-bottom: 24px;
gap: 8px;
}
.page-hero {
padding: 26px 0 41px;
}
.page-hero h1 {
font-size: 38px;
line-height: 1.12;
}
.page-hero .lead {
font-size: 15px;
}
.hero-subhead {
font-size: 20px;
}
.topic-hero-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.topic-feature {
display: none;
}
.two-col-content {
grid-template-columns: 1fr;
gap: 35px;
}
.prose {
font-size: 15px;
line-height: 1.95;
}
.prose h2 {
font-size: 26px;
line-height: 1.28;
margin-top: 35px;
}
.prose h3 {
font-size: 20px;
}
.side-stack {
gap: 18px;
}
.side-box {
padding: 24px;
}
.side-box p,.side-box li {
font-size: 13px;
}
.article-hero-grid {
grid-template-columns: 1fr;
gap: 27px;
}
.article-hero h1 {
font-size: 35px;
line-height: 1.15;
}
.article-hero .lead {
font-size: 15px;
}
.article-hero .post-meta {
font-size: 10px;
gap: 10px;
}
.article-feature-image {
max-width: 410px;
margin-inline: auto;
}
.article-byline {
font-size: 10px;
}
.article-body {
font-size: 16px;
line-height: 1.95;
}
.article-body>p:first-child {
font-size: 18px;
}
.article-body h2 {
font-size: 26px;
line-height: 1.3;
}
.toc ol {
display: flex;
font-size: 11px;
}
.toc a {
padding: 6px 0;
}
.toc h2 {
font-size: 12px;
}
.blog-hero-grid {
grid-template-columns: 1fr;
gap: 27px;
}
.blog-hero-card {
max-width: 350px;
justify-self: start;
}
.archive-chips {
gap: 7px;
margin-top: 24px;
}
.chip {
font-size: 10px;
padding: 8px 10px;
}
.collection-intro p {
font-size: 14px;
}
.collection-intro h2 {
font-size: 24px;
}
.contact-card {
padding: 25px;
}
.contact-address {
font-size: clamp(1rem,4.7vw,1.5rem);
}
.contact-card p {
font-size: 13px;
}
.contact-grid {
grid-template-columns: 1fr;
}
.info-card h2 {
font-size: 23px;
}
.info-card p {
font-size: 14px;
}
.policy-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.glossary-list {
grid-template-columns: 1fr;
}
.glossary-entry {
padding: 24px;
}
.glossary-links a {
font-size: 11px;
}
.research-notice {
padding: 17px;
font-size: 11px;
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
*,*::before,*::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
}
@media print {
.site-header,.site-footer,.toc,.end-cta,.reading-progress,.article-tags,.related-posts,.skip-link {
display: none !important;
}
body {
background: white !important;
color: black !important;
}
.wrap {
width: 100%;
}
.article-hero-grid,.reading-shell,.two-col-content {
display: block;
}
.article-feature-image {
max-width: 260px;
margin: 20px auto;
}
.prose,.lead,p,h1,h2,h3,.post-meta,.article-byline {
color: black !important;
}
.page-hero {
background: none;
border-bottom: 1px solid #999;
}
.prose a {
color: #123;
text-decoration: underline;
}
.section {
padding-block: 25px;
}
details>p {
display: block;
}
h2,h3 {
break-after: avoid;
}
.prose p {
orphans: 3;
widows: 3;
}
}
.faq-list a,.research-notice a {
color: #8fe6ec;
text-decoration: underline;
text-underline-offset: 4px;
}
.faq-list a:hover,.research-notice a:hover {
color: #dcfcff;
}
.prose h2,.glossary-entry {
scroll-margin-top: 0;
}