/*! 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: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-heading: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe 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;
}
}
@layer utilities {
.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;
}
.grid {
display: grid;
}
.gap-5 {
gap: calc(var(--spacing) * 5);
}
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.gap-10 {
gap: calc(var(--spacing) * 10);
}
.font-body {
font-family: var(--font-body);
}
.overline {
text-decoration-line: overline;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sm\:grid-cols-2 {
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.md\:grid-cols-2 {
@media (width >= 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.md\:grid-cols-3 {
@media (width >= 48rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.lg\:grid-cols-4 {
@media (width >= 64rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
}
:root {
color-scheme: dark;
--bg: #070e20;
--panel: #0e1930;
--panel2: #14213b;
--ink: #f1f6ff;
--muted: #afbdd3;
--subtle: #91a4c0;
--line: #26364f;
--cyan: #4af2ff;
--lime: #b7ff35;
--purple: #b99cff;
--pink: #ff90da;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 110px;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
img,svg {
max-width: 100%;
}
img {
display: block;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,input,textarea {
font: inherit;
}
::selection {
background: var(--lime);
color: var(--bg);
}
:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 5px;
border-radius: 4px;
}
main:focus {
outline: none;
}
a,summary {
touch-action: manipulation;
}
h1,h2,h3,h4,p,figure {
margin: 0;
}
h1,h2,h3,h4 {
font-family: var(--font-heading);
font-weight: 750;
line-height: 1.12;
letter-spacing: -.035em;
}
h1 {
font-size: clamp(2.55rem,4.6vw,4.5rem);
}
h2 {
font-size: clamp(2rem,3.4vw,3.15rem);
}
h3 {
font-size: 1.25rem;
letter-spacing: -.02em;
}
p {
color: var(--muted);
}
strong {
font-weight: 700;
color: var(--ink);
}
.wrap {
width: min(1280px,calc(100% - 64px));
margin-inline: auto;
}
.wrap-narrow {
width: min(850px,calc(100% - 64px));
margin-inline: auto;
}
.section {
padding-block: 92px;
}
.section-soft {
background: linear-gradient(120deg,#0b152c,#0b1126);
border-block: 1px solid var(--line);
}
.section-top {
border-top: 1px solid var(--line);
}
.section-head {
margin-bottom: 38px;
display: flex;
gap: 30px;
align-items: flex-end;
justify-content: space-between;
}
.section-head p {
margin-top: 18px;
max-width: 620px;
}
.section-head>div {
max-width: 780px;
}
.section-head .text-link {
flex-shrink: 0;
margin-bottom: 6px;
}
.eyebrow {
color: var(--cyan);
font-family: var(--font-body);
font-size: .73rem;
font-weight: 750;
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.eyebrow:before {
content: "";
display: inline-block;
width: 19px;
height: 2px;
background: var(--cyan);
}
.overline {
font-size: .68rem;
font-weight: 750;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--subtle);
}
.muted {
color: var(--muted);
}
.small {
font-size: .87rem;
}
.accent {
color: var(--cyan);
}
.lime {
color: var(--lime);
}
.purple {
color: var(--purple);
}
.text-gradient {
background: linear-gradient(100deg,var(--cyan),#93adff 65%,var(--purple));
color: transparent;
background-clip: text;
}
.line-break {
display: block;
}
.lede {
font-size: 1.1rem;
line-height: 1.8;
max-width: 660px;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--cyan);
font-size: .9rem;
font-weight: 650;
min-height: 44px;
}
.text-link:hover {
color: var(--lime);
}
.text-link svg {
width: 17px;
height: 17px;
}
.button {
display: inline-flex;
gap: 12px;
align-items: center;
justify-content: center;
min-height: 49px;
padding: 12px 22px;
font-size: .86rem;
font-weight: 750;
border: 1px solid transparent;
border-radius: 10px;
transition: transform .2s,border-color .2s,box-shadow .2s;
line-height: 1.4;
text-align: center;
}
.button svg {
width: 18px;
height: 18px;
}
.button:hover {
transform: translateY(-2px);
}
.button-primary {
background: var(--lime);
color: #101a02;
box-shadow: 0 0 30px #b7ff3515;
}
.button-primary:hover {
box-shadow: 0 6px 30px #b7ff3530;
}
.button-secondary {
background: #101a30;
border-color: #52617c;
color: var(--ink);
}
.button-secondary:hover {
border-color: var(--cyan);
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 13px;
margin-top: 30px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .72rem;
padding: 7px 12px;
border: 1px solid #365473;
background: #10283a;
border-radius: 100px;
color: #a0f6ff;
font-weight: 650;
line-height: 1.5;
}
.badge-lime {
border-color: #577630;
background: #1e301c;
color: #d1ff91;
}
.badge-purple {
border-color: #675284;
background: #2b2142;
color: #d6c5ff;
}
.pill {
font-size: .78rem;
border: 1px solid var(--line);
border-radius: 100px;
padding: 6px 13px;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
background: #0d182c;
}
.pill:hover {
border-color: var(--cyan);
color: var(--cyan);
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip-row {
display: flex;
gap: 22px;
flex-wrap: wrap;
font-size: .74rem;
color: #b8c6db;
}
.chip-row span {
display: flex;
align-items: center;
gap: 7px;
}
.chip-row svg {
width: 14px;
height: 14px;
color: var(--cyan);
}
.skip-link {
position: fixed;
left: 16px;
top: -200px;
z-index: 1000;
padding: 12px 18px;
background: var(--lime);
color: #071025;
font-weight: 700;
}
.skip-link:focus {
top: 12px;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: #070e20f5;
backdrop-filter: blur(16px);
border-bottom: 1px solid #35486266;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
min-height: 82px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 11px;
line-height: 1;
white-space: nowrap;
}
.brand-mark {
color: var(--cyan);
width: 39px;
height: 39px;
flex-shrink: 0;
}
.brand-text {
font-size: 1.16rem;
letter-spacing: -.035em;
font-weight: 800;
}
.brand-text span {
color: var(--cyan);
}
.brand-dot {
font-size: .86em !important;
color: var(--subtle) !important;
font-weight: 600;
}
.desktop-nav {
display: flex;
gap: 28px;
align-items: center;
font-size: .8rem;
font-weight: 650;
}
.desktop-nav a {
min-height: 46px;
display: inline-flex;
align-items: center;
position: relative;
color: #c4cede;
}
.desktop-nav a:hover,.desktop-nav a[aria-current=page] {
color: var(--cyan);
}
.desktop-nav a[aria-current=page]:after {
content: "";
position: absolute;
bottom: 0;
height: 2px;
left: 0;
right: 0;
background: var(--cyan);
}
.header-cta {
min-height: 43px;
font-size: .75rem;
padding: 10px 16px;
}
.mobile-menu {
display: none;
}
.mobile-menu>summary {
list-style: none;
display: flex;
align-items: center;
gap: 9px;
cursor: pointer;
padding: 10px 12px;
min-height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: .8rem;
}
.mobile-menu>summary::-webkit-details-marker {
display: none;
}
.mobile-menu>summary svg {
width: 18px;
height: 18px;
}
.mobile-menu[open]>summary {
border-color: var(--cyan);
color: var(--cyan);
}
.mobile-menu-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0d1930;
border-bottom: 1px solid var(--cyan);
padding: 20px 24px;
max-height: calc(100dvh - 90px);
overflow-y: auto;
box-shadow: 0 15px 30px #0006;
}
.mobile-menu-panel>a {
display: block;
padding: 12px;
border-bottom: 1px solid var(--line);
font-size: .94rem;
}
.mobile-menu-panel .button {
margin-top: 15px;
display: flex;
}
.hero {
position: relative;
overflow: hidden;
padding: 74px 0 55px;
background: radial-gradient(ellipse at 86% 30%,#174fd13a,transparent 50%),radial-gradient(ellipse at 20% 15%,#26104b40,transparent 55%);
}
.hero:after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(#3968940d 1px,transparent 1px),linear-gradient(90deg,#3968940d 1px,transparent 1px);
background-size: 58px 58px;
pointer-events: none;
mask-image: linear-gradient(90deg,transparent,#000);
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.12fr;
gap: 48px;
align-items: center;
}
.hero h1 {
font-size: clamp(3.5rem,5.3vw,5.3rem);
letter-spacing: -.065em;
line-height: 1.035;
margin: 24px 0;
}
.hero h1 span {
display: block;
}
.hero .lede {
font-size: 1.035rem;
max-width: 480px;
}
.hero .chip-row {
margin-top: 25px;
gap: 20px;
}
.hero-note {
font-size: .72rem;
color: #92a8c9;
margin-top: 22px;
}
.hero-note a {
color: var(--cyan);
text-decoration: underline;
text-underline-offset: 3px;
}
.hero-display {
position: relative;
padding: 30px 0 18px;
}
.hero-display:before {
content: "";
position: absolute;
inset: 70px 0 30px;
background: linear-gradient(120deg,#0decff30,#a32cff26);
filter: blur(38px);
z-index: -1;
border-radius: 60px;
}
.float-note {
position: absolute;
right: 15px;
top: 0;
z-index: 2;
transform: rotate(4deg);
background: var(--lime);
color: #172406;
border-radius: 9px;
padding: 13px 18px;
box-shadow: 0 10px 30px #0005;
font-size: .78rem;
font-weight: 750;
line-height: 1.35;
}
.float-note svg {
width: 17px;
display: inline-block;
margin-right: 7px;
}
.browser-shell {
border: 1px solid #537ab2;
border-radius: 15px;
overflow: hidden;
background: #0a1429;
box-shadow: 0 24px 80px #0006,0 0 0 7px #285b9e15;
min-width: 0;
}
.browser-top {
display: flex;
align-items: center;
gap: 12px;
background: #15233e;
border-bottom: 1px solid #304869;
padding: 13px 16px;
font-size: .66rem;
line-height: 1.4;
color: #b7c5d9;
}
.browser-dots {
display: flex;
gap: 5px;
flex-shrink: 0;
}
.browser-dots i {
display: block;
width: 8px;
height: 8px;
background: #ff8595;
border-radius: 50%;
}
.browser-dots i:nth-child(2) {
background: #ffdf76;
}
.browser-dots i:nth-child(3) {
background: #96ef8d;
}
.browser-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.browser-top .read-only {
font-size: .55rem;
letter-spacing: .05em;
color: #c8ddff;
border: 1px solid #526b8e;
padding: 4px 6px;
border-radius: 5px;
white-space: nowrap;
}
.browser-toolbar {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 14px;
background: #101e37;
border-bottom: 1px solid var(--line);
font-size: .6rem;
color: #a9bfde;
}
.address-pill {
background: #0a1427;
flex: 1;
border-radius: 5px;
padding: 6px 10px;
}
.address-pill svg {
display: inline-block;
width: 10px;
margin-right: 6px;
color: var(--cyan);
}
.browser-layout {
display: grid;
grid-template-columns: 128px minmax(0,1fr);
}
.browser-sidebar {
border-right: 1px solid var(--line);
padding: 22px 12px;
background: #0c172a;
font-size: .6rem;
}
.browser-sidebar .overline {
font-size: .5rem;
margin-bottom: 12px;
}
.side-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 7px;
margin: 5px 0;
border-radius: 5px;
color: #afbdd4;
line-height: 1.3;
}
.side-item svg {
width: 12px;
height: 12px;
}
.side-item.selected {
background: #1c354e;
color: var(--cyan);
border: 1px solid #2f6884;
}
.sample-members {
margin-top: 35px;
}
.avatars {
display: flex;
padding-left: 4px;
margin-top: 9px;
}
.avatars span {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 2px solid #0e1830;
background: #55dbe7;
color: #0c1930;
border-radius: 50%;
margin-left: -4px;
font-size: .56rem;
font-weight: 800;
}
.avatars span:nth-child(2) {
background: #b39bf0;
}
.avatars span:nth-child(3) {
background: #c6ef72;
}
.browser-content {
padding: 25px 22px 18px;
min-width: 0;
}
.browser-content .overline {
font-size: .55rem;
letter-spacing: .13em;
}
.browser-welcome {
font-size: 1.5rem;
letter-spacing: -.045em;
line-height: 1.18;
margin: 8px 0 9px;
display: block;
font-weight: 750;
max-width: 320px;
}
.browser-welcome span {
color: var(--cyan);
}
.browser-description {
font-size: .65rem;
line-height: 1.65;
max-width: 285px;
}
.preview-mini-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 23px;
}
.preview-tile {
padding: 14px 11px;
border: 1px solid #345d76;
background: linear-gradient(145deg,#19415799,#111d33);
border-radius: 8px;
min-width: 0;
}
.preview-tile:nth-child(2) {
background: linear-gradient(145deg,#38285299,#151b35);
border-color: #51456e;
}
.preview-tile svg {
width: 24px;
height: 24px;
margin-bottom: 14px;
color: var(--cyan);
}
.preview-tile:nth-child(2) svg {
color: var(--purple);
}
.preview-tile strong {
display: block;
font-size: .68rem;
letter-spacing: -.01em;
}
.preview-tile p {
font-size: .56rem;
margin-top: 5px;
color: #b9c9df;
}
.preview-bottom {
display: flex;
align-items: center;
gap: 9px;
border: 1px solid #314461;
border-radius: 7px;
padding: 10px;
margin-top: 12px;
font-size: .59rem;
color: #bbcfde;
}
.preview-bottom svg {
width: 17px;
height: 17px;
color: var(--lime);
}
.preview-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 16px;
border-top: 1px solid var(--line);
font-size: .55rem;
color: #a5b8cf;
background: #101a2c;
}
.hero-display>figcaption {
font-size: .67rem;
color: #8fa7c6;
margin-top: 19px;
text-align: center;
}
.audience-strip {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
padding-top: 53px;
margin-top: 32px;
border-top: 1px solid #2c43606e;
}
.audience-strip>p {
font-size: .7rem;
max-width: 135px;
color: #a5b7ce;
}
.audience-links {
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
flex: 1;
}
.audience-links a {
display: flex;
align-items: center;
gap: 10px;
color: #c5cddd;
font-size: .84rem;
font-weight: 650;
min-height: 44px;
}
.audience-links a:hover {
color: var(--cyan);
}
.audience-links svg {
width: 20px;
height: 20px;
color: #8da4c3;
}
.feature-card {
padding: 29px;
border: 1px solid var(--line);
border-radius: 14px;
background: linear-gradient(140deg,#112138aa,#10172a);
height: 100%;
position: relative;
transition: border-color .2s,transform .2s;
display: flex;
flex-direction: column;
}
.feature-card:hover {
border-color: #4d9aaa;
transform: translateY(-3px);
}
.feature-icon {
width: 45px;
height: 45px;
padding: 10px;
border: 1px solid #31656b;
border-radius: 12px;
background: #123a40;
color: var(--cyan);
margin-bottom: 23px;
}
.feature-card:nth-child(3n+2) .feature-icon {
background: #2a2445;
border-color: #544572;
color: var(--purple);
}
.feature-card:nth-child(3n+3) .feature-icon {
background: #25351f;
border-color: #4d6840;
color: var(--lime);
}
.feature-card h3 {
font-size: 1.13rem;
margin-bottom: 12px;
}
.feature-card p {
font-size: .86rem;
line-height: 1.75;
flex: 1;
}
.feature-card .text-link {
font-size: .78rem;
margin-top: 14px;
}
.steps {
counter-reset: steps;
}
.step-card {
padding: 6px 30px 2px 0;
border-right: 1px solid var(--line);
}
.step-card:last-child {
border: 0;
}
.step-number {
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
color: var(--cyan);
margin-bottom: 22px;
display: flex;
align-items: center;
gap: 15px;
}
.step-number span {
display: grid;
place-items: center;
font-size: 1.15rem;
width: 40px;
height: 40px;
background: #122a3a;
border: 1px solid #285265;
border-radius: 50%;
letter-spacing: 0;
}
.step-card:nth-child(2) .step-number {
color: var(--purple);
}
.step-card:nth-child(2) .step-number span {
background: #292140;
border-color: #50416b;
}
.step-card:nth-child(3) .step-number {
color: var(--lime);
}
.step-card:nth-child(3) .step-number span {
background: #25331d;
border-color: #475b34;
}
.step-card h3 {
font-size: 1.35rem;
margin-bottom: 14px;
}
.step-card p {
font-size: .89rem;
line-height: 1.8;
}
.step-card .text-link {
font-size: .78rem;
margin-top: 11px;
}
.use-card {
border: 1px solid var(--line);
padding: 26px 24px;
border-radius: 12px;
background: #0f1b31;
display: block;
transition: transform .2s,border-color .2s;
}
.use-card:hover {
border-color: var(--purple);
transform: translateY(-3px);
}
.use-card .use-icon {
font-size: 1.5rem;
margin-bottom: 30px;
display: block;
}
.use-card h3 {
font-size: 1.05rem;
line-height: 1.3;
margin-bottom: 12px;
}
.use-card p {
font-size: .82rem;
line-height: 1.8;
}
.use-card .text-link {
font-size: .74rem;
margin-top: 15px;
}
.preview-section {
background: radial-gradient(ellipse at 50% 100%,#1d4ec530,transparent 65%);
}
.preview-split {
display: grid;
grid-template-columns: .7fr 1.3fr;
gap: 56px;
align-items: center;
}
.preview-split h2 {
margin-bottom: 20px;
}
.preview-split .lede {
font-size: .94rem;
}
.check-note {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 23px 0;
}
.check-note svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--lime);
margin-top: 4px;
}
.check-note strong {
font-size: .86rem;
display: block;
}
.check-note p {
font-size: .8rem;
margin-top: 3px;
}
.workspace-large {
border: 1px solid #497093;
border-radius: 15px;
background: #0c162b;
overflow: hidden;
box-shadow: 0 20px 70px #0004;
}
.workspace-large .browser-layout {
grid-template-columns: 165px minmax(0,1fr);
}
.workspace-large .browser-sidebar {
font-size: .72rem;
}
.workspace-large .browser-sidebar .overline {
font-size: .6rem;
}
.workspace-large .browser-content {
padding: 24px;
}
.workspace-heading {
display: flex;
gap: 20px;
justify-content: space-between;
align-items: start;
margin-bottom: 19px;
}
.workspace-heading strong {
font-size: 1.32rem;
line-height: 1.2;
letter-spacing: -.025em;
}
.workspace-heading p {
font-size: .73rem;
margin-top: 6px;
}
.workspace-question {
padding: 16px;
border: 1px solid #325463;
background: linear-gradient(135deg,#153c434f,#132a3d);
border-radius: 9px;
margin-bottom: 14px;
}
.workspace-question .overline {
color: #86d8dc;
font-size: .58rem;
margin-bottom: 5px;
}
.workspace-question strong {
font-size: .83rem;
line-height: 1.5;
display: block;
}
.source-row {
display: flex;
gap: 13px;
align-items: center;
padding: 13px;
border: 1px solid #2a3d59;
border-radius: 8px;
margin-top: 9px;
background: #111f35;
transition: border-color .2s;
}
.source-row:hover {
border-color: var(--cyan);
}
.source-row>svg {
width: 21px;
height: 21px;
color: var(--cyan);
flex-shrink: 0;
}
.source-row>div {
flex: 1;
min-width: 0;
}
.source-row strong {
font-size: .75rem;
line-height: 1.4;
display: block;
}
.source-row p {
font-size: .6rem;
margin-top: 3px;
}
.source-row>.arrow-icon {
width: 14px;
height: 14px;
color: var(--subtle);
}
.workspace-caption {
font-size: .72rem;
color: #a0b5cf;
margin-top: 15px;
}
.workspace-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
}
.workspace-nav .pill {
font-size: .82rem;
padding: 9px 16px;
}
.workspace-nav [aria-current=page] {
color: var(--lime);
border-color: #6f8941;
background: #263b23;
}
.workspace-detail .browser-layout {
grid-template-columns: 225px minmax(0,1fr);
}
.workspace-detail .browser-content {
padding: 35px;
}
.workspace-detail .source-row {
padding: 18px;
}
.workspace-detail .source-row strong {
font-size: .93rem;
}
.workspace-detail .source-row p {
font-size: .75rem;
}
.workspace-detail .workspace-question strong {
font-size: 1.1rem;
}
.workspace-detail .workspace-heading strong {
font-size: 1.85rem;
}
.workspace-detail .browser-sidebar {
padding: 30px 20px;
font-size: .82rem;
}
.workspace-detail .side-item {
padding: 12px 7px;
}
.workspace-detail .browser-top {
font-size: .75rem;
}
.workspace-detail .browser-top .read-only {
font-size: .65rem;
}
.workspace-detail .preview-foot {
font-size: .7rem;
padding: 14px 20px;
}
.workspace-detail .sample-members {
margin-top: 45px;
}
.workspace-detail .avatars span {
width: 34px;
height: 34px;
font-size: .75rem;
}
.journal-card {
border: 1px solid var(--line);
background: #0f1a2e;
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s,border-color .2s;
}
.journal-card:hover {
transform: translateY(-4px);
border-color: #587484;
}
.journal-card .image-link {
display: block;
overflow: hidden;
background: #081124;
}
.journal-card img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
transition: transform .35s;
}
.journal-card .image-link:hover img {
transform: scale(1.025);
}
.journal-card-body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.journal-card-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
color: var(--subtle);
font-size: .68rem;
align-items: center;
margin-bottom: 13px;
}
.journal-card-meta a {
color: var(--cyan);
}
.journal-card h3 {
font-size: 1.2rem;
line-height: 1.35;
letter-spacing: -.025em;
margin-bottom: 13px;
}
.journal-card h3 a:hover {
color: var(--cyan);
}
.journal-card p {
font-size: .82rem;
line-height: 1.8;
flex: 1;
}
.journal-card .text-link {
font-size: .78rem;
margin-top: 13px;
}
.faq-grid {
display: grid;
grid-template-columns: .75fr 1.25fr;
gap: 75px;
}
.faq-grid h2 {
margin-bottom: 20px;
}
.faq-list {
border-top: 1px solid var(--line);
}
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-item summary {
padding: 21px 38px 21px 0;
cursor: pointer;
list-style: none;
position: relative;
font-size: .97rem;
font-weight: 650;
line-height: 1.55;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:after {
content: "+";
position: absolute;
right: 5px;
top: 19px;
color: var(--cyan);
font-size: 1.5rem;
font-weight: 400;
}
.faq-item[open] summary:after {
content: "−";
}
.faq-item summary:hover {
color: var(--cyan);
}
.faq-answer {
padding: 0 32px 22px 0;
font-size: .9rem;
line-height: 1.8;
}
.faq-answer a {
color: var(--cyan);
text-decoration: underline;
text-underline-offset: 3px;
}
.cta-band {
position: relative;
overflow: hidden;
border: 1px solid #426b70;
background: radial-gradient(ellipse at 90% 110%,#32d5ea22,transparent 50%),linear-gradient(100deg,#112d3a,#131e3b 65%,#242349);
border-radius: 20px;
padding: 52px 58px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.cta-band h2 {
font-size: 2.25rem;
margin-bottom: 14px;
max-width: 630px;
}
.cta-band p {
font-size: .96rem;
max-width: 630px;
}
.cta-band .button {
flex-shrink: 0;
}
.cta-band .eyebrow {
color: var(--lime);
}
.cta-band .eyebrow:before {
background: var(--lime);
}
.site-footer {
border-top: 1px solid var(--line);
background: #060c1b;
padding-top: 58px;
}
.footer-main {
display: grid;
grid-template-columns: 1.45fr 1fr 1fr 1fr;
gap: 50px;
padding-bottom: 45px;
}
.footer-brand p {
font-size: .81rem;
line-height: 1.85;
max-width: 270px;
margin: 20px 0 17px;
}
.footer-email {
font-size: .82rem;
color: var(--cyan);
overflow-wrap: anywhere;
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-column h2 {
font-family: var(--font-body);
font-size: .75rem;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 17px;
color: #dce7f8;
}
.footer-column a {
display: block;
font-size: .77rem;
color: #a9b9ce;
min-height: 36px;
padding: 5px 0;
}
.footer-column a:hover {
color: var(--cyan);
}
.footer-bottom {
border-top: 1px solid var(--line);
padding: 22px 0 25px;
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
color: #9bb0cd;
font-size: .68rem;
}
.footer-bottom-links {
display: flex;
flex-wrap: wrap;
gap: 23px;
}
.footer-bottom a:hover {
color: var(--cyan);
}
.breadcrumbs {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
font-size: .73rem;
color: var(--subtle);
margin-bottom: 25px;
line-height: 1.5;
}
.breadcrumbs a {
color: #bbccdf;
min-height: 30px;
display: inline-flex;
align-items: center;
}
.breadcrumbs a:hover {
color: var(--cyan);
}
.breadcrumbs .sep {
color: #5c6e89;
}
.page-hero {
padding: 42px 0 65px;
border-bottom: 1px solid var(--line);
background: radial-gradient(ellipse at 90% 0,#23458b40,transparent 65%);
}
.page-hero h1 {
max-width: 880px;
margin-bottom: 23px;
}
.page-hero .lede {
max-width: 800px;
}
.page-hero .badge {
margin-bottom: 24px;
}
.page-hero .tag-list {
margin-top: 28px;
}
.topic-layout {
display: grid;
grid-template-columns: minmax(0,1fr) 315px;
gap: 72px;
align-items: start;
}
.prose {
font-size: 1.03rem;
line-height: 1.9;
color: var(--muted);
min-width: 0;
}
.prose p {
margin: 0 0 23px;
}
.prose h2 {
font-size: 1.75rem;
line-height: 1.28;
margin: 44px 0 21px;
letter-spacing: -.035em;
color: var(--ink);
scroll-margin-top: 110px;
}
.prose h2:first-child {
margin-top: 0;
}
.prose h3 {
font-size: 1.3rem;
line-height: 1.4;
margin: 32px 0 15px;
color: var(--ink);
}
.prose a {
color: var(--cyan);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.prose a:hover {
color: var(--lime);
}
.prose ul,.prose ol {
margin: 0 0 25px;
padding-left: 24px;
}
.prose li {
padding-left: 4px;
margin-bottom: 8px;
}
.prose li::marker {
color: var(--cyan);
}
.prose blockquote {
border-left: 3px solid var(--cyan);
margin: 27px 0;
background: #10273b;
padding: 23px 25px;
border-radius: 0 10px 10px 0;
}
.prose blockquote p {
margin: 0;
color: #d6eafb;
}
.prose table {
border-collapse: collapse;
width: 100%;
font-size: .84rem;
margin: 25px 0;
}
.prose th,.prose td {
border-bottom: 1px solid var(--line);
text-align: left;
padding: 13px 12px;
vertical-align: top;
}
.prose th {
color: var(--ink);
background: #18243a;
}
.prose pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
padding: 22px;
background: #101d34;
border: 1px solid var(--line);
border-radius: 12px;
font-size: .82rem;
line-height: 1.8;
}
.note-box {
padding: 23px 25px;
border: 1px solid #395166;
background: #0e2234;
border-radius: 12px;
font-size: .89rem;
line-height: 1.8;
margin: 25px 0;
}
.note-box strong {
display: block;
margin-bottom: 7px;
}
.note-box a {
color: var(--cyan);
text-decoration: underline;
}
.side-panel {
padding: 27px;
border: 1px solid var(--line);
border-radius: 14px;
background: #101c31;
margin-bottom: 22px;
}
.side-panel h2 {
font-size: 1.1rem;
letter-spacing: -.02em;
line-height: 1.4;
margin-bottom: 17px;
}
.side-panel p {
font-size: .85rem;
line-height: 1.8;
margin-bottom: 15px;
}
.side-panel .text-link {
font-size: .78rem;
display: flex;
}
.sidebar {
position: sticky;
top: 110px;
}
.subnav-link {
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
border-top: 1px solid var(--line);
padding: 13px 0;
color: #c2d3e7;
font-size: .84rem;
line-height: 1.5;
}
.subnav-link:hover {
color: var(--cyan);
}
.subnav-link svg {
width: 15px;
flex-shrink: 0;
color: var(--cyan);
}
.archive-intro {
margin-top: 26px;
border: 1px solid var(--line);
padding: 22px 25px;
background: #0e1c32;
border-radius: 12px;
max-width: 900px;
}
.archive-intro p {
font-size: .92rem;
line-height: 1.8;
}
.archive-count {
color: var(--cyan);
font-size: .8rem;
margin-bottom: 24px;
display: block;
}
.index-category {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 30px 0 0;
}
.index-category a {
min-height: 40px;
font-size: .78rem;
padding: 9px 15px;
border: 1px solid #415975;
border-radius: 100px;
}
.index-category a:hover,.index-category a[aria-current=page] {
color: var(--lime);
border-color: var(--lime);
background: #20331b;
}
.article-hero {
padding-bottom: 50px;
}
.article-hero-grid {
display: grid;
grid-template-columns: 1.65fr 1fr;
gap: 60px;
align-items: center;
}
.article-hero h1 {
font-size: clamp(2.35rem,4vw,3.65rem);
line-height: 1.11;
margin: 20px 0;
}
.article-excerpt {
font-size: 1.01rem;
line-height: 1.85;
}
.article-byline {
display: flex;
align-items: center;
gap: 13px;
font-size: .75rem;
color: #becde2;
margin-top: 25px;
}
.byline-avatar {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid #386c71;
background: #13333e;
border-radius: 50%;
font-size: .72rem;
font-weight: 750;
color: var(--cyan);
flex-shrink: 0;
}
.byline-meta {
font-size: .69rem;
color: var(--subtle);
margin-top: 3px;
}
.byline-name {
display: block;
color: var(--ink);
}
.byline-name:hover {
color: var(--cyan);
}
.article-feature {
border: 1px solid #53749b;
border-radius: 15px;
overflow: hidden;
max-width: 440px;
}
.article-feature img {
width: 100%;
aspect-ratio: 1;
}
.article-layout {
display: grid;
grid-template-columns: 255px minmax(0,760px);
gap: 65px;
max-width: 1100px;
margin-inline: auto;
align-items: start;
}
.toc {
position: sticky;
top: 108px;
}
.toc details {
border: 1px solid var(--line);
background: #0d192e;
border-radius: 12px;
padding: 20px;
}
.toc summary {
font-size: .83rem;
color: var(--ink);
font-weight: 700;
cursor: pointer;
line-height: 1.6;
}
.toc ol {
list-style: none;
padding: 15px 0 0;
margin: 0;
}
.toc li+li {
margin-top: 4px;
}
.toc a {
color: #afc0d8;
font-size: .76rem;
display: block;
line-height: 1.6;
padding: 6px 0;
}
.toc a:hover {
color: var(--cyan);
}
.toc .back-link {
margin: 15px 8px;
display: block;
color: var(--cyan);
font-size: .75rem;
}
.article-content {
font-size: 1.055rem;
line-height: 1.92;
}
.article-tags {
margin-top: 38px;
border-top: 1px solid var(--line);
padding-top: 25px;
}
.article-tags .overline {
margin-bottom: 12px;
}
.resource-card {
padding: 30px;
border: 1px solid var(--line);
border-radius: 14px;
background: #101b30;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.resource-card svg {
color: var(--cyan);
width: 28px;
margin-bottom: 20px;
}
.resource-card h2 {
font-size: 1.35rem;
line-height: 1.35;
margin-bottom: 14px;
}
.resource-card p {
font-size: .88rem;
line-height: 1.8;
margin-bottom: 20px;
flex: 1;
}
.resource-card .button {
font-size: .8rem;
}
.contact-card {
background: linear-gradient(130deg,#10313e,#162039);
border: 1px solid #41697c;
border-radius: 17px;
padding: 40px;
}
.contact-address {
font-size: clamp(1.35rem,4vw,2.3rem);
line-height: 1.4;
color: var(--cyan);
font-weight: 750;
letter-spacing: -.04em;
overflow-wrap: anywhere;
display: inline-flex;
margin: 15px 0;
}
.contact-card p {
font-size: .95rem;
line-height: 1.8;
}
.contact-card>svg {
width: 40px;
height: 40px;
color: var(--lime);
margin-bottom: 20px;
}
.inline-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
}
.reading-list {
margin: 26px 0;
border-top: 1px solid var(--line);
}
.reading-list a {
padding: 18px 0;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
font-size: .94rem;
font-weight: 650;
}
.reading-list svg {
width: 18px;
color: var(--cyan);
flex-shrink: 0;
}
.reading-list a:hover {
color: var(--cyan);
}
.empty-page {
text-align: center;
padding: 85px 0;
}
.empty-number {
font-size: 7rem;
line-height: 1;
color: var(--cyan);
font-weight: 800;
letter-spacing: -.09em;
margin-bottom: 25px;
}
.empty-page .lede {
margin: 22px auto;
}
.empty-page .button-row {
justify-content: center;
}
@media (min-width:1400px) {
.hero-grid {
gap: 65px;
}
.hero-display {
padding-top: 38px;
}
.browser-welcome {
font-size: 1.7rem;
}
.browser-content {
padding: 29px 24px;
}
.hero {
padding-block: 80px 55px;
}
}
@media (max-width:1150px) {
.desktop-nav,.header-cta {
display: none;
}
.mobile-menu {
display: block;
}
.hero-grid {
gap: 30px;
}
.hero h1 {
font-size: 4rem;
}
.hero .lede {
font-size: .98rem;
}
.hero .button {
padding: 12px 16px;
font-size: .77rem;
}
.chip-row {
gap: 14px;
}
.hero .chip-row {
font-size: .66rem;
gap: 11px;
}
.browser-layout {
grid-template-columns: 110px minmax(0,1fr);
}
.browser-content {
padding: 20px 16px;
}
.browser-welcome {
font-size: 1.35rem;
}
.browser-sidebar {
padding: 20px 9px;
}
.preview-mini-grid {
gap: 8px;
}
.preview-tile {
padding: 12px 9px;
}
.preview-split {
gap: 35px;
grid-template-columns: .75fr 1.25fr;
}
.workspace-large .browser-layout {
grid-template-columns: 130px minmax(0,1fr);
}
.workspace-large .browser-content {
padding: 20px;
}
.audience-links {
gap: 20px;
}
.audience-links a {
font-size: .76rem;
}
.footer-main {
gap: 30px;
grid-template-columns: 1.25fr 1fr 1fr 1fr;
}
.footer-brand .brand-text {
font-size: 1rem;
}
.footer-brand .brand-mark {
width: 31px;
}
.article-hero-grid {
gap: 35px;
}
.article-layout {
gap: 40px;
grid-template-columns: 220px minmax(0,1fr);
}
.topic-layout {
gap: 40px;
grid-template-columns: minmax(0,1fr) 275px;
}
}
@media (max-width:1023px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.hero-copy {
max-width: 650px;
}
.hero h1 {
font-size: clamp(3.7rem,7.8vw,5.3rem);
max-width: 760px;
}
.hero h1 span {
display: inline;
}
.hero h1 span:last-child:before {
content: " ";
}
.hero .lede {
max-width: 650px;
font-size: 1.08rem;
}
.hero .button {
font-size: .88rem;
padding: 14px 23px;
}
.hero .chip-row {
font-size: .8rem;
gap: 23px;
}
.hero-display {
max-width: 700px;
width: 100%;
margin-inline: auto;
padding-top: 23px;
}
.browser-layout {
grid-template-columns: 150px minmax(0,1fr);
}
.browser-content {
padding: 28px;
}
.browser-welcome {
font-size: 1.9rem;
}
.browser-description {
font-size: .78rem;
max-width: 380px;
}
.browser-sidebar {
font-size: .75rem;
padding: 26px 14px;
}
.browser-sidebar .overline {
font-size: .6rem;
}
.browser-top {
font-size: .73rem;
padding: 15px 19px;
}
.browser-top .read-only {
font-size: .6rem;
}
.browser-toolbar {
font-size: .71rem;
}
.preview-tile {
padding: 18px;
}
.preview-tile strong {
font-size: .82rem;
}
.preview-tile p {
font-size: .7rem;
}
.preview-bottom {
font-size: .74rem;
padding: 12px;
}
.preview-foot {
font-size: .64rem;
}
.hero-display>figcaption {
font-size: .73rem;
}
.preview-split {
grid-template-columns: 1fr;
}
.preview-split>div:first-child {
max-width: 650px;
}
.workspace-large .browser-layout {
grid-template-columns: 180px minmax(0,1fr);
}
.workspace-large .browser-content {
padding: 27px;
}
.workspace-large .source-row strong {
font-size: .85rem;
}
.workspace-large .source-row p {
font-size: .71rem;
}
.workspace-large .workspace-question strong {
font-size: .94rem;
}
.audience-strip {
align-items: flex-start;
}
.audience-links {
flex-wrap: wrap;
justify-content: flex-start;
gap: 14px 32px;
}
.section {
padding-block: 72px;
}
.section-head {
gap: 24px;
}
.section-head h2 {
font-size: 2.55rem;
}
.step-card {
border: 0;
padding-right: 10px;
}
.faq-grid {
gap: 40px;
grid-template-columns: 1fr 1.3fr;
}
.faq-grid h2 {
font-size: 2.45rem;
}
.cta-band {
padding: 37px;
display: block;
}
.cta-band .button {
margin-top: 27px;
}
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 38px;
}
.footer-brand p {
max-width: 340px;
}
.topic-layout {
grid-template-columns: 1fr;
gap: 35px;
}
.sidebar {
position: static;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.side-panel {
margin: 0;
}
.article-hero-grid {
grid-template-columns: 1.45fr 1fr;
gap: 27px;
}
.article-hero h1 {
font-size: 2.6rem;
}
.article-excerpt {
font-size: .92rem;
}
.article-layout {
grid-template-columns: 1fr;
max-width: 780px;
}
.toc {
position: static;
}
.toc ol {
columns: 2;
column-gap: 30px;
}
.toc li {
break-inside: avoid;
}
.toc .back-link {
display: none;
}
.article-layout {
gap: 35px;
}
.workspace-detail .browser-layout {
grid-template-columns: 175px minmax(0,1fr);
}
.workspace-detail .browser-content {
padding: 28px;
}
.workspace-detail .browser-sidebar {
padding: 25px 13px;
}
.workspace-detail .source-row strong {
font-size: .86rem;
}
.workspace-detail .workspace-heading strong {
font-size: 1.55rem;
}
}
@media (max-width:639px) {
html {
scroll-padding-top: 88px;
}
.wrap,.wrap-narrow {
width: calc(100% - 36px);
}
.header-inner {
min-height: 70px;
gap: 12px;
}
.brand-mark {
width: 31px;
height: 31px;
}
.brand {
gap: 8px;
}
.brand-text {
font-size: 1rem;
}
.brand-dot {
font-size: .81em !important;
}
.mobile-menu>summary {
font-size: .73rem;
padding: 9px 10px;
gap: 7px;
}
.mobile-menu-panel {
padding: 16px 18px;
}
.hero {
padding: 37px 0 29px;
}
.hero h1 {
font-size: clamp(3.1rem,12vw,4.3rem);
line-height: 1.025;
margin: 24px 0 21px;
letter-spacing: -.064em;
}
.hero h1 span {
display: block;
}
.hero h1 span:last-child:before {
content: "";
}
.hero .badge {
font-size: .61rem;
padding: 7px 10px;
}
.hero .lede {
font-size: .95rem;
line-height: 1.85;
}
.hero .button-row {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 25px;
}
.hero .button {
font-size: .82rem;
min-height: 48px;
padding: 13px 15px;
}
.hero .chip-row {
gap: 13px;
font-size: .62rem;
margin-top: 20px;
}
.hero .chip-row svg {
width: 12px;
height: 12px;
}
.hero-note {
font-size: .67rem;
margin-top: 19px;
}
.hero-grid {
gap: 24px;
}
.hero-display {
padding-top: 26px;
}
.float-note {
font-size: .65rem;
padding: 10px 13px;
right: 10px;
top: 0;
}
.hero .browser-sidebar {
display: none;
}
.hero .browser-layout {
grid-template-columns: 1fr;
}
.browser-top {
padding: 12px;
font-size: .61rem;
gap: 10px;
}
.browser-top .read-only {
font-size: .47rem;
padding: 4px 5px;
}
.browser-dots {
gap: 4px;
}
.browser-dots i {
width: 6px;
height: 6px;
}
.browser-toolbar {
font-size: .63rem;
padding: 9px 12px;
}
.browser-content {
padding: 23px 19px;
}
.browser-welcome {
font-size: 1.55rem;
max-width: none;
}
.browser-description {
font-size: .72rem;
}
.preview-mini-grid {
margin-top: 18px;
gap: 10px;
}
.preview-tile {
padding: 14px 12px;
}
.preview-tile strong {
font-size: .72rem;
}
.preview-tile p {
font-size: .64rem;
}
.preview-tile svg {
width: 22px;
height: 22px;
margin-bottom: 11px;
}
.preview-bottom {
font-size: .64rem;
padding: 10px;
margin-top: 10px;
}
.preview-foot {
font-size: .53rem;
padding: 10px 12px;
}
.hero-display>figcaption {
font-size: .62rem;
margin-top: 16px;
}
.audience-strip {
padding-top: 25px;
margin-top: 22px;
display: block;
}
.audience-strip>p {
max-width: none;
font-size: .67rem;
margin-bottom: 13px;
}
.audience-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 17px;
}
.audience-links a {
font-size: .7rem;
gap: 9px;
}
.audience-links svg {
width: 17px;
height: 17px;
}
.section {
padding-block: 54px;
}
.eyebrow {
font-size: .65rem;
margin-bottom: 15px;
letter-spacing: .13em;
}
.section-head {
display: block;
margin-bottom: 29px;
}
.section-head h2,h2 {
font-size: 2rem;
}
.section-head p {
font-size: .92rem;
margin-top: 16px;
}
.section-head .text-link {
margin: 14px 0 0;
}
.feature-card {
padding: 24px;
}
.feature-icon {
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 1.15rem;
}
.feature-card p {
font-size: .88rem;
}
.feature-card .text-link {
font-size: .78rem;
}
.step-card {
padding: 0 0 29px;
border-bottom: 1px solid var(--line);
}
.step-number {
margin-bottom: 16px;
}
.step-card h3 {
font-size: 1.35rem;
}
.step-card p {
font-size: .89rem;
}
.steps {
gap: 27px;
}
.use-card {
padding: 23px;
}
.use-card .use-icon {
margin-bottom: 22px;
}
.use-card h3 {
font-size: 1.13rem;
}
.use-card p {
font-size: .86rem;
}
.preview-split {
gap: 29px;
}
.preview-split .lede {
font-size: .92rem;
}
.workspace-large .browser-sidebar {
display: none;
}
.workspace-large .browser-layout {
grid-template-columns: 1fr;
}
.workspace-large .browser-content {
padding: 22px 17px;
}
.workspace-heading {
gap: 10px;
}
.workspace-heading strong {
font-size: 1.22rem;
}
.workspace-heading .badge {
font-size: .55rem;
padding: 5px 8px;
white-space: nowrap;
}
.workspace-heading p {
font-size: .66rem;
}
.workspace-question {
padding: 13px;
}
.workspace-large .workspace-question strong {
font-size: .85rem;
}
.source-row {
padding: 12px 10px;
gap: 10px;
}
.workspace-large .source-row strong {
font-size: .74rem;
}
.workspace-large .source-row p {
font-size: .63rem;
}
.source-row>svg {
width: 18px;
height: 18px;
}
.workspace-caption {
font-size: .68rem;
line-height: 1.7;
}
.journal-card h3 {
font-size: 1.25rem;
}
.journal-card p {
font-size: .87rem;
}
.journal-card-body {
padding: 24px;
}
.journal-card-meta {
font-size: .72rem;
}
.journal-card .text-link {
font-size: .82rem;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 27px;
}
.faq-grid h2 {
font-size: 2rem;
}
.faq-grid .lede {
font-size: .93rem;
}
.faq-item summary {
font-size: .9rem;
padding: 18px 36px 18px 0;
}
.faq-answer {
font-size: .87rem;
padding-bottom: 20px;
padding-right: 12px;
}
.cta-band {
padding: 28px 23px;
border-radius: 14px;
}
.cta-band h2 {
font-size: 1.8rem;
line-height: 1.15;
}
.cta-band p {
font-size: .87rem;
}
.cta-band .button {
width: 100%;
margin-top: 23px;
font-size: .8rem;
}
.site-footer {
padding-top: 38px;
}
.footer-main {
gap: 30px 23px;
padding-bottom: 29px;
}
.footer-brand {
grid-column: 1/-1;
}
.footer-brand p {
max-width: 340px;
margin: 17px 0 6px;
}
.footer-column h2 {
font-size: .77rem;
}
.footer-column a {
font-size: .75rem;
min-height: 39px;
line-height: 1.6;
}
.footer-bottom {
display: block;
font-size: .66rem;
}
.footer-bottom-links {
gap: 18px;
margin-top: 14px;
}
.page-hero {
padding: 25px 0 40px;
}
.breadcrumbs {
font-size: .66rem;
margin-bottom: 24px;
gap: 6px;
}
.page-hero h1 {
font-size: 2.6rem;
line-height: 1.08;
margin-bottom: 21px;
letter-spacing: -.05em;
}
.page-hero .lede {
font-size: .96rem;
}
.page-hero .badge {
font-size: .65rem;
margin-bottom: 22px;
}
.page-hero .tag-list {
margin-top: 23px;
}
.prose {
font-size: .97rem;
line-height: 1.9;
}
.prose h2 {
font-size: 1.6rem;
margin-top: 35px;
margin-bottom: 19px;
scroll-margin-top: 95px;
}
.prose h3 {
font-size: 1.25rem;
}
.prose p {
margin-bottom: 21px;
}
.note-box {
padding: 20px;
font-size: .85rem;
}
.sidebar {
display: block;
}
.side-panel {
padding: 23px;
margin-bottom: 20px;
}
.article-hero-grid {
display: flex;
flex-direction: column;
gap: 30px;
align-items: stretch;
}
.article-hero h1 {
font-size: 2.4rem;
line-height: 1.12;
letter-spacing: -.045em;
}
.article-hero .badge {
margin-bottom: 0;
}
.article-excerpt {
font-size: .96rem;
}
.article-feature {
width: 100%;
max-width: 400px;
align-self: center;
}
.article-byline {
font-size: .75rem;
}
.byline-meta {
font-size: .65rem;
}
.article-hero .tag-list {
gap: 7px;
}
.article-hero .pill {
font-size: .69rem;
padding: 5px 11px;
}
.article-layout {
gap: 26px;
}
.toc ol {
columns: 1;
}
.toc a {
font-size: .78rem;
padding: 7px 0;
}
.article-content {
font-size: 1rem;
line-height: 1.9;
}
.index-category {
gap: 8px;
margin-top: 24px;
}
.index-category a {
font-size: .7rem;
padding: 9px 12px;
}
.archive-count {
font-size: .77rem;
}
.archive-intro {
padding: 18px;
}
.archive-intro p {
font-size: .87rem;
}
.workspace-detail .browser-content {
padding: 23px 16px;
}
.workspace-detail .workspace-heading strong {
font-size: 1.4rem;
}
.workspace-detail .source-row {
padding: 13px 11px;
}
.workspace-detail .source-row strong {
font-size: .81rem;
}
.workspace-detail .source-row p {
font-size: .69rem;
}
.workspace-detail .workspace-question strong {
font-size: .93rem;
}
.workspace-detail .preview-foot {
font-size: .57rem;
padding: 12px;
}
.workspace-nav .pill {
font-size: .73rem;
padding: 8px 12px;
}
.contact-card {
padding: 27px 22px;
}
.contact-card p {
font-size: .9rem;
}
.contact-address {
font-size: 1.45rem;
letter-spacing: -.045em;
}
.resource-card {
padding: 26px;
}
.resource-card h2 {
font-size: 1.3rem;
}
.resource-card p {
font-size: .9rem;
}
.empty-number {
font-size: 6rem;
}
.empty-page {
padding: 55px 0;
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
*,*:before,*:after {
animation: none !important;
transition: none !important;
}
.button:hover,.feature-card:hover,.journal-card:hover,.use-card:hover {
transform: none;
}
.journal-card .image-link:hover img {
transform: none;
}
}
@media print {
body {
background: white;
color: #172033;
font-size: 11pt;
}
.site-header,.site-footer,.toc,.article-feature,.article-tags,.related-section,.cta-section,.skip-link,.button-row {
display: none !important;
}
.wrap,.wrap-narrow {
width: 100%;
}
.page-hero {
background: none;
padding: 0 0 20px;
border: 0;
}
.section {
padding: 15px 0;
}
.article-layout,.article-hero-grid,.topic-layout {
display: block;
}
.prose,.prose p,p,.article-excerpt {
color: #253246;
}
.prose h2,.prose h3,h1,h2,h3,strong {
color: #0b1427;
}
.prose a {
color: #142b54;
}
.sidebar {
display: none;
}
.article-content {
font-size: 11pt;
line-height: 1.6;
}
.article-content h2 {
break-after: avoid;
}
img {
max-width: 100%;
}
.note-box {
background: white;
border: 1px solid #888;
}
.page-hero .badge {
color: #152c43;
background: white;
border-color: #555;
}
.breadcrumbs {
color: #555;
}
.article-byline {
color: #333;
}
.article-byline a {
color: #333;
}
.byline-meta {
color: #555;
}
.byline-avatar {
background: white;
}
.tag-list {
display: none;
}
}
.hero h1 .lime {
display: inline;
}
.journal-card-body>.journal-card-meta:last-of-type {
margin-top: 18px;
margin-bottom: 0;
}
.hero-grid>*,.preview-split>*,.faq-grid>*,.topic-layout>*,.article-layout>* {
min-width: 0;
}
.text-link {
max-width: 100%;
white-space: normal;
}
.text-link>svg {
flex-shrink: 0;
}
.browser-shell .read-only {
display: none;
}
@media (max-width:359px) {
.mobile-menu>summary span {
display: none;
}
.mobile-menu>summary {
min-width: 44px;
justify-content: center;
}
.brand-text {
font-size: .95rem;
}
.brand-mark {
width: 29px;
height: 29px;
}
.hero .chip-row {
flex-wrap: wrap;
}
.preview-foot {
flex-wrap: wrap;
}
}