/* Marketing-only refinement. Keep the product surfaces distinct from the page. */
:root { --bg: #0b0e11; --bg-soft: #101417; --text: #f0f3f4; --muted: #a6afb4; --faint: #89959b; --mint: #8bdfca; --mint-soft: #a5e9d8; --shell: min(1280px, calc(100% - 96px)); --fs-body: 1rem; --mono: var(--font); }
body { background: var(--bg); }
.hero { background: radial-gradient(ellipse at 80% 36%, #17302f55, transparent 48%), var(--bg); padding-top: 150px; padding-bottom: 44px; }
.hero::before, .hero::after, .hero-ambient, .command-glow, .command-scan, .command-window::before, .command-canvas::after, .eyebrow::after, .status-dot, .beta-ambient, .download-ambient { display: none; }
.status-banner { background: #161c20; border-color: #ffffff0e; backdrop-filter: none; }
.status-banner-shell { padding-block: 9px; }
.status-banner-mark { display: none; }
.status-banner-copy, .status-banner-copy b { color: #b4bec3; font-size: 13px; }
.status-banner-copy a { color: #dae2e5; margin-left: 8px; text-decoration: underline; text-underline-offset: 3px; }
.brand-mark { background: none; border: 0; box-shadow: none; }
.brand-word { letter-spacing: .15em; }
.brand-beta { background: none; border: 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.nav-links { gap: 28px; }
.nav-links a { font-size: 14px; }
.nav-download { background: #ffffff06; color: var(--text); border-color: #ffffff25; box-shadow: none; border-radius: 7px; }
.site-nav.is-scrolled { background: #0b0e11ed; }
.hero-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; min-height: 470px; }
.hero-copy { padding: 0; }
.eyebrow { color: #b7c2c7; font-size: 14px; letter-spacing: .02em; text-transform: none; margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.5rem, 4.2vw, 4rem); font-weight: 500; line-height: 1.08; letter-spacing: -.055em; }
.hero h1 span { color: var(--mint); background: none; -webkit-text-fill-color: currentColor; }
.hero-lede { font-size: 17px; line-height: 1.8; max-width: 475px; margin-top: 25px; }
.hero-actions { align-items: center; gap: 24px; margin-top: 30px; }
.button, .hero-actions .button-primary { border-radius: 7px; box-shadow: none; }
.button-primary, .hero-actions .button-primary { background: #a0e5d4; color: #10251f; box-shadow: none; min-height: 52px; }
.hero-tour { font-size: 14px; color: #d0d8dc; display: flex; gap: 10px; align-items: center; }
.hero-tour:hover { color: var(--mint); }
.hero-trust b { font-size: 13px; font-weight: 400; color: #a7b2b7; }
.hero-beta { border: 0; padding-top: 0; margin-top: 24px; font-size: 13px; max-width: 430px; }
.hero-beta .beta-flag { display: none; }
.hero-beta a { font-weight: 400; }
.command-window, .hero-command:hover .command-window { transform: none; border: 1px solid #ffffff20; border-radius: 12px; box-shadow: 0 24px 70px #0004; }
.command-titlebar { background: #151a1e; min-height: 48px; gap: 8px; padding-inline: 16px; }
.command-brand b { font-size: 11px; letter-spacing: .12em; }
.command-client { font-size: 10px; letter-spacing: .03em; }
.command-modes { border: 0; background: none; }
.command-modes span { font-size: 10px; }
.command-canvas { height: 230px; }
.command-context strong { font-size: 30px; letter-spacing: -.045em; font-weight: 500; }
.command-context > span, .command-context small, .loadout-label, .loadout-meta { font-size: 10px; letter-spacing: .04em; }
.command-score { border: 0; background: #0b1118b8; box-shadow: none; border-radius: 6px; }
.command-build { background: #11171b; }
.command-champion > b { background: #8bdfca18; color: var(--mint); }
.command-import-button { color: #10251f; background: #a0e5d4; box-shadow: none; border-radius: 5px; }
.preview-caption { margin: 14px 0 0; color: #89969d; text-align: center; font-size: 12px; }
.hero-proof { margin-top: 56px; padding-block: 26px; border-color: #ffffff14; }
.proof-intro, .proof-stat span { font-size: 12px; letter-spacing: .04em; text-transform: none; }
.proof-stat strong { font-size: 28px; color: #dce6e5; font-weight: 500; }
.section { padding-block: 90px; background: var(--bg); }
.section-kicker { font-size: 13px; letter-spacing: .06em; font-weight: 500; }
h2 { font-weight: 500; letter-spacing: -.045em; }
.section-intro > p, .modes-lede { color: var(--muted); }
.step-card, .step-card:hover, .feature-panel, .feature-panel:hover, .intel-panel, .compare-card, .beta-board { background: none; box-shadow: none; border: 0; border-radius: 0; }
.step-card { padding: 28px 24px 0 0; border-top: 1px solid var(--line); }
.step-card::before, .step-card::after, .feature-panel::before, .feature-panel::after, .intel-panel::before { display: none; }
.step-visual { background: transparent; border: 0; }
.step-top b, .step-top > span, .step-visual small, .feature-index { font-size: 12px; letter-spacing: .04em; }
.feature-panel { border-top: 1px solid var(--line); }
.feature-bento { gap: 32px; }
.intel-panel { border-top: 1px solid var(--line); }
.intel-grid { gap: 40px; }
.beta-section { border-top: 1px solid var(--line); }
.beta-board li { background: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.beta-board-tag { background: none; border: 0; padding-left: 0; font-size: 12px; }
.download-section { background: #11191b; }
.download-section::before, .download-section::after { display: none; }
.scan-ring, .scan-ring::before, .scan-ring::after, .import-pulse, .privacy-ring, .resource-signal i, .patch-line, .command-client i { animation: none; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
@media (max-width: 1100px) { .hero-shell { gap: 36px; } .hero-actions { flex-wrap: wrap; gap: 18px; } .command-client, .loadout-meta { display: none; } .command-titlebar { grid-template-columns: 1fr auto; } }
@media (max-width: 800px) { :root { --shell: calc(100% - 40px); } .hero { padding-top: 116px; } .hero-shell { grid-template-columns: 1fr; gap: 42px; } .hero-copy { max-width: 620px; } .hero h1 { font-size: clamp(2.6rem, 7vw, 3.8rem); } .hero-lede { max-width: 540px; } .hero-command { width: 100%; max-width: 620px; margin-inline: auto; } .hero-proof { margin-top: 38px; } .section { padding-block: 64px; } .command-canvas { height: 240px; } }
@media (max-width: 480px) { .hero h1 { font-size: 2.65rem; } .eyebrow { font-size: 13px; } .hero-trust { gap: 12px; flex-wrap: wrap; } .hero-trust b { font-size: 12px; } .hero-proof { gap: 22px; } .proof-stat { padding-inline: 0; } .proof-stat span { font-size: 11px; } .command-score { display: none; } .command-canvas { height: 210px; } .command-context strong { font-size: 27px; } .status-banner-copy { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* A single, aligned sequence replaces the oversized step illustrations. */
.how-section .section-intro { display: block; position: static; max-width: none; margin-bottom: 40px; }
.how-section .section-intro h2 { max-width: none; margin-bottom: 16px; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.15; }
.how-section .section-intro > p:last-child { max-width: 650px; margin: 0; }
.setup-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.setup-step { position: relative; padding: 30px 32px 0; display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; }
.setup-step:first-child { padding-left: 0; }
.setup-step:last-child { padding-right: 0; }
.setup-step + .setup-step { border-left: 1px solid var(--line); }
.setup-number { color: var(--mint); font-size: 13px; font-weight: 500; margin-bottom: 22px; }
.setup-step h3 { font-size: 21px; line-height: 1.35; letter-spacing: -.025em; font-weight: 500; margin: 0 0 12px; }
.setup-step > p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 355px; }
.setup-example { min-height: 76px; margin-top: 26px; display: flex; align-items: center; gap: 12px; }
.setup-example img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.setup-example b { display: block; font-size: 14px; font-weight: 500; color: #d3dddf; }
.setup-example small { display: block; font-size: 12px; color: var(--faint); margin-top: 4px; }
.setup-items { gap: 10px; }
.setup-check { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #8bdfca12; color: var(--mint); }
@media (max-width: 800px) {
    .setup-flow { grid-template-columns: 1fr; }
    .setup-step, .setup-step:first-child, .setup-step:last-child { padding: 26px 0; padding-left: 42px; }
    .setup-step + .setup-step { border-left: 0; border-top: 1px solid var(--line); }
    .setup-number { position: absolute; top: 30px; left: 0; }
    .setup-step > p { max-width: 540px; }
    .setup-example { margin-top: 16px; min-height: 52px; }
    .how-section .section-intro { margin-bottom: 28px; }
}

/* Size mode controls to their labels rather than a fixed-width sliding marker. */
.modes-controls, .modes-heading, .mode-detail-content { min-width: 0; }
.mode-tabs { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.mode-tabs::before { display: none; }
.mode-tab { min-height: 44px; padding: 10px 8px; white-space: normal; font-size: .875rem; line-height: 1.4; border: 1px solid transparent; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.mode-tab small { display: none; }
.mode-tab span { min-width: 0; overflow-wrap: anywhere; }
.mode-tab.is-active { background: color-mix(in srgb, var(--tab-accent) 12%, #10171b); border-color: color-mix(in srgb, var(--tab-accent) 50%, transparent); }
.mode-tab:hover { transform: none; }

/* Quiet decorative activity, with staggered bars anchored to their baseline. */
@media (prefers-reduced-motion: no-preference) {
    .resource-signal i { animation: resource-idle 4.8s ease-in-out infinite; }
    .resource-signal i:nth-child(2n) { animation-delay: -.7s; animation-duration: 5.4s; }
    .resource-signal i:nth-child(3n) { animation-delay: -1.8s; animation-duration: 4.4s; }
    .resource-signal i:nth-child(4n) { animation-delay: -2.3s; animation-duration: 6s; }
    .resource-signal i:nth-child(5n) { animation-delay: -1.2s; }
}
@keyframes resource-idle {
    0%, 100% { transform: scaleY(.45); opacity: .45; }
    50% { transform: scaleY(1); opacity: .85; }
}

/* Keep comparisons compact enough to read across a row at a glance. */
.compare-section { padding-block: 60px; }
.compare-shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.compare-copy { display: block; }
.compare-copy .section-kicker { margin-bottom: 12px; font-size: 13px; }
.compare-copy h2 { font-size: clamp(1.8rem, 2.5vw, 2.25rem); line-height: 1.18; margin-bottom: 18px; }
.compare-copy > p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; }
.compare-card { margin-top: 0; min-width: 0; }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; line-height: 1.45; }
.comparison-table th, .comparison-table td { padding: 15px 14px; border-bottom: 1px solid var(--line); }
.comparison-table thead th { font-size: 13px; font-weight: 600; color: #c2cdcf; background: #ffffff04; }
.comparison-table tbody th { font-weight: 400; color: #d4dddf; }
.comparison-table td { color: #b6c1c5; }
.comparison-table td:nth-child(2), .comparison-table thead th:nth-child(2) { color: #a5e9d8; background: #8bdfca06; font-weight: 500; }
@media (max-width: 1000px) {
    .compare-shell { grid-template-columns: 1fr; gap: 28px; }
    .compare-copy h2 { max-width: 650px; }
    .compare-copy > p { max-width: 650px; margin-top: 0; }
}
@media (max-width: 480px) {
    .compare-section { padding-block: 44px; }
    .comparison-table { font-size: 14px; }
    .comparison-table th, .comparison-table td { padding: 13px 8px; }
    .comparison-table thead th { font-size: 12px; }
}

/* Compact footer: retain every destination without a second desktop row. */
.site-footer { padding: 32px 0 20px; }
.footer-main { grid-template-columns: minmax(180px, .85fr) minmax(0, 3fr); gap: 40px; }
.footer-brand { margin-bottom: 10px; }
.footer-main > div:first-child > p { margin: 0; font-size: 13px; line-height: 1.65; max-width: 240px; }
.footer-links { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.footer-links > div { min-width: 0; gap: 4px; }
.footer-links b { font-size: 12px; margin-bottom: 8px; line-height: 1.4; }
.footer-links a { min-height: 0; padding-block: 4px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.footer-bottom { margin-top: 26px; padding-top: 16px; gap: 24px; align-items: center; }
.footer-bottom p { font-size: 12px; line-height: 1.6; color: #8a989e; }
.footer-bottom span { font-size: 12px; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 1000px) {
    .footer-main { grid-template-columns: 1fr; gap: 24px; }
    .footer-main > div:first-child > p { max-width: 480px; }
    .footer-main > div:first-child > p br { display: none; }
}
@media (max-width: 600px) {
    .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
    .footer-links a { padding-block: 7px; }
    .footer-bottom { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 360px) {
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Compact FAQ with its introduction above the questions. */
.faq-section { padding-block: 56px; }
.faq-shell { display: block; }
.faq-heading { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px; align-items: end; margin-bottom: 28px; }
.faq-heading .section-kicker { grid-column: 1; margin: 0; }
.faq-heading h2 { grid-column: 1; margin: 0; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.2; }
.faq-heading > p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 15px; line-height: 1.65; max-width: 440px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; max-width: none; border-top: 0; align-items: start; }
.faq-item { min-width: 0; border-top: 1px solid var(--line); border-bottom: 0; }
.faq-item summary { min-height: 56px; padding-block: 12px; gap: 16px; font-size: 15px; line-height: 1.5; font-weight: 500; }
.faq-item summary span { min-width: 0; }
.faq-item p { margin: 0 28px 18px 0; font-size: 15px; line-height: 1.7; }
@media (max-width: 700px) {
    .faq-section { padding-block: 40px; }
    .faq-heading { display: block; margin-bottom: 22px; }
    .faq-heading h2 { margin: 10px 0 12px; }
    .faq-list { grid-template-columns: 1fr; }
}

/* Short feature summaries keep the examples close to their explanations. */
.intel-section { padding-block: 60px; }
.intel-panel { gap: 24px; }
.intel-panel h3 { font-size: 24px; line-height: 1.25; }
.intel-panel .intel-copy p { line-height: 1.65; }

/* One community invitation and a short status list. */
.beta-section { padding-block: 56px; }
.beta-shell { gap: 48px; align-items: center; }
.beta-copy h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.2; }
.beta-copy > p { margin-top: 18px; }
.beta-actions { margin-top: 24px; }
.beta-copy .beta-note { font-size: 13px; margin-top: 18px; }
.beta-board li { padding: 18px 0; }
.beta-board p { margin-top: 8px; font-size: 15px; }
@media (max-width: 800px) {
    .beta-section { padding-block: 40px; }
    .beta-shell { gap: 26px; }
}

/* Short, closely grouped setup steps. */
.how-section { padding-block: 48px; }
.how-section .section-intro { margin-bottom: 24px; }
.how-section .section-intro h2 { margin-bottom: 0; }
.setup-step { padding-top: 22px; }
.setup-number { margin-bottom: 12px; }
.setup-step h3 { margin-bottom: 8px; }
.setup-step > p { font-size: 15px; line-height: 1.6; }
.setup-example { min-height: 48px; margin-top: 18px; }
@media (max-width: 800px) {
    .how-section { padding-block: 36px; }
    .setup-step, .setup-step:first-child, .setup-step:last-child { padding-block: 20px; }
    .setup-number { top: 24px; }
    .setup-example { margin-top: 12px; }
}