:root {
--ink: #0a1020;
--ink-soft: #111a2f;
--ink-raised: #18243e;
--paper: #eee2cf;
--paper-bright: #fbf3e6;
--text: #f3eadb;
--text-muted: #b9b2aa;
--text-dark: #111729;
--text-dark-muted: #5a6375;
--accent: #f06a3d;
--accent-hover: #ff835f;
--safe: #c7f9cc;
--border: rgba(247, 243, 234, 0.14);
--border-strong: rgba(247, 243, 234, 0.28);
--border-dark: rgba(17, 23, 41, 0.16);
--ink-rgb: 10, 16, 32;
--paper-rgb: 238, 226, 207;
--accent-rgb: 240, 106, 61;
--safe-rgb: 199, 249, 204;
--shadow-rgb: 2, 6, 15;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--radius-sm: 10px;
--radius-md: 20px;
--radius-lg: 30px;
--section-space: clamp(5rem, 10vw, 8.25rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
margin: 0;
overflow-x: hidden;
background: var(--ink);
color: var(--text);
font-family: "Manrope", sans-serif;
font-size: 1rem;
line-height: 1.65;
text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--text-dark); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.skip-link {
position: fixed;
left: 1rem;
top: 1rem;
z-index: 1000;
padding: .75rem 1rem;
border-radius: var(--radius-sm);
background: var(--paper-bright);
color: var(--text-dark);
transform: translateY(-150%);
transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 4rem), 76.25rem); margin-inline: auto; }
.section { padding-block: var(--section-space); position: relative; }
.section--paper { background: var(--paper); color: var(--text-dark); }
.nav {
position: fixed;
inset: 0 0 auto;
z-index: 100;
border-bottom: 1px solid transparent;
transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.nav.is-scrolled {
background: rgba(var(--ink-rgb), .88);
border-bottom-color: var(--border);
box-shadow: 0 10px 35px rgba(var(--shadow-rgb), .22);
backdrop-filter: blur(14px);
}
.nav__inner { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand {
display: inline-flex;
align-items: center;
gap: .7rem;
min-height: 2.75rem;
color: var(--text);
font: 500 .78rem/1 "DM Mono", monospace;
letter-spacing: .13em;
text-decoration: none;
}
.brand__mark { width: 1rem; height: 1rem; border: 2px solid var(--accent); transform: rotate(45deg); }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
min-height: 2.75rem;
display: inline-flex;
align-items: center;
color: var(--text-muted);
font-size: .88rem;
text-decoration: none;
transition: color 160ms ease;
}
.nav__links a:hover { color: var(--text); }
.nav a:focus-visible { outline: 2px solid var(--safe); outline-offset: 4px; }
.button {
min-height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .82rem 1.16rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--accent);
color: var(--text-dark);
font-weight: 800;
line-height: 1;
text-align: center;
text-decoration: none;
box-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
transform: translate3d(0, 0, 0);
transition: transform 180ms var(--ease-out), background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.button:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(var(--accent-rgb), .22); }
.button:active { transform: translateY(0) scale(.98); box-shadow: none; }
.button:focus-visible { outline: 3px solid var(--safe); outline-offset: 4px; }
.button--small { min-height: 2.75rem; padding: .72rem 1rem; font-size: .84rem; }
.button--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.button--secondary:hover { background: var(--ink-raised); border-color: var(--accent); box-shadow: none; }
.eyebrow {
margin: 0 0 1.25rem;
color: var(--text-muted);
font: 500 .72rem/1.45 "DM Mono", monospace;
letter-spacing: .12em;
text-transform: uppercase;
}
.eyebrow::before { content: ""; display: inline-block; width: 1.8rem; height: 2px; margin: 0 .65rem .22rem 0; background: var(--accent); }
.eyebrow--dark { color: var(--text-dark-muted); }
.hero {
min-height: min(62.5rem, 100svh);
position: relative;
display: grid;
align-items: center;
padding: 8.5rem 0 5.5rem;
overflow: hidden;
isolation: isolate;
background: var(--ink);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .15;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
pointer-events: none;
}
.hero__glow {
position: absolute;
width: 45rem;
height: 45rem;
right: -12rem;
top: 2rem;
z-index: -2;
background: radial-gradient(circle, rgba(var(--accent-rgb), .17), rgba(var(--accent-rgb), 0) 68%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(23rem, .72fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.hero__copy { max-width: 46rem; position: relative; z-index: 2; }
.hero__eyebrow { opacity: 0; animation: fadeUp 620ms var(--ease-out) 100ms forwards; }
.hero__title { margin: 0; font-size: clamp(3.2rem, 5vw, 5.5rem); font-weight: 800; line-height: .92; letter-spacing: -.06em; }
.hero-word { display: block; overflow: hidden; padding-right: .08em; padding-bottom: .08em; }
.hero-word > span { display: inline-block; transform: translateY(112%); animation: wordIn 820ms var(--ease-out) forwards; }
.hero-word:nth-child(2) > span { animation-delay: 90ms; }
.hero-word:nth-child(3) > span { animation-delay: 180ms; }
.hero-word--accent { color: var(--accent); }
.hero__lede { max-width: 39rem; margin: 2rem 0 0; color: var(--text-muted); font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.65; opacity: 0; animation: fadeUp 720ms var(--ease-out) 360ms forwards; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; opacity: 0; animation: fadeUp 720ms var(--ease-out) 450ms forwards; }
.trust-line { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; margin-top: 1.6rem; color: var(--text-muted); font-size: .83rem; opacity: 0; animation: fadeUp 720ms var(--ease-out) 520ms forwards; }
.trust-line span { display: inline-flex; align-items: center; gap: .5rem; }
.trust-line i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 .22rem rgba(var(--safe-rgb), .1); }
.hero-visual {
--rx: -5deg;
--ry: 5deg;
min-height: 34rem;
position: relative;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--ink-soft);
box-shadow: 0 2rem 6rem rgba(var(--shadow-rgb), .44);
transform: perspective(75rem) rotateX(var(--rx)) rotateY(var(--ry));
transition: transform 260ms var(--ease-out), border-color 260ms ease;
}
.hero-visual:hover { border-color: var(--border-strong); }
.hero-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), .04); pointer-events: none; }
.hero-visual__video { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 2; object-fit: cover; opacity: 0; transition: opacity 600ms ease; }
.hero-visual.video-ready .hero-visual__video { opacity: .88; }
.hero-visual.video-ready .dimensional-scene { opacity: .2; mix-blend-mode: screen; }
.dimensional-scene {
min-height: 34rem;
position: absolute;
inset: 0;
overflow: hidden;
background:
radial-gradient(circle at 68% 32%, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), 0) 31%),
linear-gradient(145deg, var(--ink-soft), var(--ink));
transition: opacity 500ms ease;
}
.dimensional-scene::before { content: ""; position: absolute; inset: -25%; background: repeating-linear-gradient(90deg, transparent 0 3.8rem, var(--border) 3.85rem 3.9rem); transform: perspective(32rem) rotateX(65deg) translateY(11rem); opacity: .35; }
.plane { position: absolute; width: 62%; min-height: 8.2rem; padding: 1.2rem; border: 1px solid var(--border-strong); border-radius: 1rem; background: rgba(var(--paper-rgb), .065); backdrop-filter: blur(12px); box-shadow: 0 1.5rem 3rem rgba(var(--shadow-rgb), .24); }
.plane--back { right: 3%; top: 14%; min-height: 15rem; opacity: .45; transform: translateZ(-3rem) rotate(-5deg); animation: planeDrift 8s ease-in-out infinite; }
.plane--mid { left: 8%; top: 31%; transform: rotate(-4deg); animation: planeFloat 8s ease-in-out infinite; }
.plane--front { right: 8%; bottom: 17%; z-index: 2; transform: rotate(3deg); animation: planeFloat 8s ease-in-out -3.6s infinite; }
.scene-label, .scene-state { display: block; font-family: "DM Mono", monospace; }
.scene-label { color: var(--text); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.scene-state { width: fit-content; margin-top: 2.6rem; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: .64rem; }
.scene-state--safe { color: var(--safe); border-color: rgba(var(--safe-rgb), .28); }
.rail { position: absolute; z-index: 1; height: 2px; width: 72%; left: 13%; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent), rgba(var(--accent-rgb), 0)); box-shadow: 0 0 1.2rem rgba(var(--accent-rgb), .38); transform: rotate(-8deg); }
.rail--one { top: 42%; animation: railMove 6s ease-in-out infinite; }
.rail--two { top: 61%; animation: railMove 6s ease-in-out -2s infinite; }
.orb { position: absolute; width: 8rem; height: 8rem; right: 18%; top: 25%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--paper-bright), var(--accent) 18%, rgba(var(--accent-rgb), 0) 70%); filter: blur(.15rem); opacity: .72; animation: orbPulse 5s ease-in-out infinite; }
.visual-caption { position: absolute; z-index: 4; inset: auto 1.2rem 1.15rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); font: 400 .64rem/1.4 "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
.section-heading { max-width: 50rem; }
.section-heading h2, .final-cta h2 { margin: 0; font-size: clamp(2.25rem, 4.4vw, 4.65rem); line-height: .98; letter-spacing: -.05em; }
.section-heading > p:last-child:not(.eyebrow) { max-width: 39rem; margin: 1.5rem 0 0; color: var(--text-dark-muted); font-size: 1.08rem; }
.section-heading--split { max-width: none; display: grid; grid-template-columns: 1.15fr .55fr; gap: 4rem; align-items: end; }
.section-heading--split > p { margin: 0 0 .45rem; color: var(--text-muted); }
.section-heading--narrow { max-width: 42rem; }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 4.5rem; border-top: 1px solid var(--border-dark); }
.outcome { min-height: 18rem; padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--border-dark); }
.outcome + .outcome { padding-left: 2rem; }
.outcome:last-child { border-right: 0; }
.outcome__number, .offer-row__number { color: var(--accent); font: 500 .72rem/1 "DM Mono", monospace; }
.outcome h3 { margin: 3.5rem 0 1rem; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.025em; }
.outcome p { max-width: 23rem; margin: 0; color: var(--text-dark-muted); }
.offer-list { margin-top: 4.5rem; border-top: 1px solid var(--border); }
.offer-row {
position: relative;
display: grid;
grid-template-columns: 4rem minmax(12rem, .75fr) 1fr 1fr;
gap: clamp(1rem, 3vw, 3rem);
align-items: start;
padding: 2rem 0;
border-bottom: 1px solid var(--border);
transition: transform 220ms var(--ease-out), background 220ms ease;
}
.offer-row::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--accent); transition: width 420ms var(--ease-out); }
.offer-row:hover { transform: translateX(.35rem); }
.offer-row:hover::before { width: 100%; }
.offer-row h3 { margin: -.25rem 0 0; font-size: 1.35rem; line-height: 1.2; }
.offer-row p { margin: -.2rem 0 0; color: var(--text-muted); }
.offer-row strong { color: var(--text); font-weight: 700; }
.expectation-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.expectation { border: 1px solid var(--border-dark); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-bright); box-shadow: 0 1.5rem 4rem rgba(var(--ink-rgb), .08); }
.expectation__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border-dark); }
.expectation__tabs button { min-height: 3.6rem; border: 0; border-right: 1px solid var(--border-dark); background: transparent; color: var(--text-dark-muted); font-weight: 700; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.expectation__tabs button:last-child { border-right: 0; }
.expectation__tabs button:hover { background: rgba(var(--accent-rgb), .08); color: var(--text-dark); }
.expectation__tabs button[aria-selected="true"] { background: var(--ink); color: var(--text); }
.expectation__tabs button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--accent); outline-offset: -3px; }
.expectation__panel { min-height: 25rem; padding: clamp(2rem, 5vw, 4rem); outline: none; }
.expectation__panel.is-changing { animation: panelSwap 240ms var(--ease-out); }
.expectation__step { color: var(--accent); font: 500 .72rem/1 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.expectation__panel h3 { max-width: 31rem; margin: 2.5rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -.035em; }
.expectation__panel p { max-width: 34rem; margin: 0; color: var(--text-dark-muted); }
.expectation__panel ul { display: grid; gap: .65rem; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--border-dark); list-style: none; }
.expectation__panel li { position: relative; padding-left: 1.4rem; color: var(--text-dark); }
.expectation__panel li::before { content: ""; position: absolute; left: 0; top: .68rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.pilot-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 4.5rem 0 0; padding: 0; background: var(--border); list-style: none; }
.pilot-steps li { min-height: 21rem; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; background: var(--ink); }
.pilot-steps li > span { color: var(--accent); font: 500 .72rem/1 "DM Mono", monospace; }
.pilot-steps h3 { margin: 0 0 .8rem; font-size: 1.35rem; }
.pilot-steps p { margin: 0; color: var(--text-muted); }
.safety { margin-top: 1.25rem; display: grid; grid-template-columns: .55fr 1.45fr; gap: 3rem; align-items: center; padding: clamp(1.6rem, 4vw, 3.2rem); border: 1px solid rgba(var(--safe-rgb), .26); border-radius: var(--radius-md); background: linear-gradient(105deg, rgba(var(--safe-rgb), .1), rgba(var(--safe-rgb), .025)); }
.safety__status { display: flex; align-items: center; gap: .75rem; color: var(--safe); font: 500 .72rem/1.4 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.safety__status i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 .35rem rgba(var(--safe-rgb), .1); }
.safety p { margin: 0; color: var(--text); font-size: clamp(1.05rem, 2.1vw, 1.45rem); font-weight: 600; line-height: 1.45; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 8vw, 7rem); }
.faq { border-top: 1px solid var(--border-dark); }
.faq details { border-bottom: 1px solid var(--border-dark); }
.faq summary { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text-dark); font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; color: var(--accent); font: 400 1.7rem/1 "DM Mono", monospace; transition: transform 180ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.faq details p { max-width: 42rem; margin: -.25rem 0 1.6rem; color: var(--text-dark-muted); }
.final-cta { overflow: hidden; }
.final-cta::before { content: ""; position: absolute; width: 44rem; height: 44rem; right: -16rem; bottom: -28rem; background: radial-gradient(circle, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), 0) 70%); }
.final-cta__inner { position: relative; }
.final-cta h2 { max-width: 58rem; }
.final-cta__inner > p:not(.eyebrow) { max-width: 41rem; margin: 1.6rem 0 0; color: var(--text-muted); font-size: 1.1rem; }
.final-cta__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.2rem; }
.final-cta__actions span { max-width: 25rem; color: var(--text-muted); font-size: .85rem; }
.footer { border-top: 1px solid var(--border); background: var(--ink); }
.footer__inner { min-height: 6.5rem; display: grid; grid-template-columns: .55fr 1fr auto; gap: 2rem; align-items: center; color: var(--text-muted); font: 400 .72rem/1.5 "DM Mono", monospace; }
.footer__inner > span:first-child { color: var(--text); letter-spacing: .12em; }
.footer a { display: inline-flex; min-height: 2.75rem; align-items: center; text-underline-offset: .25rem; }
.footer a:hover { color: var(--accent); }
.footer a:focus-visible { outline: 2px solid var(--safe); outline-offset: 4px; }
[data-reveal] { opacity: 0; transform: translateY(1.8rem); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes wordIn { to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes planeFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.75rem; } }
@keyframes planeDrift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -1rem .6rem; rotate: 1deg; } }
@keyframes railMove { 0%, 100% { opacity: .3; translate: -8% 0; } 50% { opacity: 1; translate: 8% 0; } }
@keyframes orbPulse { 0%, 100% { scale: .9; opacity: .5; } 50% { scale: 1.08; opacity: .82; } }
@keyframes panelSwap { from { opacity: .35; transform: translateY(.35rem); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 64rem) {
.container { width: min(calc(100% - 3rem), 51rem); }
.nav__links { display: none; }
.hero { min-height: auto; padding-top: 9rem; }
.hero__grid { grid-template-columns: 1fr; }
.hero__copy { max-width: 48rem; }
.hero-visual { width: min(100%, 40rem); min-height: 31rem; margin-inline: auto; transform: none; }
.dimensional-scene { min-height: 31rem; }
.section-heading--split, .expectation-layout, .faq-layout { grid-template-columns: 1fr; gap: 3rem; }
.outcomes { grid-template-columns: 1fr; }
.outcome, .outcome + .outcome { min-height: auto; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--border-dark); }
.outcome h3 { margin-top: 1.6rem; }
.offer-row { grid-template-columns: 3rem .75fr 1fr; }
.offer-row p:last-child { grid-column: 2 / -1; }
.pilot-steps { grid-template-columns: 1fr; }
.pilot-steps li { min-height: 15rem; }
}
@media (max-width: 40rem) {
.container { width: min(calc(100% - 2.25rem), 100%); }
.nav__inner { min-height: 4.25rem; gap: .75rem; }
.brand { font-size: .67rem; }
.brand__mark { width: .8rem; height: .8rem; }
.nav .button { min-height: 2.75rem; padding-inline: .75rem; font-size: .73rem; }
.hero { padding-top: 7.3rem; padding-bottom: 4rem; }
.hero__title { font-size: clamp(3rem, 15.5vw, 4.35rem); }
.hero__actions { display: grid; }
.hero__actions .button { width: 100%; }
.trust-line { display: grid; }
.hero-visual, .dimensional-scene { min-height: 26rem; }
.hero-visual { border-radius: var(--radius-md); }
.plane { width: 72%; }
.visual-caption { font-size: .56rem; }
.section-heading h2, .final-cta h2 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
.offer-row { grid-template-columns: 2.2rem 1fr; gap: .75rem 1rem; padding: 1.6rem 0; }
.offer-row h3 { margin: -.2rem 0 .4rem; }
.offer-row p, .offer-row p:last-child { grid-column: 2; margin: 0; }
.offer-row:hover { transform: none; }
.expectation__tabs { grid-template-columns: 1fr; }
.expectation__tabs button { border-right: 0; border-bottom: 1px solid var(--border-dark); }
.expectation__tabs button:last-child { border-bottom: 0; }
.expectation__panel { min-height: 28rem; padding: 2rem 1.4rem; }
.pilot-steps li { min-height: 14rem; padding: 1.6rem; }
.safety { grid-template-columns: 1fr; gap: 1.3rem; }
.final-cta__actions { display: grid; align-items: start; }
.final-cta__actions .button { width: 100%; }
.footer__inner { grid-template-columns: 1fr; gap: .45rem; padding-block: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
[data-reveal], .hero__eyebrow, .hero__lede, .hero__actions, .trust-line { opacity: 1 !important; transform: none !important; }
.hero-word > span { transform: none !important; }
.hero-visual { transform: none !important; }
}
:root {
--section-space: clamp(4.5rem, 8vw, 7rem);
--surface-card: #111813;
--text-muted: #b0bcb4;
--text-dark-muted: #b0bcb4;
--polish-radius: 16px;
}
.nav.is-scrolled { background: rgba(var(--ink-rgb), .97); backdrop-filter: none; }
.button { padding-inline: 1.4rem; font-weight: 700; }
.button--secondary { border-color: var(--border-strong); background: transparent; }
.button:focus-visible, .expectation__tabs button:focus-visible {
outline: 2px solid var(--text); outline-offset: 4px;
box-shadow: inset 0 0 0 2px var(--ink);
}
.growth-stage:has(.laptop-sequence) .growth-beat h1,
.growth-stage:has(.laptop-sequence) .growth-beat h2 {
font-size: clamp(3rem, 4.6vw, 4.8rem);
line-height: 1.04; letter-spacing: -.055em; text-wrap: balance;
}
.growth-description { max-width: 28rem; line-height: 1.65; }
.hero { padding-block: var(--section-space); border-top: 1px solid var(--border); }
.hero__title { font-size: clamp(2.7rem, 4.5vw, 4.5rem); line-height: 1.08; }
.hero__lede { max-width: 62ch; line-height: 1.75; }
.section-heading h2, .final-cta h2 { line-height: 1.08; text-wrap: balance; letter-spacing: -.045em; }
.section-heading > p:not(.eyebrow) { max-width: 52ch; }
.section-heading--split { align-items: end; }
.outcomes { margin-top: 3rem; }
.outcome { min-height: auto; padding-block: 2rem 1rem; }
.outcome h3 { margin-top: 2rem; line-height: 1.3; }
.outcome p { max-width: 34ch; }
.offer-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem; margin-top: 3rem; border: 0;
}
.offer-row {
grid-template-columns: 2rem minmax(0, 1fr); gap: .8rem 1rem;
padding: clamp(1.5rem, 3vw, 2rem); background: var(--surface-card);
border: 1px solid var(--border); border-radius: var(--polish-radius);
transition: border-color 180ms ease;
}
.offer-row:hover { transform: none; border-color: var(--border-strong); }
.offer-row::before { display: none; }
.offer-row__number {
display: grid; place-items: center; width: 2rem; height: 2rem;
border: 1px solid var(--border-strong); border-radius: 8px;
}
.offer-row h3 { align-self: center; margin: 0; font-size: 1.3rem; line-height: 1.3; }
.offer-row p, .offer-row p:last-of-type { grid-column: 2; margin: 0; }
.offer-row p:last-of-type { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.expectation { border-radius: var(--polish-radius); background: var(--ink); }
.expectation__tabs { padding: .5rem; gap: .5rem; border-bottom: 1px solid var(--border); }
.expectation__tabs button { min-height: 48px; border: 0; border-radius: 9px; }
.expectation__tabs button:last-child { border: 0; }
.expectation__panel { padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 25rem; }
.expectation__panel h3 { margin-top: 1.5rem; text-wrap: balance; line-height: 1.15; }
.expectation__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; }
.pilot-steps { margin-top: 3rem; background: transparent; gap: 1rem; }
.pilot-steps li { min-height: 18rem; border: 1px solid var(--border); border-radius: var(--polish-radius); }
.pilot-steps h3 { line-height: 1.35; }
.safety { border-radius: var(--polish-radius); }
.faq summary { padding-block: 1.2rem; line-height: 1.5; }
.faq details[open] { padding-bottom: .25rem; }
.final-cta__actions { flex-wrap: wrap; }
.footer a { overflow-wrap: anywhere; }
@media (max-width: 64rem) {
.outcome + .outcome { padding-block: 1.75rem; }
.pilot-steps li { min-height: 13rem; gap: 2rem; }
}
@media (max-width: 700px) {
.growth-stage:has(.laptop-sequence) .growth-beat h1,
.growth-stage:has(.laptop-sequence) .growth-beat h2 {
font-size: clamp(2.4rem, 10.5vw, 3.7rem); line-height: 1.05;
}
.growth-description { font-size: 1rem; max-width: 34ch; margin-top: 1rem; }
.growth-beat .button { margin-top: 1rem; }
.offer-list { grid-template-columns: 1fr; margin-top: 2rem; }
.offer-row { gap: .8rem; padding: 1.5rem 1.25rem; }
.offer-row h3 { font-size: 1.2rem; }
.expectation__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.expectation__tabs button { padding: .7rem .25rem; font-size: .9rem; border: 0; }
.expectation__panel { min-height: 25rem; padding: 1.5rem; }
.section-heading--split, .expectation-layout, .faq-layout { gap: 2rem; }
.trust-line { gap: .65rem; }
.safety { gap: 1rem; padding: 1.5rem; }
.footer__inner { padding-block: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.offer-row { transition: none; }
}
.offer-row h3 a { color: inherit; text-decoration: none; }
.offer-row h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .25rem; }
.offer-row h3 a:focus-visible { outline: 2px solid var(--safe); outline-offset: 4px; }
.nav--solid { position: sticky; top: 0; background: var(--ink); border-bottom-color: var(--border); }
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--border); }
.page-hero h1 { max-width: 20ch; margin: 0; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.page-lead { max-width: 46rem; margin: 1.5rem 0 0; color: var(--text-muted); font-size: 1.15rem; }
.breadcrumb { margin-bottom: 1.75rem; font: 400 .74rem/1.5 "DM Mono", monospace; letter-spacing: .04em; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumb a { text-underline-offset: .25rem; }
.breadcrumb a:hover { color: var(--accent); }
.prose { max-width: 46rem; }
.prose-block + .prose-block { margin-top: clamp(2rem, 4vw, 3rem); }
.prose h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -.03em; }
.prose h3 { margin: 1.75rem 0 .4rem; font-size: 1.15rem; }
.prose p, .prose li { color: var(--text); font-size: 1.05rem; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .55rem; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--safe); text-underline-offset: .25rem; }
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--text); }
.section--paper .prose p, .section--paper .prose li { color: var(--text-dark); }
.section--paper .prose a { color: var(--text-dark); }
.section--paper .prose h2 { color: var(--text-dark); }
.related h2 { margin: 0 0 1.5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; color: var(--text-dark); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.related-grid--wide { grid-template-columns: 1fr; }
.related-card { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.4rem; border: 1px solid var(--border-dark); border-radius: var(--polish-radius, 16px); background: var(--paper-bright); color: var(--text-dark); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease; }
.related-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.related-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.related-card span { color: var(--accent); font: 500 .7rem/1 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.related-card b { font-size: 1.15rem; line-height: 1.3; }
.related-card i { font-style: normal; color: var(--text-dark-muted); }
.prose .related-card { background: var(--surface-card, #111813); border-color: var(--border); color: var(--text); }
.prose .related-card i { color: var(--text-muted); }
.page .faq { max-width: 46rem; }
.page .faq details p { color: var(--text-dark); }
.page .faq summary { color: var(--text-dark); }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: 3rem 1.5rem; border-bottom: 1px solid var(--border); }
.footer-nav h2 { margin: 0 0 .8rem; color: var(--text); font: 500 .72rem/1.4 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav a { min-height: 2.75rem; color: var(--text-muted); font-size: .92rem; text-decoration: none; }
.footer-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .25rem; }
@media (max-width: 720px) {
.footer-nav { grid-template-columns: 1fr; }
.container { width: min(calc(100% - 2.5rem), 76.25rem); }
.footer__inner { grid-template-columns: 1fr; padding-block: 1.5rem; }
}