/* Kyvex Development: kyvexdev.com. Brand tokens from Branding/00-brand-guide. */
@font-face { font-family: 'Sora'; font-weight: 100 900; font-display: swap; src: url('assets/fonts/Sora.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('assets/fonts/JetBrainsMono-700.woff2') format('woff2'); }

:root {
  --bg: #000000; --inset: #0A0A0A; --panel: #111111; --raised: #181818;
  --divider: #1C1C1C; --border: #262626; --strong: #333333;
  --text: #EDEDED; --muted: #8F8F8F; --accent: #22D3EE;
  --success: #4ADE80; --warning: #FBBF24; --info: #60A5FA; --danger: #F87171;
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* A dot grid for page headers and bands: plain dots, no gradients. */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2' height='2' fill='%231C1C1C'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 'Sora', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
img { max-width: 100%; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; letter-spacing: .14em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.svg-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------------------------------------------------------------------------------------------- */
/* Top bar */

.nav { position: sticky; top: 0; z-index: 20; background: rgba(0, 0, 0, .85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--divider); }
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; justify-self: start; }
.brand svg { width: 20px; height: 22px; }
.brand-name .mono { font-size: 10px; color: var(--muted); margin-left: 6px; font-weight: 700; }
.links { display: flex; align-items: stretch; height: 64px; font-size: 14px; color: var(--muted); }
.links a { position: relative; display: flex; align-items: center; padding: 0 16px; transition: color .2s; }
.links a:hover, .links a[aria-current] { color: var(--text); }
.links a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--strong); transform: scaleX(0); transition: transform .25s var(--ease); }
.links a:hover::after { transform: scaleX(1); }
.links a[aria-current]::after { background: var(--accent); transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.nav-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); transition: color .15s, border-color .15s, background .15s; }
.nav-icon:hover { color: var(--text); border-color: var(--strong); background: var(--panel); }
.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.nav-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }

/* Account slot in the top bar (signed in) */
.acct { position: relative; }
.acct-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; border: 1px solid var(--strong); border-radius: 999px; background: var(--panel); color: var(--text); font: 600 14px 'Sora', sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: var(--raised); border-color: #444; }
.acct-face { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--raised); border: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.acct-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-chev { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: square; transition: transform .2s; }
.acct-btn[aria-expanded="true"] .acct-chev { transform: rotate(180deg); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; display: grid; gap: 2px; min-width: 230px; padding: 6px; background: var(--panel); border: 1px solid var(--strong); border-radius: 12px; animation: fade .15s both; }
.acct-menu[hidden] { display: none; }
.acct-head { display: grid; gap: 2px; padding: 10px 12px 12px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
.acct-head strong { font-size: 14px; }
.acct-head .mono { font-size: 10px; color: var(--muted); }
.acct-menu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.acct-menu a:hover, .acct-menu a[aria-current] { color: var(--text); background: var(--raised); }
.acct-menu hr { border: 0; border-top: 1px solid var(--divider); margin: 4px 0; }

/* ---------------------------------------------------------------------------------------------- */
/* Buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 10px; border: 1px solid var(--strong); font: 700 15px 'Sora', sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #000; }
.btn-primary:hover { background: #4FDDF2; border-color: #4FDDF2; }
.btn-ghost { background: var(--panel); color: var(--text); }
.btn-ghost:hover { background: var(--raised); border-color: #444; }
.btn .arr { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn[href^="#"]:hover .arr { transform: translateY(3px); }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; color: var(--text); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }

/* ---------------------------------------------------------------------------------------------- */
/* Shared page parts */

.pill-label { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); font-size: 13px; color: var(--muted); }
.pill-label i { width: 8px; height: 8px; background: var(--accent); animation: blink 2s steps(1) infinite; }
.pill-label strong { color: var(--text); font-weight: 600; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--strong); }
h2.title { margin-top: 14px; font-size: clamp(30px, 3.8vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.section-lede { margin-top: 14px; max-width: 36em; color: var(--muted); font-size: 17px; }
.section { padding: 112px 0; border-top: 1px solid var(--divider); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.more { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 14px; font-weight: 700; color: var(--muted); transition: color .2s; }
.more:hover { color: var(--text); }
.more .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: transform .2s var(--ease); }
.more:hover .arr { transform: translateX(3px); }
.lede { margin-top: 20px; max-width: 34em; color: var(--muted); font-size: 18px; line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Page header for inner pages: breadcrumbs, title, lede, actions, and an optional side panel. */
.phead { position: relative; border-bottom: 1px solid var(--divider); background: var(--dots); }
.phead-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; padding-top: 72px; padding-bottom: 72px; }
.phead-in.solo { grid-template-columns: 1fr; }
.crumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-bottom: 22px; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }
.phead h1 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; animation: fade .6s both; }
.phead .lede { animation: fade .6s .08s both; }
.phead .actions { animation: fade .6s .16s both; }
.phead-side { animation: fade .6s .2s both; }
.phead-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.phead-links a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); font-size: 13px; color: var(--muted); transition: color .15s, border-color .15s; }
.phead-links a:hover { color: var(--text); border-color: var(--strong); }

.panel-box { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--divider); font-size: 15px; }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: square; }
.checklist small { display: block; color: var(--muted); font-size: 13px; }
.box-head { padding: 16px 22px; border-bottom: 1px solid var(--divider); font-size: 11px; color: var(--muted); }

/* Strip: a row of cells divided by lines */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 16px; background: var(--panel); overflow: hidden; }
.strip > div { display: grid; gap: 6px; align-content: start; padding: 26px 26px 28px; border-right: 1px solid var(--divider); }
.strip > div:last-child { border-right: 0; }
.strip svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: square; margin-bottom: 10px; }
.strip strong { font-size: 16px; }
.strip span { font-size: 14px; color: var(--muted); }

/* Scroll reveal (only with JS, so nothing stays hidden without it) */
.js [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; translate: none; }

/* ---------------------------------------------------------------------------------------------- */
/* Home: hero */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--divider); background: var(--dots); }
.hero-in { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: center; padding-top: 96px; padding-bottom: 104px; }
.hero h1 { margin-top: 28px; font-size: clamp(40px, 5vw, 62px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.hero h1 .accent { color: var(--accent); }
.hero .pill-label { animation: fade .6s both; }
.hero h1 { animation: fade .6s .08s both; }
.hero .lede { animation: fade .6s .16s both; }
.hero .actions { animation: fade .6s .24s both; }
.hero-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 36px; font-size: 11px; color: var(--muted); animation: fade .6s .32s both; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 14px; height: 14px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: square; }

/* The hero visual: the K mark wired to what Kyvex makes (600 x 520 grid, positions in %). */
.hub { position: relative; width: 100%; aspect-ratio: 600 / 520; }
.hub-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-ring { fill: none; stroke: var(--divider); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; animation: fade .8s .2s both; }
.hub-ring-2 { stroke: #141414; animation-delay: .35s; }
.hub-line { fill: none; stroke: var(--strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .7s calc(.9s + var(--n) * .12s) var(--ease) forwards; }
.hub-pulse { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: square; stroke-dasharray: 10 110; stroke-dashoffset: 120; opacity: 0; animation: pulse 3.6s calc(2.2s + var(--n) * .9s) linear infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0% { stroke-dashoffset: 120; opacity: 1; } 70% { stroke-dashoffset: 10; opacity: 1; } 71%, 100% { opacity: 0; } }
.hub-core { position: absolute; left: 38.333%; top: 36.538%; width: 23.333%; height: 26.923%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--strong); border-radius: 22px; animation: fade .6s .1s both; }
.hub-core svg { width: 44%; height: auto; overflow: visible; }
.hub-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .6s .3s var(--ease) both; }
.hub-arm { animation: slide .6s .6s var(--ease) both; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes slide { from { transform: translateX(-30px); opacity: 0; } }
.hub-label { position: absolute; left: 0; right: 0; top: 66.5%; text-align: center; font-size: 10px; color: var(--muted); animation: fade .6s .8s both; }
.hub-tile { position: absolute; width: 34%; height: 19.231%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 2px; padding: 0 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; animation: fade .5s calc(1.3s + var(--n) * .12s) var(--ease) both; transition: border-color .2s, background .2s; }
.hub-tile:hover { border-color: var(--strong); background: var(--raised); }
.hub-tile .svg-i { grid-row: span 2; align-self: center; width: 22px; height: 22px; color: var(--text); }
.hub-tile strong { font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.hub-tile .mono { font-size: 9px; color: var(--muted); }
.hub-tl { left: 1.667%; top: 7.692%; } .hub-tr { left: 64.333%; top: 7.692%; }
.hub-bl { left: 1.667%; top: 73.077%; } .hub-br { left: 64.333%; top: 73.077%; }

/* ---------------------------------------------------------------------------------------------- */
/* Home: bento grid of what we build */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.cell { position: relative; display: flex; flex-direction: column; padding: 28px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: border-color .25s, translate .7s var(--ease), opacity .7s var(--ease); }
a.cell:hover { border-color: var(--strong); }
.cell h3 { font-size: 20px; font-weight: 700; margin-top: 18px; }
.cell p { margin-top: 8px; color: var(--muted); font-size: 15px; max-width: 30em; }
.cell > svg.svg-i { width: 24px; height: 24px; }
.cell .go { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); transition: color .2s; }
.cell .go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: transform .2s var(--ease); }
a.cell:hover .go { color: var(--text); }
a.cell:hover .go svg { transform: translateX(3px); }
.c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; } .c-2 { grid-column: span 2; }
.r-2 { grid-row: span 2; }
.code { flex: 1; min-height: 180px; margin-top: 24px; padding: 18px 20px; background: var(--inset); border: 1px solid var(--divider); border-radius: 12px; font: 13px/1.75 'JetBrains Mono', monospace; color: var(--muted); overflow: hidden; white-space: pre; }
.code .k { color: var(--accent); } .code .s { color: var(--text); } .code .c { color: #555; }
.embed { margin-top: 20px; display: grid; gap: 6px; padding: 14px 16px; background: var(--inset); border: 1px solid var(--divider); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 13px; }
.embed .mono { font-size: 9px; color: var(--muted); }
.embed b { font-size: 14px; }
.embed span { color: var(--muted); }
.mini-ui { margin-top: 20px; display: grid; gap: 8px; }
.mini-ui div { height: 10px; border-radius: 3px; background: var(--border); }
.mini-ui div:nth-child(1) { width: 60%; background: var(--strong); }
.mini-ui div:nth-child(2) { width: 90%; } .mini-ui div:nth-child(3) { width: 75%; }
.mini-ui .btnish { width: 40%; height: 24px; border-radius: 6px; background: var(--text); margin-top: 4px; }
.layers { margin-top: 20px; display: grid; gap: 6px; }
.layers span { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--divider); border-radius: 8px; background: var(--inset); font-size: 12px; color: var(--muted); }
.layers span:first-child { color: var(--text); border-color: var(--strong); }
.cell-cta { background: var(--inset); border-style: dashed; border-color: var(--strong); }

/* ---------------------------------------------------------------------------------------------- */
/* Process timeline and FAQ */

.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.split-sticky { position: sticky; top: 112px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--strong); }
.timeline li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 22px; padding-bottom: 36px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline .n { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--strong); border-radius: 12px; background: var(--bg); font-size: 12px; color: var(--muted); position: relative; z-index: 1; }
.timeline li:first-child .n { border-color: var(--accent); color: var(--accent); }
.timeline h3 { font-size: 19px; margin-top: 9px; }
.timeline p { color: var(--muted); margin-top: 6px; }
.timeline-h { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.timeline-h li { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; align-content: start; }
.timeline-h::before { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 1px; }
.timeline-h h3 { margin-top: 22px; }

.faq { border-top: 1px solid var(--divider); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: square; transition: transform .25s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); stroke: var(--text); }
.faq details p { padding: 0 48px 24px 0; color: var(--muted); animation: fade .3s both; }

/* ---------------------------------------------------------------------------------------------- */
/* Call to action band */

.cta-band { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 56px; background: var(--panel) var(--dots); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
.cta-band h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.cta-band p { margin-top: 12px; color: var(--muted); font-size: 17px; max-width: 32em; }
.cta-band .actions { margin-top: 0; }
.cta-mark { position: absolute; right: -30px; top: -40px; width: 260px; opacity: .06; pointer-events: none; }
.section-cta { padding: 0 0 112px; }

/* ---------------------------------------------------------------------------------------------- */
/* Footer */

.foot { border-top: 1px solid var(--divider); background: var(--inset); }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding-top: 72px; padding-bottom: 56px; }
.foot-brand .brand { font-size: 18px; }
.foot-brand p { margin-top: 16px; color: var(--muted); font-size: 14px; max-width: 24em; }
.foot-social { display: flex; gap: 8px; margin-top: 22px; }
.foot h4 { margin: 0 0 16px; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.foot ul a { color: #bdbdbd; transition: color .15s; }
.foot ul a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid var(--divider); font-size: 11px; color: var(--muted); }
.foot-word { display: block; width: 100%; height: auto; margin-top: 8px; padding-bottom: 8px; opacity: .9; }

/* ---------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: none; }
  .hub-tile { opacity: 1; }
  .hub-line { stroke-dashoffset: 0; }
  .hub-pulse { display: none; }
}
@media (max-width: 1060px) {
  .hero-in { grid-template-columns: 1fr; gap: 72px; }
  .hub { max-width: 600px; margin: 0 auto; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .c-4, .c-3, .c-2 { grid-column: span 1; }
  .c-4 { grid-column: span 2; }
  .r-2 { grid-row: auto; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split-sticky { position: static; }
  .phead-in { grid-template-columns: 1fr; gap: 40px; }
  .phead-in { padding-top: 56px; padding-bottom: 56px; }
  .foot-top { grid-template-columns: repeat(4, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > div:nth-child(2) { border-right: 0; }
  .strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--divider); }
  .timeline-h { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .timeline-h::before { display: none; }
  .cta-band { grid-template-columns: 1fr; padding: 36px 28px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand-name, .nav-discord { display: none; }
  .nav-in { grid-template-columns: auto 1fr auto; }
  .links { justify-self: end; }
  .links a { padding: 0 9px; }
  .links a::after { left: 9px; right: 9px; }
  .nav-cta { padding: 0; width: 38px; }
  .nav-cta > span { display: none; }
  .acct-name { display: none; }
  .acct-btn { padding: 0 8px 0 4px; gap: 6px; }
  .hero-in { padding-top: 56px; padding-bottom: 88px; }
  .hub-tile { padding: 0 10px; column-gap: 8px; border-radius: 10px; }
  .hub-tile .svg-i { width: 16px; height: 16px; }
  .hub-tile strong { font-size: 12px; }
  .hub-tile .mono { display: none; }
  .hub-core { border-radius: 14px; }
  .hub-label { font-size: 8px; }
  .bento { grid-template-columns: 1fr; }
  .c-4 { grid-column: span 1; }
  .strip > div { padding: 20px 18px 22px; }
  .timeline-h { grid-template-columns: 1fr; }
  .section { padding: 80px 0; }
  .section-cta { padding-bottom: 80px; }
  .actions .btn { flex: 1 1 100%; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------------------------- */
/* Phone menu (the top bar's links fold into a panel) */

.nav-menu { display: none; background: none; cursor: pointer; }
@media (max-width: 860px) {
  .nav-in { grid-template-columns: auto 1fr; }
  .nav-menu { display: grid; }
  .links { position: fixed; left: 0; right: 0; top: 64px; z-index: 19; display: none; flex-direction: column; height: auto; padding: 8px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--divider); }
  .links.open { display: flex; animation: fade .15s both; }
  .links a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--divider); }
  .links a:last-child { border-bottom: 0; }
  .links a::after { display: none; }
  .links a[aria-current] { color: var(--accent); }
}

/* ---------------------------------------------------------------------------------------------- */
/* Legal pages */

.legal { display: grid; grid-template-columns: 220px 1fr; gap: 64px; padding-top: 56px; padding-bottom: 112px; align-items: start; }
.legal-side { position: sticky; top: 96px; display: grid; gap: 12px; }
.legal-toc { display: grid; gap: 2px; margin-bottom: 18px; }
.legal-toc a { padding: 6px 10px; border-left: 1px solid var(--border); font-size: 14px; color: var(--muted); transition: color .15s, border-color .15s; }
.legal-toc a:hover { color: var(--text); border-left-color: var(--accent); }
.legal-body { max-width: 760px; }
.legal-body section { padding: 8px 0 18px; scroll-margin-top: 96px; }
.legal-body h2 { font-size: 22px !important; margin-top: 0 !important; }
.legal-updated { font-size: 11px; color: var(--muted); margin-bottom: 24px !important; }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; gap: 24px; } .legal-side { position: static; } }

/* About and team */
.about-story { font-size: 17px; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.member { display: grid; gap: 14px; align-content: start; padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; transition: border-color .2s; animation: fade .5s both; animation-delay: calc(var(--i, 0) * 60ms); }
.member:hover { border-color: var(--strong); }
.member-top { display: flex; align-items: center; gap: 14px; }
.member-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--strong); background: var(--raised); display: grid; place-items: center; font-weight: 800; font-size: 20px; flex: none; }
.member h3 { font-size: 18px; }
.member .role { font-size: 10px; color: var(--muted); }
.member .role.director { color: var(--accent); }
.member p { color: var(--muted); font-size: 14px; }
.member-links { display: flex; gap: 8px; flex-wrap: wrap; }
.member-links a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--muted); }
.member-links a:hover { color: var(--text); border-color: var(--strong); }
.team-empty { color: var(--muted); }

/* Docs index search in the page header */
.docs-search { display: flex; align-items: center; gap: 12px; width: min(520px, 100%); height: 54px; padding: 0 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.docs-search:focus-within { border-color: #4a4a4a; }
.docs-search svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: square; }
.docs-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 16px; }
.eyebrow-sm { font-size: 11px; color: var(--muted); margin: 0; }
.team-empty { grid-column: 1 / -1; }