@font-face { font-family: "Syne"; src: url("assets/fonts/Syne-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root { --ink: #202323; --muted: #777b76; --paper: #f5f2eb; --panel: #fffdf8; --line: #d8d6ce; --mint: #b9d3bf; --mint-dark: #305d4b; --peach: #f3c3a9; --yellow: #f1da93; --body: "Space Grotesk", sans-serif; --brand: "Syne", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); }
a { color: inherit; text-decoration: none; }
.section-wrap { width: min(100% - 48px, 1120px); margin: 0 auto; }
.site-header { position: absolute; z-index: 3; top: 0; left: 50%; display: grid; width: min(100% - 48px, 1120px); grid-template-columns: 1fr auto 1fr; align-items: center; transform: translateX(-50%); padding: 27px 0; }
.wordmark { font: 800 1.35rem/1 var(--brand); letter-spacing: -.02em; }
.site-nav { display: flex; gap: 28px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.site-nav a:hover, .header-link:hover, .text-link:hover { color: var(--mint-dark); }
.header-link { justify-self: end; color: var(--muted); font-size: .78rem; font-weight: 700; }
.header-link span, .text-link span { margin-left: 5px; }
.hero { display: grid; min-height: 720px; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); align-items: center; gap: 80px; padding-top: 110px; padding-bottom: 72px; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--brand); letter-spacing: -.04em; }
h1 { max-width: 650px; margin-bottom: 25px; font-size: clamp(3.8rem, 8vw, 7.7rem); line-height: .88; }
h1 em, h2 em { color: var(--mint-dark); font-style: normal; }
.hero-lede { max-width: 465px; margin-bottom: 30px; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-width: 166px; padding: 13px 16px; border: 1px solid var(--ink); font-size: .79rem; font-weight: 700; transition: transform .2s ease, background-color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--mint-dark); }
.text-link { color: var(--muted); font-size: .8rem; font-weight: 700; }
.hero-visual { position: relative; min-height: 430px; border: 1px solid var(--ink); background: var(--panel); overflow: hidden; }
.hero-visual::before { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(32,35,35,.045) 45px), repeating-linear-gradient(0deg, transparent 0 44px, rgba(32,35,35,.045) 45px); content: ""; }
.visual-label { position: absolute; top: 18px; left: 20px; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.visual-folder { position: absolute; top: 145px; left: 50%; display: grid; width: 190px; gap: 4px; padding: 18px; background: var(--yellow); transform: translateX(-50%); box-shadow: 8px 8px 0 var(--ink); }
.visual-folder img { width: 35px; height: 35px; margin-bottom: 20px; }
.visual-folder span { font: 800 1.05rem/1 var(--brand); }
.visual-folder small { color: #5b5946; font-size: .68rem; }
.visual-node { position: absolute; bottom: 24px; display: grid; gap: 3px; color: var(--muted); font-size: .68rem; }
.visual-node strong { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--ink); color: var(--ink); font-size: 1.3rem; }
.node-local { left: 22px; }.node-cloud { right: 22px; text-align: right; justify-items: end; }
.visual-path { position: absolute; top: 228px; display: flex; align-items: center; width: 82px; color: var(--muted); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.visual-path i { display: block; width: 45px; border-top: 1px solid var(--ink); }.path-one { left: 23px; gap: 7px; }.path-two { right: 23px; flex-direction: row-reverse; gap: 7px; }
.visual-note { position: absolute; top: 44px; right: 20px; color: var(--muted); font-size: .68rem; line-height: 1.25; text-align: right; }
.statement { background: var(--mint); }
.statement-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding: 108px 0 116px; }
.statement h2, .section-heading h2, .closing h2 { max-width: 720px; margin-bottom: 18px; font-size: clamp(2.3rem, 5vw, 4.9rem); line-height: .95; }
.statement p:not(.eyebrow) { max-width: 580px; margin: 0; color: #456052; font-size: 1.12rem; }
.storage { padding-top: 115px; padding-bottom: 130px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 56px; }
.section-heading h2 { margin-bottom: 0; }
.section-index { color: var(--muted); font-size: .72rem; font-weight: 700; }
.storage-grid { border-top: 1px solid var(--ink); }
.storage-item { display: grid; grid-template-columns: 68px minmax(0, 1fr) 40px; align-items: center; gap: 18px; min-height: 130px; border-bottom: 1px solid var(--line); transition: padding .2s ease, background-color .2s ease; }
.storage-item:hover, .storage-item.active { padding-right: 18px; padding-left: 18px; background: var(--panel); }
.storage-number { color: var(--muted); font-size: .7rem; font-weight: 700; }
.storage-item h3 { margin-bottom: 5px; font: 800 1.45rem/1 var(--brand); }
.storage-item p { max-width: 570px; margin: 0; color: var(--muted); font-size: .9rem; }
.storage-mark { color: var(--mint-dark); font-size: 1.55rem; text-align: right; }
.roadmap-band { background: var(--ink); color: var(--paper); padding: 112px 0 120px; }
.roadmap-band .eyebrow, .roadmap-intro { color: #a9b0aa; }.roadmap-heading { align-items: start; margin-bottom: 68px; }.roadmap-intro { max-width: 310px; margin: 8px 0 0; font-size: .93rem; }
.roadmap-band h2 em { color: var(--mint); }
.roadmap-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.roadmap-step { position: relative; min-height: 230px; border-top: 1px solid #646b66; padding-top: 15px; }
.roadmap-step.current { border-top-color: var(--mint); }.step-top { display: flex; justify-content: space-between; gap: 8px; color: #a9b0aa; font-size: .68rem; font-weight: 700; text-transform: uppercase; }.step-status { color: var(--mint); }
.roadmap-step h3 { margin: 45px 0 12px; font: 800 1.45rem/1 var(--brand); }.roadmap-step p { max-width: 220px; margin: 0; color: #a9b0aa; font-size: .85rem; }
.step-line { position: absolute; right: 0; bottom: 0; left: 0; border-bottom: 1px solid #646b66; }.step-line i { display: block; width: 28px; border-bottom: 3px solid var(--mint); }.roadmap-step:not(.current) .step-line i { border-color: #646b66; }
.newsletter-band { background: var(--peach); padding: 105px 0 112px; }.newsletter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); align-items: end; gap: 88px; }.newsletter-grid h2 { max-width: 600px; margin-bottom: 18px; font: 800 clamp(2.3rem, 5vw, 4.9rem)/.95 var(--brand); letter-spacing: -.04em; }.newsletter-grid h2 em { color: #9b5134; font-style: normal; }.newsletter-grid > div p:not(.eyebrow) { max-width: 490px; margin: 0; color: #80523f; font-size: 1.05rem; }.newsletter-form { display: grid; gap: 10px; }.newsletter-form > label { color: #724735; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.newsletter-input-row { display: flex; gap: 10px; }.newsletter-input-row input { min-width: 0; flex: 1; border: 1px solid var(--ink); border-radius: 0; background: var(--panel); color: var(--ink); font: 400 .92rem var(--body); padding: 13px 15px; }.newsletter-input-row input:focus { outline: 3px solid rgba(48,93,75,.35); outline-offset: 2px; }.newsletter-input-row .button { min-width: 142px; }.newsletter-consent { margin: 3px 0 0; color: #80523f; font-size: .72rem; }.newsletter-consent a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.legal-page { max-width: 820px; padding-top: 170px; padding-bottom: 112px; }.legal-page h1 { margin-bottom: 26px; font-size: clamp(3.2rem, 7vw, 6rem); }.legal-page h2 { margin: 56px 0 14px; font-size: clamp(1.7rem, 4vw, 2.6rem); }.legal-page p, .legal-page li { color: var(--muted); }.legal-page p { max-width: 720px; }.legal-page ul { max-width: 680px; padding-left: 20px; }.legal-page li + li { margin-top: 8px; }.legal-lede { color: var(--ink) !important; font-size: 1.18rem; }.footer-links { display: inline-flex; gap: 16px; }.footer-links a { font-size: .72rem; }
.closing { padding-top: 126px; padding-bottom: 130px; }.closing h2 { margin-bottom: 34px; }.site-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 21px; padding-bottom: 28px; color: var(--muted); font-size: .72rem; font-weight: 700; }.footer-credit { display: inline-flex; align-items: baseline; gap: 5px; }.footer-credit strong { color: var(--ink); font: 800 .64rem/1 var(--brand); letter-spacing: .08em; }.site-footer a { color: var(--ink); font-size: 1rem; }
@media (max-width: 760px) { .section-wrap, .site-header { width: min(100% - 32px, 1120px); }.site-header { grid-template-columns: 1fr auto; }.site-nav { display: none; }.hero { min-height: auto; grid-template-columns: 1fr; gap: 55px; padding-top: 145px; }.hero-visual { min-height: 365px; }.statement-grid, .newsletter-grid { grid-template-columns: 1fr; gap: 32px; padding: 74px 0 82px; }.storage { padding-top: 78px; padding-bottom: 82px; }.section-heading { align-items: start; flex-direction: column; margin-bottom: 36px; }.roadmap-band { padding: 78px 0 82px; }.roadmap-heading { gap: 25px; margin-bottom: 45px; }.roadmap-list { grid-template-columns: 1fr 1fr; row-gap: 42px; }.newsletter-band { padding: 78px 0 82px; }.closing { padding-top: 82px; padding-bottom: 88px; }.footer-links { display: flex; gap: 12px; } }
@media (max-width: 470px) { h1 { font-size: 3.75rem; }.hero-actions { align-items: start; flex-direction: column; gap: 18px; }.hero-visual { min-height: 330px; }.visual-folder { top: 115px; }.visual-path { top: 196px; }.roadmap-list { grid-template-columns: 1fr; }.roadmap-step { min-height: 190px; }.site-footer { gap: 8px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button, .storage-item { transition: none; } }